@font-face{
  font-family:'Instrument Sans';
  src:url('fonts/instrument-sans.woff2') format('woff2');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

:root{
  --marca:#304871;
  --blanco-fijo:#FFFFFF;
  --peligro-fijo:#791F1F;
  --navy:#304871;
  --navy-profundo:#121A2A;
  --naranja:#EE8B3E;
  --naranja-texto:#A34E12;
  --ambar:#F6B134;
  --ambar-texto:#8A5A00;
  --gris:#4A4F5E;
  --crema:#F8F9F9;
  --azul-claro:#EEF2F7;
  --linea:#D8DCE3;
  --blanco:#FFFFFF;
  --exito:#3B6D11;
  --exito-bg:#EAF3DE;
  --peligro:#791F1F;
  --peligro-bg:#FCEBEB;
  --radio:12px;
  --radio-tarjeta:18px;

  /* Naranja de ACCIÓN (fondo con texto blanco). Más oscuro que --naranja
     para pasar contraste AA (blanco sobre este >= 4.5:1). --naranja se
     reserva para bordes y acentos, nunca para texto blanco encima. */
  --accion:#E07D28;
  --accion-hover:#C86B1C;

  /* Fondos de "chip"/icono: tokenizados para poder adaptarlos al tema oscuro */
  --chip-na:#FCEEE1;
  --chip-am:#FDF3E3;
  --chip-ve:#EAF3DE;
  --chip-dir:#EAE6F3;
  --chip-dir-texto:#5B3A82;

  /* Escala tipográfica */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-md:15px;
  --fs-lg:18px;
  --fs-xl:22px;

  /* Rediseño 2026: profundidad y radios */
  --radio-pill:999px;
  --radio-grande:22px;
  --sombra-sm:0 1px 2px rgba(20,30,55,.05), 0 2px 8px rgba(20,30,55,.04);
  --sombra-md:0 1px 2px rgba(20,30,55,.05), 0 12px 30px -20px rgba(20,30,55,.28);
  --sombra-lg:0 24px 50px -24px rgba(20,30,55,.4);
  --grad-navy:linear-gradient(135deg,#304871 0%,#243a5e 55%,#1B2B4A 100%);
}

/* Tema navy oscuro, activable por el alumno desde Ajustes.
   --marca y --blanco-fijo no cambian nunca: son el azul de cabecera
   y el blanco de los botones de acción, iguales en los dos temas. */
body.tema-navy{
  --navy:#EDEFF3;
  --gris:#AEB9CC;
  --crema:#121A2A;
  --blanco:#1C2740;
  --azul-claro:#24304D;
  --linea:rgba(255,255,255,0.14);
  --ambar-texto:#F6B134;
  --naranja-texto:#EE8B3E;
  --exito:#7CC576;
  --exito-bg:rgba(124,197,118,0.14);
  --peligro:#FF8A80;
  --peligro-bg:rgba(255,138,128,0.14);
  --sombra-sm:0 1px 2px rgba(0,0,0,.3);
  --sombra-md:0 10px 30px -16px rgba(0,0,0,.55);
  --sombra-lg:0 24px 50px -20px rgba(0,0,0,.6);
  --grad-navy:linear-gradient(135deg,#243a5e,#12203A);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--crema);
  color:var(--navy);
  font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;
  line-height:1.5;
}
body.texto-grande{font-size:18px}
body.alto-contraste{ --gris:#2C2C2A; --linea:#8A8A8A; }
body.tema-navy{
  --chip-na:rgba(238,139,62,0.16);
  --chip-am:rgba(246,177,52,0.16);
  --chip-ve:rgba(124,197,118,0.16);
  --chip-dir:rgba(168,140,214,0.22);
  --chip-dir-texto:#C9B8E6;
}
body.tema-navy.alto-contraste{ --gris:#FFFFFF; --navy:#FFFFFF; --linea:rgba(255,255,255,0.4); }

button, input, select, textarea{font-family:inherit;font-size:inherit}
a{color:var(--navy)}
a:hover{color:var(--accion)}

/* Foco de teclado visible en cualquier elemento interactivo, incluidos los
   divs clicables que el shim de accesibilidad promociona a role=button. */
:focus-visible{outline:2px solid var(--accion);outline-offset:2px}
[role="button"]:focus-visible, .nav-item:focus-visible, .alumno-item:focus-visible,
.tarjeta-modulo:focus-visible, .pestana-ag:focus-visible, .pestana-sel:focus-visible,
.dash-tile:focus-visible{outline:2px solid var(--accion);outline-offset:2px;border-radius:8px}

.oculto{display:none !important}

/* Botones */
.btn{
  border:none;border-radius:var(--radio-pill);padding:12px 20px;
  font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:7px;
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primario{background:var(--accion);color:var(--blanco-fijo);box-shadow:0 6px 16px -10px rgba(20,30,55,.25)}
.btn-primario:hover{background:var(--accion-hover)}
.btn-secundario{background:var(--blanco);color:var(--gris);border:1px solid var(--linea)}
.btn-peligro{background:var(--peligro-fijo);color:var(--blanco-fijo)}
.btn-fantasma{background:transparent;color:var(--gris);border:1px dashed var(--linea)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Tarjetas */
.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio-tarjeta);padding:16px 18px;box-shadow:var(--sombra-md);
}

/* Campos de formulario */
.campo{margin-bottom:14px}
.campo label{display:block;font-size:13px;color:var(--gris);margin-bottom:5px}
.campo input, .campo select{
  width:100%;padding:12px 14px;border:1px solid var(--linea);
  border-radius:14px;background:var(--crema);color:var(--navy);
}
.campo input:focus, .campo select:focus{outline:2px solid var(--accion);outline-offset:1px}

/* Insignias de estado (siempre icono + texto, nunca solo color) */
.insignia{display:inline-flex;align-items:center;gap:5px;font-size:13px}
.insignia-ok{color:var(--exito)}
.insignia-alerta{color:var(--gris)}
.insignia-inactivo{color:var(--gris)}

/* Utilidades */
.fila{display:flex;align-items:center}
.entre{justify-content:space-between}
.gap-sm{gap:8px}
.gap-md{gap:12px}
.mono-avatar{
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:500;flex-shrink:0;
}

/* Modal */
.modal-fondo{
  position:fixed;inset:0;background:rgba(18,26,42,.5);
  display:flex;align-items:center;justify-content:center;z-index:200;padding:16px;
}
.modal-caja{background:var(--blanco);border-radius:var(--radio-grande);padding:24px;max-width:420px;width:100%;box-shadow:var(--sombra-lg)}

/* Icono decorativo por defecto */
.icono{font-size:16px}