/* ==========================================================================
   componentes.css - piezas propias de eVale ADM

   Segunda mitad del reemplazo de Bootstrap/AdminLTE: lo que tiene forma
   propia --botones, formularios, tablas, modales, barra superior, menu
   lateral, cargador-- mas las clases que solo existen en este proyecto y
   que vivian en los antiguos my.css / texts.css / nl.css / iphstyles.css.

   Depende de base.css: de ahi salen las variables de color y tipografia.

   Orden del archivo:
     1. Botones
     2. Formularios
     3. Tablas
     4. Modales
     5. Armazon: barra, contenido y menu lateral
     6. Paneles, contenido y errores
     7. Cargadores
     8. Pantalla de acceso
     9. Clases propias heredadas del marcado
   ========================================================================== */

/* ------------------------------------------------------------------ 1. Botones */

.btn {
  display: inline-block;
  padding: .375rem .75rem;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radio);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn:hover { text-decoration: none; }

.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.btn:disabled,
.btn.disabled {
  opacity: .6;
  pointer-events: none;
}

.btn:active { transform: translateY(1px); }

.btn-sm {
  padding: .2rem .45rem;
  font-size: 12.5px;
  border-radius: var(--radio-s);
}

.btn-lg {
  padding: .55rem 1.1rem;
  font-size: 17px;
  border-radius: var(--radio-g);
}

.btn-block {
  display: block;
  width: 100%;
}

/* Variantes solidas. El texto es blanco en todas salvo warning, donde el
   amarillo no da contraste suficiente con blanco. */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-dark,
.btn-bio { box-shadow: var(--sombra-s); }

.btn-primary   { color: #fff; background-color: var(--primary);   border-color: var(--primary); }
.btn-secondary { color: #fff; background-color: var(--secondary); border-color: var(--secondary); }
.btn-success   { color: #fff; background-color: var(--success);   border-color: var(--success); }
.btn-info      { color: #fff; background-color: var(--info);      border-color: var(--info); }
.btn-warning   { color: #2a1f05; background-color: var(--warning); border-color: var(--warning); }
.btn-danger    { color: #fff; background-color: var(--danger);    border-color: var(--danger); }
.btn-light     { color: var(--texto); background-color: var(--light); border-color: var(--linea); }
.btn-dark      { color: #fff; background-color: var(--dark);      border-color: var(--dark); }

.btn-primary:hover   { background-color: var(--primary-osc);   border-color: var(--primary-osc);   color: #fff; }
.btn-secondary:hover { background-color: var(--secondary-osc); border-color: var(--secondary-osc); color: #fff; }
.btn-success:hover   { background-color: var(--success-osc);   border-color: var(--success-osc);   color: #fff; }
.btn-info:hover      { background-color: var(--info-osc);      border-color: var(--info-osc);      color: #fff; }
.btn-warning:hover   { background-color: var(--warning-osc);   border-color: var(--warning-osc);   color: #fff; }
.btn-danger:hover    { background-color: var(--danger-osc);    border-color: var(--danger-osc);    color: #fff; }
.btn-dark:hover      { background-color: var(--n-900);              border-color: var(--n-900);              color: #fff; }

/* El boton de la casa. */
.btn-bio {
  color: #fff;
  background-color: var(--bio);
  border-color: var(--bio);
}

.btn-bio:hover {
  color: #fff;
  background-color: var(--bio-oscuro);
  border-color: var(--bio-oscuro);
}

/* Variantes de contorno. */
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { color: #fff; background-color: var(--primary); }

.btn-outline-secondary { color: var(--secondary); border-color: var(--secondary); }
.btn-outline-secondary:hover { color: #fff; background-color: var(--secondary); }

.btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover { color: #fff; background-color: var(--danger); }

.btn-outline-light { color: var(--light); border-color: rgba(255, 255, 255, .6); }
.btn-outline-light:hover { color: var(--dark); background-color: var(--light); border-color: var(--light); }

.btn-outline-bio { color: var(--bio); border-color: var(--bio); }
.btn-outline-bio:hover { color: #fff; background-color: var(--bio); }

/* --------------------------------------------------------------- 2. Formularios */

.form-group { margin-bottom: .75rem; }
.form-group-sm { margin-bottom: .4rem; }

.form-control {
  display: block;
  width: 100%;
  padding: .35rem .6rem;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto);
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus {
  color: var(--texto);
  background-color: var(--superficie);
  border-color: var(--primary);
  outline: 0;
  box-shadow: var(--foco);
}

/* Un campo obligatorio que el usuario dejo vacio lo marca validarForm()
   con estilo en linea; este es el aviso del propio navegador. */
.form-control:user-invalid { border-color: var(--danger); }

.form-control::placeholder { color: var(--texto-tenue); opacity: 1; }

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--n-100);
  opacity: 1;
}

.form-control-sm {
  padding: .2rem .45rem;
  font-size: 12.5px;
  border-radius: var(--radio-s);
}

select.form-control {
  padding-right: 1.6rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%236b7480' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 10px 6px;
}

select.form-control[multiple],
textarea.form-control { background-image: none; }

/* Grupo de campo: el control y sus complementos en una sola fila, con los
   bordes internos pegados. */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

/* El :not() importa: el marcado del login pone las dos clases en el mismo
   <span> (input-group-addon form-control col-2). Sin excluirlo, esta regla
   le quitaria el ancho que le da col-2 y el icono creceria como el campo. */
.input-group > .form-control:not(.input-group-addon) {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child),
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-addon:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-append,
.input-group-prepend { display: flex; }

.input-group-append { margin-left: -1px; }
.input-group-prepend { margin-right: -1px; }

.input-group-text,
.input-group-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .6rem;
  font-size: 14px;
  color: var(--texto);
  white-space: nowrap;
  background-color: var(--light);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.input-group-sm > .form-control,
.input-group-sm .form-control,
.input-group-sm .btn,
.input-group-sm .input-group-text,
.input-group-sm .input-group-addon {
  padding: .2rem .45rem;
  font-size: 12.5px;
}

/* ------------------------------------------------------------------- 3. Tablas */

.table {
  width: 100%;
  margin-bottom: .75rem;
  color: var(--texto);
  background-color: var(--superficie);
  border-collapse: collapse;
  border: 1px solid var(--linea-suave);
  box-shadow: var(--sombra-s);
}

.table th,
.table td {
  padding: .5rem .55rem;
  vertical-align: middle;
  border-top: 1px solid var(--linea);
}

.table thead th {
  vertical-align: bottom;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid var(--linea);
}

/* La primera fila no necesita linea superior: ya la cierra el borde de la
   propia tabla. */
.table tbody tr:first-child td { border-top: 0; }

.table-sm th,
.table-sm td { padding: .25rem .4rem; }

.table-bordered,
.table-bordered th,
.table-bordered td { border: 1px solid var(--linea); }

.table-striped tbody tr:nth-of-type(odd) { background-color: var(--n-50); }

.table-hover tbody tr:hover { background-color: rgba(21, 89, 156, .07); }

/* Fila de cabecera del marcado heredado: va sobre .bg-bio, asi que el texto
   es blanco y el borde no debe cortar el naranja. */
.tth th {
  padding-top: .55rem;
  padding-bottom: .55rem;
  border-color: rgba(255, 255, 255, .28);
  text-transform: uppercase;
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .06em;
}

/* Las tablas anchas se desplazan dentro de su caja en vez de empujar la
   pagina entera. */
.table-responsive { display: block; width: 100%; overflow-x: auto; }

/* ------------------------------------------------------------------ 4. Modales

   Los abre y cierra public/js/bio.js: aqui solo esta el aspecto. Un modal
   abierto lleva la clase .show; el fondo oscuro es un elemento aparte
   (.modal-backdrop) que inserta el propio script. */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal.show { display: block; }

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, .55);
  opacity: 0;
  transition: opacity .15s linear;
}

.modal-backdrop.show { opacity: 1; }

.modal-dialog {
  position: relative;
  width: auto;
  max-width: 500px;
  margin: 1.75rem auto;
  pointer-events: none;
  transition: transform .2s ease-out;
  transform: translateY(-18px);
}

.modal.show .modal-dialog { transform: none; }

/* .fade sin JS de Bootstrap: la transicion la lleva el propio dialogo, asi
   que la clase solo tiene que no estorbar. */
.modal.fade .modal-dialog { transition: transform .2s ease-out; }

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}

.modal-sm { max-width: 320px; }
.modal-md { max-width: 500px; }
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1140px; }

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra-alta);
  outline: 0;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--linea);
  border-top-left-radius: calc(var(--radio-g) - 1px);
  border-top-right-radius: calc(var(--radio-g) - 1px);
}

.modal-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
  padding: .6rem .9rem;
  border-top: 1px solid var(--linea);
  border-bottom-left-radius: calc(var(--radio-g) - 1px);
  border-bottom-right-radius: calc(var(--radio-g) - 1px);
}

/* Mientras hay un modal abierto la pagina de atras no se desplaza. */
body.modal-abierto { overflow: hidden; }

.close {
  float: right;
  padding: 0 .2rem;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--texto);
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: .65;
}

.close:hover { opacity: 1; }

/* ------------------------- 5. Armazon: barra, contenido y menu lateral

   La barra es fija y de alto conocido (--barra-alto), y ese mismo valor es
   el que separa el contenido por arriba. Antes el hueco lo hacia una fila
   de cuatro <br> en views/header.php, que no podia cuadrar con una barra
   que cambia de alto al reducir la ventana. */

:root { --barra-alto: 52px; }

.app-barra {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  height: var(--barra-alto);
  padding: 0 1rem;
  color: #fff;
  background-color: var(--n-900);
  box-shadow: var(--sombra);
}

.app-barra-marca {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

.app-barra-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: none;
}

.app-barra-nombre {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Una linea de marca bajo el nombre: identifica la aplicacion sin anadir
   un elemento mas. */
.app-barra-marca::after {
  content: "";
  width: 3px;
  height: 18px;
  margin-left: .35rem;
  background-color: var(--bio);
  border-radius: 2px;
  flex: none;
}

.app-barra-acciones {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: none;
}

.app-barra-salir:hover {
  color: #fff;
  background-color: var(--danger);
  border-color: var(--danger);
}

/* En movil el nombre largo deja sin sitio a los botones. */
@media (max-width: 480px) {
  .app-barra { padding: 0 .65rem; }
  .app-barra-nombre { font-size: 13px; }
  .app-barra-marca::after { display: none; }
}

/* ---- contenido ----

   Ancho maximo de verdad. Antes era "container col-12 col-md-10": por
   encima de 768px ganaba el max-width de col-md-10 y la pagina se estiraba
   al 83% de la pantalla, fuese cual fuese --en un monitor ancho las tablas
   quedaban ilegibles de tan largas. */

.app-contenido {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: calc(var(--barra-alto) + 1.25rem) 1.25rem 2.5rem;
}

@media (max-width: 767.98px) {
  .app-contenido { padding: calc(var(--barra-alto) + 1rem) .75rem 2rem; }
}

/* Cabecera de pagina: el titulo y una regla de marca debajo. */
.pagina-cabecera {
  margin-bottom: 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--linea);
}

.pagina-titulo {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--n-900);
  letter-spacing: -.01em;
}

/* La regla de marca cuelga del borde inferior de la cabecera. */
.pagina-cabecera { position: relative; }

.pagina-cabecera::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 46px;
  height: 2px;
  background-color: var(--bio);
  border-radius: 2px;
}

/* Si el controlador no fija tituloPagina --el de error, por ejemplo--
   views/header.php no imprime la cabecera; no hace falta taparla aqui. */

.app-cuerpo { margin-top: 0; }

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-item { display: block; }

.nav-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .8rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radio);
  transition: background-color .15s ease;
}

.nav-link:hover {
  text-decoration: none;
  background-color: rgba(255, 255, 255, .12);
}

.nav-link p { margin: 0; }

.nav-icon { width: 1.25em; text-align: center; }

.nav-link-exit:hover { background-color: rgba(185, 28, 28, .28); }

/* Menu lateral. Hoy views/header.php lo tiene comentado, pero el marcado
   sigue en views/assets/menu.php y se mantiene con estilo propio para que
   volver a encenderlo no exija tocar CSS. */
.main-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1035;
  width: 250px;
  overflow-y: auto;
  background-color: var(--bio);
  color: var(--light);
}

.main-sidebar.elevation-4 { box-shadow: var(--sombra-alta); }

.brand-link {
  display: block;
  padding: .75rem .8rem;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.brand-link:hover { text-decoration: none; }

.brand-text { font-size: 1rem; }

.sidebar { padding: .5rem; }

.user-panel {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.user-panel .image { text-align: center; }
.user-panel .info { font-size: 13px; }

.nav-sidebar { flex-direction: column; }
.nav-sidebar .nav-item { width: 100%; }
.nav-sidebar .nav-link { width: 100%; }

/* Con el menu lateral encendido el contenido se corre a su derecha. */
.con-sidebar .content-wrapper,
.con-sidebar > .container { margin-left: 250px; }

@media (max-width: 767.98px) {
  .main-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .main-sidebar.abierto { transform: none; }
  .con-sidebar .content-wrapper,
  .con-sidebar > .container { margin-left: 0; }
}

/* ------------------------------------- 6. Paneles, contenido y errores */

.content { padding: .5rem 0; }

.content-wrapper { min-height: 100%; }

.card-body,
.panel-body {
  padding: .9rem;
  background-color: #fff;
}

.panel {
  margin-bottom: .9rem;
  background-color: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.panel-default { border-color: var(--linea); }

.error-template {
  padding: 2.5rem 1rem;
  text-align: center;
}

.error-details {
  margin-bottom: 1.25rem;
  color: var(--texto-suave);
}

.error-actions { margin-top: 1rem; }

/* ------------------------------------------------------------- 7. Cargadores

   Dos: el "bio." con tres puntos (views/assets/loader.php) y las barras del
   modal de reportes (views/assets/graphquincena.php). Los nombres de clase
   vienen del marcado heredado y se respetan tal cual. */

.theloader {
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.theloader h1 {
  margin: 0;
  /* Grotesca neutra, no la de titulares: a 90px la de titulares se comia
     la pantalla y desentonaba con el resto. */
  font-family: var(--tipo-grotesca);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--bio);
}

.lds-ellipsis {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 20px;
}

.lds-ellipsis div {
  position: absolute;
  top: 4px;
  width: 12px;
  height: 12px;
  background: var(--bio);
  border-radius: 50%;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) { left: 8px;  animation: lds-ellipsis-crece .6s infinite; }
.lds-ellipsis div:nth-child(2) { left: 8px;  animation: lds-ellipsis-anda  .6s infinite; }
.lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis-anda  .6s infinite; }

@keyframes lds-ellipsis-crece {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes lds-ellipsis-anda {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(24px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lds-ellipsis div { animation: none; }
}

/* Barras del modal de reportes. */
.loadingio-spinner-bars-emjqw7sj2bg {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
}

.ldio-za279wzf1b {
  position: relative;
  width: 100%;
  height: 100%;
}

.ldio-za279wzf1b div {
  position: absolute;
  width: 14px;
  height: 46px;
  top: 27px;
  background: var(--primary);
  border-radius: 3px;
  animation: ldio-barras 1s cubic-bezier(0, .5, .5, 1) infinite;
}

.ldio-za279wzf1b div:nth-child(1) { left: 12px; animation-delay: -.6s; }
.ldio-za279wzf1b div:nth-child(2) { left: 32px; animation-delay: -.4s; }
.ldio-za279wzf1b div:nth-child(3) { left: 52px; animation-delay: -.2s; }
.ldio-za279wzf1b div:nth-child(4) { left: 72px; animation-delay: 0s; }

@keyframes ldio-barras {
  0%, 100% { height: 24px; top: 38px; opacity: .55; }
  50%      { height: 60px; top: 20px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ldio-za279wzf1b div { animation: none; }
}

/* El spinner redondo de Bootstrap, usado mientras carga el modal de
   informacion del cliente. */
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: .22em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar-spinner .75s linear infinite;
}

.spinner-border-sm { width: 1rem; height: 1rem; border-width: .16em; }

@keyframes girar-spinner { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner-border { animation-duration: 2s; }
}

/* ------------------------------------------- 8. Pantalla de acceso

   El login es la unica pantalla que ve alguien que todavia no es usuario,
   asi que tiene seccion propia en vez de resolverse con utilidades
   sueltas. La tarjeta es blanca y solida sobre el fondo azul: es lo que
   da contraste de verdad a los campos y lo que hace que se lea como una
   aplicacion de gestion y no como una pagina de aterrizaje.

   Medidas: la tarjeta nunca pasa de 400px --un formulario de dos campos
   mas ancho que eso se lee mal-- y por debajo de eso ocupa el ancho
   disponible menos el margen. */

.login-pagina {
  min-height: 100vh;
  margin: 0;
  color: var(--texto);
  background-color: var(--azul-osc);

  /* Dos halos suaves sobre el degradado: uno de marca arriba a la
     izquierda y otro azul abajo a la derecha. Dan profundidad sin dibujar
     nada que compita con el formulario. */
  background-image:
    radial-gradient(1100px 620px at 10% -12%, rgba(255, 93, 0, .17), transparent 60%),
    radial-gradient(900px 700px at 105% 108%, rgba(21, 89, 156, .45), transparent 58%),
    linear-gradient(158deg, var(--azul) 0%, var(--azul-osc) 100%);
  background-attachment: fixed;
}

.login-marco {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}

/* En pantallas bajas --un movil apaisado, un portatil de 13"-- centrar
   verticalmente recorta la tarjeta por arriba. Ahi se alinea arriba y la
   pagina se desplaza con normalidad. */
@media (max-height: 700px) {
  .login-marco { align-items: flex-start; }
}

.login-caja {
  width: 100%;
  max-width: 400px;
}

/* El aviso de sesion que imprime Controller::setmensaje() trae col-lg-5 y
   compania; dentro de una caja de 400px eso lo dejaria en 160px. */
.login-marco .alert {
  width: 100%;
  max-width: 100% !important;
  margin: 0 0 1rem !important;
  box-shadow: var(--sombra);
}

/* ---- cabecera ---- */

.login-cabecera {
  margin-bottom: 1.5rem;
  text-align: center;
}

.login-logo {
  height: 68px;
  width: auto;
}

.login-titulo {
  margin: .9rem 0 .2rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  letter-spacing: .005em;
}

.login-titulo span { color: var(--bio); }

.login-subtitulo {
  margin: 0;
  font-size: 11.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .58);
}

/* ---- tarjeta ---- */

.login-tarjeta {
  padding: 1.75rem 1.5rem;
  background-color: var(--superficie);
  border-radius: var(--radio-xg);
  box-shadow: var(--sombra-xl);
}

.login-campo {
  position: relative;
  padding-top: 1.25rem;
  margin-bottom: .85rem;
}

.login-campo:last-of-type { margin-bottom: 1.25rem; }

/* Las etiquetas de usuario y contrasena aparecen al enfocar el campo: el
   script del login les quita d-none. Como d-none las saca del flujo, el
   formulario entero pegaba un salto cada vez.

   Van en posicion absoluta sobre el hueco que reserva el padding-top del
   campo, asi que entran y salen sin mover nada. El hueco se aprovecha
   tambien para la etiqueta fija del captcha. */
.login-etiqueta {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
}

/* Campos algo mas altos que los del resto de la aplicacion: aqui solo hay
   tres y se agradece el area de pulsacion, sobre todo en movil. */
.login-tarjeta .form-control {
  padding: .6rem .75rem;
  font-size: 14.5px;
  background-color: var(--n-50);
  border-color: var(--linea);
}

.login-tarjeta .form-control:focus {
  background-color: var(--superficie);
}

.login-tarjeta .input-group-addon {
  flex: 0 0 44px;
  padding: 0;
  font-size: 16px;
  color: var(--texto-suave);
  background-color: var(--n-100);
  border-color: var(--linea);
}

/* El ojo de ver/ocultar la contrasena. */
.login-tarjeta .btn-eye {
  cursor: pointer;
  transition: color var(--transicion), background-color var(--transicion);
}

.login-tarjeta .btn-eye:hover {
  color: var(--primary);
  background-color: var(--n-200) !important;
}

/* ---- captcha ---- */

.login-captcha {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .55rem;
}

.login-captcha-img {
  display: block;
  height: 46px;
  width: auto;
  background-color: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.login-captcha-refrescar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 15px;
  color: var(--texto-suave);
  background-color: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion), background-color var(--transicion);
}

.login-captcha-refrescar:hover {
  color: var(--primary);
  border-color: var(--primary);
  background-color: rgba(21, 89, 156, .07);
}

.login-captcha-refrescar:focus-visible {
  outline: 0;
  box-shadow: var(--foco);
}

/* El codigo se teclea caracter a caracter: monoespaciada y espaciada para
   que no se confundan O y 0. */
.login-captcha-input {
  text-align: center;
  font-family: var(--tipo-mono);
  font-weight: 700;
  letter-spacing: .25em;
  text-indent: .25em;
}

.login-aviso {
  display: block;
  margin-top: .4rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
}

/* ---- boton y pie ---- */

.login-boton {
  width: 100%;
  padding: .65rem;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .09em;
  box-shadow: 0 4px 12px rgba(255, 93, 0, .3);
}

.login-pie {
  margin: 1.35rem 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .42);
}

/* ---- pantallas estrechas ---- */

@media (max-width: 420px) {
  .login-marco   { padding: 1.5rem .85rem; }
  .login-tarjeta { padding: 1.35rem 1.1rem; border-radius: var(--radio-g); }
  .login-logo    { height: 56px; }
  .login-titulo  { font-size: 1.35rem; }
  .login-captcha-img,
  .login-captcha-refrescar { height: 42px; }
  .login-captcha-refrescar { width: 42px; }
}

/* ------------------------------- 9. Clases propias heredadas del marcado */

/* Fondos de pantalla completa. bodybgiph es el del area privada y bg_body
   el del login alternativo; bg3 es el del modal de cierre de sesion.

   El area privada va en gris plano, no en degradado: sobre el se apoyan
   tablas y tarjetas blancas, y un fondo liso es lo que hace que se lean
   como superficies elevadas. */
.bodybgiph {
  min-height: 100vh;
  background-color: var(--fondo);
}

.bg_body {
  min-height: 100vh;
  background-color: var(--azul);
  background-image: linear-gradient(160deg, var(--azul) 0%, var(--azul-osc) 100%);
  background-attachment: fixed;
}

.bg3 { background-color: #fff; }

/* El login principal: tarjeta translucida sobre el azul. */
.rounded-login,
.login-card {
  border-radius: var(--radio-g);
  backdrop-filter: blur(2px);
  box-shadow: var(--sombra-alta);
}

/* Campo del login alternativo (views/main/loginb.php): sin caja, solo una
   linea inferior. */
.inputiph {
  display: block;
  width: 100%;
  padding: .4rem .2rem;
  color: #fff;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  border-radius: 0;
  transition: border-color .15s ease;
}

.inputiph::placeholder { color: rgba(255, 255, 255, .65); }

.inputiph:focus {
  outline: 0;
  border-bottom-color: var(--bio);
}

/* Boton/enlace del mismo juego: sin relleno de color, con realce suave. */
.btniph {
  border-radius: var(--radio);
  transition: background-color .15s ease;
}

.btniph:hover { background-color: rgba(255, 255, 255, .14); }

.roundediph    { border-radius: var(--radio-g); overflow: hidden; }
.roundediph-tl { border-top-left-radius: var(--radio-g); }
.roundediph-tr { border-top-right-radius: var(--radio-g); }

.sombritaiph { box-shadow: var(--sombra); }

/* Campo de captura de datos de los formularios de vales: se distingue del
   resto porque es donde se teclea. */
.entrada {
  background-color: #fffdf8;
  border-color: #e3c9a8;
}

.entrada:focus {
  border-color: var(--bio);
  box-shadow: var(--foco-bio);
}

/* El logo del login. La clase se llama imagen-girar porque antes daba
   vueltas sin parar; un logotipo en rotacion continua es lo que mas
   abarata una pantalla de acceso, asi que ahora hace una sola entrada
   --un giro corto que frena- al cargar y se queda quieto. Para recuperar
   el comportamiento anterior basta cambiar la animacion por
   "girar-logo 9s linear infinite". */
.imagen-girar {
  animation: entrada-logo .9s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes entrada-logo {
  from { opacity: 0; transform: rotate(-35deg) scale(.86); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .imagen-girar { animation: none; }
}

/* El ojo de mostrar/ocultar contrasena. */
.btn-eye { cursor: pointer; }
.btn-eye:hover { background-color: rgba(255, 255, 255, .7) !important; }

/* Grupos repetibles de los formularios de alta masiva: el script clona el
   primero, asi que conviene que se lean como bloques. */
.grupoVehiculo,
.grupoSupervisor { padding: .4rem 0; }

/* Estado en las listas. El marcado escribe las dos clases a la vez
   --"<estado>verde <estado>rojo"-- y solo una esta definida para cada
   valor, que es lo que decide el color. Mantener este par si se anade un
   estado nuevo. */
.ACTIVOverde,
.HABILITADOverde,
.DISPONIBLEverde {
  color: var(--success) !important;
  font-weight: 700;
}

.INACTIVOrojo,
.ANULADOrojo,
.DESHABILITADOrojo,
.BLOQUEADOrojo {
  color: var(--danger) !important;
  font-weight: 700;
}

/* Buscador de tablas (public/js/searchers.js). La fila que el filtro
   descarta se oculta por este atributo, no tocando el style en linea, para
   no pelearse con las utilidades d-*. */
.results tr[data-oculto="1"] { display: none !important; }

.search:focus { border-color: var(--bio); box-shadow: var(--foco-bio); }

/* Aviso de "sin resultados" que inserta el buscador. */
.sin-resultados td {
  padding: .9rem;
  color: var(--texto-suave);
  text-align: center;
  font-style: italic;
}

/* Globo de ayuda propio (public/js/bio.js, data-toggle="tooltip"). */
.bio-tooltip {
  position: absolute;
  z-index: 1080;
  max-width: 260px;
  padding: .3rem .5rem;
  font-size: 12px;
  line-height: 1.35;
  color: #fff;
  text-align: center;
  background-color: rgba(20, 26, 32, .94);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.bio-tooltip.visible { opacity: 1; }

.bio-tooltip::after {
  content: "";
  position: absolute;
  border: 5px solid transparent;
}

.bio-tooltip[data-lado="top"]::after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-top-color: rgba(20, 26, 32, .94);
}

.bio-tooltip[data-lado="bottom"]::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: rgba(20, 26, 32, .94);
}

.bio-tooltip[data-lado="left"]::after {
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-left-color: rgba(20, 26, 32, .94);
}

.bio-tooltip[data-lado="right"]::after {
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-right-color: rgba(20, 26, 32, .94);
}

/* Avisos de sesion. Los arma Controller::setmensaje(), que usa seis
   variantes --danger, success, warning, info, primary y secondary-- y les
   pone un boton de cierre con data-dismiss="alert", que atiende bio.js. */
.alert {
  position: relative;
  padding: .6rem .8rem;
  margin-bottom: .75rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
}

.alert-success   { color: #10502c; background-color: #dff3e6; border-color: #b7e2c8; }
.alert-danger    { color: #731d19; background-color: #fae2e1; border-color: #efb9b6; }
.alert-warning   { color: #6b4e0c; background-color: #fcf1d8; border-color: #f0dca9; }
.alert-info      { color: #0f4e59; background-color: #ddf1f4; border-color: #aedde4; }
.alert-primary   { color: #0d3f6b; background-color: #dceaf6; border-color: #aecde8; }
.alert-secondary { color: #353b42; background-color: #e8eaed; border-color: #cbd0d6; }

/* Deja sitio al boton de cierre, que va flotando arriba a la derecha. */
.alert-dismissible { padding-right: 2.2rem; }

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: .55rem .7rem;
  color: inherit;
  float: none;
}

/* Impresion: fuera lo que no es contenido. */
@media print {
  .fixed-top,
  .main-sidebar,
  .modal,
  .modal-backdrop,
  .btn { display: none !important; }

  body { background: #fff; }
}