/* Las medidas del producto, y el único lugar donde se escriben sus valores.

   Los templates usan var(--azul), nunca el hex. Lo enlazan las dos
   superficies: base.html —login, home, cambio de clave— y backoffice.html,
   que cuelga del layout de Flask-AppBuilder y no pasa por base.html.

   Los --*-rgb existen para las transparencias, que necesitan los tres
   canales sueltos: rgba(var(--azul-rgb),.12). */
:root{
  /* Marca */
  --azul:#022B41; --azul-rgb:2,43,65;
  --ambar:#E6A623; --ambar-rgb:230,166,35;
  --ambar-oscuro:#A8781A;

  /* Fondos. Papel para la página y blanco reservado a tarjetas y tablas:
     ese contraste de dos niveles da la estructura sin bordes ni sombras. */
  --papel:#F7F6F3;
  --niebla:#F4F6F7;

  /* Texto, del más firme al más tenue. Sobre blanco los tres pasan AA. */
  --pizarra:#3D4E5A;
  --texto-2:#4A5A66;
  --texto-3:#5C6B75;

  /* Escala tipográfica — siete pasos, ningún decimal.
     Gelasio de 20px para arriba; Nunito Sans de 16px para abajo. */
  --t-pagina:30px;      /* título de página */
  --t-vista:20px;       /* título de vista embebida */
  --t-item:16px;        /* título de fila o de ítem */
  --t-cuerpo:14px;      /* cuerpo, celdas y campos */
  --t-meta:13px;        /* metadatos y subtítulos */
  --t-rotulo:12px;      /* rótulos de campo y pie */
  --t-versalita:11px;   /* versalitas de tabla y botón, con --ls-versalita */

  --ls-versalita:.14em;
  --ls-boton:.08em;

  /* Radios — lo que se toca (botón, campo, pastilla) lleva --radio-control;
     lo que contiene (tarjeta, tabla, panel) lleva --radio-superficie. */
  --radio-control:3px;
  --radio-superficie:6px;

  /* Estados. Antes no existían y por eso había un verde escrito a mano. */
  --verde:#1F6B45; --verde-rgb:31,107,69; --verde-fondo:#EAF2ED;
  --rojo:#9A2B2B; --rojo-rgb:154,43,43; --rojo-fondo:#F6EBEB;
  --ambar-fondo:#FBF3E4;

  /* Alturas y medida de página. */
  --alto-encabezado-tabla:44px;
  --alto-fila:72px;
  --alto-boton:40px;
  --alto-boton-compacto:34px;
  --alto-campo:40px;
  --ancho-pagina:1200px;
  --margen-pagina:40px;
}

/* Reglas que no se pueden escribir inline: hoy estaban partidas entre
   base.html y backoffice.html y por eso divergían. */

/* Con teclado, botones y enlaces sin esto son invisibles: sólo el input
   tenía foco visible. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--ambar);
  outline-offset:2px;
}

/* El hover de fila de tabla: lo único que finalmente le da uso a --niebla. */
.fila-tabla:hover{ background:var(--niebla); }

.btn-primary:hover{ background:var(--ambar-oscuro); }

/* Boton(nivel="primario") pinta su ámbar inline; esta clase es el único
   gancho para pisarlo cuando el botón queda `disabled` por script (por
   ejemplo, "Guardar acceso" mientras no hay cambios pendientes). El
   !important sigue el mismo criterio que ya usa `input:focus` más arriba
   para ganarle a un estilo inline. */
.boton-primario:disabled{ background:rgba(var(--azul-rgb),.08)!important; color:var(--texto-3)!important; }
button:disabled{ opacity:.55; cursor:default; }

/* El botón nativo de un <input type="file"> no acepta `style=""`; sólo su
   pseudo-elemento interno se puede pintar. Se lo viste como un
   Boton(nivel="secundario", tamano="compacto"). */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{
  height:var(--alto-boton-compacto);
  margin-right:12px;
  padding:0 16px;
  border:none;
  border-right:1px solid rgba(var(--azul-rgb),.2);
  border-radius:var(--radio-control) 0 0 var(--radio-control);
  background:var(--niebla);
  color:var(--azul);
  font:700 var(--t-versalita) 'Nunito Sans';
  letter-spacing:var(--ls-boton);
  text-transform:uppercase;
  cursor:pointer;
}
input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button{ background:rgba(var(--azul-rgb),.12); }

/* El interruptor (componentes/Interruptor.html). El input real queda encima
   de la pista pero invisible por opacity, no por display:none — así sigue
   siendo enfocable y legible por lectores de pantalla, y :checked/:disabled
   sobre él dibujan la pista y el pulgar, que no se pueden escribir inline. */
.interruptor{ position:relative; display:inline-flex; }
.interruptor-entrada{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; z-index:1; }
.interruptor-entrada:disabled{ cursor:default; }
.interruptor-pista{
  display:inline-flex; align-items:center; width:40px; height:22px;
  border-radius:11px; background:rgba(var(--azul-rgb),.2);
  transition:background .15s;
}
.interruptor-pulgar{
  width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(var(--azul-rgb),.3); transform:translateX(2px);
  transition:transform .15s;
}
.interruptor-entrada:checked + .interruptor-pista{ background:var(--verde); }
.interruptor-entrada:checked + .interruptor-pista .interruptor-pulgar{ transform:translateX(20px); }
.interruptor-entrada:disabled + .interruptor-pista{ opacity:.5; }
/* El input oculto por opacity no muestra su propio outline: el foco tiene
   que verse en la pista, que es lo que queda visible. */
.interruptor-entrada:focus-visible + .interruptor-pista{ outline:2px solid var(--ambar); outline-offset:2px; }