/* ── Radio Arkana · estéticas seleccionables ─────────────────────────────────
   Se carga DESPUÉS del <style> de la página. Sin atributo data-skin la portada
   es la de siempre (negro + rojo): este fichero no la toca.

   Una estética NO cambia el DOM ni el comportamiento: redefine los mismos
   tokens de tokens.css y retoca lo poco que estaba escrito con colores
   literales. Cada una trae su par oscuro / claro, así que el botón de tema
   (☼) sigue mandando dentro de cualquiera de ellas.

   La regla de dos acentos se conserva con otros nombres de color:
       --red    = lo que viene de fuera (el directo) y la acción principal
       --amber  = lo que se hace aquí   (la letanía)
   Contraste medido sobre --surface en cada par: --white ≥ 12:1 ·
   --gray ≥ 5,5:1 · --gray-dim ≥ 5:1 · --red ≥ 5:1 · --amber ≥ 5:1.          */

/* ══ Común a todas las estéticas ═════════════════════════════════════════════ */
html[data-skin] { --muted-sm: var(--gray-dim); }
html[data-skin] .header { background: var(--header-bg); }
html[data-skin] .header-label, html[data-skin] .freq { color: var(--header-ink); opacity: .78; }
html[data-skin] #qrngIndicator, html[data-skin] #btnBg, html[data-skin] #btnTheme, html[data-skin] #btnSkin { color: var(--header-ink) !important; opacity: .7; }
html[data-skin] #btnBg[aria-pressed="true"], html[data-skin] #btnTheme.active, html[data-skin] #btnBg:hover, html[data-skin] #btnTheme:hover, html[data-skin] #btnSkin:hover { opacity: 1; }
html[data-skin] .playing .bar, html[data-skin] #deepWaveform .bar.playing { background: linear-gradient(to top, var(--red-lo), var(--red) 60%, var(--red-hi)); box-shadow: 0 2px 8px var(--red-wash); }
html[data-skin] .playing .bar.tts-mode, html[data-skin] #deepWaveform .bar.tts-mode { background: linear-gradient(to top, var(--red-dim), var(--red) 55%, var(--red-hi)); box-shadow: 0 2px 10px var(--red-wash); }
html[data-skin] .playing .bar.high-peak { box-shadow: 0 2px 14px var(--red-wash); }
html[data-skin] .dot.tts { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
html[data-skin] .dot.syncing { background: var(--amber); box-shadow: 0 0 12px var(--amber); }
html[data-skin] #statusText.syncing, html[data-skin] .pause.active { color: var(--amber); }
html[data-skin] .play-btn:hover { background: var(--red-wash); }
html[data-skin] .play-btn.active { background: var(--red-wash); }
html[data-skin] .install-btn:hover { background: var(--red-wash); }
html[data-skin] .lang-opt.active, html[data-skin] .ark-btn { color: var(--on-accent); }
html[data-skin] .ark-btn:hover { color: var(--red); }
html[data-skin] .bg-strip .lang-opt.active { color: var(--amber-ink); }
html[data-skin] .footer-note, html[data-skin] .footer-note a { color: var(--gray); }
html[data-skin] .footer-note a:hover { color: var(--red); }
html[data-skin] .micro-card { border-color: var(--border-2); background: var(--surface-2); }
html[data-skin] .micro-card:last-child { border-right-color: var(--border-2); }
html[data-skin] body::after { background: radial-gradient(ellipse 72% 38% at 50% 51%, var(--red-wash) 0%, transparent 68%); }
html[data-skin][data-bg="gradient"] .card { background: color-mix(in srgb, var(--surface) 45%, transparent); }
html[data-skin] input[type=range]::-webkit-slider-thumb { background: var(--red); }
html[data-skin] #camToast { background: var(--surface-2); border-color: var(--red-dim); color: var(--red); }

/* El micro-trío sube 25+15 px para alinearse con el título de 88 px de Bebas.
   Con títulos más bajos se saldría por encima de la tarjeta: se queda en su sitio. */
html[data-skin="observatorio"] .micro-trio, html[data-skin="scifi"] .micro-trio, html[data-skin="lofi"] .micro-trio { margin-top: 0; top: 0; }
html[data-skin="observatorio"] .title-block, html[data-skin="scifi"] .title-block, html[data-skin="lofi"] .title-block { align-items: center; margin-bottom: 12px; }

/* El botón que cambia de estética vive en la cabecera, junto al de tema. */
#btnSkin { background: transparent; border: none; cursor: pointer; padding: 4px 4px; font-size: var(--fs-sm); line-height: 1; color: rgba(0,0,0,0.45); transition: color 0.2s, opacity 0.2s; }
#btnSkin:hover { color: rgba(0,0,0,0.75); }

/* ══ OBSERVATORIO ════════════════════════════════════════════════════════════
   La radio como instrumento astronómico: índigo de noche y hueso, latón para
   mandar, cardenillo para la letanía. Su par claro es el pergamino.          */
html[data-skin="observatorio"] {
  --bg: #0e1220; --surface: #151a2c; --surface-2: #1d2339; --border: #2a3150; --border-2: #3a4368;
  --white: #ebe6d8; --gray-lt: #b5b2c2; --gray: #a09db0; --gray-dim: #9794aa;
  --red: #d9b25f; --red-hi: #e8c67c; --red-lo: #b8923f; --red-dim: #6b5a35; --red-soft: #c9a868; --red-wash: rgba(217,178,95,.14);
  --amber: #74cdb6; --amber-ink: #0e1220; --on-accent: #15131a;
  --header-bg: #d9b25f; --header-ink: #15131a;
  --font-head: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'IBM Plex Mono', 'Space Mono', monospace;
}
html[data-skin="observatorio"][data-theme="light"] {
  --bg: #efe7d6; --surface: #f7f1e3; --surface-2: #e6dcc6; --border: #d3c7ab; --border-2: #b9ab8a;
  --white: #1d2233; --gray-lt: #4a4858; --gray: #5a5868; --gray-dim: #55535f;
  --red: #7a4d0c; --red-hi: #94601a; --red-lo: #5f3b07; --red-dim: #a58a5c; --red-soft: #7a4d0c; --red-wash: rgba(122,77,12,.10);
  --amber: #1c6b5a; --amber-ink: #f7f1e3; --on-accent: #f7f1e3;
  --header-bg: #1d2233; --header-ink: #efe7d6;
}
html[data-skin="observatorio"] .station-name { font-size: clamp(34px, 10vw, 46px); font-weight: 400; line-height: .98; letter-spacing: .02em; font-variation-settings: 'opsz' 144; }
html[data-skin="observatorio"] .station-name span { font-style: italic; font-weight: 500; }
html[data-skin="observatorio"] .ark-card h2 { font-weight: 500; letter-spacing: 0; }

/* ══ SCI-FI VINTAGE ══════════════════════════════════════════════════════════
   Consola de nave de los 70: fósforo verde, ámbar para mandar, cian para la
   letanía, líneas de barrido. Su par claro es el panel crema con naranja.     */
html[data-skin="scifi"] {
  --bg: #060d0a; --surface: #0b1611; --surface-2: #11211a; --border: #1c3a2b; --border-2: #2c5a43;
  --white: #a9f0c0; --gray-lt: #86c79d; --gray: #6fae86; --gray-dim: #63a07a;
  --red: #ffb23e; --red-hi: #ffc76e; --red-lo: #d98f1f; --red-dim: #7a5417; --red-soft: #e0a040; --red-wash: rgba(255,178,62,.14);
  --amber: #5ee6ff; --amber-ink: #06100c; --on-accent: #0a0d08;
  --header-bg: #ffb23e; --header-ink: #0a0d08;
  --font-head: 'Michroma', 'Eurostile', 'Bank Gothic', sans-serif;
  --font-body: 'Share Tech Mono', 'Space Mono', monospace;
  --fs-2xs: 11px; --fs-xs: 12px;
}
html[data-skin="scifi"][data-theme="light"] {
  --bg: #e6dfcb; --surface: #efe9d8; --surface-2: #dcd4bd; --border: #c2b99c; --border-2: #a39a7c;
  --white: #12261f; --gray-lt: #33483f; --gray: #4a5d54; --gray-dim: #46584f;
  --red: #b0420a; --red-hi: #c9520f; --red-lo: #8d3406; --red-dim: #b98a6a; --red-soft: #a8400a; --red-wash: rgba(176,66,10,.10);
  --amber: #0b5f73; --amber-ink: #efe9d8; --on-accent: #efe9d8;
  --header-bg: #12261f; --header-ink: #e6dfcb;
}
html[data-skin="scifi"]::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 99;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45)); }
html[data-skin="scifi"][data-theme="light"]::after { background: repeating-linear-gradient(0deg, rgba(18,38,31,.06) 0 1px, transparent 1px 3px); }
html[data-skin="scifi"]:not([data-theme="light"]) .card, html[data-skin="scifi"]:not([data-theme="light"]) .footer { text-shadow: 0 0 6px color-mix(in srgb, currentColor 35%, transparent); }
html[data-skin="scifi"] .station-name { font-size: clamp(16px, 4.8vw, 27px); line-height: 1.22; letter-spacing: .06em; }
html[data-skin="scifi"] .ark-card h2 { font-size: 16px; letter-spacing: .12em; text-transform: uppercase; }
html[data-skin="scifi"] .dot { border-radius: 0; }
html[data-skin="scifi"] .bar { border-radius: 0; }

/* ══ LOFI ════════════════════════════════════════════════════════════════════
   Atardecer de cinta de casete: ciruela y melocotón, grano, esquinas blandas.
   Su par claro es el amanecer: crema y terracota.                             */
html[data-skin="lofi"] {
  --bg: #2a2433; --surface: #352d40; --surface-2: #41374e; --border: #4a3f58; --border-2: #62546f;
  --white: #f4e9dc; --gray-lt: #cdbfd0; --gray: #bcaec0; --gray-dim: #ad9fb2;
  --red: #f2a488; --red-hi: #f7bba4; --red-lo: #d98a6e; --red-dim: #7d5a55; --red-soft: #e8a58c; --red-wash: rgba(242,164,136,.16);
  --amber: #9fd8c0; --amber-ink: #2a2433; --on-accent: #2a2433;
  --header-bg: #f2a488; --header-ink: #2a2433;
  --font-head: 'Fredoka', 'Trebuchet MS', sans-serif;
  --font-body: 'DM Mono', 'Space Mono', monospace;
}
html[data-skin="lofi"][data-theme="light"] {
  --bg: #f6e9dc; --surface: #fbf2e8; --surface-2: #eddccc; --border: #dfc9b8; --border-2: #c4a996;
  --white: #3a2f4c; --gray-lt: #5c4f6b; --gray: #6b5d78; --gray-dim: #65586f;
  --red: #a34632; --red-hi: #bd5a44; --red-lo: #863726; --red-dim: #d3a696; --red-soft: #a34632; --red-wash: rgba(163,70,50,.10);
  --amber: #2f7561; --amber-ink: #fbf2e8; --on-accent: #fbf2e8;
  --header-bg: #3a2f4c; --header-ink: #f6e9dc;
}
html[data-skin="lofi"] body::before { opacity: .9; }
html[data-skin="lofi"][data-theme="light"] body::before { opacity: .45; }
html[data-skin="lofi"]:not([data-bg="gradient"]) #bgLayer { background: radial-gradient(700px 420px at 50% 0%, var(--red-wash), transparent 70%), var(--bg); }
html[data-skin="lofi"] .header { border-radius: 18px 18px 0 0; }
html[data-skin="lofi"] .footer { border-radius: 0 0 18px 18px; }
html[data-skin="lofi"] .play-btn, html[data-skin="lofi"] .lang-toggle, html[data-skin="lofi"] .handle-row, html[data-skin="lofi"] .ark-btn, html[data-skin="lofi"] .bg-act, html[data-skin="lofi"] .install-btn { border-radius: 999px; }
html[data-skin="lofi"] .ark-card, html[data-skin="lofi"] .bg-strip { border-radius: 14px; }
html[data-skin="lofi"] .micro-card { border-radius: 0; }
html[data-skin="lofi"] .micro-card:first-child { border-radius: 6px 0 0 6px; }
html[data-skin="lofi"] .micro-card:last-child { border-radius: 0 6px 6px 0; }
html[data-skin="lofi"] .station-name { font-size: clamp(34px, 10vw, 46px); font-weight: 600; line-height: .98; letter-spacing: 0; }
html[data-skin="lofi"] .ark-card h2 { font-weight: 600; letter-spacing: 0; }

/* ══ ANALÓGICO ═══════════════════════════════════════════════════════════════
   Receptor hi-fi de los 70. En oscuro, frontal negro con regleta de aluminio
   y piloto naranja; en claro, frontal de aluminio cepillado. Mandos y teclas
   con relieve, cantos de nogal.                                               */
html[data-skin="analogico"] {
  --bg: #161412; --surface: #1f1c19; --surface-2: #2a2622; --border: #35302a; --border-2: #4a443c;
  --white: #efe8d8; --gray-lt: #bdb5a4; --gray: #a8a090; --gray-dim: #9c9484;
  --red: #ff7a2f; --red-hi: #ff9655; --red-lo: #d95f18; --red-dim: #7a3a14; --red-soft: #f08a4a; --red-wash: rgba(255,122,47,.14);
  --amber: #8fdc9a; --amber-ink: #161412; --on-accent: #161412;
  --header-bg: linear-gradient(180deg, #dedad0, #b9b4a8); --header-ink: #1c1a17;
  --knob-face: radial-gradient(circle at 32% 26%, #4a443c, #1c1916 72%);
  --key-face: linear-gradient(180deg, #2e2a25, #1a1714);
  --bevel: 0 2px 4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.10);
  --font-head: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Archivo Narrow', 'Space Mono', sans-serif;
  --fs-2xs: 11px; --fs-xs: 12px;
}
html[data-skin="analogico"][data-theme="light"] {
  --bg: #d8d4ca; --surface: #e6e2d8; --surface-2: #cbc6ba; --border: #b9b4a7; --border-2: #9b958a;
  --white: #1c1a17; --gray-lt: #45413b; --gray: #55514a; --gray-dim: #504c45;
  --red: #a8380a; --red-hi: #c2470f; --red-lo: #8a2d06; --red-dim: #c59a84; --red-soft: #a8380a; --red-wash: rgba(168,56,10,.10);
  --amber: #1f6b3a; --amber-ink: #f5f1e8; --on-accent: #f5f1e8;
  --header-bg: linear-gradient(180deg, #2a2622, #161412); --header-ink: #e6e2d8;
  --knob-face: radial-gradient(circle at 32% 26%, #f6f2e9, #c4bfb3 72%);
  --key-face: linear-gradient(180deg, #f1ede4, #d3cec2);
  --bevel: 0 2px 3px rgba(40,34,24,.28), inset 0 1px 0 #fff;
}
html[data-skin="analogico"][data-theme="light"] .card { background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), var(--surface); }
html[data-skin="analogico"] .header, html[data-skin="analogico"] .card, html[data-skin="analogico"] .footer { box-shadow: -8px 0 0 #4a301b, 8px 0 0 #4a301b; }
html[data-skin="analogico"] .knob { background: var(--knob-face); box-shadow: var(--bevel); }
html[data-skin="analogico"] .play-btn, html[data-skin="analogico"] .lang-toggle, html[data-skin="analogico"] .bg-act, html[data-skin="analogico"] .install-btn { background: var(--key-face); box-shadow: var(--bevel); border-radius: 4px; }
html[data-skin="analogico"] .play-btn:hover { background: var(--key-face); border-color: var(--red); }
html[data-skin="analogico"] .play-btn.active { background: var(--surface-2); box-shadow: inset 0 2px 5px rgba(0,0,0,.45); }
html[data-skin="analogico"] .lang-opt.active { box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
html[data-skin="analogico"] .station-name { font-size: clamp(44px, 12vw, 64px); font-weight: 800; font-stretch: 62%; line-height: .86; letter-spacing: 0; }
html[data-skin="analogico"] .micro-trio { top: 0; }
html[data-skin="analogico"] .ark-card h2 { font-weight: 800; font-stretch: 62%; }
html[data-skin="analogico"] .tagline, html[data-skin="analogico"] .status-row, html[data-skin="analogico"] .rep-part, html[data-skin="analogico"] .knob-name, html[data-skin="analogico"] .knob-val { font-weight: 600; }