/* ============================================================
   ZENTTRAL UI — Design Tokens (fuente unica de verdad)
   Generado desde ui-kit.html. Cambiar un token aca = cambio GLOBAL.
   :root = tema DARK (default del sistema)
   body.theme-light = tema LIGHT (integra con el toggle existente)
   ============================================================ */
:root {
  /* ---- Base (no dependen del tema) ---- */
  --primary-gradient: linear-gradient(135deg,#00d4ff,#00ffd4);
  --violet:#7c3aed;
  --radius:14px; --radius-sm:9px; --radius-lg:20px;
  --text-display:32px; --text-h1:25px; --text-h2:20px; --text-h3:16px;
  --text-body:14px; --text-sm:13px; --text-cap:11px;
  --sidebar-fg:#cbd5e1; --sidebar-active:rgba(0,212,255,0.14);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ---- Colores — DARK (default) ---- */
  --background:#0a1428; --foreground:#f1f5f9;
  --card:#111d33; --card-2:#0f1a2c; --card-foreground:#f1f5f9;
  --muted:#1a2942; --muted-foreground:#94a3b8; --dim:#64748b;
  --primary:#00d4ff; --primary-foreground:#052733;
  --secondary:#1e293b; --secondary-foreground:#e2e8f0;
  --success:#22c55e; --success-soft:rgba(34,197,94,0.15);
  --warning:#fbbf24; --warning-soft:rgba(245,158,11,0.15);
  --destructive:#ef4444; --destructive-soft:rgba(239,68,68,0.15);
  --info:#38bdf8; --info-soft:rgba(14,165,233,0.15);
  --border:rgba(255,255,255,0.09); --border-strong:rgba(255,255,255,0.15);
  --input:#0f1a2c; --ring:rgba(0,212,255,0.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 6px 22px rgba(0,0,0,0.45);
  --shadow-lg:0 18px 44px rgba(0,0,0,0.55);
  --sidebar:#0a1428;
  --primary-soft:rgba(0,212,255,0.12); --secondary-soft:rgba(255,255,255,0.06);
}

body.theme-light,
body[data-theme="light"] {
  /* ---- Colores — LIGHT ---- */
  --background:#f5f8fc; --foreground:#1e293b;
  --card:#ffffff; --card-2:#f8fafc; --card-foreground:#1e293b;
  --muted:#f1f5f9; --muted-foreground:#64748b; --dim:#94a3b8;
  --primary:#0bb6d6; --primary-foreground:#052733;
  --secondary:#f1f5f9; --secondary-foreground:#334155;
  --success:#16a34a; --success-soft:#dcfce7;
  --warning:#f59e0b; --warning-soft:#fef3c7;
  --destructive:#ef4444; --destructive-soft:#fee2e2;
  --info:#0ea5e9; --info-soft:#e0f2fe;
  --border:rgba(15,23,42,0.10); --border-strong:rgba(15,23,42,0.16);
  --input:#ffffff; --ring:rgba(0,212,255,0.30);
  --shadow-sm:0 1px 2px rgba(15,23,42,0.06);
  --shadow-md:0 4px 16px rgba(15,23,42,0.08);
  --shadow-lg:0 14px 38px rgba(15,23,42,0.14);
  --sidebar:#0e1a33;
  --primary-soft:rgba(11,182,214,0.10); --secondary-soft:rgba(15,23,42,0.05);
}

/* === COMPONENTES UI KIT (modales, cards, calendario) === */
.zt-btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:var(--font);font-weight:700;font-size:14px;padding:11px 18px;border-radius:var(--radius-sm);transition:transform .06s,filter .15s,background .15s}
.zt-btn:active{transform:translateY(1px)}
.zt-btn.primary{background:var(--primary-gradient);color:var(--primary-foreground);box-shadow:var(--shadow-sm)}
.zt-btn.secondary{background:var(--secondary);color:var(--secondary-foreground);border:1px solid var(--border-strong)}
.zt-btn.danger{background:var(--destructive);color:#fff}
.zt-btn.ghost{background:transparent;color:var(--foreground);border:1px solid var(--border-strong)}
.zt-btn.icon{padding:0;border-radius:50%;width:42px;height:42px;justify-content:center}
.zt-field{display:flex;flex-direction:column;gap:6px;min-width:220px}
.zt-field label{font-size:13px;font-weight:600}
.zt-input,.zt-select{background:var(--input);color:var(--foreground);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:11px 13px;font-size:14px;font-family:var(--font);outline:none;transition:border .15s,box-shadow .15s}
.zt-input:focus,.zt-select:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.zt-input::placeholder{color:var(--dim)}
.zt-search{display:flex;align-items:center;gap:9px;background:var(--input);border:1px solid var(--border-strong);border-radius:var(--radius);padding:11px 15px;box-shadow:var(--shadow-sm)}
.zt-search i{color:var(--muted-foreground)}
.zt-search input{border:none;background:transparent;outline:none;color:var(--foreground);font-size:14px;flex:1;font-family:var(--font)}
.zt-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px}
.zt-badge.success{background:var(--success-soft);color:var(--success)}
.zt-badge.warning{background:var(--warning-soft);color:var(--warning)}
.zt-badge.danger{background:var(--destructive-soft);color:var(--destructive)}
.zt-badge.info{background:var(--info-soft);color:var(--info)}
.zt-toggle{width:48px;height:27px;border-radius:999px;background:var(--muted);border:1px solid var(--border-strong);position:relative;cursor:pointer;transition:background .2s}
.zt-toggle::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s}
.zt-toggle.on{background:var(--primary-gradient);border-color:transparent}
.zt-toggle.on::after{left:23px}
.zt-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.zt-table th{background:var(--muted);color:var(--muted-foreground);text-align:left;font-size:12px;letter-spacing:.5px;text-transform:uppercase;padding:13px 16px;font-weight:700}
.zt-table td{padding:13px 16px;border-top:1px solid var(--border);font-size:14px}
.zt-table tr:hover td{background:var(--card-2)}
.zt-modal{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);max-width:540px;width:100%}
.zt-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;color:#fff;background:linear-gradient(135deg,var(--accent1,#0e7490),var(--accent2,#0891b2))}
.zt-modal-header h3{margin:0;font-size:17px;font-weight:800;display:flex;align-items:center;gap:10px}
.zt-modal-close{width:34px;height:34px;border-radius:50%;border:none;background:var(--destructive);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:15px;flex-shrink:0}
.zt-modal-body{padding:22px;display:flex;flex-direction:column;gap:18px}
.zt-sub-card{background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.zt-sub-card .st{font-size:13px;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.zt-modal-footer{padding:16px 22px;border-top:1px solid var(--border);display:flex;gap:10px;background:var(--card-2)}
.zt-modal-footer .zt-btn{flex:1;justify-content:center}
.zt-modal-lg{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);width:100%}
.mlg-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;color:#fff;background:linear-gradient(135deg,var(--accent1,#15803d),var(--accent2,#22c55e))}
.mlg-header .hl{display:flex;align-items:center;gap:14px}
.mlg-header .hic{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,0.18);display:grid;place-items:center;font-size:22px}
.mlg-header h3{margin:0;font-size:19px;font-weight:800}
.mlg-header .sub{font-size:13px;opacity:.9;margin-top:2px}
.mlg-body{padding:20px 22px;background:var(--card)}
.zt-cal{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-md);width:300px}
.zt-cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.zt-cal-hd .m{font-weight:800;font-size:15px;color:var(--foreground)}
.zt-cal-hd button{width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:var(--card-2);color:var(--foreground);cursor:pointer;font-size:15px}
.zt-cal-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.zt-cal-wd span{text-align:center;font-size:11px;font-weight:700;color:var(--muted-foreground)}
.zt-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.zt-cal-grid .d{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;color:var(--foreground)}
.zt-cal-grid .d:hover{background:var(--muted)}
.zt-cal-grid .d.dim{color:var(--dim);pointer-events:none}
.zt-cal-grid .d.today{border:1.5px solid var(--primary)}
.zt-cal-grid .d.sel{background:var(--primary-gradient);color:var(--primary-foreground)}
.zt-cal-grid .d.dot::after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--success)}
.zt-cal-grid .d.sel.dot::after{background:#fff}
.zt-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border)}
.zt-tab{background:none;border:none;padding:12px 18px;font-weight:700;font-size:14px;color:var(--muted-foreground);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:var(--font)}
.zt-tab:hover{color:var(--foreground)}
.zt-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.zt-tab-content{padding:20px 4px;color:var(--muted-foreground);font-size:14px}
.zt-table{table-layout:fixed}
.zt-table td{padding:9px 7px;font-size:12px;word-break:break-word}
.zt-table th{padding:8px 6px;font-size:10px;letter-spacing:0}
.mlg-header{flex-wrap:wrap;gap:10px;padding:16px}
.mlg-body{padding:14px}
.zt-modal-body{padding:16px}
.zt-cal{width:100%}

/* ── Calendario (flatpickr) token-driven — mapeado al .zt-cal del UI Kit (light/dark automatico) ── */
.flatpickr-calendar{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow-md)!important;color:var(--foreground)!important}
.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{border-bottom-color:var(--card)!important}
.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{border-top-color:var(--card)!important}
.flatpickr-months,.flatpickr-month{color:var(--foreground)!important;fill:var(--foreground)!important}
.flatpickr-current-month,.flatpickr-current-month input.cur-year,.flatpickr-current-month .flatpickr-monthDropdown-months{color:var(--foreground)!important;fill:var(--foreground)!important;font-weight:800!important}
.flatpickr-monthDropdown-months{background:var(--card)!important;color:var(--foreground)!important}
.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{fill:var(--muted-foreground)!important}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--primary)!important}
.flatpickr-weekday{color:var(--muted-foreground)!important;font-size:11px!important;font-weight:700!important}
.flatpickr-day{color:var(--foreground)!important;border-radius:9px!important;font-weight:600!important}
.flatpickr-day:hover,.flatpickr-day:focus{background:var(--muted)!important;border-color:var(--muted)!important}
.flatpickr-day.today{border:1.5px solid var(--primary)!important}
.flatpickr-day.today:hover{background:var(--muted)!important;color:var(--foreground)!important}
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus{background:var(--primary-gradient)!important;border-color:transparent!important;color:var(--primary-foreground)!important}
/* rango de fechas token-driven (evita el azul default de flatpickr) */
.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus{background:var(--primary-gradient)!important;border-color:transparent!important;color:var(--primary-foreground)!important}
.flatpickr-day.inRange{background:var(--primary-soft)!important;border-color:transparent!important;color:var(--foreground)!important;box-shadow:-5px 0 0 var(--primary-soft),5px 0 0 var(--primary-soft)!important}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:var(--dim)!important;background:transparent!important}
.flatpickr-weekdays,.flatpickr-weekdaycontainer{background:transparent!important}
span.flatpickr-weekday{background:transparent!important}
.flatpickr-innerContainer,.flatpickr-rContainer,.flatpickr-days,.dayContainer{background:var(--card)!important}