/* Modo oscuro. Se carga DESPUÉS de la hoja de cada página y solo redefine
   tokens: ni una regla de layout, ni un componente nuevo.

   La paleta no es negra sino azulada, para que siga siendo la marca: los fondos
   descienden del mismo azul del que sale --ink en claro.

   El acento cambia de #4f46e5 a #818cf8. El índigo de marca sobre un fondo
   oscuro da 2.4:1 —ilegible—; el índigo claro da 7:1. Es el mismo color de la
   marca subido de tono, no otro color. Los BOTONES conservan el índigo original,
   porque ahí el texto es blanco y el contraste ya funcionaba. */

:root[data-tema="dark"]{
  --ink:#f1f5f9;              /* titulares */
  --slate:#c7d2de;            /* texto corrido */
  --muted:#93a3b8;            /* texto secundario */
  --line:#22304a;             /* bordes y separadores */
  --bg:#070d1a;               /* fondo base */
  --bg2:#0f1a2e;              /* secciones alternas */
  --surface:#121f36;          /* tarjetas y formularios */
  --surface-3:#1a2740;        /* rellenos suaves */

  --indigo:#818cf8;           /* acento sobre oscuro (texto, enlaces, iconos) */
  --cyan:#22d3ee;

  --accent-soft:rgba(129,140,248,.15);
  --accent-line:rgba(129,140,248,.32);
  --accent-ink:#a5b4fc;       /* sobre la pastilla, #818cf8 solo daba 4.38:1 */
  --marco:linear-gradient(135deg,#101c31,#0d1f2b);
  --marco-ink:#93a3b8;
  --header-bg:rgba(7,13,26,.82);
  --footer-bg:#040810;
  --ok:#34d399;               /* el verde de importe, legible sobre oscuro */
  --ok-soft:rgba(52,211,153,.16); --ok-ink:#34d399;
  --star:#f59e0b;             /* sobre oscuro el ámbar vivo ya da 7.67:1 */

  /* Como texto recortado, el degradado tiene que ir claro para leerse. */
  --grad-txt:linear-gradient(90deg,#818cf8,#22d3ee,#818cf8);

  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
}

/* El navegador pinta los controles nativos (scrollbar, autocompletado, select)
   según esto; sin ello quedan blancos sobre la página oscura. */
:root[data-tema="dark"]{color-scheme:dark}
:root[data-tema="light"]{color-scheme:light}

/* Piezas que en claro se apoyaban en el blanco del papel. */
:root[data-tema="dark"] .langsw button{background:var(--surface);color:var(--muted)}
:root[data-tema="dark"] .langsw button.active{background:var(--indigo);color:#0b1220}
:root[data-tema="dark"] .hamb span{background:var(--ink)}
:root[data-tema="dark"] .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
:root[data-tema="dark"] .tl-item::before{background:var(--bg)}
:root[data-tema="dark"] .post .cover,
:root[data-tema="dark"] .hero{background-color:var(--bg2)}
/* El menú desplegable de móvil se abre sobre un panel blanco fijo. */
:root[data-tema="dark"] .nav .links,
:root[data-tema="dark"] .menu{background:var(--bg)}

/* El resplandor de la cabecera del blog y del hero está pensado sobre blanco:
   sobre oscuro se apaga para que no ensucie. */
:root[data-tema="dark"] .head,
:root[data-tema="dark"] .hero{background-image:
  radial-gradient(800px 360px at 85% -10%,rgba(34,211,238,.10),transparent),
  radial-gradient(600px 360px at 0% 0%,rgba(129,140,248,.12),transparent)}

/* ── El interruptor ────────────────────────────────────────────────────────
   Un solo botón que alterna. El icono dice A QUÉ te llevaría pulsarlo, que es
   lo que la gente espera: luna cuando estás en claro, sol cuando estás en
   oscuro. */
.tema{display:inline-flex;align-items:center;justify-content:center;
      width:34px;height:34px;padding:0;margin-left:.35rem;cursor:pointer;
      background:var(--surface);border:1px solid var(--line);border-radius:9px;
      color:var(--muted);line-height:0;flex:0 0 auto}
.tema:hover{color:var(--indigo);border-color:var(--accent-line)}
.tema svg{width:17px;height:17px;display:block}
.tema .sol{display:none}
:root[data-tema="dark"] .tema .sol{display:block}
:root[data-tema="dark"] .tema .luna{display:none}

@media(max-width:720px){
  .tema{margin:14px 0 0}
}