/* ============================================================
   Sistema RR.HH. UGEL Lauricocha v2 — styles.css
   ============================================================ */
:root {
  --azul:      #1a56db;
  --azul-dark: #1e3a5f;
  --azul-l:    #eff6ff;
  --sidebar-w: 240px;
  --bg:        #f0f4f8;
  --line:      #e2e8f0;
  --ink:       #1e293b;
  --muted:     #64748b;
  --shadow:    0 2px 8px rgba(0,0,0,.07);
  --r:         .75rem;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito',system-ui,sans-serif;background:var(--bg);color:var(--ink)}
.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}

/* ── Login ─────────────────────────────────────────────────── */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e3a5f,#1a56db,#0891b2)}
.login-card{width:360px;background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.15)}
.login-header{background:#f8fafc;border-bottom:2px solid var(--line);padding:1.5rem;text-align:center}
.login-header img{height:76px;object-fit:contain}
.login-header h5{color:var(--azul-dark);font-size:1rem}
.login-header small{color:var(--azul);font-weight:600;font-size:.8rem}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar{width:var(--sidebar-w);min-height:100vh;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:1000;
  overflow-y:auto;padding:1.25rem 1rem;gap:.25rem;box-shadow:2px 0 8px rgba(0,0,0,.06)}
.sidebar-logo{width:100%;max-width:190px;object-fit:contain;display:block;margin:0 auto .75rem;
  padding:.5rem;background:#f8fafc;border-radius:.5rem;border:1px solid var(--line)}
.sidebar-label{font-size:10px;font-weight:800;letter-spacing:1.2px;color:var(--muted);
  padding:.5rem .5rem .25rem;text-transform:uppercase}
.sidebar-nav{display:flex;flex-direction:column;gap:2px}
.sidebar-nav .nav-link{display:flex;align-items:center;gap:.625rem;color:var(--muted);background:transparent;
  border:none;border-radius:.5rem;padding:.55rem .875rem;font-size:13.5px;font-weight:500;
  text-align:left;width:100%;transition:all .15s;position:relative;cursor:pointer}
.sidebar-nav .nav-link i{font-size:16px;flex-shrink:0}
.sidebar-nav .nav-link:hover{background:var(--azul-l);color:var(--azul)}
.sidebar-nav .nav-link.active{background:linear-gradient(90deg,var(--azul),#0891b2);color:#fff;font-weight:700;box-shadow:0 4px 12px rgba(26,86,219,.3)}
.nav-badge{margin-left:auto;background:#ef4444;color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:1px 6px}
.sidebar-links{display:flex;flex-direction:column;gap:3px}
.sidebar-link{display:flex;align-items:center;gap:.5rem;color:var(--azul);font-size:12px;font-weight:600;
  padding:.375rem .875rem;border-radius:.5rem;text-decoration:none}
.sidebar-link:hover{background:var(--azul-l)}
.sidebar-footer{margin-top:auto;padding:.75rem .5rem 0;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;gap:.5rem}
.btn-logout{background:transparent;border:1px solid var(--line);border-radius:.5rem;padding:5px 10px;
  font-size:12px;color:var(--muted);cursor:pointer;transition:background .15s;font-family:inherit}
.btn-logout:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca}

/* ── Main ──────────────────────────────────────────────────── */
.main-wrap{margin-left:var(--sidebar-w);padding:1.5rem 1.75rem 2rem;min-width:0}
.view{display:none}.view.active{display:block}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;
  padding-bottom:1.25rem;border-bottom:2px solid var(--line);flex-wrap:wrap}
.eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#0891b2;margin-bottom:3px}
.page-title{font-size:1.75rem;font-weight:800;color:var(--azul-dark);margin:0;line-height:1.2}

/* ── Cards ─────────────────────────────────────────────────── */
.card{border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--shadow)!important;overflow:hidden}
.card-header{background:#fff!important;border-bottom:1px solid var(--line)!important;padding:.875rem 1.25rem!important;font-size:14px;font-weight:600}
.modal-ugel{background:linear-gradient(90deg,var(--azul-dark),var(--azul));color:#fff}
.modal-ugel .modal-title{font-size:15px;font-weight:700;color:#fff}

/* ── Metrics ───────────────────────────────────────────────── */
.metric-card{background:#fff;border-radius:var(--r);padding:1rem 1.25rem;display:flex;align-items:center;
  gap:1rem;box-shadow:var(--shadow);border-top:3px solid var(--acc,var(--azul));transition:transform .18s}
.metric-card:hover{transform:translateY(-2px)}
.metric-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.metric-label{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:2px}
.metric-value{font-size:1.8rem;font-weight:800;line-height:1;color:var(--ink)}

/* ── Tables ────────────────────────────────────────────────── */
.ugel-table thead th{background:#f1f5f9;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--line);padding:.75rem 1rem;white-space:nowrap}
.ugel-table tbody td{padding:.75rem 1rem;border-color:#f1f5f9;vertical-align:middle}
.ugel-table tbody tr:hover td{background:#f0f7ff}
.ugel-table tbody tr:last-child td{border-bottom:none}

/* ── Badges ────────────────────────────────────────────────── */
.badge-cas,.badge-276,.badge-29944,.badge-pract,.badge-other{font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:999px;display:inline-block;white-space:nowrap}
.badge-cas{background:#dbeafe;color:#1d4ed8}
.badge-276{background:#dcfce7;color:#166534}
.badge-29944{background:#fef9c3;color:#854d0e}
.badge-pract{background:#fce7f3;color:#be185d}
.badge-other{background:#f1f5f9;color:#475569}
.sp{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px}
.sp.ok{background:#dcfce7;color:#166534}
.sp.warning{background:#fef3c7;color:#92400e}
.sp.danger{background:#fee2e2;color:#991b1b}
.sp.muted{background:#f1f5f9;color:#475569}
.sp.blue{background:#dbeafe;color:#1e40af}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-ugel{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:700;border-radius:8px}
.btn-ugel:hover{background:#1239a0;border-color:#1239a0;color:#fff}

/* ── Asistencia ────────────────────────────────────────────── */
.att-radio-group{display:flex;gap:3px;justify-content:center}
.att-btn{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:7px;border:1.5px solid #cbd5e1;
  background:#fff;color:#64748b;cursor:pointer;transition:all .12s}
.att-btn.sel-P{background:#dcfce7;border-color:#22c55e;color:#166534}
.att-btn.sel-A{background:#fee2e2;border-color:#ef4444;color:#991b1b}
.att-btn.sel-T{background:#fef3c7;border-color:#f59e0b;color:#92400e}
.att-btn.sel-L{background:#dbeafe;border-color:#3b82f6;color:#1e40af}
.att-time{width:90px;font-size:12px;padding:4px 6px;border:1px solid #cbd5e1;border-radius:7px;
  text-align:center;font-family:inherit}
.att-obs{width:100%;font-size:12px;padding:4px 8px;border:1px solid #cbd5e1;border-radius:7px;font-family:inherit}
.att-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
.chip-P{background:#dcfce7;color:#166534}
.chip-A{background:#fee2e2;color:#991b1b}
.chip-T{background:#fef3c7;color:#92400e}
.chip-L{background:#dbeafe;color:#1e40af}
.chip-N{background:#f1f5f9;color:#475569}

/* ── Biométrico ────────────────────────────────────────────── */
.badge-entrada{background:#dcfce7;color:#166534;font-weight:700;border-radius:999px;padding:3px 10px;font-size:11px}
.badge-salida {background:#fef3c7;color:#92400e;font-weight:700;border-radius:999px;padding:3px 10px;font-size:11px}

/* ── Dashboard items ───────────────────────────────────────── */
.dash-item{background:#fafbfc;border:1px solid var(--line);border-left:4px solid transparent;
  border-radius:8px;padding:.625rem .875rem;font-size:13px;display:flex;justify-content:space-between;
  align-items:center;gap:.5rem;margin-bottom:.5rem}
.dash-item.danger{border-left-color:#ef4444}
.dash-item.warning{border-left-color:#f59e0b}

/* ── Toast ─────────────────────────────────────────────────── */
#appToast{border-radius:10px!important}
#appToast .toast-body{font-size:13.5px;font-weight:600}

@media(max-width:768px){.sidebar{display:none}.main-wrap{margin-left:0;padding:1rem}}
@media print{.sidebar,.topbar,.no-print{display:none!important}.main-wrap{margin:0;padding:0}}