/* ===================================================================
   SAGAS (sagas.html) — sección transversal: cada saga es una FRANJA
   horizontal independiente con su propia línea temporal y su propio
   scroll horizontal. Vertical = recorrer sagas; horizontal dentro de
   una franja = recorrer sus obras.

   Reutiliza el chrome neutro de Home (body.fondo-home) y los tokens de
   tema de KEEPB (--panel-grad, --acento*, --borde...). No introduce
   lenguaje visual nuevo. La vista individual (sagas.html?saga=<id>) usa
   el mismo componente de franja, con un encabezado más grande.
   =================================================================== */

.sagas-buscador-wrap {
  margin: 1rem 1.5rem 0;
}
.sagas-buscador-wrap[hidden] { display: none; }
.sagas-buscador.topbar-buscar {
  width: 100%;
  max-width: 520px;
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
}

.sagas-contenido {
  padding: 0.6rem 0 5rem;
}

/* ===== Franja de una saga ===== */
.saga-bloque {
  padding: 1.4rem 0 1.6rem;
  /* Superficie MUY sutil por saga (adaptada al tema) para que cada bloque
     se lea como un área independiente sin parecer una tarjeta. El inset
     horizontal se compensa en el padding del encabezado y la timeline,
     así el contenido queda en la misma posición que antes. */
  background: rgba(var(--panel-borde-int-rgb), 0.035);
  border-radius: 14px;
  margin: 0 0.5rem 0.5rem;
}
.saga-bloque[hidden] { display: none; }

.saga-bloque-cab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0 1rem;
}

/* Punto 1: el nombre de la saga es uno de los elementos principales del
   bloque — mismo estilo tipográfico de la app, solo con más presencia. */
.saga-bloque-nombre {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto);
  text-decoration: none;
  transition: color 0.15s ease;
}
.saga-bloque-nombre:hover { color: var(--acento-suave); }

.saga-bloque-meta {
  font-size: 0.75rem;
  color: var(--texto-tenue);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.saga-bloque-meta .saga-rango { color: var(--acento-suave); }
.saga-bloque-meta .saga-porcat { opacity: 0.85; }

/* ===== Timeline horizontal ===== */
.saga-timeline {
  margin-top: 0.6rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
  padding: 0.5rem 1rem 0.7rem;
}

/* Punto 5: pista MUY sutil de que hay más elementos hacia la derecha.
   El propio contenido se desvanece en el borde derecho vía máscara — no
   añade barras, flechas ni color. js/sagas.js pone/quita .mas-derecha
   según la posición de scroll (y la quita al llegar al final o si todo
   ya cabe). */
.saga-timeline.mas-derecha {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 52px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 52px), transparent);
}
.saga-timeline::-webkit-scrollbar { height: 8px; }
.saga-timeline::-webkit-scrollbar-track { background: transparent; }
.saga-timeline::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 4px; }
.saga-timeline::-webkit-scrollbar-thumb:hover { background: var(--acento-suave); }

.saga-pista {
  position: relative;
  display: flex;
  gap: 1.1rem;
  min-width: min-content;
  padding: 0 0.3rem;
}

/* La línea: detrás de los nodos, atraviesa sus centros. top = alto de la
   etiqueta de año (1.4rem) + medio nodo (5px). */
.saga-pista::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  right: 0.3rem;
  top: calc(1.4rem + 5px);
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0,
    var(--acento-suave) 4%,
    var(--acento-suave) 96%,
    transparent 100%);
  opacity: 0.45;
  pointer-events: none;
}

.saga-hito {
  flex: 0 0 auto;
  width: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.saga-hito-anio {
  height: 1.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--texto-tenue);
}
.saga-hito-anio.repetido { opacity: 0.35; }

.saga-hito-nodo {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acento-suave);
  box-shadow: 0 0 8px var(--acento-glow), 0 0 0 3px var(--bg);
  margin-bottom: 0.75rem;
}

.saga-hito-card {
  display: block;
  width: 100%;
  text-decoration: none;
  color: var(--texto);
}

.saga-hito-poster {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--panel-borde-ext);
  box-shadow: var(--panel-relieve-suave);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.saga-hito-card:hover .saga-hito-poster {
  border-color: var(--acento-suave);
  box-shadow: var(--panel-relieve-suave), 0 0 14px var(--acento-glow);
  transform: translateY(-2px);
}
.saga-hito-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.saga-hito-poster-vacio {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--texto-tenue); font-size: 1.6rem;
}

/* Punto 4: SIEMPRE 2 líneas de alto (aunque el título sea de 1 línea) para
   que todas las fichas de la fila queden alineadas; corte limpio con
   line-clamp, nunca una 3ª línea. */
.saga-hito-titulo {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.25;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em; /* 2 líneas × 1.25 */
}

/* Punto 3: debajo del póster ya NO va el año (la timeline lo comunica);
   solo el tipo de medio. */
.saga-hito-tipo {
  margin-top: 0.15rem;
  font-size: 0.71rem;
  color: var(--texto-tenue);
  text-align: center;
}

/* ===== Vista individual de una saga ===== */
.saga-detalle-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
  margin-bottom: 0.2rem;
}
.saga-detalle-nombre {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto);
  margin: 0;
}
.saga-detalle-meta {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--texto-tenue);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.saga-detalle-meta .saga-rango { color: var(--acento-suave); }

.saga-menu { position: relative; flex-shrink: 0; }
.saga-menu-boton {
  width: 34px;
  height: 34px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--panel-grad-clara);
  color: var(--texto-tenue);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.saga-menu-boton:hover, .saga-menu-boton.abierto { color: var(--texto); border-color: var(--acento-suave); }
.saga-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 180px;
  flex-direction: column;
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 9px;
  box-shadow: var(--panel-relieve);
  overflow: hidden;
}
.saga-menu-dropdown.abierto { display: flex; }
.saga-menu-dropdown button {
  padding: 0.75rem 0.95rem;
  border: none;
  border-bottom: 1px solid var(--borde-suave);
  background: transparent;
  color: var(--texto);
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.saga-menu-dropdown button:last-child { border-bottom: none; }
.saga-menu-dropdown button:hover { background: rgba(var(--acento-suave-rgb), 0.1); color: var(--acento-suave); }
.saga-menu-dropdown button.peligro:hover { background: rgba(220, 38, 38, 0.14); color: #ff8a8a; }

/* ===== Estados ===== */
.sagas-mensaje {
  padding: 3rem 1.2rem;
  text-align: center;
  color: var(--texto-tenue);
  font-size: 0.92rem;
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.55;
}
.sagas-mensaje-hint {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  opacity: 0.8;
}

/* ===== Modal renombrar (mismo molde que el modal de Listas) ===== */
.sagas-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.sagas-modal[hidden] { display: none; }
.sagas-modal-fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sagas-modal-cuerpo {
  position: relative;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.3rem;
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 14px;
  box-shadow: var(--panel-relieve);
}
.sagas-modal-cuerpo h3 { margin: 0; font-size: 1.05rem; color: var(--texto); }
.sagas-modal-hint { margin: -0.2rem 0 0; font-size: 0.78rem; color: var(--texto-tenue); }
.sagas-modal-input.topbar-buscar { width: 100%; max-width: none; padding: 0.7rem 0.9rem; font-size: 0.95rem; }
.sagas-modal-botones { display: flex; gap: 0.6rem; }
.sagas-modal-botones .boton { flex: 1; }

/* ===== Toast ===== */
.sagas-toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%) translateY(1.5rem);
  z-index: 450;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(100vw - 2rem);
  padding: 0.7rem 1rem;
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 999px;
  box-shadow: var(--panel-relieve);
  color: var(--texto);
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sagas-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.sagas-toast svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--acento-suave); }
.sagas-toast span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Responsive ===== */
@media (max-width: 820px) {
  .saga-hito { width: 132px; }
}
@media (max-width: 560px) {
  .sagas-buscador-wrap { margin: 0.9rem 1rem 0; }
  .saga-bloque { margin: 0 0.35rem 0.45rem; }
  .saga-bloque-cab { padding: 0 0.85rem; }
  .saga-timeline { padding: 0.5rem 0.85rem 0.7rem; }
  .saga-detalle-cab { padding: 0 0.85rem; }
  .saga-bloque-nombre { font-size: 1.35rem; }
  .saga-hito { width: 118px; }
  .saga-hito-titulo { font-size: 0.78rem; }
  .sagas-modal { align-items: flex-end; padding: 0; }
  .sagas-modal-cuerpo {
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 1.3rem 1.1rem calc(1.3rem + env(safe-area-inset-bottom, 0px));
  }
}