/* Modo claro / oscuro. Este archivo va al final de cada página y solo cambia colores:
   el diseño, los textos y las imágenes son los mismos. */

/* Botón flotante (abajo a la izquierda) */
.tema-btn{position:fixed;left:22px;bottom:22px;z-index:46;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--bronze);display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -14px rgba(60,50,40,.4);transition:transform .3s}
.tema-btn:hover{transform:scale(1.06)}
.tema-btn svg{width:22px;height:22px}
.tema-btn .sol{display:none}
html[data-theme="dark"] .tema-btn .sol{display:block}
html[data-theme="dark"] .tema-btn .luna{display:none}
@media print{.tema-btn{display:none}}

/* Colores del modo oscuro */
html[data-theme="dark"]{
  color-scheme:dark;
  background:#16171B;
  --paper:#16171B; --cream:#16171B; --sand:#1F2025; --white:#1E1F24;
  --ink:#EEE9E1; --ink-2:#BDB6AC; --ink-soft:#BDB6AC; --steel:#9A958D;
  --mist:#30313A; --line:#2F3038; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.5);
  --bronze:#D3AF84; --bronze-deep:#E6C9A2; --gold:#CBA978;
  --sage:#8E9E86; --sage-d:#5F6E55; --sage-deep:#A9B89C; --sage-l:#20271E;
  --rose:#E5B1A9; --rose-l:#3A2A29; --rose-d:#E0A098;
  --ok:#8DB086; --err:#E08A7E; --header-bg:rgba(22,23,27,.92);
}
html[data-theme="dark"] .hero{background:radial-gradient(120% 60% at 50% 38%,#25221E 0%,rgba(22,23,27,0) 70%)}
html[data-theme="dark"] .book{background:#25262C}
html[data-theme="dark"] .quiz-head,html[data-theme="dark"] .conclusion{background:#26272D}
html[data-theme="dark"] .btn-solid{background:#ECE6DD;color:#16171B}
html[data-theme="dark"] .btn-solid:hover{background:var(--bronze)}
html[data-theme="dark"] .book .btn-solid{background:var(--gold);color:#16171B}
html[data-theme="dark"] .book .btn-solid:hover{background:#fff}
html[data-theme="dark"] header nav a.desk{color:#16171B}
html[data-theme="dark"] .btn-primary{color:#16171B}
html[data-theme="dark"] .choice[aria-pressed="true"]{background:var(--bronze);border-color:var(--bronze);color:#16171B}
html[data-theme="dark"] .wa,html[data-theme="dark"] .wa-float{background:#9A7147;color:#fff}
/* el logo tiene texto oscuro: en modo oscuro va sobre un fondo claro */
html[data-theme="dark"] .logo img{background:#F3ECE2;border-radius:14px;padding:6px 10px;box-sizing:content-box}

/* Botón en el encabezado (escritorio) */
@media(min-width:961px){
  .tema-btn.en-header{position:static;width:44px;height:44px;margin:0;box-shadow:0 6px 16px -10px rgba(60,50,40,.35)}
  .tema-btn.en-header svg{width:20px;height:20px}
  .grupo-agenda{display:flex;align-items:center;gap:14px}
  header nav .tema-btn.en-header{margin-left:-6px}
}

/* Crédito del sitio: a la derecha de los enlaces legales, en la misma fila (escritorio) */
footer .copy .hecho{padding-right:0;margin-left:auto;font-size:11px;letter-spacing:.02em;white-space:nowrap}
footer .copy .hecho a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(min-width:701px){footer .copy>span:not(.hecho){padding-right:0}}
@media(max-width:700px){footer .copy .hecho{margin:0 auto}}
@media(max-width:700px){footer .copy>span:not(.hecho){width:100%;text-align:center;padding:0 12px;box-sizing:border-box}}
@media(max-width:700px){footer{padding-bottom:104px}}
/* Pie en escritorio: enlaces a la izquierda, copyright al centro y crédito a la derecha */
@media(min-width:961px){
  footer .copy{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px 24px}
  footer .copy>*{grid-row:1}
  footer .copy .legal{grid-column:1;justify-self:start}
  footer .copy>span:not(.hecho){grid-column:2;justify-self:center;text-align:center}
  footer .copy .hecho{grid-column:3;justify-self:end;margin-left:0}
}