:root{
    /* aliases para usar nombres comunes en las reglas */
    --text: var(--text-main);
    --muted: var(--text-soft);
    --card: var(--card-bg);
    --border: var(--border-subtle);
    --shadow: var(--shadow-main);

--bg-grad: linear-gradient(135deg,#f0f4ff 0%,#e0e7ff 100%);
    --card-bg:#ffffff;
    --card-inner:#f8fafc;
    --accent:#3b82f6;
    --accent-soft:rgba(59,130,246,.12);
    --danger-soft:rgba(220,38,38,.15);
    --success-soft:rgba(34,197,94,.15);
    --border-subtle:rgba(148,163,184,.35);
    --text-main:#0f172a;
    --text-soft:#475569;
    --table-even:#f8fafc;
    --table-odd:#ffffff;
    --table-hover:rgba(59,130,246,.1);
    --card-gradient:radial-gradient(circle at top,#ffffff 0, #f1f5f9 55%);
    --header-grad:linear-gradient(135deg,#3b82f6,#2563eb);
    --shadow-main:rgba(15,23,42,.1);
    --shadow-hover:rgba(59,130,246,.2);
    --primary:#2b7de9;
    --success:#28a745;
    --info:#2aa0c3;
    --warning:#f39c12;
    --danger:#d23b2d;
    --warning-dark:#e67e22;
    --danger-dark:#b52a20;
    --absent:#e74c3c;
    --vacaciones:#8e44ad;
  }

  [data-theme="dark"]{
    --bg-grad: linear-gradient(135deg,#020617 0%,#0b1220 55%,#020617 100%);
    --card-bg:#020617;
    --card-inner:#0b1220;
    --accent:#3b82f6;
    --accent-soft:rgba(59,130,246,.12);
    --danger-soft:rgba(220,38,38,.15);
    --success-soft:rgba(34,197,94,.15);
    --border-subtle:rgba(148,163,184,.35);
    --text-main:#e5e7eb;
    --text-soft:#9ca3af;
    --table-even:rgba(15,23,42,.6);
    --table-odd:rgba(30,41,59,.4);
    --table-hover:linear-gradient(90deg,rgba(59,130,246,.25),rgba(37,99,235,.15));
    --card-gradient:radial-gradient(circle at top,#1f2937 0, #020617 55%);
    --header-grad:linear-gradient(135deg,#1e3a8a,#1e293b);
    --shadow-main:rgba(0,0,0,.4);
    --shadow-hover:rgba(59,130,246,.3);
  }

  
  body{
    margin:0;
    font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial;
    background:var(--bg-grad);
    color:var(--text);
    min-height:100vh;
  }
  .wrap{max-width:1200px;margin:18px auto;padding:0 14px;}
  .card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 44px var(--shadow);padding:16px;}
  .top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .muted{color:var(--muted)}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);text-decoration:none;font-weight:800;cursor:pointer}
  .btn-primary{background:var(--accent);border-color:transparent;color:white}
  table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
  th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
  thead th{position:sticky;top:0;background:var(--card-inner);color:var(--text);backdrop-filter:saturate(1.2) blur(4px)}
  tbody tr:nth-child(odd){background:var(--table-odd)}
  tbody tr:nth-child(even){background:var(--table-even)}
  tbody tr:hover{background:var(--table-hover)}
  a{color:var(--accent)}