/* ---------- `hidden` gana siempre ----------
   `[hidden]` del navegador es `display:none`, pero cualquier regla de clase del proyecto
   (`.rp-live{display:inline-flex}`, `.radio-bar{display:flex}`…) le gana por precedencia
   de origen. El síntoma es un elemento con el atributo puesto que igual se ve.
   Se venía parcheando caso por caso —al menos 6 veces entre CSS y JS— y volvió a aparecer
   el 2026-08-03: el reproductor mostraba "EN VIVO" y el ecualizador con la radio parada.
   Con esta regla, poner `hidden` alcanza y no hay que acordarse de nada. */
[hidden]{display:none !important}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  background:var(--graphite);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:60px;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)}

.section-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(19px,2.4vw,26px);letter-spacing:-0.02em;text-transform:uppercase}

.section-head .count{color:var(--bone-faint);font-size:13px;letter-spacing:.05em;font-family:var(--font-display)}

.stagger.in{opacity:1;transform:translateY(0)}

.footnote{margin-top:40px;text-align:center;color:var(--bone-faint);font-size:12px;font-family:var(--font-display)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- Toast ----------
   Definición única. Estaba repetida en cuatro hojas (components, mapa, cliente, admin) con
   z-index distintos, y **el panel del dueño no la tenía en ninguna de las suyas**: el
   elemento existía pero sin estilos quedaba fuera de la vista, así que sus mensajes de
   error nunca se veían. Ese era el motivo real de que "Guardar calificación" pareciera no
   hacer nada: el backend respondía con el porqué y nadie lo leía.

   z-index bien alto a propósito: un toast que queda detrás de un modal no sirve, y los
   errores que más importan son justamente los que pasan dentro de un modal. */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:9999;
  transform:translate(-50%,140%) scale(.9);opacity:0;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px;border-radius:100px;
  background:var(--card-2);border:1px solid var(--line);
  font-size:14px;font-weight:500;color:var(--bone);
  max-width:min(520px,calc(100vw - 32px));
  transition:transform .55s cubic-bezier(.18,1.25,.4,1),opacity .3s ease;
  box-shadow:var(--shadow-toast);
}
.toast.show{transform:translate(-50%,0) scale(1);opacity:1}
.toast .dot-ok{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}

/* ---------- Scrollbar temática ----------
   Aplica a todos los scrollables para mantener coherencia en oscuro/claro. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--graphite-2)}
::-webkit-scrollbar-thumb{background:var(--bone-faint);border-radius:100px;border:2px solid var(--graphite-2)}
::-webkit-scrollbar-thumb:hover{background:var(--bone-dim)}
::-webkit-scrollbar-corner{background:var(--graphite-2)}
html.light ::-webkit-scrollbar-track{background:var(--graphite-2)}
html.light ::-webkit-scrollbar-thumb{background:var(--bone-faint);border-color:var(--graphite-2)}
html.light ::-webkit-scrollbar-thumb:hover{background:var(--bone-dim)}
*{scrollbar-width:thin;scrollbar-color:var(--bone-faint) var(--graphite-2)}