/* ==========================================================================
   EN PRIMERA — Herramientas de lectura (Fase 1)
   --------------------------------------------------------------------------
   Aditivo y discreto: NO redefine el diseño existente; solo añade:
     1. Barra de herramientas de lectura (tamaño de texto / modo oscuro /
        TTS / tiempo de lectura) en el single.
     2. Modo oscuro manual (html.enp-dark) vía reasignación de tokens.
     3. Resumen de la noticia (acordeón al final del artículo).
     4. Barra de progreso de lectura (fija, 4px).
     5. Escala de texto (data-enp-scale) + estilos de controles TTS.
   Se carga al final (después de css/estilos.css) para no romper nada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Barra de herramientas de lectura (single)
   Reutiliza el lenguaje visual de .entry-share / .enp-share-link.
   -------------------------------------------------------------------------- */
.enp-reading-tools{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 16px;
  border-top:1px solid var(--enp-line-strong);
  border-bottom:1px solid var(--enp-line);
  padding:10px 0 12px;
  margin:0 0 16px;
}
.enp-reading-tools-group{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.enp-reading-tools-label{
  color:var(--enp-muted);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-right:2px;
}
.enp-tool-btn{
  border:1px solid var(--enp-line-strong);
  background:var(--enp-paper);
  color:var(--enp-ink);
  font-family:var(--font-ui);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.4;
  padding:5px 9px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.enp-tool-btn:hover{border-color:var(--enp-navy);color:var(--enp-navy)}
.enp-tool-btn:disabled{opacity:.42;cursor:not-allowed}
.enp-tool-btn:focus-visible{outline:2px solid var(--enp-accent);outline-offset:2px}
.enp-tts{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.enp-tts-estimate{color:var(--enp-muted);font-size:.72rem;letter-spacing:.02em}
.enp-reading-time{
  color:var(--enp-muted);
  font-size:.72rem;
  letter-spacing:.02em;
  margin-left:auto;
  white-space:nowrap;
}

/* Bootstrap's .screen-reader-text is not loaded here; keep a tiny a11y utility. */
.enp-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   7. Alineación del single + crédito de imagen derecha + crédito sutil
   Añadido: alinea el encabezado, el toolbar y el bloque de resumen al
   ancho del contenido (.entry-content, 760px) y coloca el crédito de la
   imagen a la derecha con tipografía sutil (sin invadir).
   -------------------------------------------------------------------------- */
.single .entry-header,
.single .enp-reading-tools,
.single .enp-summary-box,
.single .enp-summary-accordion{
  max-width:760px;
}
.single .entry-content .post-thumbnail-credit{
  display:block;
  text-align:right;
  color:var(--enp-muted);
  font-family:var(--font-ui);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.4;
  margin:-6px 0 16px;
}
.single .entry-content .post-thumbnail-credit a{
  color:var(--enp-muted);
  border-bottom:1px solid var(--enp-line);
}
.single .entry-content .post-thumbnail-credit a:hover{
  color:var(--enp-accent);
  border-color:var(--enp-accent);
}

/* --------------------------------------------------------------------------
   8. Toggle de modo oscuro en el header top (desktop y móvil)
   A la izquierda de las redes sociales del topbar. Píldora discreta pero
   diciente: icono + texto "Modo oscuro"/"Modo claro".
   -------------------------------------------------------------------------- */
.enp-topbar-dark{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--enp-line-strong);
  border-radius:24px;
  background:var(--enp-paper);
  color:var(--enp-ink);
  font-family:var(--font-ui);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.2;
  padding:3px 10px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.enp-topbar-dark:hover{border-color:var(--enp-navy);color:var(--enp-navy);background:var(--enp-wash)}
.enp-topbar-dark:focus-visible{outline:2px solid var(--enp-accent);outline-offset:2px}
.enp-topbar-dark-icon{font-size:.8rem;line-height:1}

/* --------------------------------------------------------------------------
   9. Toggle de modo oscuro en el menú canvas (drawer)
   Debajo de las secciones, destacado en otro color (fondo washed) para que
   se perciba como una acción aparte del listado de navegación.
   -------------------------------------------------------------------------- */
.enp-drawer-dark{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin-top:10px;
  padding:12px 18px;
  border:0;
  border-top:1px solid var(--enp-line);
  border-bottom:1px solid var(--enp-line);
  background:var(--enp-wash);
  color:var(--enp-ink);
  font-family:var(--font-ui);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.enp-drawer-dark:hover{background:var(--enp-wash-2);color:var(--enp-navy)}
.enp-drawer-dark:focus-visible{outline:2px solid var(--enp-accent);outline-offset:2px}
.enp-drawer-dark-icon{font-size:.9rem;line-height:1}

/* --------------------------------------------------------------------------
   2. Escala de tamaño de texto (solo contenido del artículo)
   Aplicada por JS vía data-enp-scale en <html>; el nivel 0 (default) no
   setea el atributo para jamás tocar el diseño por defecto. Los headings
   usan rem fijos y el layout no se afecta.
   -------------------------------------------------------------------------- */
html[data-enp-scale="-3"] .single .entry-content{font-size:.78rem}
html[data-enp-scale="-2"] .single .entry-content{font-size:.88rem}
html[data-enp-scale="-1"] .single .entry-content{font-size:.98rem}
html[data-enp-scale="1"] .single .entry-content{font-size:1.2rem}
html[data-enp-scale="2"] .single .entry-content{font-size:1.32rem}
html[data-enp-scale="3"] .single .entry-content{font-size:1.44rem}
html[data-enp-scale="4"] .single .entry-content{font-size:1.58rem}
html[data-enp-scale="5"] .single .entry-content{font-size:1.74rem}

/* --------------------------------------------------------------------------
   3. Resumen de la noticia — acordeón al final del artículo (editorial,
   generado una vez en el pipeline, revelado con animación de "generación"
   que muestra el texto ya guardado en post meta).
   -------------------------------------------------------------------------- */
.enp-summary-accordion{
  max-width:760px;
  margin:28px 0 8px;
  border-top:2px solid var(--enp-navy);
  border-bottom:1px solid var(--enp-line);
  background:var(--enp-wash);
  font-family:var(--font-ui);
  color:var(--enp-ink);
}
.enp-summary-toggle{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 10px;
  list-style:none;
  cursor:pointer;
  padding:14px 18px;
  user-select:none;
}
.enp-summary-toggle::-webkit-details-marker{display:none}
.enp-summary-toggle:hover{background:var(--enp-wash-2)}
.enp-summary-toggle:focus-visible{outline:2px solid var(--enp-accent);outline-offset:-2px}
.enp-summary-icon{font-size:.85rem;line-height:1}
.enp-summary-toggle-label{
  color:var(--enp-navy);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.enp-summary-chev{
  width:8px;height:8px;
  margin-left:auto;
  border-right:2px solid var(--enp-muted);
  border-bottom:2px solid var(--enp-muted);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.enp-summary-accordion[open] .enp-summary-chev{transform:rotate(-135deg) translateY(-2px)}
.enp-summary-body{padding:0 18px 18px}
.enp-summary-content{
  opacity:1;
  transition:opacity .3s ease;
}
.enp-summary-generating{
  margin:0;
  color:var(--enp-muted);
  font-size:.9rem;
  line-height:1.5;
  min-height:1.5em;
}
.enp-summary-dots::after{
  content:'';
  animation:enp-dots 1.2s steps(4,end) infinite;
}
@keyframes enp-dots{
  0%{content:''}
  25%{content:'.'}
  50%{content:'..'}
  75%{content:'...'}
  100%{content:''}
}
.enp-summary-typing{
  margin:0;
  font-size:.94rem;
  line-height:1.62;
  color:var(--enp-ink);
  white-space:pre-wrap;
}
.enp-summary-caret{
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:2px;
  vertical-align:text-bottom;
  background:var(--enp-accent);
  animation:enp-blink .8s step-end infinite;
}
@keyframes enp-blink{50%{opacity:0}}
.enp-summary-h{
  font-family:var(--font-heading);
  color:var(--enp-navy);
  font-weight:700;
  font-size:1.12rem;
  letter-spacing:-.01em;
  margin:14px 0 4px;
}
.enp-summary-p{
  margin:0 0 6px;
  font-size:.94rem;
  line-height:1.62;
  color:var(--enp-ink);
}
.enp-summary-ul{margin:4px 0 0;padding-left:20px}
.enp-summary-ul li{margin:0 0 4px;font-size:.94rem;line-height:1.55;color:var(--enp-ink)}

/* --------------------------------------------------------------------------
   4. Barra de progreso de lectura (fija arriba, 4px, discreta)
   -------------------------------------------------------------------------- */
.enp-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:4px;
  background:transparent;
  z-index:2000;
  pointer-events:none;
}
.enp-progress-fill{
  display:block;
  height:100%;
  width:0;
  background:var(--enp-accent);
  transition:width .08s linear;
}

/* --------------------------------------------------------------------------
   5. Modo oscuro MANUAL (html.enp-dark)
   Reasigna los tokens canónicos para que todo el sitio (no solo la noticia)
   adapte su paleta; el footer y las superficies que SIEMPRE son navy
   (heroes con overlay de texto blanco, botones sólidos, paginación, etc.)
   se sobrescriben a un navy profundo fijo en vez de volverse claros.
   El usuario lo activa explícitamente; nunca automático (sin
   prefers-color-scheme; sin opción "Automático").
   -------------------------------------------------------------------------- */
html.enp-dark{
  color-scheme:dark;
  --enp-navy:#d3e0f2;          /* headings / acentos de texto pasan a claro */
  --enp-navy-2:#b6c8e0;
  --enp-ink:#e6ecf4;           /* cuerpo */
  --enp-ink-soft:#b9c5d6;
  --enp-muted:#93a3ba;
  --enp-line:#29374d;
  --enp-line-strong:#3b4d68;
  --enp-paper:#0f1723;         /* fondo principal del sitio */
  --enp-wash:#141d2c;
  --enp-wash-2:#192438;
  --enp-accent:#7fa6d9;
  --enp-accent-soft:#182740;
  --enp-shadow:0 8px 24px rgba(0,0,0,.28);
  --enp-shadow-strong:0 16px 40px rgba(0,0,0,.4);
}

/* Superficies que siguen siendo navy en dark (fondo fijo oscuro + texto claro). */
html.enp-dark .enp-drawer-search-btn,
html.enp-dark .enp-btn,
html.enp-dark .no-results .search-form button,
html.enp-dark .pagination .current,
html.enp-dark .pagination .page-numbers:hover,
html.enp-dark .single .enp-share-link:hover,
html.enp-dark .btn-primary,
html.enp-dark .btn-outline-secondary:hover,
html.enp-dark #commentform .submit,
html.enp-dark .enp-explore a:hover{
  background:#08101d !important;
  border-color:#08101d !important;
  color:#fff !important;
}

/* Heroes con overlay navy fijo (texto blanco sobre foto). */
html.enp-dark .enp-apertura-main .first-post .post,
html.enp-dark .enp-hero-grid .first-post .post,
html.enp-dark .enp-duo-col .first-post .post,
html.enp-dark .ingenio .first-post .post,
html.enp-dark .archive .first-post .post,
html.enp-dark .enp-inverse-main .first-post .post{
  background:#08101d;
}

/* Secciones inverse, footer, páginas institucionales y ley básica. */
html.enp-dark .enp-section--inverse,
html.enp-dark .enp-about-commitment,
html.enp-dark .enp-about-cta--solid,
html.enp-dark .enp-about-cta--outline:hover,
html.enp-dark .enp-page-clean .enp-ads-hero,
html.enp-dark .enp-ads-hero-code,
html.enp-dark .enp-footer,
html.enp-dark #footer.enp-footer{
  background:#08101d;
  color:#fff;
}

/* Inputs y controles nativos (buscadores, range, etc.) en dark. */
html.enp-dark .enp-search-input,
html.enp-dark .enp-drawer-search-input,
html.enp-dark .enp-search-form--page input[type="search"],
html.enp-dark input[type="search"],
html.enp-dark input[type="text"]{
  background:var(--enp-paper);
  border-color:var(--enp-line-strong);
  color:var(--enp-ink);
}
html.enp-dark .enp-search-input::placeholder,
html.enp-dark .enp-drawer-search-input::placeholder{color:var(--enp-muted)}

/* Los submenús/menús desplegables que usen fondo claro de Bootstrap. */
html.enp-dark .dropdown-menu,
html.enp-dark .sub-menu{
  background:var(--enp-paper) !important;
  border-color:var(--enp-line-strong);
}

/* Herramientas de lectura y TTS en dark. */
html.enp-dark .enp-tool-btn{
  background:var(--enp-paper);
  border-color:var(--enp-line-strong);
  color:var(--enp-ink);
}
html.enp-dark .enp-tool-btn:hover{border-color:var(--enp-accent);color:var(--enp-accent)}
html.enp-dark .enp-tool-btn:disabled{opacity:.42}
html.enp-dark .enp-topbar-dark{background:var(--enp-paper);border-color:var(--enp-line-strong);color:var(--enp-ink)}
html.enp-dark .enp-topbar-dark:hover{color:var(--enp-accent);border-color:var(--enp-accent);background:var(--enp-wash)}
html.enp-dark .enp-drawer-dark{background:var(--enp-wash);color:var(--enp-ink);border-color:var(--enp-line-strong)}
html.enp-dark .enp-drawer-dark:hover{color:var(--enp-accent);background:var(--enp-wash-2)}
html.enp-dark .single .entry-content .post-thumbnail-credit a{color:var(--enp-muted);border-color:var(--enp-line-strong)}
html.enp-dark .single .entry-content .post-thumbnail-credit a:hover{color:var(--enp-accent);border-color:var(--enp-accent)}

/* --------------------------------------------------------------------------
   6. Responsive / toque táctil
   -------------------------------------------------------------------------- */
@media (max-width:575px){
  .enp-reading-tools{gap:8px 10px}
  .enp-reading-tools-group{gap:4px}
  /* En mobile el grupo de escala se entiende solo con los botones A−/A/A+;
     el texto "Tamaño del texto" sobra. */
  .enp-reading-tools-label{display:none}
  .enp-reading-time{margin-left:auto;width:auto}
  /* Escuchar va al lado del tamaño de letra (misma fila), no debajo. */
  .enp-tts{width:auto}
  .enp-tool-btn{padding:7px 10px;min-height:34px}
}