/* --- 📚 Sagas --- */
.estado-saga { display: inline-block; font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.estado-saga.ok { background: var(--acento-relleno); color: var(--sobre-acento); }
.estado-saga.alerta { background: color-mix(in srgb, var(--aviso) 18%, transparent); color: var(--aviso-texto); }
.estado-saga.tenue { background: var(--tinte-2); color: var(--suave); }

/* Vista «Sagas»: tarjetas con portadas apiladas */
.rejilla-sagas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 22px; margin-top: 18px; }
.tarjeta-saga { display: flex; flex-direction: column; gap: 4px; color: inherit; }
.pila-portadas { position: relative; aspect-ratio: 1; margin: 14px 14px 10px 0; }
.pila-portadas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px;
  box-shadow: var(--sombra-1); background: var(--panel-2); transition: transform .2s; }
.pila-portadas .pila-1 { transform: translate(7px, -7px) rotate(2deg); opacity: .85; }
.pila-portadas .pila-2 { transform: translate(14px, -14px) rotate(4deg); opacity: .65; }
.tarjeta-saga:hover .pila-0 { transform: translateY(-3px); }
.nombre-saga { font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.2; }
.meta-saga { font-size: 13px; color: var(--suave); }
.tarjeta-saga .estado-saga { align-self: flex-start; margin-top: 4px; }
.estado-saga .ic { width: 13px; height: 13px; vertical-align: -2px; }
.barra-saga { height: 4px; border-radius: 99px; background: var(--tinte-3); overflow: hidden; margin-top: 6px; }
.barra-saga > div { height: 100%; background: var(--acento); border-radius: 99px; }

/* Página de una saga */
.ficha-saga .estado-saga { margin-bottom: 6px; }
.orden-saga { margin-top: 16px; }
.lista-saga .tomo-saga .num { min-width: 38px; font-weight: 650; color: var(--suave); }
.lista-saga .tomo-saga .nom { flex: 1; min-width: 0; display: grid; }
.lista-saga .tomo-saga .t { font-size: 12.5px; color: var(--suave); }
.lista-saga .tomo-saga.falta { opacity: .55; cursor: default; }
.lista-saga .tomo-saga.falta .nom { font-style: italic; }
.hecho-saga { color: var(--acento); font-weight: 650; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.en-curso-saga { font-weight: 650; font-size: 13px; color: var(--texto-2); }
.lista-saga .nota { margin-top: 0; font-size: 12.5px; }

/* Filtros de la vista «Sagas» */
.filtro-sagas { margin: 0 0 10px; }
.filtro-sagas:empty { display: none; }
.barra-sagas .caja-buscar { flex: 1 1 200px; }
.barra-sagas select.campo { flex: 0 1 auto; max-width: 190px; text-overflow: ellipsis; }
.rejilla-sagas > .vacio { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .barra-sagas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .barra-sagas .caja-buscar { grid-column: 1 / -1; }
  .barra-sagas select.campo { min-width: 0; width: 100%; max-width: none; padding: 9px 10px; font-size: 14px; }
  .rejilla-sagas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .nombre-saga { font-size: 15.5px; }
  .meta-saga { font-size: 12px; }
  .pila-portadas { margin: 10px 10px 8px 0; }
}

/* Aviso de saga incompleta y «Llegó un tomo» */
.aviso-saga h2 { margin: 4px 0 10px; font-size: 23px; line-height: 1.25; }
.aviso-saga .antetitulo { display: flex; gap: 6px; align-items: center; }
.aviso-saga .antetitulo .ic { width: 15px; height: 15px; }
.acciones-aviso-saga { margin-top: 18px; gap: 8px; flex-wrap: wrap; }
#aviso-avisame.activo, #saga-avisame.activo { background: var(--acento-relleno); color: var(--sobre-acento); border-color: var(--acento-relleno); }
.aviso-faltan { margin-top: 10px; max-width: 520px; }
.llego-saga { gap: 10px; }
.llego-saga .nom { flex: 1; min-width: 0; display: grid; }
.llego-saga .t { font-size: 13px; color: var(--suave); }

/* Inicio: «Sagas completas para maratonear» (usa el carril de «Recién llegados») */
.fila-novedades.carril.carril-sagas { grid-auto-columns: 172px; gap: 20px; }
.carril-sagas .tarjeta-saga .meta-saga { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .fila-novedades.carril.carril-sagas { grid-auto-columns: 140px; gap: 16px; }
}