:root{
    --azul:#1F4E79; --azul2:#2E75B6; --azul-claro:#DEEAF1;
    --verde:#1A6B3A; --rojo:#C0392B; --gris:#6b7280;
    --bg:#f4f6f9; --card:#ffffff; --borde:#e3e8ef;
}
*{box-sizing:border-box}
body{
    margin:0; font-family:'Segoe UI',Arial,sans-serif; background:var(--bg);
    color:#1a2230; font-size:15px;
}
.topbar{
    display:flex; justify-content:space-between; align-items:center;
    background:linear-gradient(90deg,var(--azul),var(--azul2));
    color:#fff; padding:0 24px; height:60px; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px}
.logo{font-size:22px}
.nav{display:flex; align-items:center; gap:18px}
.nav a{color:#eaf1fb; text-decoration:none; font-size:14px; font-weight:500}
.nav a:hover{color:#fff; text-decoration:underline}
.user-chip{display:flex; flex-direction:column; line-height:1.1; text-align:right; font-size:13px}
.user-chip small{opacity:.75; font-size:11px}
.btn-logout{background:rgba(255,255,255,.15); padding:6px 14px; border-radius:6px}
.container{max-width:1000px; margin:28px auto; padding:0 20px}
.card{
    background:var(--card); border:1px solid var(--borde); border-radius:12px;
    padding:24px; margin-bottom:22px; box-shadow:0 1px 3px rgba(16,24,40,.05);
}
.card h2{margin:0 0 4px; font-size:19px; color:var(--azul)}
.card .sub{color:var(--gris); font-size:13px; margin-bottom:18px}
h1.page-title{font-size:22px; color:var(--azul); margin:0 0 20px}

/* Login */
.login-wrap{max-width:380px; margin:8vh auto}
.login-card{background:#fff; border-radius:14px; padding:34px 30px; box-shadow:0 8px 30px rgba(16,24,40,.12)}
.login-card .logo-big{font-size:40px; text-align:center; display:block; margin-bottom:6px}
.login-card h1{text-align:center; font-size:20px; color:var(--azul); margin:0 0 24px}

/* Form */
label{display:block; font-size:13px; font-weight:600; color:#374151; margin:14px 0 6px}
input[type=text],input[type=password],input[type=file],select{
    width:100%; padding:11px 12px; border:1px solid #cbd5e1; border-radius:8px;
    font-size:15px; background:#fff;
}
input:focus,select:focus{outline:none; border-color:var(--azul2); box-shadow:0 0 0 3px rgba(46,117,182,.15)}
.btn{
    display:inline-block; background:var(--azul2); color:#fff; border:none;
    padding:11px 22px; border-radius:8px; font-size:15px; font-weight:600;
    cursor:pointer; text-decoration:none; transition:background .15s;
}
.btn:hover{background:var(--azul)}
.btn-full{width:100%; margin-top:22px}
.btn-green{background:var(--verde)}
.btn-green:hover{background:#155029}
.btn-sm{padding:7px 14px; font-size:13px}
.btn-danger{background:var(--rojo)}
.btn-danger:hover{background:#96261a}
.btn-ghost{background:#eef2f7; color:var(--azul)}
.btn-ghost:hover{background:#e0e7f0}

/* Alerts */
.alert{padding:13px 16px; border-radius:8px; margin-bottom:18px; font-size:14px}
.alert-error{background:#fdecea; color:#a4271b; border:1px solid #f5c6c0}
.alert-ok{background:#e7f6ec; color:#1a6b3a; border:1px solid #b6e0c4}
.alert-info{background:#e8f1fb; color:#1c4e80; border:1px solid #bcd8f5}

/* Table */
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:11px 12px; text-align:left; border-bottom:1px solid var(--borde)}
th{background:#f1f5fb; color:var(--azul); font-weight:600; font-size:13px}
tr:hover td{background:#fafcff}
.tag{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600}
.tag-admin{background:#e8f1fb; color:#1c4e80}
.tag-user{background:#eef2f7; color:#475569}
.muted{color:var(--gris); font-size:13px}
.right{text-align:right}
.center{text-align:center}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-top:6px}
.stat{background:#f7fafe; border:1px solid var(--borde); border-radius:10px; padding:14px}
.stat .n{font-size:24px; font-weight:700; color:var(--azul)}
.stat .l{font-size:12px; color:var(--gris); margin-top:2px}
.footer{text-align:center; color:var(--gris); font-size:12px; padding:24px 0 30px}
.filedrop{border:2px dashed #b8c6da; border-radius:10px; padding:22px; text-align:center; background:#fafcff}
.empty{text-align:center; color:var(--gris); padding:40px 0}

/* ── Vista de informe en pantalla (ver.php) ─────────────────────────────── */
.report-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; flex-wrap:wrap}
.tabs{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap}
.tab{
    background:#e8eef6; border:1px solid var(--borde); color:var(--azul);
    padding:9px 18px; border-radius:8px 8px 0 0; font-size:14px; font-weight:600; cursor:pointer;
}
.tab.active{background:var(--azul2); color:#fff; border-color:var(--azul2)}
.tablewrap{overflow-x:auto}
table.rpt{font-size:13px; white-space:nowrap}
table.rpt th{position:sticky; top:0; background:#1F4E79; color:#fff; font-size:12px}
table.rpt td{padding:7px 10px; text-align:center}
table.rpt td.tl{text-align:left}
table.rpt td.small{font-size:12px; white-space:normal; min-width:140px}
td.pos{color:#1A6B3A; font-weight:600}
td.neg{color:#C0392B; font-weight:600}
/* colores de fila = mismos del Excel */
tr.r-tolerance td{background:#FDEBD0}
tr.r-late td{background:#FADBD8}
tr.r-ot td{background:#D5F5E3}
tr.r-late-ot td{background:#FFF9C4}
tr.r-absent td{background:#FDECEA; color:#a4271b}
tr.r-holiday td{background:#EBEBEB; color:#666}
tr.r-manual td{background:#EBF5FB}
td.c-lunch{background:#D0F0E8 !important}
tr.totrow td{background:#17375E; color:#fff; font-weight:600}
tr.totrow td.est-ok{background:#1A6B3A}
tr.totrow td.est-no{background:#96261a}
td.est-ok{background:#D5F5E3 !important; color:#1A6B3A; font-weight:700}
td.est-no{background:#FADBD8 !important; color:#96261a; font-weight:700}
td.est-part{background:#FDEBD0 !important; color:#7D3C1B; font-weight:600}
.emp-sum{background:#e8f1fb; border:1px solid #bcd8f5; border-radius:8px; padding:10px 14px; margin:12px 0; font-size:13px}
.legend{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.legend .lg{font-size:11px; padding:4px 10px; border-radius:5px; border:1px solid rgba(0,0,0,.08)}
.legend .r-tolerance{background:#FDEBD0} .legend .r-late{background:#FADBD8}
.legend .r-ot{background:#D5F5E3} .legend .r-late-ot{background:#FFF9C4}
.legend .r-absent{background:#FDECEA} .legend .r-holiday{background:#EBEBEB}
.legend .r-manual{background:#EBF5FB} .legend .c-lunch{background:#D0F0E8}

/* Impresion: ocultar navegacion y mostrar todas las pestañas */
@media print{
    .topbar,.footer,.no-print,.tabs{display:none !important}
    .tabpane{display:block !important; page-break-after:always}
    .tabpane[hidden]{display:block !important}
    .emp-pane[hidden]{display:block !important}
    .card{box-shadow:none; border:none; padding:0}
    body{background:#fff; font-size:11px}
    table.rpt{font-size:10px}
}