/* Base: colores día/noche (los de la radio vienen de radio.json en :root), letra, botones e íconos. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&display=swap');

:root{
  --fondo:var(--fondo-noche);
  --texto:#fff6ea;
  --suave:color-mix(in srgb,var(--texto) 62%,transparent);
  --tarjeta:color-mix(in srgb,var(--fondo) 82%,var(--principal));
  --linea:color-mix(in srgb,var(--texto) 12%,transparent);
  --brillo:linear-gradient(135deg,var(--dorado),var(--acento));
  --radio:22px;
  --titulos:'Baloo 2',system-ui,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-tema="noche"]){--fondo:var(--fondo-dia);--texto:#2a1709;--tarjeta:#fff;color-scheme:light}
}
:root[data-tema="dia"]{--fondo:var(--fondo-dia);--texto:#2a1709;--tarjeta:#fff;color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);font:16px/1.45 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;padding-bottom:84px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titulos);line-height:1.1;margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:3px solid var(--dorado);outline-offset:3px}
[hidden]{display:none!important}

.ic{width:1.15em;height:1.15em;fill:currentColor;flex:none;vertical-align:-.18em}

.boton,.boton-chico{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border-radius:999px;font-weight:700;text-decoration:none}
.boton{padding:.8em 1.4em;background:var(--brillo);color:#2a1406}
.boton-chico{padding:.45em .9em;font-size:.9rem;background:color-mix(in srgb,var(--texto) 10%,transparent)}
.boton-redondo{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--texto) 10%,transparent)}

/* Encabezado */
.barra{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;color:#fff6ea}
.marca img{height:48px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.barra-fin{display:flex;gap:8px;align-items:center}
.barra .boton-chico,.barra .boton-redondo{background:rgba(0,0,0,.28);backdrop-filter:blur(6px)}
.si-noche{display:none}
:root[data-tema="noche"] .si-noche{display:block} :root[data-tema="noche"] .si-dia{display:none}
@media (prefers-color-scheme:dark){:root:not([data-tema="dia"]) .si-noche{display:block} :root:not([data-tema="dia"]) .si-dia{display:none}}

/* Texto que corre si no entra (lo activa el motor) */
.oxi-marquee{overflow:hidden;white-space:nowrap}
.oxi-marquee>span{display:inline-block}
.oxi-marquee.corre>span{padding-left:100%;animation:corre 14s linear infinite}
@keyframes corre{to{transform:translateX(-100%)}}
img[data-oxi]{transition:opacity .3s}
img.oxi-cambiando{opacity:0}

/* Ventana de instalar */
.ventana{border:0;border-radius:var(--radio);background:var(--tarjeta);color:var(--texto);max-width:340px;padding:22px}
.ventana::backdrop{background:rgba(0,0,0,.6)}
.ventana ol{padding-left:1.2em}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}