/* =====================================================================
   BUSHIDO ACADEMY — Contenido claro y usable + marca oscura dorada
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    --sidebar-w: 264px;

    /* Marca (oscuros + oro) */
    --ink-0: #0B0B0A;
    --ink-1: #151514;
    --ink-2: #20201E;
    --ink-3: #26261F;
    --brand-line: #34332F;

    --gold:        #D6A51E;
    --gold-bright: #F0C332;
    --gold-deep:   #806323;
    --gold-ink:    #8a6a15;   /* oro legible sobre blanco */
    --gold-grad:   linear-gradient(135deg, #F0C332 0%, #D6A51E 50%, #A9821B 100%);

    /* Contenido claro */
    --paper:   #ffffff;
    --paper-2: #f5f6f8;
    --line:    #e7e5e0;
    --fg:      #26251f;
    --fg-muted:#6f6c64;
}

* { box-sizing: border-box; }

body {
    background: var(--paper-2);
    color: var(--fg);
    font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .93rem;
    -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: 'Oswald', 'Montserrat', sans-serif;
    font-weight: 600; letter-spacing: .03em; color: #22211c; text-transform: uppercase;
}

a { color: var(--gold-ink); text-decoration: none; }
a:hover { color: #6e5410; }

/* Ornamento flor + líneas */
.divider-kamon { display:flex; align-items:center; justify-content:center; gap:.75rem; margin:.85rem 0; color:var(--gold-deep); font-size:.8rem; }
.divider-kamon::before, .divider-kamon::after { content:""; height:1px; flex:1; background:linear-gradient(90deg, transparent, var(--gold-deep)); }
.divider-kamon::after { background:linear-gradient(270deg, transparent, var(--gold-deep)); }

/* ---------- Layout ---------- */
.app-shell { display:flex; min-height:100vh; }
.app-main { flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; }
.content { flex:1; background:var(--paper); }

/* ---------- Sidebar (oscuro dorado) ---------- */
.sidebar {
    width: var(--sidebar-w);
    background: radial-gradient(300px 300px at 50% 90%, rgba(214,165,30,.05), transparent 70%), linear-gradient(180deg, #0E0E0C 0%, #0A0A09 100%);
    color: #b8b4ab;
    position: fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:1040;
    border-right: 1px solid var(--brand-line);
    transition: transform .2s ease;
}
.sidebar-brand { border-bottom:1px solid var(--brand-line); text-align:center; padding:1.4rem 1rem 1.2rem; }
.sidebar-brand .brand-logo { max-width:172px; height:auto; display:block; margin:0 auto; }
.sidebar-brand .brand-text {
    font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:.22em; text-transform:uppercase; font-size:1.15rem;
    background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sidebar .nav { padding-bottom:2rem; }
.sidebar .nav-link {
    color:#b8b4ab; border-radius:10px; margin:1px 12px; padding:.62rem .85rem;
    font-size:.87rem; font-weight:500; letter-spacing:.04em; border:1px solid transparent; transition:all .16s ease;
}
.sidebar .nav-link:hover { background:var(--ink-3); color:var(--gold-bright); }
.sidebar .nav-link.active {
    background:linear-gradient(90deg, rgba(214,165,30,.16), rgba(214,165,30,.02) 80%);
    color:var(--gold-bright); border-color:var(--brand-line); box-shadow:inset 3px 0 0 var(--gold);
}
.sidebar .nav-section {
    color:var(--gold); font-family:'Oswald',sans-serif; font-weight:500;
    font-size:.64rem; text-transform:uppercase; letter-spacing:.26em;
    margin:.7rem .95rem .15rem; padding:.95rem 0 .35rem;
    border-top:1px solid var(--gold-deep); position:relative;
}
.sidebar .nav-section::after { content:""; position:absolute; top:-1px; left:0; width:38px; height:1px; background:var(--gold); }
.sidebar::-webkit-scrollbar { width:8px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--ink-3); border-radius:8px; }
.sidebar::-webkit-scrollbar-thumb:hover { background:var(--gold-deep); }

/* ---------- Topbar (claro) ---------- */
.topbar {
    height:60px; background:#fff; border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:1030; color:var(--fg);
}
.topbar .fw-semibold { font-family:'Oswald',sans-serif; letter-spacing:.09em; text-transform:uppercase; font-weight:500; color:#2a2925; }

@media (max-width: 767.98px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .app-main { margin-left:0; }
}

/* ---------- Tarjetas (claras) ---------- */
.card { background:var(--paper); border:1px solid var(--line); border-radius:.85rem; box-shadow:0 1px 3px rgba(30,28,22,.06); }
.card .card-header, .card-footer {
    background:#fbfaf8; border-color:var(--line);
    font-family:'Oswald',sans-serif; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; color:#3a3830;
}
.stat-card { border:1px solid var(--line); border-radius:.85rem; background:var(--paper); box-shadow:0 1px 3px rgba(30,28,22,.06); transition:transform .12s, box-shadow .12s, border-color .12s; position:relative; overflow:hidden; }
.stat-card::after { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--gold-grad); opacity:0; transition:opacity .12s; }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(30,28,22,.1); border-color:#e0dcd2; }
.stat-card:hover::after { opacity:1; }
.stat-card .stat-value, .stat-value { font-family:'Oswald',sans-serif; font-weight:600; font-size:1.9rem; color:#9c7a17; line-height:1.1; }
.stat-card .stat-label, .stat-label { color:var(--fg-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:500; }
.stat-icon { font-size:1.5rem; opacity:.85; }

/* ---------- Botones ---------- */
.btn { border-radius:.55rem; font-weight:600; letter-spacing:.04em; }
.btn-primary, .btn-checkin {
    background:var(--gold-grad); border:none; color:#181206; text-transform:uppercase; font-weight:700; letter-spacing:.06em;
    box-shadow:0 2px 10px rgba(214,165,30,.28);
}
.btn-primary:hover, .btn-primary:focus, .btn-checkin:hover { background:linear-gradient(135deg,#F6D250,#D6A51E 55%,#A9821B); color:#181206; }
.btn-outline-primary { border:1px solid var(--gold-ink); color:var(--gold-ink); text-transform:uppercase; }
.btn-outline-primary:hover { background:var(--gold-ink); border-color:var(--gold-ink); color:#fff; }

/* ---------- Tablas ---------- */
.table thead th { font-family:'Oswald',sans-serif; font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-ink); }

/* ---------- Formularios ---------- */
.form-control:focus, .form-select:focus { border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(214,165,30,.15); }
.form-label { color:var(--fg-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; font-weight:500; }

/* ---------- Pestañas ---------- */
.nav-tabs .nav-link { color:var(--fg-muted); font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; }
.nav-tabs .nav-link.active { color:#7a5f12; border-bottom:2px solid var(--gold); }

/* ---------- Barras de gráfico ---------- */
.bar-chart { display:flex; flex-direction:column; gap:.5rem; }
.bar-row { display:flex; align-items:center; gap:.5rem; font-size:.85rem; }
.bar-row .bar-label { width:130px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-row .bar-track { flex:1; background:#edece8; border-radius:6px; height:16px; overflow:hidden; }
.bar-row .bar-fill { height:100%; background:var(--gold-grad); border-radius:6px; }

/* ---------- Check-in ---------- */
.checkin-search { font-size:1.15rem; padding:.75rem 1rem; }
.student-result { cursor:pointer; border-radius:.5rem; }
.student-result:hover { background:rgba(214,165,30,.1); }
.photo-thumb { width:46px; height:46px; border-radius:50%; object-fit:cover; background:#eee; }
.photo-lg { width:96px; height:96px; border-radius:50%; object-fit:cover; background:#eee; border:2px solid var(--gold); }

/* =====================================================================
   LOGIN — imagen de fondo (dojo) + tarjeta oscura
   auth.php lleva data-bs-theme="dark"
   ===================================================================== */
.auth-body {
    min-height:100vh; display:flex; align-items:center; justify-content:center; padding:18px;
    background:
        linear-gradient(rgba(8,8,7,.66), rgba(8,8,7,.82)),
        url('../img/homelogin.png') center/cover no-repeat fixed;
}
.auth-card {
    position:relative; overflow:hidden;
    background:linear-gradient(165deg, rgba(24,24,21,.92), rgba(16,16,14,.94));
    backdrop-filter:blur(4px);
    border:1px solid rgba(214,165,30,.28); border-radius:1.2rem;
    box-shadow:0 24px 70px rgba(0,0,0,.7);
    padding:2.4rem 2.2rem; width:100%; max-width:410px; color:#E7E3DA;
}
.auth-card .brand-logo { max-width:210px; height:auto; display:block; margin:0 auto 1rem; }
.auth-card .form-label { color:#b8b4ab; }
.auth-card .form-control { background:#151514; border:1px solid #34332F; color:#E7E3DA; }
.auth-card .form-control:focus { border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(214,165,30,.2); }
.auth-title { font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:.2em; text-transform:uppercase; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.auth-welcome { font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:#f2ede2; font-size:1rem; }
.auth-tag { font-size:.58rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }
.auth-card a { color:var(--gold); }
.auth-card a:hover { color:var(--gold-bright); }

/* ---------- Impresión ---------- */
@media print {
    .sidebar, .topbar, .no-print, .btn { display:none !important; }
    .app-main { margin-left:0 !important; }
    body, .content { background:#fff; }
    .content { padding:0 !important; }
}