/* ==========================================================================
   ZARZA Corp Core - lo propio de las piezas del catalogo.
   Solo lo que NO cabe en zarza-brand.css. Todo con variables --zz-*.
   ========================================================================== */

:root{
  /* el rayo de la marca como mascara, para el hueco de una funda sin caratula.
     Es el trazado maestro; si cambia el logo se regenera con generar-logos.py */
  --zzc-rayo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M33.976 41.922 L63.201 38.106 L66.668 40.815 L54.493 48.180 L66.455 57.526 L36.799 61.894 L48.539 53.300 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* --- la funda del disco con el vinilo asomando ---
   El envoltorio TIENE que ser display:block: como span en linea, el vinilo
   absoluto no se contenia y se escapaba por debajo de la ficha. */
.zzc-funda-envoltorio{position:relative;display:block;padding-inline-end:17%;margin-bottom:14px}
.zzc-funda-envoltorio .zz-funda{position:relative;z-index:1;display:grid;place-items:center;
  aspect-ratio:1;overflow:hidden;border-radius:2px}
.zzc-funda-envoltorio .zz-funda img{width:100%;height:100%;object-fit:cover}
/* la funda sin caratula no se queda en rojo liso: lleva el simbolo de la casa */
.zzc-sin-caratula::after{content:"";width:34%;height:34%;background:var(--zz-sobre-rojo);
  -webkit-mask:var(--zzc-rayo) center/contain no-repeat;
  mask:var(--zzc-rayo) center/contain no-repeat;opacity:.9}
/* el disco asoma por detras, a la derecha, y NUNCA gira: un disco no suena */
.zzc-funda-envoltorio .zzc-disco-vinilo{position:absolute;top:50%;inset-inline-end:0;z-index:0;
  width:74%;height:auto;aspect-ratio:1;transform:translateY(-50%);filter:none;opacity:1}

/* --- la ficha de emisora --- */
.zzc-emisora-ficha .zz-escuchar{flex:none}
/* Un boton deshabilitado no puede ser lo mas llamativo de la ficha: es la
   accion que NO se puede hacer. Se queda como un hueco rotulado, no como un
   bloque rojo desvaido. */
.zz-escuchar[disabled]{background:transparent;color:var(--zz-tinta-3);
  border:1px solid var(--zz-linea);cursor:not-allowed}
.zz-escuchar[disabled]:hover{transform:none}
.zz-escuchar[disabled] svg{opacity:.5}
@media (max-width:520px){
  .zzc-emisora-ficha .zz-emisora{flex-wrap:wrap}
  .zzc-emisora-ficha .zz-escuchar{width:100%;justify-content:center}
}

/* --- la fecha de la agenda --- */
.zzc-calendario{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:58px;height:58px;border:1px solid var(--zz-linea);border-radius:var(--zz-radio-chico);
  background:var(--zz-crema-2);margin-bottom:12px;line-height:1}
.zzc-calendario b{font-family:var(--zz-display);font-weight:800;font-size:22px;color:var(--zz-rojo)}
.zzc-calendario i{font-family:var(--zz-mono);font-style:normal;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--zz-tinta-3);margin-top:2px}
.zzc-pasado{opacity:.6}
.zzc-pasado .zzc-calendario b{color:var(--zz-tinta-3)}

/* --- el mando del directorio --- */
.zzc-dir-mando{padding:20px 22px}
.zzc-dir-mando .zz-filtros{margin-top:14px}
.zzc-dir-resultados{min-height:120px}

/* --- personas --- */
.zzc-persona{text-align:center;padding:22px 18px}
.zzc-persona img{width:104px;height:104px;border-radius:50%;object-fit:cover;margin:0 auto 14px}
.zzc-persona .zz-t-titulo{display:block;margin-bottom:4px}

/* --- planes --- */
.zzc-plan{display:flex;flex-direction:column}
.zzc-plan .zz-btn{align-self:flex-start;margin-top:auto}

/* --- pestanas --- */
.zzc-pestanas{padding:0}
.zzc-pestanas .zz-texto{padding:22px 24px}

/* --- el casete con ventana --- */
.zzc-casete .zz-ventana{margin-top:4px}


/* Los rotulos de las piezas del catalogo usan el token accesible del tema.
   Si el tema activo no es ZARZA Corp, cae al de marca (mas claro, pero es lo
   unico que hay). */
.zzc-calendario i,
.zzc-persona .zz-rotulo{color:var(--zz-rotulo-txt,var(--zz-tinta-3))}

/* --- el corazon de favoritos ---
   Vive en el canto de la ficha. Sale SIEMPRE vacio desde el servidor y lo
   rellena el navegador: asi el HTML es igual para todos y el micro-cache
   sigue sirviendo. */
.zzc-canto-der{display:inline-flex;align-items:center;gap:10px}
.zzc-fav{background:none;border:0;padding:0;cursor:pointer;line-height:0;flex:none;
  color:var(--zz-linea-2);transition:color .15s,transform .15s}
.zzc-fav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linejoin:round}
.zzc-fav:hover{color:var(--zz-rojo);transform:scale(1.12)}
.zzc-fav-si{color:var(--zz-rojo)}
.zzc-fav-si svg{fill:currentColor}
.zzc-fav-anonimo{opacity:.55}
.zzc-fav:focus-visible{outline:2px solid var(--zz-rojo);outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion:reduce){.zzc-fav,.zzc-fav:hover{transition:none;transform:none}}

/* --- reclamar emisora --- */
.zzc-reclamar-caja{margin-top:14px;padding-top:14px;border-top:1px solid var(--zz-linea)}
.zzc-reclamar-texto{width:100%;font-family:var(--zz-mono);font-size:14px;line-height:1.6;
  padding:11px 14px;border:1px solid var(--zz-linea);border-radius:var(--zz-radio-chico);
  background:var(--zz-crema-2);color:var(--zz-tinta);resize:vertical}
.zzc-reclamar-texto:focus{outline:none;border-color:var(--zz-rojo);background:var(--zz-crema)}
.zzc-reclamar-aviso{display:block;margin-top:10px;color:var(--zz-rotulo-txt,#7D6E65)}

/* =========================================================================
   LOS ATAJOS HEREDADOS

   Piezas que vienen del contenido escrito para el tema viejo: columnas,
   recuadros, paneles plegables, capitulares. No se inventa un lenguaje nuevo
   para ellas: se visten con los mismos tokens que el resto del sistema, para
   que una entrada de 2019 no se note de otro sitio.

   Ver inc/compat-sahifa.php e inc/compat-huerfanos.php.
   ========================================================================= */

/* Las columnas del tema viejo eran doceavos con float. Aqui es una reticula:
   se envuelven solas en pantalla estrecha sin una sola media query propia. */
.zz-compat-col{
  display:inline-block;vertical-align:top;
  inline-size:calc(var(--zz-compat-doce,6) / 12 * 100% - 12px);
  min-inline-size:min(100%, 220px);
  margin-inline-end:12px;margin-block-end:12px;
}
.zz-compat-col-2 {--zz-compat-doce:2}
.zz-compat-col-3 {--zz-compat-doce:3}
.zz-compat-col-4 {--zz-compat-doce:4}
.zz-compat-col-5 {--zz-compat-doce:5}
.zz-compat-col-6 {--zz-compat-doce:6}
.zz-compat-col-7 {--zz-compat-doce:7}
.zz-compat-col-8 {--zz-compat-doce:8}
.zz-compat-col-9 {--zz-compat-doce:9}
.zz-compat-col-10{--zz-compat-doce:10}

.zz-compat-separador{
  border:0;block-size:1px;background:var(--zz-linea);
  margin-block:28px;
}

/* La capitular. Cormorant es la unica serif del sistema y solo aparece en las
   citas; aqui encaja porque una capitular ES una cita tipografica. */
.zz-compat-capitular{
  float:inline-start;
  font-family:var(--zz-serif);font-style:italic;font-size:3.4em;line-height:.82;
  color:var(--zz-rojo);margin-inline-end:.09em;margin-block-start:.06em;
}

.zz-compat-resalte{background:var(--zz-crema-2);color:var(--zz-tinta);padding:.1em .28em}

.zz-compat-recuadro{
  background:var(--zz-crema-2);border:1px solid var(--zz-linea);
  border-inline-start:3px solid var(--zz-rojo);
  border-radius:var(--zz-radio-chico);
  padding:14px 16px;margin-block:20px;
}
.zz-compat-recuadro-warning,.zz-compat-recuadro-alert{border-inline-start-color:var(--zz-ambar)}
.zz-compat-recuadro-success{border-inline-start-color:var(--zz-aire)}
.zz-compat-recuadro>:first-child{margin-block-start:0}
.zz-compat-recuadro>:last-child{margin-block-end:0}

.zz-compat-lista ul,.zz-compat-lista ol{margin-block:12px;padding-inline-start:22px}
.zz-compat-lista li{margin-block:4px}

.zz-compat-pista{border-block-end:1px dotted var(--zz-tinta-3);cursor:help}

/* Plegables. <details> nativo: cero JavaScript y funciona sin el. */
.zz-compat-plegable,.zz-compat-panel{
  border:1px solid var(--zz-linea);border-radius:var(--zz-radio-chico);
  background:var(--zz-crema-2);margin-block:12px;padding:0 14px;
}
.zz-compat-plegable>summary,.zz-compat-panel>summary{
  font-family:var(--zz-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--zz-rotulo-txt);padding:12px 0;cursor:pointer;
}
.zz-compat-plegable[open]>summary,.zz-compat-panel[open]>summary{color:var(--zz-rojo)}
.zz-compat-plegable>:last-child,.zz-compat-panel>:last-child{margin-block-end:14px}

/* Las pestanas del tema viejo se pintan apiladas: reimplementar su JavaScript
   por un uso en todo el sitio seria mantener una pieza para nadie, y apilado se
   lee igual. */
.zz-compat-pestana-titulo{
  font-family:var(--zz-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--zz-rojo);margin-block:18px 4px;
}
.zz-compat-pestana{border-inline-start:2px solid var(--zz-linea);padding-inline-start:14px}