/* =========================================================================
 * EL DIRECTORIO DE PODCASTS, VESTIDO DE ZARZA
 *
 * `/podcasts/` no lo pinta este tema: lo pinta `custom-podcast-plugin`, con sus
 * propias reglas de reescritura y su contenido fuera de WordPress. Y es el
 * activo del sitio: unas 618.000 fichas indexadas. O sea que la parte mas
 * visitada del sitio se veria como OTRO sitio.
 *
 * Hasta hoy lo parcheaba `scripts-n-styles` con 794 caracteres de CSS apuntando
 * a clases de Sahifa. Eso no se copia --no serviria de nada-- pero el encargo
 * si: aqui esta hecho de verdad.
 *
 * 🔴 NO SE REESCRIBEN SUS 695 LINEAS. El plugin ya tiene un sistema decente: 15
 * variables CSS y 83 usos de var(). Basta con redefinir las quince. Reescribir
 * su hoja habria creado una segunda copia que se queda vieja en cuanto alguien
 * toque el plugin.
 *
 * (Los 35 atributos style="" de sus plantillas, que ganan a cualquier hoja sin
 * !important, se cambiaron para que usen esas mismas variables. Ver
 * _util/parchea-cpp-colores.py.)
 * ========================================================================= */

:root {
  /* El rojo de la casa donde estaba el azul de Apple. */
  --cpp-primary:       var(--zz-rojo);
  --cpp-primary-dark:  var(--zz-rojo-hondo);
  --cpp-primary-light: var(--zz-rojo-vivo);

  /* La tinta sobre crema del sistema, no el gris de Apple. */
  --cpp-secondary:     var(--zz-tinta);
  --cpp-text:          var(--zz-tinta);

  /* 🔴 El gris secundario va a --zz-rotulo-txt y NO a --zz-tinta-3, aunque
     tinta-3 sea el tono equivalente. tinta-3 sobre crema da 3,07:1 y no llega a
     AA; rotulo-txt esta medido en 4,53:1 y existe exactamente para esto. Aqui
     pesa: el gris del plugin lleva las fechas, las duraciones y el numero de
     episodios de todas las fichas. */
  --cpp-gray:          var(--zz-rotulo-txt);
  --cpp-gray-light:    var(--zz-tinta-3);

  --cpp-light:         var(--zz-crema-2);
  --cpp-white:         var(--zz-crema);
  --cpp-border:        var(--zz-linea);

  --cpp-radius:        var(--zz-radio);
  --cpp-radius-small:  var(--zz-radio-chico);

  /* Las sombras del plugin son de interfaz de sistema operativo: suaves y
     azuladas. Las de ZARZA son de papel sobre rojo. */
  --cpp-shadow:        0 1px 0 rgba(36,26,21,.06), 0 2px 10px rgba(36,26,21,.07);
  --cpp-shadow-hover:  0 2px 0 rgba(36,26,21,.08), 0 8px 22px rgba(36,26,21,.13);
}

/*
 * Lo que las variables no alcanzan: tipografia y rotulacion.
 *
 * El plugin no tiene variable de fuente, asi que aqui se le da la de la marca.
 * Sin esto el directorio se leeria en la fuente del sistema mientras el resto
 * del sitio va en IBM Plex Mono, y se notaria el salto al entrar.
 */
.cpp-container { font-family: var(--zz-mono); color: var(--zz-tinta); }

.cpp-podcast-title,
.cpp-episode-title,
.cpp-player-title {
  font-family: var(--zz-display);
  letter-spacing: var(--zz-tracking-titular);
  text-transform: lowercase;   /* regla de marca: los titulares van en minusculas */
}

/* Los datos --fecha, duracion, numero de episodio-- son ROTULACION TECNICA:
   versalita, espaciada, y nunca compitiendo con el titular. */
.cpp-episode-date,
.cpp-episode-meta,
.cpp-podcast-stats {
  font-family: var(--zz-mono);
  font-size: 10.5px;
  letter-spacing: var(--zz-tracking-rotulo);
  text-transform: uppercase;
  color: var(--zz-rotulo-txt);
}

/* Los contadores del reproductor van sobre la crema-2 del player: ahi el
   rotulo-txt se queda en 4,21 y el que aguanta AA es tinta-2. */
.cpp-time-current,
.cpp-time-total {
  font-family: var(--zz-mono);
  font-size: 10.5px;
  letter-spacing: var(--zz-tracking-rotulo);
  text-transform: uppercase;
  color: var(--zz-tinta-2);
}

/* Las fichas del directorio son fichas de casete, como las del catalogo: papel
   crema sobre el rojo, con su filo. */
.cpp-podcast-card,
.cpp-episode-item {
  background: var(--zz-crema);
  border: 1px solid var(--zz-linea);
  border-radius: var(--zz-radio);
}
.cpp-podcast-card:hover,
.cpp-episode-item:hover { border-color: var(--zz-linea-2); }

/* El boton primario del plugin es el boton rojo del sistema. */
.cpp-btn-primary,
.cpp-play-main,
.cpp-play-inline {
  background: var(--zz-rojo);
  color: var(--zz-sobre-rojo);
  border: 1px solid var(--zz-rojo-hondo);
}
.cpp-btn-primary:hover,
.cpp-play-main:hover,
.cpp-play-inline:hover { background: var(--zz-rojo-alto); }

.cpp-btn-secondary {
  background: var(--zz-crema-2);
  color: var(--zz-tinta);
  border: 1px solid var(--zz-linea);
}

/* El reproductor flotante del plugin y el del tema son DOS barras fijas abajo.
   Si un dia coincidieran en pantalla se taparian, asi que el del plugin se
   levanta por encima de la altura de la del tema. */
body.zz-sonando .cpp-floating-player { bottom: 92px; }

/* La barra de avance, en rojo. */
.cpp-progress-fill { background: var(--zz-rojo); }
.cpp-progress-buffered { background: var(--zz-linea-2); }
.cpp-progress-bar { background: var(--zz-crema-3); }

/* La paginacion, con la rotulacion del sistema. La fila ENVUELVE: con doce
   botones en linea sumaba 396px y era el scroll horizontal fantasma de
   /podcasts/ en movil (costo una biseccion del DOM encontrarlo). */
.cpp-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cpp-page-link,
.cpp-page-current {
  font-family: var(--zz-mono);
  letter-spacing: .1em;
  border-radius: var(--zz-radio-chico);
}
.cpp-page-current { background: var(--zz-rojo); color: var(--zz-sobre-rojo); }

/* =========================================================================
 * EL BLOQUE DE "ULTIMOS EPISODIOS"  (atajo [podcast_mostrar_recientes])
 *
 * 🔴 ESTE MARCADO NO ES DEL PLUGIN NI DEL TEMA: ES DE SAHIFA. El atajo emite
 * `.cat-box.recent-box > .recent-item > .post-thumbnail + h3.post-box-title`,
 * que son las clases del tema viejo. Mientras Sahifa estuvo activo las vestia
 * el, y por eso nadie lo noto; con el tema nuevo el bloque salia como una lista
 * pelada con un hueco de 165 px por episodio. Es el bloque principal de las
 * ocho portadas.
 *
 * (Esto es lo que de verdad pedia el CSS del viejo `scripts-n-styles`: sus 794
 * caracteres apuntaban justo a `.recent-item-podcasts`. Aqui esta hecho en
 * condiciones, con los tokens de la marca y sin `!important`.)
 *
 * 🔴 EL TITULO NO SE PUEDE DIMENSIONAR DESDE AQUI. El atajo escribe
 * `style="font-size:1em !important"` en el <h3>, y una declaracion `!important`
 * EN LINEA gana a cualquier hoja de autor, tambien `!important`. No hay pelea
 * que ganar: como es `1em`, se hereda del padre, asi que el tamano se fija en
 * `.recent-item` y el titulo lo sigue.
 * ========================================================================= */

.cat-box.recent-box {
  display: grid;
  /* 128 px deja cuatro columnas dentro de la medida de 66ch del manual.
     La rejilla no se sale de la columna de lectura: la medida es una
     regla de la marca, no un accidente. */
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 20px 18px;
  margin: 26px 0 30px;
}
.cat-box.recent-box .clear { display: none; }   /* limpiador de flotados heredado */

.recent-item {
  font-size: 13px;                 /* la base de la ficha; el titulo lo repite */
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;                    /* sin esto un titulo largo ensancha la columna */
}

.recent-item .post-thumbnail {
  position: relative;
  /* El disco va DETRAS de toda caratula, no solo de las que faltan: cuando la
     imagen del feed da 404 --pasa, son URL de terceros-- el navegador deja el
     hueco transparente y asoma el disco en vez de un cuadro vacio. No cuesta
     una peticion: es un degradado. */
  background-image: var(--zz-disco-dibujado);
  background-size: cover;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--zz-linea);
  border-radius: var(--zz-radio-chico);
  background: var(--zz-crema-2);
  box-shadow: var(--zz-sombra-ficha);
  transition: transform .15s ease, box-shadow .15s ease;
}
.recent-item .post-thumbnail a { display: block; width: 100%; height: 100%; }

/* Las caratulas vienen con width/height 165 en el atributo. Se ignoran: la
   ficha manda, y asi una caratula rectangular no deforma la rejilla. */
.recent-item .post-thumbnail img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}

.recent-item:hover .post-thumbnail {
  transform: translateY(-2px);
  box-shadow: var(--zz-sombra-disco);
}

/* --- El hueco de quien no tiene caratula ------------------------------------
 * Muchos feeds antiguos --audiolibros de dominio publico, sobre todo-- no
 * traen imagen, o la traen por http y no se acepta. Antes eso descartaba el
 * episodio entero y la portada acababa vacia. Ahora se pinta un disco dibujado
 * con CSS: es del mundo de la marca (sello discografico) y no pide ni una
 * peticion mas. */
:root {
  /* Un solo dibujo, usado en dos sitios. Dos copias del mismo degradado
     divergen en cuanto alguien ajuste un radio. */
  --zz-disco-dibujado:
    radial-gradient(circle at 50% 50%,
      var(--zz-crema) 0 6.5%,
      var(--zz-rojo) 7% 8%,
      var(--zz-vinilo) 8.5% 40%,
      transparent 40.5%),
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 3px, rgba(255,255,255,.05) 3px 4px);
}
.cpp-sin-caratula {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- El titulo -------------------------------------------------------------- */
.recent-item .post-box-title {
  margin: 0;
  /* 🔴 EL TAMANO SE FIJA AQUI, EXPLICITO. Antes el atajo escribia
     `font-size:1em !important` en linea y bastaba con dar tamano al padre. Al
     quitar ese estilo en linea (v4.3.6), el <h3> paso a coger el tamano de
     `.zz-texto h3` --27 px-- y los titulos salieron enormes. Quitar un estilo
     en linea obliga a poner en la hoja lo que ese estilo tapaba. */
  font-size: 13px;
  font-family: var(--zz-mono);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.recent-item .post-box-title a {
  color: var(--zz-tinta);
  text-decoration: none;
  /* Tres lineas y elipsis: sin esto, un titulo de audiolibro desalinea toda la
     fila. `line-clamp` sin prefijo aun no lo aplica nadie, pero se declara. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.recent-item .post-box-title a:hover,
.recent-item .post-box-title a:focus-visible { color: var(--zz-rojo); }

/* --- El mismo bloque, cuando va de widget en una barra lateral --------------
 * Ahi no hay sitio para una rejilla: se pone en fila, caratula pequena a un
 * lado. Con propiedades logicas, para que en arabe se ponga solo del otro. */
.widget_podcast_mostrar_recientes .cat-box.recent-box {
  display: block;
  margin: 0;
}
.widget_podcast_mostrar_recientes .recent-item {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding-block: 11px;
  border-block-end: 1px solid var(--zz-linea);
}
.widget_podcast_mostrar_recientes .recent-item:last-of-type { border-block-end: 0; }
.widget_podcast_mostrar_recientes .recent-item .post-thumbnail {
  flex: 0 0 58px;
  width: 58px;
  box-shadow: none;
}
.widget_podcast_mostrar_recientes .recent-item:hover .post-thumbnail { transform: none; }
.widget_podcast_mostrar_recientes .recent-item .post-box-title a { -webkit-line-clamp: 2; line-clamp: 2; }

/* =========================================================================
 * LAS VISTAS DEL MOTOR, SOBRE EL ROJO  (tarea A1/A5 del HANDOFF)
 *
 * 🔴 La trampa estructural del tema, por quinta vez: `.zz-sobre a` (0,1,1)
 * gana a cualquier regla de una clase del plugin. Una ficha crema del motor
 * (.cpp-episode-item, .cpp-podcast-card...) hereda el crema del fondo rojo
 * DENTRO de la ficha crema: titulos de episodio a 1,01:1, invisibles. Medido
 * el 20-ago: 60 textos bajo AA en /podcasts/, 46 en una ficha.
 *
 * Regla de la casa: toda pieza con color propio dentro de `.zz-sobre` lo
 * REAFIRMA con (0,2,1) o mas. Aqui, de una vez para todo el motor.
 * ========================================================================= */

/* Dentro de una ficha crema del motor manda la tinta. */
.zz-sobre .cpp-podcast-card,
.zz-sobre .cpp-episode-item,
.zz-sobre .cpp-main-player,
.zz-sobre .cpp-podcast-header,
.zz-sobre .cpp-floating-player { color: var(--zz-tinta); }

/* ...y sus enlaces tambien (los botones llevan su propio color y se excluyen). */
.zz-sobre .cpp-podcast-card a:not(:where(.cpp-btn)),
.zz-sobre .cpp-episode-item a:not(:where(.cpp-btn, .cpp-play-inline)),
.zz-sobre .cpp-main-player a:not(:where(.cpp-btn)),
.zz-sobre .cpp-podcast-header a:not(:where(.cpp-btn)) { color: var(--zz-tinta); }
.zz-sobre .cpp-episode-item a:not(:where(.cpp-btn, .cpp-play-inline)):hover,
.zz-sobre .cpp-episode-item a:not(:where(.cpp-btn, .cpp-play-inline)):focus-visible,
.zz-sobre .cpp-podcast-card a:not(:where(.cpp-btn)):hover,
.zz-sobre .cpp-podcast-card a:not(:where(.cpp-btn)):focus-visible { color: var(--zz-rojo); }

/* La paginacion del motor son fichitas crema: `.zz-sobre a` las dejaba crema
   sobre crema. Al pasar por encima el plugin las pinta de rojo, y ahi el
   texto va en crema. */
.zz-sobre a.cpp-page-link { color: var(--zz-tinta); }
.zz-sobre a.cpp-page-link:hover,
.zz-sobre a.cpp-page-link:focus-visible { color: var(--zz-sobre-rojo); }

/* A5: la cabecera del episodio vive SOBRE EL ROJO, como los encabezados del
   tema — se le quita la tarjeta que le daba el plugin (era ademas un
   degradado) y el titular va en crema. La meta, en el crema rotulado (4,80:1). */
.zz-sobre .cpp-episode-header {
  background: none;
  padding-inline: 0;
  border-radius: 0;
}
.zz-sobre .cpp-episode-header .cpp-episode-title { color: var(--zz-sobre-rojo); }
.zz-sobre .cpp-episode-header .cpp-episode-podcast a {
  color: var(--zz-sobre-rojo);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.zz-sobre .cpp-episode-header .cpp-episode-meta { color: var(--zz-sobre-rojo-rot, rgba(255,240,230,.84)); }

/* La sintesis del episodio va dentro de una ficha (la plantilla la envuelve
   en .zz-ficha.cpp-sintesis); el interlineado del texto largo, el del tema. */
.cpp-sintesis { padding: 24px 28px; }
.cpp-sintesis h3 { margin-top: 0; }

/* =========================================================================
 * PODCAST-SHOWCASE-PRO, VESTIDO DE LA CASA  (tarea A2 del HANDOFF)
 *
 * Los atajos [podcast_ultimos], [podcast_stats] y [podcast_carousel_logos]
 * son de `podcast-showcase-pro` (tercero, sin fuente aqui). Trae coral
 * #FF6B6B, azul iOS #007AFF y TRES degradados de fabrica. El manual: una
 * sola tinta, sin degradados.
 *
 * 🔴 Mismo truco que con el CPP: el plugin define sus variables en :root y
 * las usa por todas partes. Se redefinen las variables — y los degradados
 * se vuelven colores lisos, que en `background:` (shorthand) valen igual.
 * Lo que el plugin escribe como linear-gradient() literal se pisa regla a
 * regla, aqui debajo.
 * ========================================================================= */
:root {
  --psp-primary:       var(--zz-rojo);
  --psp-primary-dark:  var(--zz-rojo-hondo);
  --psp-secondary:     var(--zz-tinta-2);
  --psp-accent:        var(--zz-ambar);
  --psp-dark:          var(--zz-tinta);
  --psp-light:         var(--zz-crema-2);
  /* Un color liso donde habia un degradado: `background: var(--psp-gradient-1)`
     es shorthand y acepta color. Los tres, tintas de la casa. */
  --psp-gradient-1:    var(--zz-rojo);
  --psp-gradient-2:    var(--zz-rojo-hondo);
  --psp-gradient-3:    var(--zz-rojo-vivo);
  --psp-glass:         rgba(250, 246, 239, .12);
  --psp-shadow-soft:   0 1px 0 rgba(36,26,21,.06), 0 2px 10px rgba(36,26,21,.07);
  --psp-shadow-hover:  0 2px 0 rgba(36,26,21,.08), 0 8px 22px rgba(36,26,21,.13);
}

/* Los degradados escritos a mano en el plugin, neutralizados uno a uno. */
.psp-timeline::before { background: var(--zz-linea-2); }
.psp-card-overlay { background: rgba(28, 22, 20, .55); }       /* velo liso, no degradado */
.psp-placeholder-image::before,
.psp-logo-placeholder::before,
.psp-timeline-image-placeholder::before { background: none; animation: none; }
.psp-logo-glow { background: var(--zz-rojo-vivo); }            /* brillo de UNA tinta */
.psp-logo-item:hover .psp-logo-glow { opacity: .22; }

/* El carrusel usa Swiper, cuyo azul #007AFF es su variable por omision. */
.psp-logo-carousel {
  --swiper-theme-color:      var(--zz-rojo);
  --swiper-navigation-color: var(--zz-tinta);
  --swiper-pagination-color: var(--zz-rojo);
}
.psp-logo-carousel .swiper-button-next,
.psp-logo-carousel .swiper-button-prev {
  background: var(--zz-crema);
  border: 1px solid var(--zz-linea);
  box-shadow: var(--cpp-shadow);
}
.psp-logo-carousel .swiper-button-next:after,
.psp-logo-carousel .swiper-button-prev:after { color: var(--zz-tinta); }
.psp-logo-carousel .swiper-pagination-bullet { background: var(--zz-tinta-3); opacity: .5; }
.psp-logo-carousel .swiper-pagination-bullet-active { background: var(--zz-rojo); opacity: 1; }

/* Los numeros 1..5 del ranking: iban en degradado azul-violeta. */
.psp-number { background: var(--zz-rojo); color: var(--zz-sobre-rojo); }

/* Las cifras de [podcast_stats] iban en TEXTO-DEGRADADO (background-clip:text
   + fill transparente). Con la variable ya lisa seguia siendo un truco fragil
   que ademas confunde a cualquier auditoria. Numero rojo de verdad. */
.psp-stat-number {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--zz-rojo);
}
.psp-stat-item.psp-highlight .psp-stat-number { color: #fff; -webkit-text-fill-color: #fff; }
/* El tile "destacado" del plugin pone texto BLANCO contando con su propio
   fondo de color; sobre la crema-2 del tema quedaba a 1,2:1. Se le da el
   fondo rojo que su intencion pide (es el dato que el plugin quiere resaltar). */
.zz-widget .psp-stat-item.psp-highlight { background: var(--zz-rojo); }
.psp-stat-item.psp-highlight .psp-stat-label { color: var(--zz-sobre-rojo-rot, rgba(255,240,230,.84)); }

/* Los puntos suspensivos de la paginacion viven sobre el rojo. */
.zz-sobre .cpp-pagination .cpp-page-dots { color: var(--zz-sobre-rojo-rot, rgba(255,240,230,.84)); }

/* 🔴 `.zz-sobre a` (0,1,1) tambien pisa los BOTONES del motor (0,1,0):
   el secundario salia crema sobre crema-2 (1,13:1). Se reafirman los dos. */
.zz-sobre a.cpp-btn-secondary { color: var(--zz-tinta); }
.zz-sobre a.cpp-btn-primary { color: var(--zz-sobre-rojo); }

/* El titulo del logo y los textos del carrusel, en tinta cuando van sobre
   crema y reafirmados contra `.zz-sobre a`. */
.zz-sobre .psp-logo-carousel a:not(:where(.cpp-btn)) { color: var(--zz-tinta); }
.zz-sobre .psp-mini-content a { color: var(--zz-tinta); }
.zz-sobre .psp-mini-content a:hover,
.zz-sobre .psp-mini-content a:focus-visible { color: var(--zz-rojo); }

/* El carrusel de logos empujaba 6px de scroll horizontal en movil: el glow
   (inset:-10px) sobresale del ultimo slide. El carrusel recorta lo suyo. */
.psp-logo-carousel { overflow: hidden; }
/* Cinturon y tirantes: el glow es position:absolute y se escapa del recorte
   del swiper por su containing block; la seccion recorta lo que quede, y en
   movil el brillo decorativo directamente no existe. */
.psp-carousel-section { overflow: hidden; }
@media (max-width: 600px) {
  .psp-logo-glow { display: none; }
}