/* ============================================================================
   LECTOR DE ARTICULOS Y NOTICIAS
   ----------------------------------------------------------------------------
   Ventana emergente compartida por el blog (articulosblog.html) y por la
   seccion de noticias de la portada (index.html). Se extrajo de blog.css
   para que la portada no tenga que cargar toda la hoja del blog.

   Depende de una sola variable de marca, que se define aqui mismo para que
   el archivo sea autosuficiente en cualquier pagina que lo cargue.
   ========================================================================== */

:root {
  --blog-lime: #8ccb32;
}

.lector-capa {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: rgba(6, 17, 33, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.26s ease;
}

.lector-capa.is-visible {
  opacity: 1;
}

.lector-capa[hidden] {
  display: none;
}

/* El fondo no debe desplazarse mientras se lee */
body.lector-abierto {
  overflow: hidden;
}

/* Franja de altura cero: mantiene el boton pegado a la esquina del
   panel (no de la pantalla) y visible mientras se desplaza el articulo. */
.lector-cerrar-zona {
  position: sticky;
  top: 0;
  z-index: 6;
  height: 0;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.lector-cerrar {
  position: relative;
  top: 0.85rem;
  right: 0.9rem;
  pointer-events: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
  transition: transform 0.25s ease;
}

.lector-cerrar img {
  width: 100%;
  height: 100%;
  display: block;
}

.lector-cerrar:hover {
  transform: rotate(90deg);
}

/* ------------------------------------------------------- Panel */

.lector-panel {
  position: relative;
  width: min(980px, 100%);
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
  transform: translateY(18px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.lector-capa.is-visible .lector-panel {
  transform: none;
}

/* Barra de progreso de lectura */
.lector-barra {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 4px;
  background: rgba(11, 35, 71, 0.08);
}

.lector-barra span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blog-lime, #8ccb32), #6fae22);
  transition: width 0.15s linear;
}

/* --------------------------------------------------- Cabecera */

.lector-cabecera {
  /* CAUSA RAIZ del desborde: css/styles.css tiene una regla global
     "header { position: fixed; width: 100%; z-index: 1000;
     transition: all .3s }" para la barra de navegacion del sitio.
     Esta cabecera tambien es un <header>, asi que la heredaba: se salia
     del panel y se estiraba a todo el ancho de la ventana, con la
     transicion animando el salto. Hay que anularlas explicitamente. */
  position: relative;
  width: auto;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  box-shadow: none;
  transition: none;
  max-width: 100%;
  overflow: hidden;
  /* Flex y no grid: una pista de rejilla puede quedar fuera del
     contenedor cuando no cabe; un elemento flex con min-width:0
     siempre encoge dentro de el. */
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
  gap: 1.5rem;
  align-items: center;
  padding: 1.3rem 2rem 1.25rem;
  background: linear-gradient(135deg, #0b2347 0%, #12335f 100%);
  color: #ffffff;
}

.lector-cabecera-texto {
  flex: 1 1 auto;
  min-width: 0;
}

.lector-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--blog-lime, #8ccb32);
  color: #0b2347;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.lector-cabecera h1 {
  font-size: clamp(1.1rem, 1.75vw, 1.42rem);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 0.4rem;
  /* Sin tope de caracteres: con titulos largos partia en cinco lineas
     y la cabecera se comia media ventana. */
  max-width: none;
  overflow-wrap: anywhere;
}

.lector-cabecera > div > p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0 0 0.7rem;
  max-width: 62ch;
  /* Dos lineas bastan: el articulo entero esta justo debajo */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lector-firma {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
}

.lector-firma img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  padding: 5px;
}

.lector-firma span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.lector-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.lector-cabecera-lateral {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  /* Encoge desde 190px y desaparece antes que desbordar */
  flex: 0 1 190px;
  min-width: 0;
}

.lector-portada {
  width: 100%;
  max-width: 168px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0.95;
}

.lector-acciones-top {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
}

.lector-btn-suave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 0;
  white-space: nowrap;
  padding: 0.5rem 0.95rem;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: #ffffff;
  color: #0b2347;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.22s ease, transform 0.22s ease;
}

.lector-btn-suave:hover {
  transform: translateY(-1px);
  background: #f2f7ea;
}

.lector-btn-suave.is-activo {
  background: var(--blog-lime, #8ccb32);
  border-color: var(--blog-lime, #8ccb32);
}

/* --------------------------------------------------- Columnas */

.lector-columnas {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 2.25rem;
  padding: 1.9rem 2rem 2.25rem;
}

/* Indice lateral */
.lector-indice {
  position: sticky;
  top: 1.5rem;
  align-self: start;
}

.lector-indice-titulo {
  display: block;
  color: #7fb52b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.lector-indice ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  border-left: 2px solid rgba(11, 35, 71, 0.1);
}

.lector-indice-enlace {
  display: block;
  padding: 0.5rem 0 0.5rem 0.9rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: #5b6b7d;
  font-size: 0.86rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.22s ease, border-color 0.22s ease;
}

.lector-indice-enlace:hover {
  color: #0b2347;
}

.lector-indice-enlace.is-activo {
  border-left-color: var(--blog-lime, #8ccb32);
  color: #0b2347;
  font-weight: 600;
}

/* Consejo del experto */
.lector-consejo {
  display: flex;
  gap: 0.7rem;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(140, 203, 50, 0.1);
  border: 1px solid rgba(140, 203, 50, 0.24);
}

.lector-consejo img {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.lector-consejo p {
  margin: 0;
  color: #3f5266;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ------------------------------------------------- Contenido */

/* Entradilla: los parrafos de apertura del articulo, antes de la primera
   seccion. Van en cuerpo ligeramente mayor, como en prensa escrita, para
   marcar la diferencia entre la entrada y el desarrollo. */
.lector-entradilla {
  margin: 0 0 2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--blog-lime, #8ccb32);
}

.lector-entradilla p {
  color: #33465c;
  font-size: 1.03rem;
  line-height: 1.7;
  margin: 0 0 0.85rem;
}

.lector-entradilla p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .lector-entradilla {
    margin-bottom: 1.5rem;
    padding-left: 0.8rem;
  }

  .lector-entradilla p {
    font-size: 0.97rem;
  }
}

.lector-seccion {
  scroll-margin-top: 90px;
}

.lector-seccion + .lector-seccion {
  margin-top: 2rem;
}

.lector-seccion h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0b2347;
  margin: 0 0 0.85rem;
  line-height: 1.3;
}

.lector-seccion p {
  color: #45566c;
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0 0 0.9rem;
}

/* Caja de puntos clave */
.lector-puntos {
  margin: 1.25rem 0;
  padding: 1.15rem 1.25rem;
  border-radius: 14px;
  background: #f4f7fa;
  border: 1px solid #e2e8f0;
}

.lector-puntos h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #0b2347;
  margin: 0 0 0.75rem;
}

.lector-puntos ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.lector-puntos li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: #45566c;
  font-size: 0.9rem;
  line-height: 1.5;
}

.lector-puntos img {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

/* Lista numerada de requisitos */
.lector-pasos {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.85rem;
}

.lector-pasos li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid #e6ecf3;
  background: #ffffff;
  transition: border-color 0.22s ease, transform 0.22s ease;
}

.lector-pasos li:hover {
  border-color: rgba(140, 203, 50, 0.45);
  transform: translateX(2px);
}

.lector-paso-num {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f0f5e6;
  color: #4c6b1f;
  font-size: 0.78rem;
  font-weight: 800;
}

.lector-paso-icono {
  width: 26px;
  height: 26px;
}

.lector-paso-texto strong {
  display: block;
  color: #0b2347;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.lector-paso-texto span {
  display: block;
  margin-top: 0.15rem;
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ------------------------------------------------------- Pie */

.lector-pie {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 2.25rem;
  background: #ffffff;
  border-top: 1px solid #e6ecf3;
}

.lector-pie-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #45566c;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease;
}

.lector-pie-nav img {
  width: 16px;
  height: 16px;
  opacity: 0.75;
}

.lector-pie-nav:hover:not(:disabled) {
  background: #f2f6fa;
  color: #0b2347;
}

.lector-pie-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.lector-valoracion {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #5b6b7d;
  font-size: 0.86rem;
}

.lector-voto {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  border: 1px solid #dfe6ee;
  background: #ffffff;
  color: #45566c;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease;
}

.lector-voto img {
  width: 16px;
  height: 16px;
}

.lector-voto:hover:not(:disabled) {
  border-color: rgba(140, 203, 50, 0.5);
  background: #f6faf0;
}

.lector-voto.is-activo {
  border-color: var(--blog-lime, #8ccb32);
  background: rgba(140, 203, 50, 0.14);
  color: #0b2347;
}

.lector-voto:disabled {
  cursor: default;
}

.lector-gracias {
  color: #4c6b1f;
  font-size: 0.84rem;
  font-weight: 600;
}

.lector-btn-verde {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.25rem;
  border-radius: 9px;
  background: var(--blog-lime, #8ccb32);
  color: #0b2347;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.lector-btn-verde img {
  width: 18px;
  height: 18px;
}

.lector-btn-verde:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(140, 203, 50, 0.3);
  color: #0b2347;
}

/* Foco visible por teclado */
.lector-capa button:focus-visible,
.lector-capa a:focus-visible {
  outline: 3px solid var(--blog-lime, #8ccb32);
  outline-offset: 3px;
}

/* ------------------------------------------------------ Responsive */

@media (max-width: 900px) {
  .lector-cabecera {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  /* En columna, flex-basis pasa a ser el ALTO: sin esto la franja
     lateral se estiraba a 190px y disparaba la altura de la cabecera. */
  .lector-cabecera-lateral,
  .lector-cabecera-texto {
    flex: 0 0 auto;
  }

  .lector-cabecera-lateral {
    flex-direction: row;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
  }

  .lector-portada {
    width: 120px;
    height: 84px;
    flex-shrink: 0;
  }

  .lector-acciones-top {
    flex: 1 1 200px;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .lector-acciones-top .lector-btn-suave {
    flex: 1 1 auto;
  }

  .lector-columnas {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* En pantallas estrechas el indice va arriba, sin quedarse fijo */
  .lector-indice {
    position: static;
  }

  .lector-indice ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-left: 0;
    margin-bottom: 1rem;
  }

  .lector-indice-enlace {
    padding: 0.4rem 0.85rem;
    margin: 0;
    border-left: 0;
    border-radius: 999px;
    background: #f2f6fa;
    font-size: 0.8rem;
  }

  .lector-indice-enlace.is-activo {
    background: rgba(140, 203, 50, 0.18);
  }
}

@media (max-width: 420px) {
  /* La portada es decorativa: a este ancho vale mas el espacio para
     que "Guardar" y "Compartir" se lean enteros. */
  .lector-portada {
    display: none;
  }
}

@media (max-width: 640px) {
  .lector-capa {
    padding: 0;
  }

  .lector-panel {
    width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }

  .lector-cerrar {
    top: 0.6rem;
    right: 0.7rem;
    width: 38px;
    height: 38px;
  }

  .lector-cerrar-zona {
    top: 0;
  }

  .lector-cabecera {
    padding: 1.7rem 1.25rem 1.2rem;
    gap: 0.9rem;
  }

  /* En movil el extracto repite lo que dice el primer parrafo del
     articulo, que queda justo debajo: se gana altura util. */
  .lector-cabecera > div > p {
    display: none;
  }

  .lector-firma {
    font-size: 0.75rem;
    gap: 0.45rem;
  }

  .lector-columnas {
    padding: 1.5rem 1.25rem 2rem;
  }

  .lector-pie {
    padding: 0.9rem 1.25rem;
    gap: 0.7rem;
    justify-content: center;
  }

  /* En movil sobran: la navegacion se hace con anterior/siguiente */
  #lectorContinuar {
    display: none;
  }

  .lector-pie-nav span {
    display: none;
  }

  .lector-pie-nav {
    padding: 0.5rem;
  }

  .lector-btn-verde {
    flex: 1 1 auto;
    justify-content: center;
  }

  .lector-pasos li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .lector-paso-icono {
    display: none;
  }
}

/* ---------------------------------- Respeta reduccion de movimiento */

@media (prefers-reduced-motion: reduce) {
  .lector-capa,
  .lector-panel,
  .lector-cerrar,
  .lector-btn-suave,
  .lector-btn-verde,
  .lector-pasos li,
  .lector-barra span {
    transition: none !important;
  }

  .lector-cerrar:hover,
  .lector-btn-suave:hover,
  .lector-btn-verde:hover,
  .lector-pasos li:hover {
    transform: none;
  }

  .lector-panel {
    transform: none;
  }
}