/* Radiola · estilos propios. La base viene de https://www.zojim.com.ar/zojim-ui.css */

/* Color de Radiola: vino a coral (Mendoza y el vino; cálido y cercano).
   En la interfaz se usa la versión clara, para que el texto oscuro encima y el texto de color sobre negro se lean bien.
   El vino profundo queda para el ícono y los brillos. */
[data-app="radiola"] {
  --z-app-1: #f0667e;
  --z-app-2: #ff9a76;
  --z-app-tinta: #1a0509;
  --r-vino: #8c1538;
  --r-vino-oscuro: #3a0716;
}

body.z { background: radial-gradient(120% 60% at 50% -10%, rgba(140, 21, 56, .45), transparent 60%) var(--z-negro) no-repeat; }
body.z.con-barra { padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }

/* Cabecera */
.cabecera { padding: 14px 0 6px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.cabecera .z-contenedor { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { min-width: 0; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--z-texto) !important; text-decoration: none; font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; }
.marca img { border-radius: 22%; box-shadow: 0 10px 26px -10px var(--z-app-1); }
.marca-textos { display: flex; flex-direction: column; line-height: 1.1; }
.marca-textos small { font-size: var(--z-t-chico); font-weight: 500; letter-spacing: 0; color: var(--z-texto-2); margin-top: 4px; }
/* El botón "A+ Letra" de legal.js va arriba a la derecha, así no tapa el reproductor ni la barra de abajo. */
.cabecera #letra-grande { position: static !important; height: 52px; flex-shrink: 0; }

.aviso-red { background: #3a2a07; border-bottom: 2px solid var(--z-alerta); color: #fff3d1; padding: 12px 0; }
.aviso-red b { color: var(--z-alerta); }

main { padding-top: 12px; padding-bottom: 40px; }

/* Reproductor */
.reproductor { position: relative; padding: 22px; margin-bottom: 28px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 720px) { .reproductor { padding: 32px; } }
.rep-cabeza { display: flex; align-items: center; gap: 16px; }
.rep-logo { width: 96px; height: 96px; flex-shrink: 0; }
.rep-datos { min-width: 0; }
.rep-datos .z-h3 { margin: 4px 0 2px; overflow-wrap: anywhere; }
.rep-frecuencia { margin: 0; color: var(--z-texto-2); }
.rep-mensaje { margin: 0; padding: 14px 16px; border-radius: var(--z-radio); background: rgba(248, 165, 155, .1); border: 2px solid rgba(248, 165, 155, .5); color: var(--z-texto); }
.rep-mensaje b { color: var(--z-error); }
.rep-play { font-size: 1.3rem; min-height: 4rem; }
.rep-play svg { width: 1.5em; height: 1.5em; }
.rep-extras { display: flex; flex-direction: column; gap: 16px; }
.rep-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rep-botones .z-btn { padding: 10px 14px; }
.rep-botones #rep-web { grid-column: 1 / -1; }
#btn-fav-actual[aria-pressed="true"] { border-color: var(--z-dorado); color: var(--z-dorado-claro); }
#btn-fav-actual[aria-pressed="true"] svg path { fill: var(--z-dorado); stroke: var(--z-dorado); }
#btn-dormir.activo { border-color: var(--z-app-1); color: var(--z-app-1); }

/* Estado "sonando": ondas animadas junto al nombre */
.ondas { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; margin-left: 8px; vertical-align: -1px; }
.ondas i { width: 4px; border-radius: 2px; background: var(--z-app-1); animation: onda 1s ease-in-out infinite; }
.ondas i:nth-child(1) { height: 60%; }
.ondas i:nth-child(2) { height: 100%; animation-delay: -.3s; }
.ondas i:nth-child(3) { height: 40%; animation-delay: -.6s; }
@keyframes onda { 50% { transform: scaleY(.35); } }
@media (prefers-reduced-motion: reduce) { .ondas i { animation: none; } }

/* Volumen */
.volumen .z-etiqueta { display: block; margin-bottom: 8px; }
.volumen-fila { display: flex; align-items: center; gap: 12px; }
.btn-cuadrado { width: var(--z-toque); padding: 0; font-size: 1.5rem; flex-shrink: 0; }
input[type="range"] { flex: 1; min-width: 0; height: 48px; accent-color: var(--z-app-1); background: transparent; cursor: pointer; }

/* Temporizador */
.dormir { padding: 16px; border-radius: var(--z-radio); background: var(--z-superficie); border: 1px solid var(--z-borde); }
.dormir-titulo { margin: 0 0 12px; font-weight: 600; }
.dormir-opciones { display: flex; flex-wrap: wrap; gap: 12px; }
.dormir-opciones .z-btn { flex: 1 1 140px; }
.dormir-estado { margin: 0; }

/* Buscar */
.buscar { margin-bottom: 24px; }
.buscar .z-etiqueta { display: block; margin-bottom: 8px; }
.buscar-fila { display: flex; gap: 12px; }
.buscar-fila .z-entrada { flex: 1; min-width: 0; }
.buscar .z-ayuda { margin-top: 6px; }

/* Listas de radios */
.titulo-lista { margin: 8px 0 12px; font-size: var(--z-t-h3); font-weight: 600; letter-spacing: -0.02em; }
.lista { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.radio { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: var(--z-fondo-2); border: 1px solid var(--z-borde); }
.radio.sonando { border-color: color-mix(in srgb, var(--z-app-1) 70%, transparent); background: color-mix(in srgb, var(--r-vino) 22%, var(--z-fondo-2)); }
.radio-abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
.radio-textos { min-width: 0; display: flex; flex-direction: column; }
.radio-nombre { font-weight: 700; font-size: 1.08rem; line-height: 1.25; overflow-wrap: break-word; }
.radio-detalle { color: var(--z-texto-2); line-height: 1.35; }
.radio-escuchar { flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--z-app-1); font-weight: 700; white-space: nowrap; }
/* En celular la palabra va debajo del círculo; en pantallas anchas, al lado. */
.radio-escuchar { flex-direction: column-reverse; gap: 2px; min-width: 80px; }
.radio-palabra { font-size: 0.95rem; }
@media (min-width: 560px) { .radio-escuchar { flex-direction: row; gap: 10px; } .radio-palabra { font-size: var(--z-t-base); } }
.radio-circulo { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(120deg, var(--z-app-1), var(--z-app-2)); color: var(--z-app-tinta); }
.radio-circulo svg { width: 24px; height: 24px; }
.radio-circulo .ondas { margin: 0; height: 18px; }
.radio-circulo .ondas i { background: var(--z-app-tinta); }
.radio-circulo .z-cargando { width: 20px; height: 20px; border-color: rgba(26,5,9,.3); border-top-color: var(--z-app-tinta); }
.radio-fav { flex-shrink: 0; width: var(--z-toque); height: var(--z-toque); padding: 0; border-radius: 50%; }
.radio-fav svg { width: 26px; height: 26px; }
.radio-fav[aria-pressed="true"] { border-color: var(--z-dorado); }
.radio-fav[aria-pressed="true"] svg path { fill: var(--z-dorado); stroke: var(--z-dorado); }
.sin-resultados { padding: 16px; border-radius: var(--z-radio); background: var(--z-superficie); color: var(--z-texto); }

/* Logos (o iniciales si la radio no tiene logo) */
.logo { width: 60px; height: 60px; flex-shrink: 0; border-radius: 16px; overflow: hidden; background: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.logo.sin-imagen, .logo.oscuro { background: linear-gradient(135deg, var(--r-vino), #d9485f); color: #fff; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; }
.rep-logo .logo { width: 96px; height: 96px; border-radius: 24px; font-size: 1.7rem; }
.rep-logo .logo.vacio { background: url(iconos/icono.svg) center / cover; box-shadow: none; }

/* Aviso de contenido */
.aviso-contenido { margin-top: 12px; padding: 20px 22px; border-radius: var(--z-radio-grande); border: 1px dashed var(--z-borde-fuerte); color: var(--z-texto-2); }
.aviso-contenido b { color: var(--z-texto); }
.aviso-contenido .z-h3 { margin-bottom: 8px; }
.aviso-contenido p { margin: 0 0 10px; }
.aviso-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

/* Barra fija de abajo */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(14, 8, 10, .96); border-top: 1px solid color-mix(in srgb, var(--z-app-1) 45%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.barra-dentro { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.barra-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
.barra-logo .logo { width: 52px; height: 52px; border-radius: 14px; font-size: 1rem; }
.barra-textos { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.barra-textos b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-textos span { color: var(--z-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-play { flex-shrink: 0; min-width: 8.2rem; min-height: 3.4rem; }

/* Pie */
#pie-legal { border-top: 1px solid rgba(255,255,255,.08); padding: 32px 16px 96px; color: var(--z-texto-2); background: var(--z-negro); }
#pie-legal .pl-wrap { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
#pie-legal .pie-radiola { margin: 0; }
#pie-legal .pl-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
#pie-legal .pl-links a { display: inline-flex; align-items: center; min-height: 48px; color: var(--z-texto); text-decoration: underline; text-underline-offset: 4px; }
#pie-legal .pl-titular { color: var(--z-texto-3); font-size: var(--z-t-chico); }
#pie-legal .pl-titular a { color: var(--z-texto-3); }

/* Página de condiciones */
.doc { max-width: 760px; padding-top: 12px; padding-bottom: 40px; }
.doc h1 { margin: 8px 0 16px; }
.doc h2 { font-size: var(--z-t-h3); margin: 28px 0 8px; }
.doc p, .doc li { color: var(--z-texto-2); }
.doc li { margin-bottom: 6px; }

/* PC: reproductor fijo a la izquierda y la lista a la derecha */
@media (min-width: 1000px) {
  #principal { display: grid; grid-template-columns: 370px 1fr; column-gap: 32px; align-items: start; }
  #principal > * { grid-column: 2; }
  #principal > .reproductor { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 16px; margin-bottom: 0; }
  body.z.con-barra { padding-bottom: 0; }
  .barra { display: none; }
}
@media (min-width: 1200px) { #principal { grid-template-columns: 420px 1fr; column-gap: 40px; } }

/* Franja fina de arriba: botones de arrepentimiento y baja (Disp. 954/2025) */
.franja-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 24px; padding: 0 16px; padding-top: env(safe-area-inset-top, 0px); background: #141012; border-bottom: 1px solid var(--z-borde); }
.franja-legal a { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--z-t-chico); font-weight: 600; color: var(--z-dorado-claro); }