/* Clarea · tema claro (más contraste) y tema oscuro de la web. Se carga después de recursos.css */

/* Botón del tema */
.theme-btn{width:38px;height:38px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface-card);color:var(--ink-1);font-size:17px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:inherit;transition:transform .15s ease,background .15s ease;flex:none;}
.theme-btn:hover{transform:translateY(-2px);background:var(--surface-soft);}
.theme-btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
.theme-btn-float{position:fixed;right:14px;bottom:14px;z-index:60;box-shadow:var(--shadow-card);}

/* ===== CLARO: textos más oscuros, bordes más marcados, acentos con contraste AA ===== */
html[data-theme="light"]{
  color-scheme:light;
  --ink-1:#1C1A18;--ink-2:#47423C;--ink-muted:#5E5851;
  --border:rgba(43,42,40,.16);--border-strong:rgba(43,42,40,.30);
  --teal:#17715F;--coral:#C2472A;--blue:#2B63AE;--mustard:#976807;--violet:#6340B0;--rose:#B73A72;--good:#13704A;
  --mix:#fff;
  --shadow-card:0 1px 2px rgba(43,42,40,.08),0 8px 24px -12px rgba(43,42,40,.22);
}
html[data-theme="light"] .btn-primary{background:linear-gradient(120deg,#17715F,#1E7F6B,#17715F);background-size:200% 200%;color:#fff;box-shadow:0 6px 18px -6px rgba(23,113,95,.55);}
html[data-theme="light"] .nav-links a.btn-dark,html[data-theme="light"] .nav-links a.btn-primary{color:#fff;text-decoration:none;}
html[data-theme="light"] .btn-ghost{border:1px solid var(--border-strong);}
html[data-theme="light"] .nav-links a:not(.btn){color:var(--ink-1);}
html[data-theme="light"] .nav-links a.active{color:var(--teal);text-decoration:underline;text-underline-offset:5px;}
html[data-theme="light"] .card,html[data-theme="light"] .feature,html[data-theme="light"] .post,html[data-theme="light"] .article{border-color:var(--border-strong);}
html[data-theme="light"] .field input,html[data-theme="light"] .field select{border-color:rgba(43,42,40,.42);}

/* ===== OSCURO ===== */
html[data-theme="dark"]{
  color-scheme:dark;
  --surface-page:#15171A;--surface-card:#212429;--surface-soft:#2B2F35;
  --ink-1:#F2EFE9;--ink-2:#C4BEB6;--ink-muted:#A29C94;
  --border:rgba(255,255,255,.10);--border-strong:rgba(255,255,255,.22);
  --teal:#4FC2AB;--coral:#FF8A6B;--blue:#7FB0EE;--mustard:#EDB24A;--violet:#B39BEE;--rose:#F08AB0;--taupe:#A29C94;
  --good:#41C089;--good-bg:#163527;--warn:#E8AB3A;--bad:#F2706E;
  --mix:#212429;
  --shadow-card:0 1px 2px rgba(0,0,0,.35),0 8px 24px -12px rgba(0,0,0,.6);
}
html[data-theme="dark"] body{background:var(--surface-page);color:var(--ink-1);}
html[data-theme="dark"] .btn-primary{background:linear-gradient(120deg,#3FB59E,#5CCDB6,#3FB59E);background-size:200% 200%;color:#0E1A17;box-shadow:0 6px 18px -6px rgba(63,181,158,.45);}
html[data-theme="dark"] .btn-dark,html[data-theme="dark"] .tab.active{background:var(--ink-1);color:#15171A;border-color:var(--ink-1);}
html[data-theme="dark"] .nav-links a.btn-dark{color:#15171A;}
html[data-theme="dark"] .nav-links a.btn-primary{color:#0E1A17;}
html[data-theme="dark"] .turl{background:var(--surface-soft);}
html[data-theme="dark"] .blob{opacity:.14;}
html[data-theme="dark"] .step .num,html[data-theme="dark"] .avatar{color:#0E1A17;}
html[data-theme="dark"] .final-cta,html[data-theme="dark"] .lead-box{background:linear-gradient(120deg,#1B2523,#232A2E 45%,#2c2440 100%);background-size:200% 200%;border:1px solid var(--border);color:#fff;}
html[data-theme="dark"] .final-cta .btn-primary,html[data-theme="dark"] .lead-box .btn-primary{color:#0E1A17;}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select{background:var(--surface-page);color:var(--ink-1);}
html[data-theme="dark"] .lead-form input{background:rgba(255,255,255,.08);}
html[data-theme="dark"] a.brand{color:var(--ink-1);}
html[data-theme="dark"] .kicker,html[data-theme="dark"] .page-head .kicker{color:var(--ink-1);}

/* En ambos: textos pequeños sobre las bandas oscuras, más legibles */
.lead-fine{color:rgba(255,255,255,.72) !important;}
.final-cta p,.lead-box p{color:rgba(255,255,255,.85) !important;}

/* Botones de respuesta del test */
html[data-theme="dark"] .opt{background:var(--surface-card);color:var(--ink-1);}
html[data-theme="dark"] .opt:hover{background:var(--surface-soft);}
html[data-theme="light"] .opt{background:#fff;color:var(--ink-1);}
html[data-theme="light"] .opt:hover{background:var(--surface-soft);}