/* ==========================================================================
   CLARO / ParaTuRato — Day / Night Theme Stylesheet
   ========================================================================== */

/* --- Variables de base (Modo Claro / Light) --- */
:root {
  --reader-ink-faint: #626c62;
  --line: var(--reader-border, #dfd8cb);
  --border: var(--reader-border, #dfd8cb);
}

/* --- Variables de Modo Noche (Dark Charcoal cálido) --- */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Base tokens */
  --paper: #191d19;
  --ink: #e8ede8;
  --muted: #a8b4a8;
  --rule: #323a33;
  --line: #323a33;
  --border: #323a33;
  --green: #8dcfa4;
  --rust: #ee9a76;

  /* Reader tokens */
  --reader-paper: #191d19;
  --reader-paper-warm: #202621;
  --reader-paper-card: #242b25;
  --reader-ink: #e8ede8;
  --reader-ink-muted: #a8b4a8;
  --reader-ink-faint: #a2afa4;
  --reader-border: #353e36;
  --reader-border-light: #2b332c;
  --reader-focus: #89c5ef;

  /* Category & Kind accents (optimizados para contraste en fondo oscuro) */
  --cat-games: #8dcfa4;
  --cat-tech: #89c5ef;
  --cat-cinema: #dfa1cb;
  --cat-discovery: #ee9a76;
  --cat-default: #cfd8cf;
}

/* Fallback automático cuando JavaScript está inactivo */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --paper: #191d19;
    --ink: #e8ede8;
    --muted: #a8b4a8;
    --rule: #323a33;
    --line: #323a33;
    --border: #323a33;
    --green: #8dcfa4;
    --rust: #ee9a76;
    --reader-paper: #191d19;
    --reader-paper-warm: #202621;
    --reader-paper-card: #242b25;
    --reader-ink: #e8ede8;
    --reader-ink-muted: #a8b4a8;
    --reader-ink-faint: #a2afa4;
    --reader-border: #353e36;
    --reader-border-light: #2b332c;
    --reader-focus: #89c5ef;
    --cat-games: #8dcfa4;
    --cat-tech: #89c5ef;
    --cat-cinema: #dfa1cb;
    --cat-discovery: #ee9a76;
    --cat-default: #cfd8cf;
  }
}

/* --- Aplicación global a la página en modo noche --- */
html[data-theme="dark"] body,
html[data-theme="dark"] body.reader-edition {
  background-color: var(--reader-paper);
  color: var(--reader-ink);
}

/* --- Sobrescritura de componentes con fondos claros estáticos --- */
html[data-theme="dark"] body .pilot,
html[data-theme="dark"] body .notice,
html[data-theme="dark"] body .editorial-disclosure,
html[data-theme="dark"] body .review-panel,
html[data-theme="dark"] body .info-box {
  background-color: var(--reader-paper-warm);
  color: var(--reader-ink);
  border-color: var(--reader-border);
}

html[data-theme="dark"] body .rank-row {
  background-color: var(--reader-paper-card);
  border-color: var(--reader-border-light);
  color: var(--reader-ink);
}

html[data-theme="dark"] body .source-list li:target {
  background-color: var(--reader-paper-warm);
  outline-color: var(--reader-focus);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] button {
  background-color: var(--reader-paper-card);
  color: var(--reader-ink);
  border-color: var(--reader-border);
}

/* --- Leyendas de imágenes con colores heredados estáticos --- */
html[data-theme="dark"] body .press-hero figcaption,
html[data-theme="dark"] body .press-figure figcaption,
html[data-theme="dark"] body .article-media figcaption {
  color: var(--reader-ink-muted);
}

/* --- Control selector en cabecera (.theme-control) --- */
.theme-control {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-control label {
  color: var(--reader-ink-muted, #4e574e);
  font-size: 13px;
  white-space: nowrap;
}

.theme-control select {
  font-family: inherit;
  font-size: 13px;
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid var(--reader-border, #dfd8cb);
  border-radius: 4px;
  background-color: var(--reader-paper-card, #ffffff);
  color: var(--reader-ink, #202720);
  cursor: pointer;
  box-sizing: border-box;
}

.theme-control select:focus-visible {
  outline: 2px solid var(--reader-focus, #1a5b8c);
  outline-offset: 2px;
}

/* --- Distribución adaptativa de la cabecera en pantallas <= 740px --- */
@media (max-width: 740px) {
  .masthead {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 8px 12px !important;
    align-items: center !important;
  }

  .masthead .brand,
  .masthead .reader-wordmark {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    margin: 0 !important;
  }

  .masthead .lang {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    justify-self: end !important;
    margin: 0 !important;
  }

  .masthead .theme-control {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    justify-self: end !important;
    margin: 0 !important;
  }

  .masthead .tagline,
  .masthead .reader-tagline {
    display: none !important;
  }
}

/* --- Modo impresión: forzar siempre papel blanco y tinta negra --- */
@media print {
  :root,
  html,
  body,
  body.reader-edition {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  [data-theme-control],
  .theme-control {
    display: none !important;
  }
}
html[data-theme="dark"] body .limit-note,html[data-theme="dark"] body .video-local-note,html[data-theme="dark"] body .video-player>.small{background:var(--reader-paper-warm);color:var(--reader-ink)}
html[data-theme="dark"] body .lead .dek{color:var(--reader-ink-muted)}
html[data-theme="dark"] body button:hover{background:var(--reader-paper-warm)}
html[data-theme="dark"] body .vote-buttons button[aria-pressed="true"],html[data-theme="dark"] body .filter-row button[aria-pressed="true"]{background:#2b573b;color:#fff;border-color:#8dcfa4}
.theme-control[hidden]{display:none!important}

@media(prefers-color-scheme:dark){/* --- Aplicación global a la página en modo noche --- */
html:not([data-theme]) body,
html:not([data-theme]) body.reader-edition {
  background-color: var(--reader-paper);
  color: var(--reader-ink);
}

/* --- Sobrescritura de componentes con fondos claros estáticos --- */
html:not([data-theme]) body .pilot,
html:not([data-theme]) body .notice,
html:not([data-theme]) body .editorial-disclosure,
html:not([data-theme]) body .review-panel,
html:not([data-theme]) body .info-box {
  background-color: var(--reader-paper-warm);
  color: var(--reader-ink);
  border-color: var(--reader-border);
}

html:not([data-theme]) body .rank-row {
  background-color: var(--reader-paper-card);
  border-color: var(--reader-border-light);
  color: var(--reader-ink);
}

html:not([data-theme]) body .source-list li:target {
  background-color: var(--reader-paper-warm);
  outline-color: var(--reader-focus);
}

html:not([data-theme]) input,
html:not([data-theme]) select,
html:not([data-theme]) textarea,
html:not([data-theme]) button {
  background-color: var(--reader-paper-card);
  color: var(--reader-ink);
  border-color: var(--reader-border);
}

/* --- Leyendas de imágenes con colores heredados estáticos --- */
html:not([data-theme]) body .press-hero figcaption,
html:not([data-theme]) body .press-figure figcaption,
html:not([data-theme]) body .article-media figcaption {
  color: var(--reader-ink-muted);
}


html:not([data-theme]) body .limit-note,html:not([data-theme]) body .video-local-note,html:not([data-theme]) body .video-player>.small{background:var(--reader-paper-warm);color:var(--reader-ink)}
html:not([data-theme]) body .lead .dek{color:var(--reader-ink-muted)}
html:not([data-theme]) body button:hover{background:var(--reader-paper-warm)}
html:not([data-theme]) body .vote-buttons button[aria-pressed="true"],html:not([data-theme]) body .filter-row button[aria-pressed="true"]{background:#2b573b;color:#fff;border-color:#8dcfa4}
}

@media print{:root,:root[data-theme]{color-scheme:light!important;--paper:#fff;--ink:#000;--muted:#333;--reader-paper:#fff;--reader-paper-warm:#fff;--reader-paper-card:#fff;--reader-ink:#000;--reader-ink-muted:#333;--reader-ink-faint:#333}html[data-theme="dark"] body .press-figure figcaption,html[data-theme="dark"] body .press-hero figcaption{color:#333!important}body .press-title .dek{color:#000!important}}

html[data-theme="dark"] body .article-header .dek{color:var(--reader-ink-muted)}
html[data-theme="dark"] body .visual{--green:#254c3d;--ink:#202720}
@media(prefers-color-scheme:dark){html:not([data-theme]) body .article-header .dek{color:var(--reader-ink-muted)}html:not([data-theme]) body .visual{--green:#254c3d;--ink:#202720}}
@media print{html[data-theme="dark"] body .article-header .dek{color:#000!important}}

/* Footer copy stays pale in both themes, so its surface stays dark. */
body .footer{background-color:#202720}
body .editor-review{font:14px/1.5 system-ui;padding:8px 12px;margin:12px 0;border:1px solid var(--reader-border);border-radius:5px;color:var(--reader-ink);background:var(--reader-paper-card)}