/* =========================================================
   app.css — Tema claro (por defecto) + oscuro automático
   - Claro: tokens en :root
   - Oscuro: @media (prefers-color-scheme: dark)
   ========================================================= */

/* ---------- Tokens (CLARO por defecto) ---------- */
:root{
  --bg: #f7f8fb;
  --surface: #ffffff;
  --card: #ffffff;
  --text: #0f172a;
  --muted:#58627a;
  --line:#e6e8f0;
  --brand:#111827;      /* botón primario / activo */
  --brand-ink:#ffffff;  /* texto sobre primario */
  --accent:#0ea5e9;     /* links/acento */
  --accent-2:#8b5cf6;   /* acento secundario */
  --ok:#16a34a;
  --danger:#ef4444;
  --shadow: 0 10px 30px rgba(20, 27, 47, .06);
}

/* ---------- Reset base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(14,165,233,.08) 0%, transparent 60%),
    radial-gradient(900px 520px at 90% 10%, rgba(139,92,246,.08) 0%, transparent 60%),
    var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}

/* ---------- Contenedores ---------- */
.section{padding:40px 18px}
.container{max-width:1200px;margin:0 auto}
.container-narrow{max-width:980px}

/* ---------- Topbar / Nav ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(130%) blur(10px);
  border-bottom:1px solid var(--line);
}
.wrap{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text)}
.brand img{height:38px;width:38px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.06))}
.brand strong{font-size:18px;letter-spacing:.2px}

nav{margin-left:auto}
ul.nav{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{
  color:#334155;
  padding:8px 12px;
  border-radius:10px;
  display:inline-block;
}
.nav a:hover{background:#f3f4f6}
.nav a.active{
  background:linear-gradient(90deg,rgba(14,165,233,.14),rgba(139,92,246,.14));
  border:1px solid rgba(14,165,233,.35);
  color:#0b1220;
}

/* ---------- Botones CTA ---------- */
.cta{display:flex;gap:10px;margin-left:8px}
.button{
  padding:8px 12px;border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fafafa);
  color:var(--text);
  box-shadow:0 2px 0 rgba(0,0,0,.02) inset;
}
.button:hover{transform:translateY(-1px)}
.button.primary{
  border-color:rgba(17,24,39,.9);
  background:linear-gradient(180deg, var(--brand), #0b1220);
  color:var(--brand-ink);
}

/* ---------- Hero ---------- */
.hero{
  margin-top:18px;
  background:
    radial-gradient(800px 300px at 20% 0%, rgba(14,165,233,.18), transparent 70%),
    radial-gradient(800px 300px at 80% 0%, rgba(139,92,246,.18), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  border:1px solid var(--line);
  border-radius:22px;
  padding:36px 24px;
  box-shadow: var(--shadow);
}
.h1{font-size:clamp(1.9rem,3.2vw,2.6rem);letter-spacing:.2px;margin:0 0 8px;color:#0b1220}
.lead{color:var(--muted);max-width:70ch}

/* ---------- Tarjetas / grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.card{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  box-shadow: var(--shadow);
  padding:16px 18px;
}
.card h3{margin:0 0 8px;color:#0b1220}
.card p{margin:0;color:#48536a}

/* ---------- Badges / links rápido ---------- */
.inline-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  background:rgba(14,165,233,.12);
  color:#0b1220;border:1px solid rgba(14,165,233,.35)
}

/* ---------- Flash ---------- */
.flash{max-width:1200px;margin:10px auto 0;padding:0 16px}
.flash-item{
  background:linear-gradient(180deg,#fff,#fafafa);
  border:1px solid var(--line);
  border-left-width:6px;border-radius:14px;padding:10px 12px;margin:8px 0;color:#0b1220
}
.flash-item.success{border-left-color:var(--ok)}
.flash-item.error{border-left-color:var(--danger)}
.flash-item.info{border-left-color:var(--accent)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:rgba(255,255,255,.8);backdrop-filter:blur(6px)}
.site-footer .wrap{padding:16px}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr}
  .brand strong{display:none}
}

/* =========================================================
   Tema OSCURO automático
   ========================================================= */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1020;
    --surface: #0c1228;
    --card: #0f1530;
    --text: #e7eaf6;
    --muted:#97a0c7;
    --line:#1e274b;
    --brand:#8ab4ff;
    --brand-ink:#0a1225;
    --accent:#8ab4ff;
    --accent-2:#a78bfa;
    --ok:#22c55e;
    --danger:#ef4444;
    --shadow: 0 10px 30px rgba(0,0,0,.25);
  }

  body{
    background:
      radial-gradient(1000px 600px at 10% -10%, #13204a 0%, transparent 60%),
      radial-gradient(900px 520px at 90% 10%, #261a5c 0%, transparent 60%),
      var(--bg);
  }

  .topbar{
    background:rgba(12,18,40,.6);
    border-bottom:1px solid var(--line);
  }

  .nav a{color:#c9d2ff}
  .nav a:hover{background:rgba(138,180,255,.08)}
  .nav a.active{
    background:linear-gradient(90deg,rgba(138,180,255,.17),rgba(167,139,250,.17));
    border:1px solid rgba(138,180,255,.35);
    color:#fff;
  }

  .button{
    border-color:var(--line);
    background:linear-gradient(180deg,#0f1736,#0c1228);
    color:var(--text);
  }
  .button.primary{
    border-color:rgba(138,180,255,.5);
    background:linear-gradient(180deg, rgba(138,180,255,.25), rgba(138,180,255,.12));
    color:#fff;
  }

  .hero{
    background:
      radial-gradient(800px 300px at 20% 0%, rgba(138,180,255,.18), transparent 70%),
      radial-gradient(800px 300px at 80% 0%, rgba(167,139,250,.18), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  }
  .h1{color:#f7f7fe}
  .card{background:linear-gradient(180deg,#0f1530,#0d1430)}
  .card h3{color:#eaf}
  .card p{color:#c7ccef}

  .flash-item{
    background:linear-gradient(180deg,#0f1736,#0d1430);
    border:1px solid var(--line);
    color:#dfe5ff;
  }
  .site-footer{background:rgba(12,18,40,.6)}
}