/* Medianoche — la estética de las apps Pro de Apple y visionOS: fondo profundo con luz ambiental,
   paneles de vidrio, cifras grandes y un acento luminoso de la marca. Siempre oscuro. */
html[data-tema="medianoche"]:not([data-z]) {
  color-scheme: dark;
  --brand: #9ca6c5; --brand-ink: #081028; --brand-soft: rgba(143,176,255,.14); --navy: #070b16;
  --bg: #070b16; --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.075);
  --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.14);
  --ink: #eef2fb; --ink-2: #b4bdd2; --ink-3: #7d88a3;
  --ok: #4fd49a; --ok-soft: rgba(79,212,154,.12); --warn: #f5b64a; --warn-soft: rgba(245,182,74,.12); --bad: #ff7a70; --bad-soft: rgba(255,122,112,.13); --info: #7fb4ff; --info-soft: rgba(127,180,255,.12);
  --radius: 20px; --shadow: 0 20px 50px rgba(0,0,0,.45);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --top: 64px;
}
html[data-tema="medianoche"] body { background:
  radial-gradient(1200px 600px at 15% -10%, rgba(64,96,190,.35), transparent 60%),
  radial-gradient(900px 500px at 100% 0%, rgba(40,120,160,.18), transparent 60%),
  #070b16; background-attachment: fixed; }
html[data-tema="medianoche"] .side { background: rgba(10,15,30,.55); -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%); border-right: 1px solid rgba(255,255,255,.06); }
html[data-tema="medianoche"] .side .grp { color: #6a7592; letter-spacing: .1em; }
html[data-tema="medianoche"] .side nav a { color: #b4bdd2; }
html[data-tema="medianoche"] .side nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
html[data-tema="medianoche"] .side nav a.on { background: linear-gradient(180deg, rgba(143,176,255,.22), rgba(143,176,255,.12)); color: #fff; box-shadow: inset 0 0 0 1px rgba(143,176,255,.25); }
html[data-tema="medianoche"] .side nav a.on svg { color: var(--brand); }
html[data-tema="medianoche"] .topbar { background: rgba(7,11,22,.55); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(255,255,255,.05); padding: 0 32px; }
html[data-tema="medianoche"] .topbar h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
html[data-tema="medianoche"] .content { padding: 16px 32px 56px; }
html[data-tema="medianoche"] .card, html[data-tema="medianoche"] .kpi { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px rgba(0,0,0,.25); }
html[data-tema="medianoche"] .card { padding: 20px; }
html[data-tema="medianoche"] .card.flush { padding: 0; }
html[data-tema="medianoche"] .card-h h2, html[data-tema="medianoche"] .card > h2 { font-size: 16px; font-weight: 600; }
html[data-tema="medianoche"] .kpi { padding: 18px 20px; }
html[data-tema="medianoche"] .kpi .l { font-weight: 500; }
html[data-tema="medianoche"] .kpi .v { font-size: 30px; font-weight: 600; letter-spacing: -.03em; margin-top: 8px; background: linear-gradient(180deg, #ffffff, #b9c8ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="medianoche"] .kpi .v.neg { background: none; color: var(--bad); }
html[data-tema="medianoche"] .btn { border-radius: 12px; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
html[data-tema="medianoche"] .btn:hover { background: rgba(255,255,255,.12); }
html[data-tema="medianoche"] .btn.pri { background: var(--brand); color: var(--brand-ink); border-color: transparent; box-shadow: 0 6px 20px rgba(143,176,255,.35); }
html[data-tema="medianoche"] .btn.ghost { background: transparent; border-color: transparent; }
html[data-tema="medianoche"] .tbl th { background: transparent; padding: 10px 20px; }
html[data-tema="medianoche"] .tbl td { padding: 11px 20px; }
html[data-tema="medianoche"] .tbl tbody tr.click:hover td { background: rgba(255,255,255,.04); }
html[data-tema="medianoche"] .badge { background: rgba(255,255,255,.08); }
html[data-tema="medianoche"] .tabs a.on { color: #fff; border-color: var(--brand); }
html[data-tema="medianoche"] input, html[data-tema="medianoche"] select, html[data-tema="medianoche"] textarea { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); border-radius: 12px; }
html[data-tema="medianoche"] select option { background: #121a2e; }
html[data-tema="medianoche"] .modal { background: rgba(18,24,42,.94); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,.08); }
html[data-tema="medianoche"] .modal-f { background: rgba(18,24,42,.96); }
html[data-tema="medianoche"] .toast { background: #eef2fb; color: #070b16; }
html[data-tema="medianoche"] .card .stack > * + * { margin-top: 6px; }
html[data-tema="medianoche"] .card a.alert { border-radius: 12px; padding: 11px 14px; font-size: 14px; border: 1px solid rgba(255,255,255,.05); }
@media (max-width: 900px) {
  html[data-tema="medianoche"] .tabbar { background: rgba(9,13,26,.82); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); border-top: 1px solid rgba(255,255,255,.07); }
  html[data-tema="medianoche"] .side { background: rgba(10,15,30,.96); }
  html[data-tema="medianoche"] .topbar { padding: 0 12px; }
  html[data-tema="medianoche"] .content { padding: 12px 16px calc(var(--tabbar) + 28px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  html[data-tema="medianoche"] .grid.g4 { grid-template-columns: 1fr 1fr; }
  html[data-tema="medianoche"] .grid.g4 > .kpi:first-child { grid-column: 1 / -1; }
  html[data-tema="medianoche"] .kpi .v { font-size: 22px; }
  html[data-tema="medianoche"] .grid.g4 > .kpi:first-child .v { font-size: 32px; }
  html[data-tema="medianoche"] .topbar h1 { font-size: 22px; }
}