/* =================================================================
   Control de Asistencia Docente · Colegio Nacional República de Corea
   Interfaz institucional — sobria, tipográfica, sin adornos.
   ================================================================= */

:root{
    --brand:        #12457e;   /* azul institucional */
    --brand-strong: #0e3663;
    --brand-050:    #eaf1f9;
    --brand-100:    #d5e3f2;
    --accent:       #c8102e;   /* rojo (bandera) — solo acentos/peligro */

    --nav-bg:       #0f2440;
    --nav-bg-2:     #0c1d34;
    --nav-ink:      #9fb0c7;
    --nav-ink-str:  #ffffff;
    --nav-active:   rgba(255,255,255,.09);

    --ink:          #1b2430;
    --ink-2:        #3d4757;
    --muted:        #6b7688;
    --line:         #e6e9ef;
    --line-2:       #eef1f5;
    --bg:           #f5f7fa;
    --card:         #ffffff;

    --green:  #157a53; --green-bg:  #e7f3ec;
    --amber:  #9a6712; --amber-bg:  #fbf1de;
    --red:    #b3261e; --red-bg:    #fbeceb;
    --blue:   #12457e; --blue-bg:   #e8f0f9;
    --gray:   #5b6675; --gray-bg:   #eef1f5;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(16,42,90,.06), 0 1px 3px rgba(16,42,90,.04);
    --shadow-lg: 0 12px 40px rgba(12,29,52,.18);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ font-size:15px; }
body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background:var(--bg); color:var(--ink);
    line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--brand); text-decoration:none; }
svg{ display:inline-block; vertical-align:middle; flex:0 0 auto; }
.num-tab{ font-variant-numeric:tabular-nums; }

/* ============================ LOGIN ============================ */
.login-split{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }

/* --- Panel de marca (izquierda) --- */
.login-aside{
    position:relative; overflow:hidden; color:#fff;
    padding:46px 54px; display:flex; flex-direction:column; justify-content:space-between;
    background:
        radial-gradient(1000px 520px at 78% -8%, rgba(63,121,189,.28), transparent),
        linear-gradient(158deg, #0f2440 0%, #143257 48%, #12457e 100%);
    background-color:#0f2440;
}
/* Formas decorativas sutiles (líneas diagonales) */
.login-aside-deco{ position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image:
        linear-gradient(115deg, transparent 46%, rgba(255,255,255,.05) 46%, rgba(255,255,255,.05) 49%, transparent 49%),
        linear-gradient(115deg, transparent 60%, rgba(255,255,255,.04) 60%, rgba(255,255,255,.04) 62%, transparent 62%),
        radial-gradient(340px 340px at 12% 22%, rgba(255,255,255,.045), transparent);
}
.login-aside > *{ position:relative; z-index:1; }
.login-logo{ display:inline-flex; align-items:center; gap:12px; }
.login-logo img{ width:40px; border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.login-logo b{ font-size:1.02rem; font-weight:700; letter-spacing:.3px; }
.login-aside-mid h1{ font-size:2.9rem; font-weight:800; line-height:1.04; letter-spacing:-.02em; }
.login-aside-mid h1 span{ color:#7fa8d8; }
.login-aside-mid p{ margin-top:18px; max-width:340px; font-size:.95rem; line-height:1.6; color:#b7c6dc; }
.login-aside-foot{ font-size:.78rem; color:#7f93b0; }

/* --- Panel de formulario (derecha) --- */
.login-main{ display:flex; align-items:center; justify-content:center; padding:40px 28px; background:var(--card); }
.login-form-box{ width:100%; max-width:380px; }
.login-form-box h2{ font-size:1.7rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.login-sub{ font-size:.9rem; color:var(--muted); margin:6px 0 26px; }
.login-form-box .campo{ margin-bottom:16px; }

/* Input con ícono adentro */
.input-ico{ position:relative; display:flex; align-items:center; }
.input-ico svg{ position:absolute; left:13px; color:#9aa6b6; pointer-events:none; }
.input-ico input{ width:100%; padding-left:40px !important; }

.login-form-box .btn-block{ margin-top:8px; padding:12px; font-size:.9rem; }
.login-foot{ text-align:center; margin-top:24px; font-size:.76rem; color:var(--muted); }

@media (max-width:820px){
    .login-split{ grid-template-columns:1fr; }
    .login-aside{ padding:34px 30px; min-height:auto; gap:30px; }
    .login-aside-mid h1{ font-size:2.1rem; }
    .login-aside-mid p{ display:none; }
    .login-aside-foot{ display:none; }
}

/* ============================ LAYOUT ============================ */
.app{ display:flex; min-height:100vh; }

.sidebar{
    width:246px; background:linear-gradient(180deg,var(--nav-bg),var(--nav-bg-2));
    color:var(--nav-ink); display:flex; flex-direction:column;
    position:fixed; inset:0 auto 0 0; z-index:40; transition:transform .22s ease;
}
.brand{
    padding:20px 20px 18px; display:flex; align-items:center; gap:12px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.brand .tile{ width:42px; height:42px; background:#fff; border-radius:9px; padding:4px; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center; }
.brand .tile img{ width:100%; border-radius:4px; }
.brand .txt{ line-height:1.25; }
.brand .txt b{ color:#fff; font-size:.9rem; font-weight:650; letter-spacing:.2px; }
.brand .txt span{ display:block; color:var(--nav-ink); font-size:.72rem; margin-top:2px; }

.nav{ padding:14px 12px; flex:1; overflow-y:auto; }
.nav .grp{ padding:14px 12px 6px; font-size:.68rem; font-weight:600; letter-spacing:.09em;
    text-transform:uppercase; color:#6a7c96; }
.nav a{
    display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:8px;
    color:var(--nav-ink); font-size:.875rem; font-weight:500; margin-bottom:2px;
    position:relative; transition:background .13s, color .13s;
}
.nav a svg{ color:#7f92ac; transition:color .13s; }
.nav a:hover{ background:var(--nav-active); color:#e7edf5; }
.nav a:hover svg{ color:#cdd8e6; }
.nav a.on{ background:var(--nav-active); color:#fff; font-weight:600; }
.nav a.on svg{ color:#fff; }
.nav a.on::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
    border-radius:0 3px 3px 0; background:var(--accent); }

.nav-foot{ padding:12px; border-top:1px solid rgba(255,255,255,.08); }
.nav-foot a{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:8px;
    color:var(--nav-ink); font-size:.875rem; font-weight:500; }
.nav-foot a svg{ color:#7f92ac; }
.nav-foot a:hover{ background:rgba(200,16,46,.14); color:#ffd9dd; }
.nav-foot a:hover svg{ color:#ffb3bb; }

/* ---- contenido ---- */
.contenido{ flex:1; margin-left:246px; min-width:0; display:flex; flex-direction:column; min-height:100vh; }

.topbar{
    height:62px; background:var(--card); border-bottom:1px solid var(--line);
    padding:0 26px; display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:30;
}
.topbar .left{ display:flex; align-items:center; gap:14px; }
.topbar h2{ font-size:1.02rem; font-weight:650; color:var(--ink); letter-spacing:-.01em; }
.topbar .sub{ font-size:.76rem; color:var(--muted); margin-top:1px; }
.topbar .user{ display:flex; align-items:center; gap:11px; }
.topbar .user .meta{ text-align:right; line-height:1.2; }
.topbar .user .meta b{ font-size:.82rem; font-weight:600; color:var(--ink-2); }
.topbar .user .meta span{ font-size:.7rem; color:var(--muted); }
.avatar{ width:36px; height:36px; border-radius:9px; background:var(--brand); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:650; font-size:.85rem; }
.hamb{ display:none; background:none; border:none; color:var(--ink-2); cursor:pointer; padding:4px; }

.main{ padding:24px 26px 40px; flex:1; }
.pagefoot{ padding:16px 26px; border-top:1px solid var(--line); color:var(--muted);
    font-size:.74rem; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }

/* ============================ STATS ============================ */
.grid-stats{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); margin-bottom:20px; }
.stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:18px 18px 16px; box-shadow:var(--shadow); }
.stat .top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.stat .chip{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.stat .lbl{ font-size:.78rem; color:var(--muted); font-weight:500; }
.stat .num{ font-size:1.75rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1;
    font-variant-numeric:tabular-nums; }
.chip.blue{ background:var(--blue-bg); color:var(--blue); }
.chip.green{ background:var(--green-bg); color:var(--green); }
.chip.amber{ background:var(--amber-bg); color:var(--amber); }
.chip.red{ background:var(--red-bg); color:var(--red); }

/* ============================ CARD ============================ */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; }
.card-head{ padding:15px 20px; border-bottom:1px solid var(--line-2);
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.card-head h3{ font-size:.95rem; font-weight:650; color:var(--ink); display:flex; align-items:center; gap:9px; }
.card-head h3 svg{ color:var(--brand); }
.card-body{ padding:20px; }
.card-body.p0{ padding:0; }
.card-narrow{ max-width:820px; }

/* ============================ TABLA ============================ */
.tabla-wrap{ overflow-x:auto; }
table.tabla{ width:100%; border-collapse:collapse; font-size:.86rem; }
table.tabla th{ text-align:left; padding:11px 18px; background:#fafbfc; color:var(--muted);
    font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
    white-space:nowrap; border-bottom:1px solid var(--line); }
table.tabla td{ padding:12px 18px; border-top:1px solid var(--line-2); color:var(--ink-2); vertical-align:middle; }
table.tabla tbody tr:hover{ background:#fafbfd; }
table.tabla td strong{ color:var(--ink); font-weight:600; }
.vacio{ text-align:center; color:var(--muted); padding:44px 20px; font-size:.88rem; }

/* ============================ EN VIVO ============================ */
.live-badge{ display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:600;
    color:var(--ink-2); cursor:pointer; user-select:none; padding:5px 10px; border:1px solid var(--line);
    border-radius:999px; background:#fff; }
.live-badge input{ position:absolute; opacity:0; width:0; height:0; }
.live-dot{ width:8px; height:8px; border-radius:50%; background:#cbd3dd; flex:0 0 auto; }
/* Activo: punto verde que late */
.live-badge:has(input:checked){ color:var(--green); border-color:#c3e6d3; background:var(--green-bg); }
.live-badge:has(input:checked) .live-dot{ background:var(--green); box-shadow:0 0 0 0 rgba(21,122,83,.5);
    animation:latido 1.6s ease-out infinite; }
@keyframes latido{ 0%{ box-shadow:0 0 0 0 rgba(21,122,83,.45); } 70%{ box-shadow:0 0 0 7px rgba(21,122,83,0); }
    100%{ box-shadow:0 0 0 0 rgba(21,122,83,0); } }
/* Fila recién llegada: destello verde que se desvanece */
tr.fila-nueva > td{ animation:resaltar 2.4s ease-out; }
@keyframes resaltar{ 0%{ background:#d7f0e2; } 100%{ background:transparent; } }

/* ============================ BADGE ============================ */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:6px;
    font-size:.74rem; font-weight:600; line-height:1.4; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; }
.badge.no-dot::before{ display:none; }
.badge.green{ background:var(--green-bg); color:var(--green); }
.badge.red{ background:var(--red-bg); color:var(--red); }
.badge.amber{ background:var(--amber-bg); color:var(--amber); }
.badge.blue{ background:var(--blue-bg); color:var(--blue); }
.badge.gray{ background:var(--gray-bg); color:var(--gray); }

/* ============================ BOTONES ============================ */
.btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--radius-sm);
    border:1px solid transparent; font-size:.85rem; font-weight:600; cursor:pointer; font-family:inherit;
    transition:background .13s, border-color .13s, color .13s; white-space:nowrap; }
.btn svg{ margin:-1px 0; }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-strong); }
.btn-ghost{ background:#fff; color:var(--ink-2); border-color:var(--line); }
.btn-ghost:hover{ background:#f7f9fc; border-color:var(--brand-100); color:var(--brand); }
.btn-danger{ background:#fff; color:var(--red); border-color:#f0cfce; }
.btn-danger:hover{ background:var(--red-bg); }
.btn-sm{ padding:6px 11px; font-size:.8rem; }
.btn-block{ width:100%; justify-content:center; padding:11px; }
.acciones{ display:flex; gap:7px; flex-wrap:wrap; }

/* ============================ FORM ============================ */
.form-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.campo{ display:flex; flex-direction:column; gap:6px; }
.campo.full{ grid-column:1/-1; }
.campo label{ font-size:.8rem; font-weight:600; color:var(--ink-2); }
.campo input, .campo select, .campo textarea{
    padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
    font-size:.88rem; font-family:inherit; color:var(--ink); background:#fff; transition:border-color .13s, box-shadow .13s; }
.campo input::placeholder{ color:#a7b0bd; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
    outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(18,69,126,.12); }
.campo .ayuda{ font-size:.74rem; color:var(--muted); }
.check-inline{ display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--ink-2); cursor:pointer; font-weight:500; }
.check-inline input{ width:16px; height:16px; accent-color:var(--brand); }
.form-actions{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--line-2); }

.filtros{ display:flex; gap:13px; flex-wrap:wrap; align-items:flex-end; }
.filtros .campo{ min-width:150px; }
.filtros .btn{ height:38px; }

/* ============================ ALERTA ============================ */
.alerta{ display:flex; align-items:flex-start; gap:10px; padding:12px 15px; border-radius:var(--radius-sm);
    font-size:.85rem; margin-bottom:18px; border:1px solid; line-height:1.45; }
.alerta svg{ margin-top:1px; }
.alerta.ok{ background:var(--green-bg); color:#0f5a3d; border-color:#c3e6d3; }
.alerta.error{ background:var(--red-bg); color:#8f1e18; border-color:#f0cfce; }
.alerta.warn{ background:var(--amber-bg); color:#7a5210; border-color:#f0dcb4; }
.alerta.info{ background:var(--blue-bg); color:var(--brand-strong); border-color:var(--brand-100); }
.alerta b{ font-weight:650; }

/* ============================ MINI CHART ============================ */
.chart{ display:flex; align-items:flex-end; gap:14px; height:158px; padding:22px 4px 0; }
.chart .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.chart .barra{ width:64%; max-width:38px; background:linear-gradient(180deg,#3f79bd,var(--brand));
    border-radius:5px 5px 0 0; min-height:4px; position:relative; }
.chart .barra span{ position:absolute; top:-19px; left:50%; transform:translateX(-50%);
    font-size:.72rem; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.chart .dia{ font-size:.72rem; color:var(--muted); text-transform:capitalize; }

/* ============================ INFO BOX (conexión) ============================ */
.codebox{ background:#0f2440; color:#cfe0f5; border-radius:var(--radius-sm); padding:12px 12px 12px 16px;
    font-family:'SFMono-Regular', ui-monospace, Consolas, monospace; font-size:.85rem; word-break:break-all;
    display:flex; align-items:center; gap:12px; }
.codebox .btn-ghost{ background:rgba(255,255,255,.08); color:#dceaf9; border-color:rgba(255,255,255,.18); flex:0 0 auto; }
.codebox .btn-ghost:hover{ background:rgba(255,255,255,.16); color:#fff; }

.sub-sec{ display:flex; align-items:center; gap:7px; font-size:.78rem; font-weight:650; color:var(--brand);
    text-transform:uppercase; letter-spacing:.04em; margin:22px 0 12px; padding-bottom:8px;
    border-bottom:1px solid var(--line-2); }
.sub-sec svg{ color:var(--brand); }

.pasos{ counter-reset:paso; list-style:none; }
.pasos li{ position:relative; padding:0 0 16px 40px; counter-increment:paso; }
.pasos li::before{ content:counter(paso); position:absolute; left:0; top:0; width:26px; height:26px;
    background:var(--brand-050); color:var(--brand); border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:.8rem; font-weight:700; }
.pasos li:not(:last-child)::after{ content:""; position:absolute; left:13px; top:28px; bottom:2px;
    width:2px; background:var(--line); }
.pasos li b{ color:var(--ink); }
.pasos li p{ font-size:.85rem; color:var(--ink-2); margin-top:2px; }

/* ============================ MODAL CONFIRM ============================ */
.btn-solid-danger{ background:var(--red); color:#fff; }
.btn-solid-danger:hover{ background:#8f1e18; }

.modal-cap{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
    padding:20px; background:rgba(11,23,41,.5); backdrop-filter:blur(2px); }
.modal-cap.show{ display:flex; }
.modal{ background:var(--card); width:100%; max-width:400px; border-radius:14px; padding:26px 24px 20px;
    box-shadow:var(--shadow-lg); text-align:center; animation:modalIn .16s ease; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.modal-ico{ width:52px; height:52px; border-radius:50%; margin:0 auto 14px; display:flex;
    align-items:center; justify-content:center; background:var(--blue-bg); color:var(--brand); }
.modal-ico.danger{ background:var(--red-bg); color:var(--red); }
.modal-title{ font-size:1.02rem; font-weight:650; color:var(--ink); margin-bottom:6px; }
.modal-msg{ font-size:.88rem; color:var(--ink-2); line-height:1.5; margin-bottom:22px; }
.modal-actions{ display:flex; gap:10px; }
.modal-actions .btn{ flex:1; justify-content:center; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:880px){
    .sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-lg); }
    .sidebar.open{ transform:translateX(0); }
    .contenido{ margin-left:0; }
    .hamb{ display:inline-flex; }
    .overlay{ display:none; position:fixed; inset:0; background:rgba(11,23,41,.45); z-index:35; }
    .overlay.on{ display:block; }
    .topbar .user .meta{ display:none; }
    .topbar .sub{ display:none; }
    .main{ padding:18px 16px 32px; }
}