/* ═══════════════════════════════════════════════════════════════════════════
   CoreColegios — hoja de estilo de la aplicación.

   Los colores de marca NO viven aquí: los sirve /marca/tema.css a partir de la
   configuración del centro, como variables --marca-*. Este archivo usa esas
   variables y define lo demás: ritmo, sombras, transiciones y los colores de
   ESTADO, que son semánticos y no deben cambiar con la marca —un ausente se
   pinta de rojo en todos los colegios—.

   La política de contenido prohíbe estilos en línea, así que todo lo visual
   se resuelve con clases de aquí. Nada de style="..." en las vistas.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Estados. Independientes de la marca a propósito. */
    --tono-exito: #1B8A5A;
    --tono-exito-suave: #E7F5EE;
    --tono-alerta: #B87503;
    --tono-alerta-suave: #FDF3E0;
    --tono-peligro: #C0392B;
    --tono-peligro-suave: #FBEAE8;
    --tono-info: #2A6FB5;
    --tono-info-suave: #E9F1FA;
    --tono-violeta: #6B4EA0;
    --tono-violeta-suave: #F0EBF8;
    --tono-turquesa: #0E8C8C;
    --tono-turquesa-suave: #E3F5F5;

    /* Superficies y texto. */
    --fondo-pagina: #F6F7F5;
    --superficie: #FFFFFF;
    --borde-suave: #E3E6E3;
    --texto-tenue: #6B7570;

    /* Ritmo visual. */
    --radio: 0.75rem;
    --radio-sm: 0.5rem;
    --sombra-1: 0 1px 2px rgba(16, 32, 28, 0.06), 0 1px 3px rgba(16, 32, 28, 0.04);
    --sombra-2: 0 4px 12px rgba(16, 32, 28, 0.08), 0 2px 4px rgba(16, 32, 28, 0.04);
    --sombra-3: 0 12px 28px rgba(16, 32, 28, 0.12), 0 4px 8px rgba(16, 32, 28, 0.06);

    /* Una sola curva y dos duraciones: la interfaz se siente de una pieza. */
    --transicion: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transicion-lenta: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    font-size: 15px;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--fondo-pagina);
    color: #1F2A26;
}

main {
    flex: 1 0 auto;
}

/* ── Movimiento ──────────────────────────────────────────────────────────────
   La entrada escalonada da sensación de que la pantalla "se arma". Se anula
   por completo para quien pidió menos movimiento en su sistema operativo. */

@keyframes aparecer {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes latido {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.12); opacity: 0.75; }
}

@keyframes destello {
    from { background-color: var(--tono-alerta-suave); }
    to   { background-color: transparent; }
}

main > * {
    animation: aparecer var(--transicion-lenta) both;
}

.escalonado > * { animation: aparecer var(--transicion-lenta) both; }
.escalonado > *:nth-child(1) { animation-delay: 0ms; }
.escalonado > *:nth-child(2) { animation-delay: 45ms; }
.escalonado > *:nth-child(3) { animation-delay: 90ms; }
.escalonado > *:nth-child(4) { animation-delay: 135ms; }
.escalonado > *:nth-child(5) { animation-delay: 180ms; }
.escalonado > *:nth-child(6) { animation-delay: 225ms; }
.escalonado > *:nth-child(7) { animation-delay: 270ms; }
.escalonado > *:nth-child(8) { animation-delay: 315ms; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Encabezado de página ───────────────────────────────────────────────── */

.encabezado-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--borde-suave);
}

.encabezado-pagina h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.encabezado-pagina .subtitulo {
    margin: 0.15rem 0 0;
    color: var(--texto-tenue);
    font-size: 0.9rem;
}

/* ── Tarjetas ───────────────────────────────────────────────────────────── */

.card {
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    box-shadow: var(--sombra-1);
    background-color: var(--superficie);
    transition: box-shadow var(--transicion), transform var(--transicion);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--borde-suave);
    font-weight: 600;
    padding: 0.85rem 1.1rem;
}

/* Solo las tarjetas que llevan a algún sitio se levantan al pasar por encima.
   Una tarjeta estática que se mueve es ruido. */
.card-enlace {
    display: block;
    color: inherit;
    text-decoration: none;
}

.card-enlace:hover,
.card-enlace:focus-visible {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: var(--sombra-3);
}

.card-enlace:focus-visible {
    outline: 2px solid var(--marca-primario, #0E6B57);
    outline-offset: 2px;
}

/* ── Mosaico de indicadores ─────────────────────────────────────────────────
   La cifra manda: número grande, etiqueta discreta y una franja de color que
   dice de un vistazo si eso está bien o pide atención. */

.mosaico {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 1rem;
}

.indicador {
    position: relative;
    display: block;
    padding: 1.1rem 1.15rem 1.05rem;
    background-color: var(--superficie);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
    box-shadow: var(--sombra-1);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--transicion), transform var(--transicion);
}

.indicador::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background-color: var(--indicador-color, var(--marca-primario, #0E6B57));
}

a.indicador:hover,
a.indicador:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--sombra-3);
    color: inherit;
}

.indicador__etiqueta {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.indicador__cifra {
    display: block;
    margin-top: 0.3rem;
    font-size: 2rem;
    font-weight: 650;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--indicador-color, inherit);
}

.indicador__pie {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--texto-tenue);
}

.indicador__icono {
    width: 2.35rem;
    height: 2.35rem;
    position: absolute;
    right: 0.9rem;
    top: 0.9rem;
    line-height: 1;
    opacity: 0.28;
}

/* Variantes semánticas. */
.indicador--exito    { --indicador-color: var(--tono-exito); }
.indicador--alerta   { --indicador-color: var(--tono-alerta); }
.indicador--peligro  { --indicador-color: var(--tono-peligro); }
.indicador--info     { --indicador-color: var(--tono-info); }
.indicador--violeta  { --indicador-color: var(--tono-violeta); }
.indicador--turquesa { --indicador-color: var(--tono-turquesa); }

/* Un indicador que exige acción parpadea una vez y se queda teñido. */
.indicador--urgente {
    background-color: var(--tono-peligro-suave);
    border-color: rgba(192, 57, 43, 0.25);
}

.indicador--urgente .indicador__icono {
    opacity: 0.5;
    animation: latido 2.4s ease-in-out infinite;
}

/* ── Distintivos de estado ──────────────────────────────────────────────────
   Fondo suave y texto del mismo tono: se leen bien y no gritan como los
   distintivos sólidos de Bootstrap. */

.estado {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.estado::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background-color: currentColor;
    flex: none;
}

.estado--exito    { background-color: var(--tono-exito-suave);    color: var(--tono-exito); }
.estado--alerta   { background-color: var(--tono-alerta-suave);   color: var(--tono-alerta); }
.estado--peligro  { background-color: var(--tono-peligro-suave);  color: var(--tono-peligro); }
.estado--info     { background-color: var(--tono-info-suave);     color: var(--tono-info); }
.estado--violeta  { background-color: var(--tono-violeta-suave);  color: var(--tono-violeta); }
.estado--turquesa { background-color: var(--tono-turquesa-suave); color: var(--tono-turquesa); }
.estado--neutro   { background-color: #EEF0EE;                    color: var(--texto-tenue); }

/* ── Tablas ─────────────────────────────────────────────────────────────── */

.table {
    --bs-table-border-color: var(--borde-suave);
}

.table > thead > tr > th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    border-bottom: 1px solid var(--borde-suave);
    background-color: transparent;
}

.table > tbody > tr {
    transition: background-color var(--transicion);
}

.table > tbody > tr:hover > * {
    background-color: rgba(14, 107, 87, 0.045);
}

.tabla-compacta td,
.tabla-compacta th {
    vertical-align: middle;
    font-size: 0.9rem;
}

/* Fila recién afectada por la acción del usuario. */
.fila-nueva {
    animation: destello 2.2s ease-out both;
}

/* ── Controles ──────────────────────────────────────────────────────────── */

.btn {
    border-radius: var(--radio-sm);
    font-weight: 500;
    transition: background-color var(--transicion), border-color var(--transicion),
                color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}

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

.form-control,
.form-select {
    border-radius: var(--radio-sm);
    border-color: var(--borde-suave);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

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

.navbar .nav-link {
    border-radius: var(--radio-sm);
    padding-inline: 0.7rem;
    transition: background-color var(--transicion), color var(--transicion);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
}

.alert {
    border-radius: var(--radio);
    border: 1px solid transparent;
}

/* ── Utilidades heredadas ───────────────────────────────────────────────────
   Las usan las vistas ya escritas; se conservan tal cual. */

.tarjeta-acceso {
    max-width: 26rem;
    margin: 4rem auto;
}

.numero-tabular {
    font-variant-numeric: tabular-nums;
}

.permiso-critico {
    border-left: 3px solid #b8860b;
    padding-left: 0.5rem;
}

.clave-permiso {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.78rem;
    color: #5f6b66;
}

.valores-json {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.75rem;
    max-width: 28rem;
    max-height: 6rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Compatibilidad con Bootstrap 5.2 y 5.3 ─────────────────────────────────
   Las vistas usan .text-bg-* y los bordes .border-*-subtle, que Bootstrap
   incorporó en 5.2 y 5.3. La plantilla del proyecto trae la 5.1, donde esas
   clases no existen: los distintivos salían como texto suelto, sin fondo.
   Se definen aquí con los valores de 5.3, y el tema del centro reescribe
   después las que llevan color de marca. Al actualizar Bootstrap, estas
   reglas quedan sobrescritas por las suyas y se pueden retirar. */
.text-bg-primary { color: #fff; background-color: #0d6efd; }
.text-bg-secondary { color: #fff; background-color: #6c757d; }
.text-bg-success { color: #fff; background-color: #198754; }
.text-bg-danger { color: #fff; background-color: #dc3545; }
.text-bg-warning { color: #000; background-color: #ffc107; }
.text-bg-info { color: #000; background-color: #0dcaf0; }
.text-bg-light { color: #000; background-color: #f8f9fa; }
.text-bg-dark { color: #fff; background-color: #212529; }

.border-success-subtle { border-color: #a3cfbb !important; }
.border-danger-subtle { border-color: #f1aeb5 !important; }
.border-warning-subtle { border-color: #ffe69c !important; }

/* ── Recogida: la pantalla de la puerta ─────────────────────────────────────
   Se usa de pie, con prisa y con la fila esperando. Todo es más grande de lo
   normal a propósito: el veredicto tiene que leerse de un vistazo y sin dudar. */

.veredicto {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-radius: var(--radio);
    font-size: 1.15rem;
    font-weight: 650;
    border: 2px solid transparent;
}

.veredicto__icono {
    width: 2.4rem;
    height: 2.4rem;
    line-height: 1;
    flex: none;
}

.veredicto--autorizado {
    background-color: var(--tono-exito-suave);
    border-color: var(--tono-exito);
    color: var(--tono-exito);
}

.veredicto--denegado {
    background-color: var(--tono-peligro-suave);
    border-color: var(--tono-peligro);
    color: var(--tono-peligro);
}

/* Una persona restringida por orden judicial no es un "no": es una alarma. */
.veredicto--restringido {
    background-color: var(--tono-peligro);
    border-color: var(--tono-peligro);
    color: #fff;
}

.veredicto--restringido .veredicto__icono {
    animation: latido 1.4s ease-in-out infinite;
}

.adulto {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--marca-primario-suave, #E7F0ED);
    color: var(--marca-primario, #0E6B57);
    font-weight: 700;
    font-size: 1.15rem;
    flex: none;
    overflow: hidden;
}

.avatar--grande {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.5rem;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tarjetas de los niños que el adulto viene a buscar. */
.ninos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.85rem;
}

.nino {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem;
    border: 2px solid var(--borde-suave);
    border-radius: var(--radio);
    background-color: var(--superficie);
    cursor: pointer;
    transition: border-color var(--transicion), background-color var(--transicion), box-shadow var(--transicion);
}

.nino:hover {
    box-shadow: var(--sombra-2);
}

/* La casilla real queda oculta pero accesible: el teclado la sigue alcanzando
   y el foco se dibuja sobre la tarjeta entera. */
.nino input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nino:has(input:checked) {
    border-color: var(--tono-exito);
    background-color: var(--tono-exito-suave);
}

.nino:has(input:focus-visible) {
    outline: 2px solid var(--marca-primario, #0E6B57);
    outline-offset: 2px;
}

.nino--bloqueado {
    cursor: not-allowed;
    opacity: 0.72;
    background-color: #F7F8F7;
    border-style: dashed;
}

.nino__nombre {
    font-weight: 600;
    line-height: 1.25;
}

.nino__detalle {
    font-size: 0.8rem;
    color: var(--texto-tenue);
}

/* El código que la familia ve en el portal: grande, monoespaciado y separado
   en dos mitades para poder dictarlo por teléfono sin equivocarse. */
.codigo-retiro {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: clamp(2rem, 8vw, 3.25rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: var(--radio);
    background-color: var(--marca-primario-suave, #E7F0ED);
    color: var(--marca-primario-oscuro, #0B5646);
    border: 2px dashed var(--marca-primario, #0E6B57);
    user-select: all;
}

.cuenta-atras {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.cuenta-atras--urgente {
    color: var(--tono-peligro);
    animation: latido 1s ease-in-out infinite;
}

/* Panel en vivo: una rejilla de fichas, no una tabla. Se mira de lejos. */
.panel-salida {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem;
}

.ficha-salida {
    padding: 0.7rem 0.85rem;
    border-radius: var(--radio-sm);
    border: 1px solid var(--borde-suave);
    border-left: 4px solid var(--texto-tenue);
    background-color: var(--superficie);
    transition: box-shadow var(--transicion), transform var(--transicion);
}

.ficha-salida:hover {
    box-shadow: var(--sombra-2);
}

.ficha-salida--pendiente { border-left-color: var(--tono-info); }
.ficha-salida--entregado { border-left-color: var(--tono-exito); background-color: var(--tono-exito-suave); }
.ficha-salida--ausente   { border-left-color: var(--borde-suave); opacity: 0.6; }
.ficha-salida--retraso   { border-left-color: var(--tono-alerta); background-color: var(--tono-alerta-suave); }

.ficha-salida__nombre {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.25;
}

.ficha-salida__detalle {
    font-size: 0.78rem;
    color: var(--texto-tenue);
}

/* Vacío con explicación, no una tabla en blanco. */
.vacio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--texto-tenue);
}

.vacio__icono {
    width: 3rem;
    height: 3rem;
    opacity: 0.35;
    display: block;
    margin: 0 auto 0.5rem;
}

/* ── Iconos ─────────────────────────────────────────────────────────────────
   El sprite se dibuja una vez al principio del cuerpo y no debe ocupar sitio. */

.sprite-iconos {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icono {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.19em;
    flex: none;
}

.icono--grande { width: 1.6em; height: 1.6em; vertical-align: -0.3em; }
.icono--xl { width: 2.2em; height: 2.2em; }