/* ==========================================================================
   ZARZA · los componentes del sistema
   Depende de tokens.css. Todo es CSS puro: ni una imagen, ni una dependencia.
   Clases con prefijo .zz- para que no choquen con lo que ya tenga el sitio.
   ========================================================================== */

/* ---------- el suelo ---------- */
.zz-fondo{
  background:var(--zz-rojo);
  background-image:linear-gradient(176deg,var(--zz-rojo-alto) 0%,var(--zz-rojo) 45%,#980000 100%);
  color:var(--zz-sobre-rojo);
}
/* grano opcional: da textura de impresión. Va en un hijo fijo, no en el body */
.zz-grano{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.13;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ---------- tipografía ---------- */
.zz-titular{font-family:var(--zz-display);font-weight:800;text-transform:lowercase;
  letter-spacing:var(--zz-tracking-titular);line-height:1.02;margin:0;text-wrap:balance}
.zz-rotulo{font-family:var(--zz-mono);font-size:10.5px;letter-spacing:var(--zz-tracking-rotulo);
  text-transform:uppercase}
.zz-cita{font-family:var(--zz-serif);font-style:italic;line-height:1.4}
.zz-num{font-variant-numeric:tabular-nums}

/* ---------- LA FICHA (el casete): la caja de todo el contenido ---------- */
.zz-ficha{background:var(--zz-crema);color:var(--zz-tinta);border-radius:var(--zz-radio);
  position:relative;padding:26px 24px;box-shadow:var(--zz-sombra-ficha)}
.zz-ficha::before{content:"";position:absolute;inset:8px;border-radius:var(--zz-radio-chico);
  border:1px solid var(--zz-linea);pointer-events:none;
  background:
    radial-gradient(circle 2.5px at 6px 6px,var(--zz-linea-2) 60%,transparent 61%),
    radial-gradient(circle 2.5px at calc(100% - 6px) 6px,var(--zz-linea-2) 60%,transparent 61%),
    radial-gradient(circle 2.5px at 6px calc(100% - 6px),var(--zz-linea-2) 60%,transparent 61%),
    radial-gradient(circle 2.5px at calc(100% - 6px) calc(100% - 6px),var(--zz-linea-2) 60%,transparent 61%)}
.zz-ficha > *{position:relative;z-index:1}
/* el canto rotulado de la ficha */
.zz-canto{font-family:var(--zz-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--zz-tinta-3);display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-bottom:1px solid var(--zz-linea);padding-bottom:9px;margin-bottom:16px}
.zz-canto b{color:var(--zz-rojo);font-weight:600}

/* ---------- EL DISCO ---------- */
.zz-vinilo{display:block;width:var(--d,120px);height:var(--d,120px);border-radius:50%;flex:none;position:relative;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 6%,var(--zz-rojo) 6.5% 27%,transparent 27.5%),
    repeating-radial-gradient(circle at 50% 50%,#181312 0 1.5px,#241D1A 1.5px 3px),
    radial-gradient(circle,#2A211D 0,#141010 100%);
  box-shadow:var(--zz-sombra-disco)}
.zz-vinilo::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(128deg,rgba(255,255,255,.16) 0 18%,transparent 34% 66%,rgba(255,255,255,.09) 82% 100%)}
.zz-vinilo::after{content:"";position:absolute;left:50%;top:50%;width:8%;height:8%;
  background:var(--zz-crema);border-radius:50%;transform:translate(-50%,-50%)}
/* 🔴 el disco gira SÓLO si de verdad está sonando. Es información, no adorno */
.zz-gira{animation:zz-girar 3.8s linear infinite}
.zz-apagado{filter:grayscale(1);opacity:.55}
@keyframes zz-girar{to{transform:rotate(360deg)}}

/* ---------- EL LOGOTIPO DE UNA EMISORA ----------
   `contain` y no `cover`: el logotipo de una radio casi siempre es un
   rectangulo con el nombre dentro, y recortarlo a cuadrado se come el nombre,
   que es justo lo unico que hay que leer. */
.zz-logo-emisora{display:block;box-sizing:border-box;width:var(--d,78px);height:var(--d,78px);flex:none;
  background:var(--zz-crema);border:1px solid var(--zz-linea);border-radius:var(--zz-radio-chico);
  overflow:hidden;padding:6px;box-shadow:var(--zz-sombra-ficha)}
.zz-logo-emisora img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- LA VENTANA DEL CASETE ---------- */
.zz-ventana{display:flex;align-items:center;justify-content:center;gap:22px;background:var(--zz-crema-2);
  border:1px solid var(--zz-linea);border-radius:var(--zz-radio-chico);padding:11px 16px}
.zz-carrete{width:34px;height:34px;border-radius:50%;flex:none;position:relative;background:
  radial-gradient(circle at 50% 50%,#fff 0 20%,var(--zz-tinta-3) 21% 24%,var(--zz-crema) 25% 42%,
  var(--zz-tinta-2) 43% 47%,var(--zz-vinilo) 48%)}
.zz-carrete::after{content:"";position:absolute;inset:30%;border-radius:50%;background:conic-gradient(
  var(--zz-crema-3) 0 14deg,transparent 14deg 60deg,var(--zz-crema-3) 60deg 74deg,transparent 74deg 120deg,
  var(--zz-crema-3) 120deg 134deg,transparent 134deg 180deg,var(--zz-crema-3) 180deg 194deg,transparent 194deg 240deg,
  var(--zz-crema-3) 240deg 254deg,transparent 254deg 300deg,var(--zz-crema-3) 300deg 314deg,transparent 314deg)}
.zz-cinta{flex:1;height:8px;border-radius:1px;background:linear-gradient(180deg,#4A3226,var(--zz-tinta));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}

/* ---------- ESTADO: al aire / sin señal ---------- */
.zz-aire{display:inline-flex;align-items:center;gap:5px;background:var(--zz-aire);color:#fff;
  font-family:var(--zz-mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border-radius:3px}
.zz-aire i{width:5px;height:5px;border-radius:50%;background:#fff;display:block}
.zz-frio{display:inline-flex;align-items:center;gap:5px;color:var(--zz-tinta-3);
  font-family:var(--zz-mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.zz-frio i{width:5px;height:5px;border-radius:50%;background:var(--zz-linea-2);display:block}
/* 🔴 LA TERCERA: ni suena ni deja de sonar, es que no se ha comprobado. Va en
   ambar y con el punto hueco --un anillo, no un disco-- para que se distinga de
   un vistazo de las otras dos sin tener que leerla. Con 5.088 emisoras por
   sitio esta es la cara que mas se ve. */
.zz-tibio{display:inline-flex;align-items:center;gap:5px;color:var(--zz-ambar-txt);
  font-family:var(--zz-mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.zz-tibio i{width:5px;height:5px;border-radius:50%;background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--zz-ambar);display:block}

/* ---------- EL VÚMETRO ---------- */
.zz-vu{display:flex;align-items:flex-end;gap:2px;height:30px}
.zz-vu i{flex:1;background:var(--zz-rojo);display:block;border-radius:1px}
.zz-vu i.zz-pico{background:var(--zz-linea-2)}   /* de la mitad del pico hacia arriba, apagado */

/* ---------- BOTONES ---------- */
.zz-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:5px;border:0;
  cursor:pointer;font-family:var(--zz-mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:transform .15s ease}
.zz-btn:hover{transform:translateY(-1px)}
.zz-btn-claro{background:var(--zz-crema);color:var(--zz-rojo)}          /* sobre rojo: el principal */
.zz-btn-hueco{border:1px solid var(--zz-borde-sobre-rojo);color:var(--zz-sobre-rojo);background:transparent}
.zz-btn-rojo{background:var(--zz-rojo);color:var(--zz-crema)}           /* dentro de fichas claras */
.zz-btn-tinta{background:var(--zz-tinta);color:var(--zz-crema)}
.zz-btn:focus-visible{outline:2px solid var(--zz-sobre-rojo);outline-offset:3px}

/* ---------- ETIQUETAS DE CATÁLOGO ---------- */
.zz-etq{display:inline-block;font-family:var(--zz-mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 8px;border:1px solid var(--zz-linea);border-radius:3px;
  color:var(--zz-tinta-2)}
.zz-etq-aire{border-color:var(--zz-aire);color:var(--zz-aire);font-weight:600}

/* ---------- énfasis: hereda el color de su ficha, nunca lo fuerza ---------- */
.zz-ficha strong,.zz-ficha b{color:inherit;font-weight:600}

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  .zz-gira{animation:none}
  .zz-btn{transition:none}
}