:root{
  --top-gap: 112px;
  color-scheme: light dark;
  --bg: #0f172a; --fg: #e5e7eb; --card:#111827; --muted:#9ca3af; --accent:#2563eb;
  --radius: 16px; --shadow: 0 10px 30px rgba(0,0,0,.25);
}
:root[data-theme="light"]{ --bg:#eef2ff; --fg:#0f172a; --card:#ffffff; --muted:#475569; --accent:#1d4ed8; }
html, body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
a{ color: var(--accent); text-decoration: none; } a:hover{ text-decoration: underline; }
header{ position: sticky; top: env(safe-area-inset-top, 0px); left:0; right:0; z-index: 999; background: var(--bg); }
.header-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; }
.brand{ font-weight:800; font-size:18px; }
#theme-toggle{ position: sticky; top: calc(env(safe-area-inset-top, 0px) + 8px); right: 12px;
  background: var(--card); color: var(--fg); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 10px 14px; box-shadow: var(--shadow); }
main.wrap{ display:block; margin: calc(env(safe-area-inset-top, 0px) + var(--top-gap)) auto 80px auto !important; max-width: 960px; padding: 0 16px; }
.cards{ display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 640px){ .cards{ grid-template-columns: 1fr 1fr; } }
a.app-card{ display:block; text-decoration:none; color:var(--fg); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; transition: transform .06s ease, box-shadow .06s ease; border: 1px solid rgba(255,255,255,.12); }
a.app-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.28); }
.app-card .title{ font-weight:800; font-size:20px; margin:0 0 8px 0; display:flex; align-items:center; gap:10px; }
.app-card .desc{ color: var(--muted); margin:0 0 6px 0; }
.app-card .cta{ display:inline-block; padding:10px 14px; border-radius:12px; border:2px solid rgba(255,255,255,.2); }
.app-card .cta.primary{ background: var(--accent); color:#fff; border-color: var(--accent); }
.brand{ display:flex; align-items:center; gap:8px; } .brand .logo{ height:28px; }
.title .icon{ width:22px; height:22px; vertical-align:-4px; border-radius:4px; }


/* v9.2: tighter spacing for title + icons */
.brand .logo{ height:24px; width:auto; }
.title{ gap:6px; line-height:1.15; margin: 0 0 4px 0; } /* reduce gap under title */
.title .icon{ width:18px; height:18px; vertical-align:-3px; }
.app-card .desc{ margin: 0 0 6px 0; } /* already small; keep consistent */


/* v10: tighter title/button spacing and icon sizing */
.title{ gap:6px; line-height:1.1; margin: 0 0 2px 0; }
.title .icon{ width:18px; height:18px; vertical-align:-3px; }
.app-card .desc{ margin: 0 0 4px 0; }
.app-card .cta{ margin-top: 0; }
.brand .logo{ height:26px; width:auto; border-radius:4px; }

/* Estado desactivado para tarjetas */
.app-card.disabled{ opacity:.75; cursor:not-allowed; }
.app-card.disabled .cta{ border-style:dashed; }


/* === Custom: Green CTA variant for high-contrast in light/dark === */
:root{ --accent-green:#2e7d32; }
.cta.primary.green{ background: var(--accent-green); border-color: var(--accent-green); color:#fff; }
@media (hover:hover){
  .app-card .cta.primary.green:hover{ filter: brightness(1.05); text-decoration:none; }
}