/* NOTA-LISFA · LISFA — estilo copiado de CARDLISFA (copia propia, no enlazada): corinto, azul marino, verde y dorado */
:root {
    --corinto: #A41943;
    --corinto-claro: #C2365F;
    --corinto-oscuro: #7A0F30;
    --azul: #002955;
    --azul-medio: #0D3F7A;
    --verde: #007C1E;
    --lima: #B5D800;
    --dorado: #FFB600;
    --tinta: #14213D;
    --fondo: #F4F6FA;
    --borde: #E2E7F0;
    /* Nombres anteriores, para las vistas que aún los usan */
    --morado: var(--corinto);
    --morado-claro: var(--corinto-claro);
    --morado-oscuro: var(--corinto-oscuro);

    --bs-body-bg: var(--fondo);
    --bs-body-color: var(--tinta);
    --bs-link-color: var(--corinto);
    --bs-link-color-rgb: 164, 25, 67;
    --bs-link-hover-color: var(--azul);
    --bs-border-radius: .6rem;
}

body { background: var(--fondo); }

/* --- Encabezado: CARDLISFA a la izquierda, escudo + LISFA a la derecha ------------ */
.marca {
    background: linear-gradient(115deg, var(--azul) 0%, var(--azul) 45%, var(--azul-medio) 75%, var(--corinto) 135%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.marca::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 6px;
    background: linear-gradient(90deg, var(--corinto) 0 33%, var(--dorado) 33% 66%, var(--lima) 66% 100%);
}
.marca .container { min-height: 100px; padding-top: .6rem; padding-bottom: .9rem; }
.marca a { color: inherit; text-decoration: none; }
.marca-cardlist, .marca-lisfa {
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1;
    font-size: clamp(1.4rem, 5vw, 2.8rem);
    text-shadow: 0 3px 12px rgba(0, 0, 0, .3);
}
.marca-cardlist .acento { color: var(--lima); }
.marca-cardlist small, .marca-lisfa small {
    display: block;
    font-size: .32em;
    font-weight: 600;
    letter-spacing: .18em;
    opacity: .85;
    margin-top: .35rem;
}
.marca-lisfa { display: flex; align-items: center; gap: .8rem; text-align: right; }
.marca-escudo {
    height: clamp(56px, 12vw, 80px);
    width: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}
@media (max-width: 575.98px) {
    .marca-lisfa small, .marca-cardlist small { display: none; }
    .marca-lisfa { gap: .5rem; }
}
.marca-circulo {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* --- Menú ----------------------------------------------------------------------- */
.menu {
    background: #fff;
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 4px 18px rgba(0, 41, 85, .08);
}
.menu .nav-link {
    color: var(--tinta);
    font-weight: 500;
    border-bottom: 3px solid transparent;
    padding: .9rem .8rem;
}
/* Con todas las opciones del administrador el menú cabe en una sola línea */
@media (min-width: 992px) {
    .menu .nav-link { white-space: nowrap; }
    .menu .dropdown-toggle .d-lg-inline { display: inline-block !important; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
    .menu .nav-link { padding-inline: .5rem; font-size: .95rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .menu .nav-link { padding-inline: .35rem; font-size: .88rem; }
    .menu .dropdown-toggle .d-lg-inline { display: none !important; }
}
.menu .nav-link:hover { color: var(--corinto); }
.menu .nav-link.active { color: var(--corinto); border-bottom-color: var(--dorado); }
.menu .dropdown-item.active, .menu .dropdown-item:active { background: var(--corinto); }

/* --- Botones con los colores del colegio ------------------------------------------ */
.btn-primary {
    --bs-btn-bg: var(--corinto); --bs-btn-border-color: var(--corinto);
    --bs-btn-hover-bg: var(--corinto-oscuro); --bs-btn-hover-border-color: var(--corinto-oscuro);
    --bs-btn-active-bg: var(--corinto-oscuro); --bs-btn-active-border-color: var(--corinto-oscuro);
    --bs-btn-disabled-bg: var(--corinto-claro); --bs-btn-disabled-border-color: var(--corinto-claro);
}
.btn-success {
    --bs-btn-bg: var(--verde); --bs-btn-border-color: var(--verde);
    --bs-btn-hover-bg: #005f17; --bs-btn-hover-border-color: #005f17;
    --bs-btn-active-bg: #005f17; --bs-btn-active-border-color: #005f17;
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
    --bs-btn-bg: var(--azul-medio); --bs-btn-border-color: var(--azul-medio);
    --bs-btn-hover-bg: var(--azul); --bs-btn-hover-border-color: var(--azul);
}
.btn-warning {
    --bs-btn-bg: var(--dorado); --bs-btn-border-color: var(--dorado);
    --bs-btn-hover-bg: #e6a400; --bs-btn-hover-border-color: #e6a400;
}

.btn-outline-primary {
    --bs-btn-color: var(--corinto); --bs-btn-border-color: var(--corinto);
    --bs-btn-hover-bg: var(--corinto); --bs-btn-hover-border-color: var(--corinto);
    --bs-btn-active-bg: var(--corinto); --bs-btn-active-border-color: var(--corinto);
}
.form-control:focus, .form-select:focus { border-color: var(--corinto-claro); box-shadow: 0 0 0 .2rem rgba(164, 25, 67, .18); }
.form-check-input:checked { background-color: var(--corinto); border-color: var(--corinto); }

/* --- Tarjetas --------------------------------------------------------------------- */
.card {
    --bs-card-bg: #fff;
    background: #fff;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 6px 24px rgba(0, 41, 85, .08);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--borde);
    border-radius: 1rem 1rem 0 0 !important;
    font-weight: 600;
}
.kpi { border-left: 6px solid var(--corinto); }
.kpi.morado { border-left-color: var(--corinto); }
.kpi.azul { border-left-color: var(--azul); }
.kpi.verde { border-left-color: var(--verde); }
.kpi .numero { font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.titulo-pagina { font-weight: 800; color: var(--azul); }
.titulo-pagina::after {
    content: ""; display: block; width: 64px; height: 4px; margin-top: .35rem; border-radius: 2px;
    background: linear-gradient(90deg, var(--corinto), var(--dorado), var(--lima));
}
.icono-circulo {
    display: inline-grid; place-items: center;
    width: 46px; height: 46px; border-radius: 50%;
    color: #fff; font-size: 1.3rem; flex: none;
}

/* --- Estados de llegada ------------------------------------------------------------- */
.estado-temprano { background: var(--azul-medio) !important; color: #fff !important; }
.estado-puntual { background: var(--verde) !important; color: #fff !important; }
.estado-tarde { background: var(--corinto) !important; color: #fff !important; }
.estado-sin { background: #7D8597 !important; color: #fff !important; }
.etiqueta-permiso { background: #FBE9EF; color: var(--corinto); font-weight: 600; }

/* --- Avatares y fotos ---------------------------------------------------------------- */
.avatar {
    flex: none; display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--azul), var(--corinto));
    color: #fff; font-weight: 700; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 96px; height: 96px; font-size: 2rem; }
.carnet-vista { max-width: 260px; width: 100%; border-radius: .8rem; box-shadow: 0 10px 30px rgba(0, 41, 85, .25); }

/* --- Pantalla de registro (lector QR) ---------------------------------------------- */
.lector { width: 100%; min-height: 240px; border-radius: .8rem; overflow: hidden; background: #0b1630; }
.lector video { border-radius: .8rem; }
.resultado-vacio {
    display: grid; place-items: center; gap: .25rem; min-height: 150px;
    border: 2px dashed var(--borde); border-radius: 1rem; background: #fff;
}
.resultado { animation: aparecer .25s ease-out; border-radius: 1rem; }
.resultado .avatar { width: 84px; height: 84px; font-size: 2rem; background: rgba(255, 255, 255, .25); }
.usb-activo { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--lima); animation: latido 1.4s infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- Pantallas públicas (login y registro) ---------------------------------------- */
.publico {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 85%, rgba(181, 216, 0, .30), transparent 32%),
        radial-gradient(circle at 92% 12%, rgba(164, 25, 67, .55), transparent 38%),
        radial-gradient(circle at 70% 95%, rgba(255, 182, 0, .18), transparent 30%),
        linear-gradient(160deg, var(--azul) 0%, #001a38 100%);
}
.publico .marca { background: transparent; }
.publico .marca::after, .publico .marca-circulo { display: none; }
.escudo-bienvenida { height: 150px; width: auto; filter: drop-shadow(0 10px 25px rgba(0, 0, 0, .45)); }
.tarjeta-publica { border-radius: 1.4rem; box-shadow: 0 25px 60px rgba(0, 0, 0, .35); border-top: 6px solid var(--dorado); }
.opcion-tipo input { display: none; }
.opcion-tipo label {
    display: block; cursor: pointer; text-align: center;
    border: 2px solid var(--borde); border-radius: 1rem; padding: 1rem .5rem;
    transition: all .15s;
}
.opcion-tipo label i { font-size: 1.8rem; color: var(--corinto); }
.opcion-tipo input:checked + label { border-color: var(--corinto); background: #FBEDF2; box-shadow: 0 0 0 .2rem rgba(164, 25, 67, .15); }

/* --- Pie: botón "Descargar la app" ----------------------------------------------- */
.pie-instalar { border-top: 1px solid var(--borde); margin-top: 1rem; }
.publico .pie-instalar { border-top-color: rgba(255, 255, 255, .15); color: #fff; }
.boton-instalar {
    --bs-btn-color: var(--azul); --bs-btn-bg: var(--dorado); --bs-btn-border-color: var(--dorado);
    --bs-btn-hover-color: var(--azul); --bs-btn-hover-bg: #e6a400; --bs-btn-hover-border-color: #e6a400;
    --bs-btn-active-bg: #e6a400; --bs-btn-active-border-color: #e6a400;
    font-weight: 700; border-radius: 2rem; padding-inline: 1.6rem;
    box-shadow: 0 6px 18px rgba(255, 182, 0, .35);
}

/* --- Tablas ----------------------------------------------------------------------------- */
.table > thead th { color: var(--azul); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

/* Cuadro de errores de los formularios: solo se ve cuando hay errores */
.validation-summary-valid { display: none !important; }

/* --- Padre de familia: lista de hijos ------------------------------------------------- */
.tarjeta-hijos .list-group-item { border-left: 5px solid transparent; }
.tarjeta-hijos .hijo-elegido { border-left-color: var(--dorado); background: #FFF8E1; }
.tarjeta-hijos .badge { white-space: normal; text-align: left; }
#lector-hijo { min-height: 220px; }

.fila-total td { font-weight: 800; color: var(--azul); background: #FFF6DA !important; border-top: 2px solid var(--azul); }

/* --- Impresión de reportes (Descargar PDF) ---------------------------------------------- */
.solo-imprimir { display: none; }
@page { size: letter; margin: 12mm 10mm 14mm; }
@media print {
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .marca, .menu, .no-imprimir, .btn, form, nav, .navbar { display: none !important; }
    .solo-imprimir { display: block; }
    body { background: #fff !important; font-size: 10.5pt; }
    main, main > .container, main > .container-fluid { padding: 0 !important; margin: 0 !important; max-width: none !important; }
    .card { box-shadow: none !important; border: 1px solid #D5DCE6 !important; break-inside: auto; }
    .card-header { background: #F3F6FA !important; font-weight: 700; color: var(--azul); }
    .table-responsive { overflow: visible !important; }

    /* Encabezado institucional */
    .impresion-encabezado {
        display: flex !important; align-items: center; gap: 14px;
        background: var(--azul) !important; color: #fff; padding: 10px 16px; border-radius: 8px 8px 0 0;
    }
    .impresion-encabezado img { height: 62px; width: auto; }
    .impresion-colegio { font-weight: 800; font-size: 13pt; letter-spacing: .02em; }
    .impresion-titulo { font-weight: 700; font-size: 12pt; color: var(--dorado); }
    .impresion-subtitulo { font-size: 9.5pt; color: #DDE6F2; }
    .impresion-subtitulo::first-letter { text-transform: uppercase; }
    .impresion-marca { font-weight: 800; font-size: 13pt; letter-spacing: .08em; align-self: flex-start; }
    .impresion-marca span { color: var(--lima); }
    .impresion-franja { display: flex !important; height: 5px; margin-bottom: 12px; }
    .impresion-franja span { flex: 1; }
    .impresion-franja span:nth-child(1) { background: var(--corinto) !important; }
    .impresion-franja span:nth-child(2) { background: var(--dorado) !important; }
    .impresion-franja span:nth-child(3) { background: var(--lima) !important; }

    /* Cuadros de totales: los cuatro en una fila */
    .row.g-3 { display: flex !important; flex-wrap: nowrap !important; gap: 8px; margin: 0 0 10px !important; }
    .row.g-3 > [class*="col-"] { flex: 1 1 0 !important; width: auto !important; max-width: none !important; padding: 0 !important; }
    .kpi .card-body { padding: 6px 10px !important; }
    .kpi .numero { font-size: 18pt; }

    /* Tabla */
    .table { font-size: 9.5pt; margin: 0; }
    .table > thead th { background: var(--azul) !important; color: #fff !important; border-bottom: 2px solid var(--dorado) !important; padding: 5px 6px; }
    .table > tbody td { padding: 4px 6px; }
    .table > tbody tr:nth-child(even) td { background: #F3F6FA !important; }
    .table tr { break-inside: avoid; }
    thead { display: table-header-group; }
    tfoot { display: table-row-group; }
    .badge { border: 0; font-size: 8.5pt; }
    .avatar { display: none !important; }

    /* Firmas y pie */
    .impresion-firmas { display: flex !important; justify-content: space-around; gap: 40px; margin-top: 46px; break-inside: avoid; }
    .impresion-firmas > div { flex: 0 1 240px; text-align: center; font-size: 9.5pt; color: #333; }
    .impresion-firmas span { display: block; border-top: 1px solid #333; margin-bottom: 4px; }
    .impresion-pie { margin-top: 18px; font-size: 8pt; color: #6B6475; text-align: center; }
}

/* =====================================================================================
   Nota LISFA — colores del logo (azul #11456D y verde #A7DD41). Va al final: manda sobre lo de arriba.
   ===================================================================================== */
:root {
    --nota-azul: #11456D;
    --nota-azul-oscuro: #0B3352;
    --nota-verde: #A7DD41;
    --nota-verde-oscuro: #7FB82A;
    --azul: var(--nota-azul);
    --azul-medio: #1B5A8A;
    --lima: var(--nota-verde);
    --corinto: var(--nota-azul);
    --corinto-claro: #1B5A8A;
    --corinto-oscuro: var(--nota-azul-oscuro);
    --dorado: var(--nota-verde);
    --bs-link-color: var(--nota-azul);
    --bs-link-color-rgb: 17, 69, 109;
    --bs-link-hover-color: var(--nota-verde-oscuro);
}
.marca { background: linear-gradient(115deg, var(--nota-azul-oscuro) 0%, var(--nota-azul) 60%, #1B5A8A 100%); }
.marca::after { background: linear-gradient(90deg, var(--nota-azul) 0 40%, var(--nota-verde) 40% 100%); }
.marca-nota { display: flex; align-items: center; gap: .8rem; font-weight: 900; line-height: 1;
              font-size: clamp(1.5rem, 5vw, 2.8rem); text-shadow: 0 3px 12px rgba(0, 0, 0, .3); }
.marca-nota .acento { color: var(--nota-verde); }
.marca-nota small { display: block; font-size: .3em; font-weight: 600; letter-spacing: .18em; opacity: .85; margin-top: .35rem; }
.marca-nota-simbolo { height: clamp(48px, 9vw, 72px); width: auto; border-radius: 22%; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.icono-bienvenida { height: 110px; width: auto; border-radius: 22%; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.btn-primary { --bs-btn-bg: var(--nota-azul); --bs-btn-border-color: var(--nota-azul);
               --bs-btn-hover-bg: var(--nota-azul-oscuro); --bs-btn-hover-border-color: var(--nota-azul-oscuro);
               --bs-btn-active-bg: var(--nota-azul-oscuro); --bs-btn-active-border-color: var(--nota-azul-oscuro); }
.btn-outline-primary { --bs-btn-color: var(--nota-azul); --bs-btn-border-color: var(--nota-azul);
                       --bs-btn-hover-bg: var(--nota-azul); --bs-btn-hover-border-color: var(--nota-azul); }
.publico {
    background:
        radial-gradient(circle at 8% 85%, rgba(167, 221, 65, .30), transparent 32%),
        radial-gradient(circle at 92% 12%, rgba(167, 221, 65, .22), transparent 38%),
        linear-gradient(160deg, var(--nota-azul) 0%, var(--nota-azul-oscuro) 100%);
}
.tarjeta-publica { border-top-color: var(--nota-verde); }
.logo-login { width: min(260px, 80%); height: auto; }
/* Boton amarillo "Descargar la app", igual al de CARDLISFA */
.boton-instalar {
    --bs-btn-color: var(--nota-azul-oscuro); --bs-btn-bg: #FFB600; --bs-btn-border-color: #FFB600;
    --bs-btn-hover-color: var(--nota-azul-oscuro); --bs-btn-hover-bg: #e6a400; --bs-btn-hover-border-color: #e6a400;
    --bs-btn-active-bg: #e6a400; --bs-btn-active-border-color: #e6a400;
    font-weight: 700; border-radius: 2rem; padding: .8rem 1.6rem; font-size: 1.25rem;
    width: min(100%, 560px); box-shadow: 0 6px 18px rgba(255, 182, 0, .35);
}

/* Pantalla de carga al abrir la app instalada */
.splash { display: none; position: fixed; inset: 0; z-index: 3000; background: #fff;
          flex-direction: column; align-items: center; justify-content: center; gap: 2rem; transition: opacity .4s; }
.splash.visible { display: flex; }
.splash.saliendo { opacity: 0; }
.splash img { width: min(320px, 70vw); height: auto; animation: aparecer .5s ease-out; }
.splash-barra { width: min(180px, 45vw); height: 5px; border-radius: 3px; background: #E4EEF5; overflow: hidden; }
.splash-barra span { display: block; width: 40%; height: 100%; border-radius: 3px; background: var(--nota-verde); animation: cargando 1s ease-in-out infinite; }
@keyframes cargando { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }