/* Cupertino — gramática nativa de macOS/iOS: materiales translúcidos, títulos grandes,
   tarjetas sin borde flotando sobre gris claro, selección llena con el azul de marca. */
html[data-tema="cupertino"]:not([data-z]) {
  color-scheme: light;
  --brand: #22407e; --brand-ink: #fff; --brand-soft: rgba(34,64,126,.09); --navy: #16294f;
  --bg: #f5f5f7; --surface: #ffffff; --surface-2: #f2f2f5;
  --line: rgba(0,0,0,.07); --line-strong: rgba(0,0,0,.13);
  --ink: #1d1d1f; --ink-2: #4a4a50; --ink-3: #86868b;
  --ok: #1e8a4f; --ok-soft: #e6f5ec; --warn: #a15c00; --warn-soft: #fdf1dd; --bad: #d1302b; --bad-soft: #fdecea; --info: #1f64c8; --info-soft: #e8f0fc;
  --radius: 18px; --shadow: 0 1px 1px rgba(0,0,0,.03), 0 6px 24px rgba(0,0,0,.06);
  --shadow-hi: 0 2px 4px rgba(0,0,0,.04), 0 14px 32px rgba(0,0,0,.09);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --fill: rgba(0,0,0,.055); --fill-2: rgba(0,0,0,.085); --side-bg: rgba(232,232,237,.75); --bar-bg: rgba(245,245,247,.78);
  --seg-on: #ffffff; --warn-icon: #e08a00; --top: 64px;
}
html[data-tema="cupertino"] body { font-size: 14.5px; letter-spacing: -.003em; }
html[data-tema="cupertino"] .side { background: var(--side-bg); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); border-right: 1px solid var(--line); }
html[data-tema="cupertino"] .side .brand img { border-radius: 9px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
html[data-tema="cupertino"] .side .brand b { font-size: 15px; letter-spacing: -.01em; }
html[data-tema="cupertino"] .side .grp { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; padding: 16px 10px 4px; }
html[data-tema="cupertino"] .side nav a { color: var(--ink); font-weight: 450; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; }
html[data-tema="cupertino"] .side nav a svg { color: var(--brand); opacity: 1; width: 17px; height: 17px; }
html[data-tema="cupertino"] .side nav a:hover { background: var(--fill); }
html[data-tema="cupertino"] .side nav a.on { background: var(--brand); color: var(--brand-ink); font-weight: 550; }
html[data-tema="cupertino"] .side nav a.on svg { color: var(--brand-ink); }
html[data-tema="cupertino"] .topbar { background: var(--bar-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom-color: transparent; padding: 0 32px; }
html[data-tema="cupertino"] .topbar h1 { font-size: 26px; font-weight: 700; letter-spacing: -.024em; }
html[data-tema="cupertino"] .content { padding: 12px 32px 56px; }
html[data-tema="cupertino"] .stack > * + * { margin-top: 20px; }
html[data-tema="cupertino"] .grid { gap: 16px; }
html[data-tema="cupertino"] .card, html[data-tema="cupertino"] .kpi { border: 0; box-shadow: var(--shadow); border-radius: var(--radius); }
html[data-tema="cupertino"] .card { padding: 20px; }
html[data-tema="cupertino"] .card.flush { padding: 0; }
html[data-tema="cupertino"] .card.flush > .card-h { padding: 18px 20px 4px; }
html[data-tema="cupertino"] .card-h h2, html[data-tema="cupertino"] .card > h2 { font-size: 17px; font-weight: 650; letter-spacing: -.016em; }
html[data-tema="cupertino"] .kpi { padding: 18px 20px 16px; transition: transform .2s ease, box-shadow .2s ease; }
html[data-tema="cupertino"] a.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); }
html[data-tema="cupertino"] .kpi .l { font-size: 12.5px; font-weight: 600; }
html[data-tema="cupertino"] .kpi .v { font-size: 30px; font-weight: 600; letter-spacing: -.028em; margin-top: 8px; }
html[data-tema="cupertino"] .kpi .s { color: var(--ink-3); margin-top: 4px; }
html[data-tema="cupertino"] .btn { border: 0; border-radius: 980px; background: var(--fill); font-weight: 500; padding: 0 16px; }
html[data-tema="cupertino"] .btn:hover { background: var(--fill-2); }
html[data-tema="cupertino"] .btn.pri { background: var(--brand); color: var(--brand-ink); }
html[data-tema="cupertino"] .btn.ghost { background: transparent; }
html[data-tema="cupertino"] .btn.ghost:hover { background: var(--fill); }
html[data-tema="cupertino"] .btn.icon { padding: 0; }
html[data-tema="cupertino"] .tabs { display: inline-flex; max-width: 100%; border: 0; background: var(--fill); border-radius: 10px; padding: 3px; gap: 2px; }
html[data-tema="cupertino"] .tabs a { border: 0; border-radius: 8px; padding: 6px 14px; font-size: 13.5px; color: var(--ink); }
html[data-tema="cupertino"] .tabs a.on { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
html[data-tema="cupertino"] .tbl th { background: var(--surface); font-size: 12px; font-weight: 600; padding: 10px 20px; }
html[data-tema="cupertino"] .tbl td { padding: 11px 20px; }
html[data-tema="cupertino"] .tbl tbody tr.click:hover td { background: var(--fill); }
html[data-tema="cupertino"] .badge { font-weight: 600; font-size: 11.5px; padding: 2px 9px; }
html[data-tema="cupertino"] .alert { border-radius: 12px; padding: 12px 14px; }
html[data-tema="cupertino"] .card .stack > * + * { margin-top: 0; }
html[data-tema="cupertino"] .card a.alert { background: transparent; border-radius: 0; padding: 12px 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; }
html[data-tema="cupertino"] .card a.alert:last-child { border-bottom: 0; }
html[data-tema="cupertino"] .card a.alert svg { color: var(--info); }
html[data-tema="cupertino"] .card a.alert.warn svg { color: var(--warn-icon); }
html[data-tema="cupertino"] .card a.alert.bad svg { color: var(--bad); }
html[data-tema="cupertino"] .card a.alert:hover { background: var(--fill); }
html[data-tema="cupertino"] input, html[data-tema="cupertino"] select, html[data-tema="cupertino"] textarea { border-radius: 10px; }
html[data-tema="cupertino"] .search input { background: var(--fill); border-color: transparent; }
html[data-tema="cupertino"] .modal { border-radius: 20px; }
html[data-tema="cupertino"] .login .card { border-radius: 24px; padding: 36px; }
@media (max-width: 900px) {
  html[data-tema="cupertino"] .tabbar { background: var(--bar-bg); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-top: 1px solid var(--line); }
  html[data-tema="cupertino"] .side { background: var(--surface-2); }
  html[data-tema="cupertino"] .topbar { padding: 0 12px; }
  html[data-tema="cupertino"] .content { padding: 12px 16px calc(var(--tabbar) + 28px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  html[data-tema="cupertino"] .grid.g4 { grid-template-columns: 1fr 1fr; }
  html[data-tema="cupertino"] .grid.g4 > .kpi:first-child { grid-column: 1 / -1; }
  html[data-tema="cupertino"] .kpi .v { font-size: 22px; }
  html[data-tema="cupertino"] .grid.g4 > .kpi:first-child .v { font-size: 32px; }
  html[data-tema="cupertino"] .topbar h1 { font-size: 22px; }
}

/* ---------- modo oscuro ---------- */
@media (prefers-color-scheme: dark) {
  html[data-tema="cupertino"]:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #7aa7ff; --brand-ink: #0b1224; --brand-soft: rgba(122,167,255,.16);
    --bg: #111113; --surface: #1c1c1f; --surface-2: #26262a;
    --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.16);
    --ink: #f5f5f7; --ink-2: #c7c7cc; --ink-3: #8e8e93;
    --ok: #3fd07f; --ok-soft: rgba(63,208,127,.14); --warn: #ffb340; --warn-soft: rgba(255,179,64,.14); --bad: #ff6961; --bad-soft: rgba(255,105,97,.15); --info: #64a8ff; --info-soft: rgba(100,168,255,.14);
    --shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.35); --shadow-hi: 0 0 0 1px rgba(255,255,255,.1), 0 14px 32px rgba(0,0,0,.45);
    --fill: rgba(255,255,255,.08); --fill-2: rgba(255,255,255,.13); --side-bg: rgba(38,38,42,.72); --bar-bg: rgba(17,17,19,.78);
    --seg-on: #636366; --warn-icon: #ffb340;
  }
}
html[data-tema="cupertino"][data-theme="dark"] {
    color-scheme: dark;
    --brand: #7aa7ff; --brand-ink: #0b1224; --brand-soft: rgba(122,167,255,.16);
    --bg: #111113; --surface: #1c1c1f; --surface-2: #26262a;
    --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.16);
    --ink: #f5f5f7; --ink-2: #c7c7cc; --ink-3: #8e8e93;
    --ok: #3fd07f; --ok-soft: rgba(63,208,127,.14); --warn: #ffb340; --warn-soft: rgba(255,179,64,.14); --bad: #ff6961; --bad-soft: rgba(255,105,97,.15); --info: #64a8ff; --info-soft: rgba(100,168,255,.14);
    --shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.35); --shadow-hi: 0 0 0 1px rgba(255,255,255,.1), 0 14px 32px rgba(0,0,0,.45);
    --fill: rgba(255,255,255,.08); --fill-2: rgba(255,255,255,.13); --side-bg: rgba(38,38,42,.72); --bar-bg: rgba(17,17,19,.78);
    --seg-on: #636366; --warn-icon: #ffb340;
  }