: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:10px;
  --radio-tarjeta:12px;
}

/* 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);
}

*{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.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)}

.oculto{display:none !important}

/* Botones */
.btn{
  border:none;border-radius:var(--radio);padding:10px 16px;
  font-size:15px;font-weight:500;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:6px;
}
.btn-primario{background:var(--naranja);color:var(--blanco-fijo)}
.btn-primario:hover{opacity:.92}
.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:14px 16px;
}

/* 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:9px 12px;border:1px solid var(--linea);
  border-radius:var(--radio);background:var(--blanco);color:var(--navy);
}
.campo input:focus, .campo select:focus{outline:2px solid var(--naranja);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:16px;padding:22px;max-width:400px;width:100%}

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