/* =====================================================================
   Nómina 360 Pro — Capa de identidad sobre Bootstrap 5
   Paleta JANICK: azul marino + celeste, tipografía con números tabulares.
   ===================================================================== */
:root{
  --n-ink:      #12283a;   /* texto principal, casi negro azulado */
  --n-ink-soft: #4a5b6b;
  --n-brand:    #1c4f8f;   /* azul JANICK */
  --n-brand-d:  #11315c;
  --n-accent:   #3fb6d8;   /* celeste JANICK */
  --n-accent-d: #2b93b0;
  --n-bg:       #eef1f4;
  --n-surface:  #ffffff;
  --n-line:     #dbe2e8;
  --n-ok:       #1f9d55;
  --n-danger:   #d64545;
  --n-warn:     #b8860b;
  --n-shadow:   0 1px 2px rgba(18,40,58,.06), 0 8px 24px rgba(18,40,58,.06);
  --n-radius:   10px;
}

body.theme-rosa{
  --n-ink:      #5b2a3f;
  --n-ink-soft: #7b4b62;
  --n-brand:    #d46a9e;
  --n-brand-d:  #b14b7d;
  --n-accent:   #f4a6c1;
  --n-accent-d: #eb88b1;
  --n-bg:       #fff4f8;
  --n-surface:  #fffdfd;
  --n-line:     #f3dce7;
  --n-ok:       #2f9d74;
  --n-danger:   #d64545;
  --n-warn:     #b8860b;
  --n-shadow:   0 1px 2px rgba(182, 88, 130, 0.12), 0 8px 24px rgba(182, 88, 130, 0.12);
}

body.theme-verde{
  --n-ink:      #1f3d33;
  --n-ink-soft: #4a6a5c;
  --n-brand:    #1f9d74;
  --n-brand-d:  #157a5a;
  --n-accent:   #6ee7b7;
  --n-accent-d: #34d399;
  --n-bg:       #f2fbf7;
  --n-surface:  #fdfffe;
  --n-line:     #d7ece3;
  --n-ok:       #1f9d55;
  --n-danger:   #d64545;
  --n-warn:     #b8860b;
  --n-shadow:   0 1px 2px rgba(31,157,116,.10), 0 8px 24px rgba(31,157,116,.10);
}

body.theme-morado{
  --n-ink:      #362a5b;
  --n-ink-soft: #5c4e7d;
  --n-brand:    #6d3fc9;
  --n-brand-d:  #5225a3;
  --n-accent:   #c4b5fd;
  --n-accent-d: #a78bfa;
  --n-bg:       #f7f4fd;
  --n-surface:  #fdfcff;
  --n-line:     #e4dcf7;
  --n-ok:       #1f9d55;
  --n-danger:   #d64545;
  --n-warn:     #b8860b;
  --n-shadow:   0 1px 2px rgba(109,63,201,.10), 0 8px 24px rgba(109,63,201,.10);
}

body.theme-naranja{
  --n-ink:      #4a2a17;
  --n-ink-soft: #7a5540;
  --n-brand:    #c2510f;
  --n-brand-d:  #9a3412;
  --n-accent:   #fdba74;
  --n-accent-d: #fb923c;
  --n-bg:       #fff7f0;
  --n-surface:  #fffdfb;
  --n-line:     #f6e2ce;
  --n-ok:       #1f9d55;
  --n-danger:   #d64545;
  --n-warn:     #b8860b;
  --n-shadow:   0 1px 2px rgba(194,81,15,.10), 0 8px 24px rgba(194,81,15,.10);
}

/* Selector de tema (swatches) en el formulario de Usuarios */
.tema-swatch{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--n-line); border-radius:999px;
  padding:5px 10px 5px 6px; cursor:pointer; font-size:12.5px;
}
.tema-swatch input{ display:none; }
.tema-swatch .dot{
  width:18px; height:18px; border-radius:50%; background:var(--sw);
  display:inline-block; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7), 0 0 0 1px rgba(0,0,0,.08);
}
.tema-swatch:has(input:checked){
  border-color:var(--sw); font-weight:600; background:rgba(0,0,0,.03);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--n-bg);
  color:var(--n-ink);
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
}
.tabular{ font-variant-numeric:tabular-nums; }

/* ---------------- Shell: sidebar + topbar ---------------- */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:248px; flex:0 0 248px;
  background:linear-gradient(180deg,var(--n-brand-d),var(--n-brand));
  color:#e2edf9;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar .brand{
  padding:18px 20px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sidebar .brand .brand-logo{
  height:34px; width:auto; max-width:120px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
  background:#fff; border-radius:6px; padding:3px 6px;
}
.sidebar .brand b{ font-size:15px; letter-spacing:.2px; color:#fff; }
.sidebar .brand small{ display:block; font-size:11px; color:#a9c8e8; }

.sidebar nav{ padding:10px 8px; overflow-y:auto; flex:1; }
.sidebar nav .group{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
  color:#8fb3dd; padding:14px 12px 6px;
}
.sidebar nav a{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; margin:1px 4px; border-radius:8px;
  color:#dbe8f9; text-decoration:none; font-size:13.5px; line-height:1.2;
}
.sidebar nav a .ic{ width:18px; text-align:center; opacity:.9; }
.sidebar nav a:hover{ background:rgba(255,255,255,.09); color:#fff; }
.sidebar nav a.active{ background:var(--n-accent); color:var(--n-ink); font-weight:600; }
.sidebar nav a.active .ic{ opacity:1; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  background:var(--n-surface); border-bottom:1px solid var(--n-line);
  padding:12px 22px; display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:20;
}
.topbar .page-title{ font-weight:700; font-size:16px; margin:0; }
.topbar .spacer{ flex:1; }
.topbar .empresa-pill{
  background:#e9f2fb; color:var(--n-brand-d);
  border:1px solid #cbdff3; border-radius:999px;
  padding:5px 12px; font-size:12.5px; font-weight:600;
}
.badge-lic{ font-size:11px; padding:4px 9px; border-radius:999px; font-weight:700; letter-spacing:.03em; }
.badge-lic.demo{ background:#fdecc8; color:#8a5b00; border:1px solid #f0cf88; }
.badge-lic.pro{ background:#d6f3e2; color:#0c6b39; border:1px solid #a8e2c1; }

.content{ padding:22px; }

/* ---------------- Cards / surfaces ---------------- */
.card-n{
  background:var(--n-surface); border:1px solid var(--n-line);
  border-radius:var(--n-radius); box-shadow:var(--n-shadow);
}
.card-n .card-h{
  padding:14px 18px; border-bottom:1px solid var(--n-line);
  display:flex; align-items:center; gap:10px;
}
.card-n .card-h h2{ font-size:15px; margin:0; font-weight:700; }
.card-n .card-b{ padding:18px; }

/* Métricas del dashboard */
.stat{
  background:var(--n-surface); border:1px solid var(--n-line);
  border-radius:var(--n-radius); padding:16px 18px; box-shadow:var(--n-shadow);
  display:flex; flex-direction:column; gap:2px;
}
.stat .k{ font-size:12px; color:var(--n-ink-soft); text-transform:uppercase; letter-spacing:.06em; }
.stat .v{ font-size:26px; font-weight:800; letter-spacing:-.02em; }
.stat .v small{ font-size:14px; font-weight:600; color:var(--n-ink-soft); }
.stat.accent{ border-top:3px solid var(--n-accent); }
.stat.brand{ border-top:3px solid var(--n-brand); }
.stat.ok{ border-top:3px solid var(--n-ok); }

/* ---------------- Tablas ---------------- */
.table-n{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.table-n thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--n-ink-soft); background:#f6f9fb; padding:10px 12px;
  border-bottom:1px solid var(--n-line); position:sticky; top:0;
}
.table-n tbody td{ padding:9px 12px; border-bottom:1px solid #eef2f5; }
.table-n tbody tr:hover{ background:#f9fbfc; }
.table-n td.num, .table-n th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.table-n tfoot td{ padding:10px 12px; font-weight:700; border-top:2px solid var(--n-line); background:#f6f9fb; }

/* ---------------- Botones (sobre Bootstrap) ---------------- */
.btn-brand{ background:var(--n-brand); border-color:var(--n-brand); color:#fff; }
.btn-brand:hover{ background:var(--n-brand-d); border-color:var(--n-brand-d); color:#fff; }
.btn-accent{ background:var(--n-accent); border-color:var(--n-accent); color:var(--n-ink); font-weight:600; }
.btn-accent:hover{ background:var(--n-accent-d); border-color:var(--n-accent-d); color:var(--n-ink); }

/* ---------------- Formularios ---------------- */
.form-label{ font-size:12.5px; font-weight:600; color:var(--n-ink); margin-bottom:4px; }
.form-control, .form-select{ font-size:14px; border-color:var(--n-line); }
.form-control:focus, .form-select:focus{
  border-color:var(--n-brand); box-shadow:0 0 0 3px rgba(28,79,143,.14);
}
.req::after{ content:" *"; color:var(--n-danger); }

/* ---------------- Login ---------------- */
.login-wrap{
  min-height:100vh; display:grid; place-items:center;
  background:radial-gradient(1200px 600px at 20% -10%, var(--n-brand), var(--n-brand-d));
  padding:24px;
}
.login-card{
  width:100%; max-width:400px; background:#fff; border-radius:16px;
  box-shadow:0 30px 60px rgba(0,0,0,.28); overflow:hidden;
}
.login-card .head{
  padding:26px 28px 18px; text-align:center;
  border-bottom:1px solid var(--n-line);
}
.login-card .head .login-logo{
  height:52px; width:auto; max-width:220px; margin:0 auto 10px; display:block;
}
.login-card .body{ padding:24px 28px 28px; }

/* ---------------- Impresión (rol individual / reportes) ---------------- */
@media print{
  .sidebar,.topbar,.no-print{ display:none !important; }
  .main,.content{ padding:0 !important; }
  body{ background:#fff; }
  .card-n{ box-shadow:none; border:1px solid #999; }
}

/* ---------------- Responsivo ---------------- */
@media (max-width: 900px){
  .sidebar{ position:fixed; z-index:50; transform:translateX(-100%); transition:transform .2s; }
  .sidebar.open{ transform:translateX(0); }
  .menu-toggle{ display:inline-flex !important; }
}
.menu-toggle{ display:none; }

/* Utilidades */
.text-soft{ color:var(--n-ink-soft); }
.text-ok{ color:var(--n-ok); }
.text-danger2{ color:var(--n-danger); }
.hr-n{ border:none; border-top:1px solid var(--n-line); margin:14px 0; }
.empty{
  text-align:center; padding:40px 20px; color:var(--n-ink-soft);
}
.empty .ic{ font-size:34px; opacity:.5; }