/* JDServer-Webs v6.0 — base.css (fix1)
   - Tema manual: redefine variables en [data-theme="light|dark"]
   - Mantiene estética original (no cambios visuales salvo correcciones de tema)
*/

:root{
  --radius: 16px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
  --shadow-2: 0 6px 24px rgba(0,0,0,.08), 0 16px 48px rgba(0,0,0,.08);
  --brand-50: #eaf7ff;
  --brand-100: #dff4ff;

  /* neutrales (modo claro) */
  --bg: #ffffff;
  --fg: #121417;
  --muted: #6b7280;
  --card: #f8fafc;
  --border: #e5e7eb;

  /* se sobreescriben desde config -> header.js */
  --brand: #2aa8a0;         /* primario */
  --brand-strong: #18807a;  /* hover */
  --brand-accent: #5dd8d0;  /* acentos */
}

/* Preferencia del sistema (AUTO) */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0d10;
    --fg: #e5eaf0;
    --muted: #94a3b8;
    --card: #0f1216;
    --border: #1f2937;
    --brand-50: #0f1b1f;
    --brand-100: #0b171a;
  }
}

/* Overrides MANUALES: respetan la misma paleta que AUTO */
:root[data-theme="light"]{
  color-scheme: light;
  --bg: #ffffff;
  --fg: #121417;
  --muted: #6b7280;
  --card: #f8fafc;
  --border: #e5e7eb;
  --brand-50: #eaf7ff;
  --brand-100: #dff4ff;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0b0d10;
  --fg: #e5eaf0;
  --muted: #94a3b8;
  --card: #0f1216;
  --border: #1f2937;
  --brand-50: #0f1b1f;
  --brand-100: #0b171a;
}

*{ box-sizing:border-box }
html,body{ padding:0; margin:0; }
html{ font-size:16px }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* solo desplazamiento vertical en móvil */
}

.container{
  width: min(1200px, 92vw);
  margin-inline: auto;
}

a{ color: var(--brand); text-decoration: none; }
a[aria-disabled="true"]{ pointer-events:none; opacity:.6; }
hr{ border:0; border-top:1px solid var(--border); margin:24px 0; }

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 16px;
}

.btn{
  display: inline-flex;
  align-items:center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 6px 18px rgba(0,0,0,.15);
  color: white;
  border: none;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
}
.btn:active{ transform: translateY(1px) }
.btn.ghost{
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  box-shadow: none;
}

.muted{ color: var(--muted) }

footer{
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 24px 0;
  color: var(--muted);
}


/* JDServer-Webs v6.0 — tint por sitio */
body{
  background:
    radial-gradient(1200px 600px at 110% -10%, var(--brand-50), transparent 70%),
    radial-gradient(800px 400px at -10% 110%, var(--brand-100), transparent 70%),
    var(--bg);
}