/* Livicol Radio — estilos compartidos, alineados a la identidad de livicol.org */

:root {
  /* colores tomados directamente de livicol.org (kit de Elementor) */
  --color-text: #242547;      /* navy de marca — 14.7:1 sobre blanco */
  --color-primary: #76428C;   /* morado de marca — 7.2:1 sobre blanco, usable en texto/botones */
  --color-highlight: #BF459F; /* magenta de marca — 4.6:1 sobre blanco, pasa AA para texto normal */
  --color-accent: #52A5D9;    /* azul de marca — bajo contraste (2.7:1), solo decorativo, nunca como texto */
  --color-bg: #FFFFFF;
  --color-bg-tint: #F5F2FA;
  --color-border: #E3DCEC;
  --color-focus: var(--color-text); /* navy también para el anillo de foco — 14.7:1, máxima visibilidad */
}

* { box-sizing: border-box; }

body {
  font-family: "Roboto", -apple-system, "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  max-width: 40em;
  margin: 0 auto;
  padding: 0 1.25em 3em;
  line-height: 1.55;
}

h1, h2 {
  font-family: "Raleway", "Roboto", sans-serif;
  font-weight: 700;
  color: var(--color-text);
}

h1 { letter-spacing: 0.01em; }

h2 {
  font-size: 1.15em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0.3em;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-text); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Encabezado con logo de la Fundación */
.encabezado {
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 1.5em 0 1em;
}

.encabezado img {
  height: 3.4em;
  width: auto;
}

.encabezado .titulo p {
  margin: 0.1em 0 0;
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.encabezado h1 { margin: 0; font-size: 1.5em; }

audio { width: 100%; margin: 1em 0; }

section {
  background: var(--color-bg-tint);
  border: 1px solid var(--color-border);
  border-radius: 0.6em;
  padding: 1.2em 1.4em;
  margin: 1.2em 0;
}

.volumen button,
a.boton {
  font: inherit;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.55em 1.3em;
  margin: 0.2em 0.4em 0.2em 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.volumen button:hover,
a.boton:hover {
  background: var(--color-text);
  color: #fff;
}

.volumen button[aria-pressed="true"] {
  background: var(--color-text);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

code#url-stream {
  display: inline-block;
  background: var(--color-bg-tint);
  border: 1px solid var(--color-border);
  border-radius: 0.3em;
  padding: 0.3em 0.6em;
  word-break: break-all;
}

#now-playing { color: var(--color-primary); }

#historial {
  padding-left: 1.3em;
}

#historial li {
  margin: 0.3em 0;
}

footer {
  margin-top: 2em;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--color-accent), var(--color-highlight)) 1;
  padding-top: 1.2em;
}

footer h2 { border-bottom: none; padding-bottom: 0; }

footer ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.4em;
}

@media (prefers-reduced-motion: no-preference) {
  a, button { transition: background-color 0.15s ease, color 0.15s ease; }
}

/* Reproductor emergente (ventana pequeña) */
body.popup {
  max-width: none;
  padding: 1.1em 1.2em 1.6em;
}

body.popup .encabezado {
  padding: 0 0 0.6em;
  gap: 0.6em;
}

body.popup .encabezado img { height: 2.2em; }
body.popup .encabezado h1 { font-size: 1.15em; }
body.popup .encabezado .titulo p { font-size: 0.7em; }
body.popup h2 { font-size: 1em; }
body.popup section { padding: 0.9em 1em; margin: 0.9em 0; }