/* ══════════════════════════════════════════════════════════════════
   premium-feel.css — GelatoMaps
   Capa de sensación adictiva: spring physics, ripple, micro-rewards.
   Carga DESPUÉS de interaction.css — complementa, no sustituye.
   Principio: press fast + release spring = sensación iOS premium.
   ══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   1. SPRING EASING TOKENS
   ────────────────────────────────────────────────────────────────── */
:root {
  /* Press-in: rápido y sin overshoot — sensación de peso real */
  --pf-press-in:  cubic-bezier(.25, 0, .35, 1);
  /* Release: spring con overshoot — el elemento "rebota" al soltar */
  --pf-spring:    cubic-bezier(.34, 1.56, .64, 1);
  /* Slide-in panels: aceleración exponencial suave */
  --pf-out-expo:  cubic-bezier(.16, 1, .3, 1);
  /* Snappy: iOS-like general */
  --pf-snappy:    cubic-bezier(.25, .46, .45, .94);

  --pf-dur-press:  65ms;
  --pf-dur-release: 200ms;
  --pf-dur-enter:   280ms;
  --pf-dur-spring:  320ms;
}

/* ──────────────────────────────────────────────────────────────────
   2. RIPPLE — elemento inyectado por premium-feel.js
   ────────────────────────────────────────────────────────────────── */
.gm-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  transform: scale(0);
  animation: pf-ripple 560ms cubic-bezier(.4, 0, .2, 1) forwards;
  pointer-events: none;
  will-change: transform, opacity;
  /* Siempre encima del contenido pero debajo del texto */
  z-index: 0;
}
/* Ripple oscuro para fondos claros */
.tbtn .gm-ripple,
.sb-calidad-chip .gm-ripple,
.sb-chip .gm-ripple,
.btn-rst .gm-ripple,
.rank-item .gm-ripple,
.ud-item .gm-ripple,
.mtab .gm-ripple,
.ext-a .gm-ripple {
  background: rgba(0, 0, 0, .08);
}
@keyframes pf-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* ──────────────────────────────────────────────────────────────────
   3. BOTONES — PRESS PHYSICS (truco iOS)
   La transición del ESTADO BASE controla el RELEASE (spring).
   La transición del :active controla el PRESS (rápido).
   ────────────────────────────────────────────────────────────────── */

/* RELEASE: spring con overshoot al soltar */
button,
.hdr-login-btn,
.hdr-pill,
.tbtn,
.demo-banner-cta,
.btn-rst,
.sabor-rank-viewall {
  transition:
    transform var(--pf-dur-release) var(--pf-spring),
    box-shadow var(--pf-dur-release) var(--pf-out-expo),
    background-color 140ms ease,
    opacity 120ms ease !important;
  will-change: transform;
}

/* PRESS: rápido y sin bounce */
button:active,
.hdr-login-btn:active,
.demo-banner-cta:active,
.btn-rst:active,
.sabor-rank-viewall:active {
  transform: scale(0.93) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.12) !important;
  transition:
    transform var(--pf-dur-press) var(--pf-press-in),
    box-shadow var(--pf-dur-press) ease !important;
}

/* Pills de categoría: press + release más pronunciado (elemento con imagen) */
.hdr-pill {
  transition:
    transform var(--pf-dur-release) var(--pf-spring),
    box-shadow var(--pf-dur-release) var(--pf-out-expo),
    border-color 150ms ease !important;
}
.hdr-pill:hover:not(:active) {
  transform: translateY(-2px) scale(1.025) !important;
  box-shadow: 0 5px 16px rgba(0,0,0,.30) !important;
}
.hdr-pill:active {
  transform: scale(0.92) translateY(0) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.2) !important;
  transition: transform var(--pf-dur-press) var(--pf-press-in) !important;
}

/* tbtn filtros sidebar */
.tbtn {
  transition:
    transform var(--pf-dur-release) var(--pf-spring),
    background 140ms ease,
    color 140ms ease,
    box-shadow var(--pf-dur-release) var(--pf-spring) !important;
}
.tbtn:active {
  transform: scale(0.92) !important;
  transition: transform var(--pf-dur-press) var(--pf-press-in) !important;
}

/* Chips de calidad mínima */
.sb-calidad-chip {
  transition:
    transform var(--pf-dur-release) var(--pf-spring),
    background 140ms ease,
    color 140ms ease,
    box-shadow var(--pf-dur-release) var(--pf-spring) !important;
}
.sb-calidad-chip:active {
  transform: scale(0.90) !important;
  transition: transform var(--pf-dur-press) var(--pf-press-in) !important;
}

/* ──────────────────────────────────────────────────────────────────
   4. BOTONES DE CIERRE — rotate + scale (más dramático)
   ────────────────────────────────────────────────────────────────── */
.pnl-x,
.modal-x,
.vote-x,
.dc-x,
.legend-close {
  transition:
    transform var(--pf-dur-release) var(--pf-spring),
    background 130ms ease !important;
}
.pnl-x:active,
.modal-x:active,
.vote-x:active,
.dc-x:active,
.legend-close:active {
  transform: scale(0.80) rotate(8deg) !important;
  transition: transform var(--pf-dur-press) var(--pf-press-in) !important;
}
/* Hover: pre-rotate hint */
.pnl-x:hover:not(:active),
.modal-x:hover:not(:active),
.vote-x:hover:not(:active) {
  transform: scale(1.1) rotate(-8deg) !important;
}

/* ──────────────────────────────────────────────────────────────────
   5. DISCOVERY CARDS — hover lift + press squeeze
   ────────────────────────────────────────────────────────────────── */
.disco-card {
  transition:
    transform var(--pf-dur-release) var(--pf-spring),
    box-shadow var(--pf-dur-release) var(--pf-out-expo) !important;
}
.disco-card:hover:not(:active) {
  transform: translateY(-5px) scale(1.015) !important;
  box-shadow:
    0 10px 32px rgba(11, 31, 56, .18),
    0 2px 8px rgba(0,0,0,.08) !important;
}
.disco-card:active {
  transform: scale(0.96) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.10) !important;
  transition: transform var(--pf-dur-press) var(--pf-press-in) !important;
}

/* ──────────────────────────────────────────────────────────────────
   6. PANEL FICHA — entrada spring desde abajo
   ────────────────────────────────────────────────────────────────── */
#panel.open {
  animation: pf-panel-enter var(--pf-dur-enter) var(--pf-out-expo) both;
}
@keyframes pf-panel-enter {
  from {
    transform: translateX(32px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* Mobile: el panel entra desde abajo */
@media (max-width: 768px) {
  #panel.open {
    animation: pf-panel-enter-mob var(--pf-dur-enter) var(--pf-out-expo) both;
  }
  @keyframes pf-panel-enter-mob {
    from {
      transform: translateY(28px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* ──────────────────────────────────────────────────────────────────
   7. MODALES — entrada scale + spring
   ────────────────────────────────────────────────────────────────── */
.vote-modal-inner,
.sobre-modal,
.fid-modal {
  animation: pf-modal-enter 260ms var(--pf-spring) both;
}
@keyframes pf-modal-enter {
  from { transform: scale(.86) translateY(14px); opacity: 0; }
  to   { transform: scale(1) translateY(0);       opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────────
   8. BOLAS HERO — reveal escalonado con spring
   ────────────────────────────────────────────────────────────────── */
.bolas-list .tbtn {
  animation: pf-bola-pop var(--pf-dur-spring) var(--pf-spring) both;
}
.bolas-list .tbtn:nth-child(1) { animation-delay:  0ms; }
.bolas-list .tbtn:nth-child(2) { animation-delay: 45ms; }
.bolas-list .tbtn:nth-child(3) { animation-delay: 90ms; }
.bolas-list .tbtn:nth-child(4) { animation-delay:135ms; }
.bolas-list .tbtn:nth-child(5) { animation-delay:180ms; }

@keyframes pf-bola-pop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  65%  { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────────
   9. RANK ITEMS — hover slide-right con acento lateral
   ────────────────────────────────────────────────────────────────── */
.rank-item {
  transition:
    transform 180ms var(--pf-spring),
    background 120ms ease,
    box-shadow 180ms var(--pf-spring) !important;
  border-radius: 6px;
}
.rank-item:hover:not(:active) {
  transform: translateX(5px) !important;
  background: rgba(13, 148, 136, .07) !important;
  box-shadow: -3px 0 0 0 var(--teal, #0D9488) inset !important;
}
.rank-item:active {
  transform: translateX(2px) !important;
  transition: transform var(--pf-dur-press) ease !important;
}

/* ──────────────────────────────────────────────────────────────────
   10. TOGGLE — spring en el thumb
   ────────────────────────────────────────────────────────────────── */
.tog-sl {
  transition: background 200ms var(--pf-out-expo) !important;
}
.tog-sl:before {
  transition:
    transform 220ms var(--pf-spring),
    width 110ms var(--pf-snappy) !important;
}

/* ──────────────────────────────────────────────────────────────────
   11. VOTE SLIDER THUMB — más grande + spring en grab
   ────────────────────────────────────────────────────────────────── */
.gm-bola-slider::-webkit-slider-thumb,
.vote-slider::-webkit-slider-thumb {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  cursor: grab;
  transition:
    transform 160ms var(--pf-spring),
    box-shadow 160ms var(--pf-out-expo) !important;
}
.gm-bola-slider::-webkit-slider-thumb:active,
.vote-slider::-webkit-slider-thumb:active {
  transform: scale(1.35) !important;
  box-shadow: 0 0 0 10px rgba(13, 148, 136, .18) !important;
  cursor: grabbing;
}
.gm-bola-slider::-moz-range-thumb,
.vote-slider::-moz-range-thumb {
  width: 24px !important;
  height: 24px !important;
  transition: transform 160ms var(--pf-spring) !important;
}

/* ──────────────────────────────────────────────────────────────────
   12. SABOR BOLAS en voto — spring por bola
   ────────────────────────────────────────────────────────────────── */
.sabor-bola {
  transition:
    background 120ms var(--pf-spring),
    transform 120ms var(--pf-spring) !important;
}
.sabor-bola:hover {
  transform: scale(1.4) !important;
}

/* ──────────────────────────────────────────────────────────────────
   13. EXT-A LINKS (panel) — hover lift
   ────────────────────────────────────────────────────────────────── */
.ext-a {
  transition:
    transform 180ms var(--pf-spring),
    box-shadow 180ms var(--pf-out-expo),
    opacity 130ms ease !important;
}
.ext-a:hover:not(:active) {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
  opacity: 1 !important;
}
.ext-a:active {
  transform: scale(0.97) !important;
  transition: transform var(--pf-dur-press) ease !important;
}

/* ──────────────────────────────────────────────────────────────────
   14. FAV BUTTON — heartbeat al activar
   ────────────────────────────────────────────────────────────────── */
.fav-btn {
  transition: transform 200ms var(--pf-spring) !important;
}
.fav-btn:active {
  transform: scale(0.82) !important;
  transition: transform var(--pf-dur-press) var(--pf-press-in) !important;
}
/* Clase añadida por JS al marcar favorito */
.fav-btn.pf-fav-burst {
  animation: pf-heartbeat 420ms var(--pf-spring) both;
}
@keyframes pf-heartbeat {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.42); }
  55%  { transform: scale(.88); }
  80%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ──────────────────────────────────────────────────────────────────
   15. NOTIFY / TOAST — entrada spring
   ────────────────────────────────────────────────────────────────── */
.gm-notify,
[class*="notify-"] {
  animation: pf-toast-in 300ms var(--pf-spring) both !important;
}
@keyframes pf-toast-in {
  from { transform: translateY(-18px) scale(.90); opacity: 0; }
  to   { transform: translateY(0) scale(1);        opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────────
   16. LEGEND PANEL — entrada desde arriba
   ────────────────────────────────────────────────────────────────── */
#hdrLegend[style*="flex"] {
  animation: pf-legend-drop 240ms var(--pf-spring) both;
}
@keyframes pf-legend-drop {
  from { transform: translateY(-10px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);        opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────────
   17. TABS DE MODAL (.mtab) — spring en selected state
   ────────────────────────────────────────────────────────────────── */
.mtab {
  transition:
    color 160ms ease,
    background 140ms ease,
    border-color 160ms ease !important;
  position: relative;
}
.mtab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--teal, #0D9488);
  border-radius: 2px;
  transition:
    left 220ms var(--pf-spring),
    right 220ms var(--pf-spring) !important;
}
.mtab.active::after,
.mtab[aria-selected="true"]::after {
  left: 12%; right: 12%;
}

/* ──────────────────────────────────────────────────────────────────
   18. SCORE BADGE — glow de entrada en panel
   ────────────────────────────────────────────────────────────────── */
.pf-score-glow {
  animation: pf-score-pulse 600ms var(--pf-spring) both;
}
@keyframes pf-score-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(13, 148, 136, .50); }
  50%  { box-shadow: 0 0 0 10px rgba(13, 148, 136, .08); }
  100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); }
}

/* ──────────────────────────────────────────────────────────────────
   18b. CTA BANNER vs PANEL — evitar solapamiento
   Cuando el panel está abierto (body.gm-panel-open):
   - CTA se fuerza a modo colapsado (solo peek tab 44px)
   - CTA se reposiciona al centro del área visible entre sidebar y panel
   - En mobile: CTA se oculta completamente
   ────────────────────────────────────────────────────────────────── */

/* Panel abierto en desktop — reposicionar CTA en área visible del mapa */
body.gm-panel-open .cta-card {
  /* Centro entre sidebar (268px) y panel (460px desde la derecha) */
  left: calc(268px + (100% - 268px - 460px) / 2) !important;
  transition:
    left .32s cubic-bezier(.4, 0, .2, 1),
    transform .4s cubic-bezier(.4, 0, .2, 1) !important;
}

/* Panel premium es más ancho (620px) */
body.gm-panel-open.gm-panel-premium .cta-card {
  left: calc(268px + (100% - 268px - 620px) / 2) !important;
}

/* Forzar colapso del CTA cuando el panel está abierto */
body.gm-panel-open .cta-card.expanded {
  transform: translateX(-50%) translateY(calc(100% - 54px)) !important;
}

/* Mobile: ocultar CTA cuando el panel está abierto (panel cubre toda la pantalla) */
@media (max-width: 768px) {
  body.gm-panel-open .cta-card {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   19. CONFETTI CANVAS — siempre encima
   ────────────────────────────────────────────────────────────────── */
#pf-confetti-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 99999;
}

/* ──────────────────────────────────────────────────────────────────
   20. CALIDAD CHIPS — trofeos tamaño PROGRESIVO
   1 bola (pequeño) < 2 bolas (mediano) < 3 bolas (grande)
   La escala visual transmite la jerarquía de calidad.
   ────────────────────────────────────────────────────────────────── */
.sb-calidad-chip img {
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  transition: transform 200ms var(--pf-spring) !important;
  width: 22px !important;
  height: 22px !important;
}
/* 1 bola — pequeño */
.sb-calidad-chip[data-val="1"] img {
  width: 22px !important;
  height: 22px !important;
}
/* 2 bolas — mediano (+36% más grande que 1 bola) */
.sb-calidad-chip[data-val="2"] img {
  width: 30px !important;
  height: 30px !important;
}
/* 3 bolas — grande (+82% más grande que 1 bola), sombra con más peso */
.sb-calidad-chip[data-val="3"] img {
  width: 40px !important;
  height: 40px !important;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.32)) !important;
}
.sb-calidad-chip:hover img {
  transform: scale(1.18) rotate(-5deg) !important;
}
.sb-calidad-chip:active img {
  transform: scale(0.88) !important;
}
/* Chip seleccionado: trofeo brilla */
.sb-calidad-chip.active img,
.sb-calidad-chip[data-active="true"] img {
  filter: drop-shadow(0 2px 8px rgba(13,148,136,.6)) !important;
}
/* 3 bolas seleccionado: brillo dorado premium */
.sb-calidad-chip[data-val="3"].active img,
.sb-calidad-chip[data-val="3"][data-active="true"] img {
  filter: drop-shadow(0 4px 12px rgba(245,158,11,.55)) drop-shadow(0 0 8px rgba(245,158,11,.3)) !important;
}

/* ──────────────────────────────────────────────────────────────────
   21. FLAVOR CAROUSEL — carrusel de sabores en el sidebar
   ────────────────────────────────────────────────────────────────── */
.pf-flavor-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px 12px;
  /* Animación de entrada: desliza desde la derecha */
  animation: pf-carousel-in 400ms var(--pf-out-expo) both;
}
.pf-flavor-carousel::-webkit-scrollbar { display: none; }

@keyframes pf-carousel-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.pf-flavor-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  scroll-snap-align: start;
  cursor: pointer;
  border-radius: 12px;
  padding: 8px 6px 6px;
  transition:
    transform 200ms var(--pf-spring),
    background 140ms ease,
    box-shadow 200ms var(--pf-spring) !important;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.pf-flavor-item:hover {
  background: rgba(13,148,136,.08);
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 4px 12px rgba(13,148,136,.18) !important;
}
.pf-flavor-item:active {
  transform: scale(0.90) !important;
  background: rgba(13,148,136,.14) !important;
  transition: transform var(--pf-dur-press) var(--pf-press-in) !important;
}

.pf-flavor-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  background: var(--smoke, #F5F2ED);
  transition:
    border-color 180ms ease,
    transform 200ms var(--pf-spring) !important;
}
.pf-flavor-item:hover .pf-flavor-img {
  border-color: var(--teal, #0D9488);
}

.pf-flavor-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--navy, #0B1F38);
  text-align: center;
  max-width: 52px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Auto-scroll animation (CSS marquee-like) cuando hay muchos sabores */
.pf-flavor-carousel.pf-auto-scroll {
  animation:
    pf-carousel-in 400ms var(--pf-out-expo) both,
    pf-marquee 22s linear 1.2s infinite;
}
@keyframes pf-marquee {
  0%   { transform: translateX(0); }
  45%  { transform: translateX(calc(-100% + 100vw - 48px)); }
  55%  { transform: translateX(calc(-100% + 100vw - 48px)); }
  100% { transform: translateX(0); }
}
/* En hover detener el auto-scroll */
.pf-flavor-carousel.pf-auto-scroll:hover {
  animation-play-state: paused;
}

/* ──────────────────────────────────────────────────────────────────
   23. CITY PANEL — panel lateral al pulsar ciudad en el ranking
   Posicionado a la derecha del sidebar, se muestra/oculta con
   opacity + visibility (evita el bug de translateX parcialmente visible).
   ────────────────────────────────────────────────────────────────── */
#cityPanel {
  position: absolute;
  top: 0;
  left: 272px; /* borde derecho del sidebar */
  width: 280px;
  height: 100%;
  background: var(--white, #fff);
  border-left: 1px solid var(--border, #E5E7EB);
  border-right: 1px solid var(--border, #E5E7EB);
  box-shadow: 4px 0 24px rgba(0,0,0,.10);
  z-index: 750;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Oculto: invisible + sin interacción + ligero desplazamiento */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-12px);
  pointer-events: none;
  transition:
    opacity 250ms cubic-bezier(.4,0,.2,1),
    transform 300ms cubic-bezier(.34,1.22,.64,1),
    visibility 0ms linear 250ms;
}
#cityPanel.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  transition:
    opacity 250ms cubic-bezier(.4,0,.2,1),
    transform 320ms cubic-bezier(.34,1.22,.64,1),
    visibility 0ms linear 0ms;
}
/* Header del panel */
.cp-header {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary, #0B1F38) 0%, var(--color-primary-panel-2, #1A3A5C) 100%);
  padding: 14px 14px 12px;
}
.cp-header-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-close {
  align-self: flex-end;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: none;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, transform 150ms;
  margin-bottom: 4px;
}
.cp-close:hover { background: rgba(255,255,255,.22); transform: rotate(90deg); }
.cp-close:active { transform: scale(0.85) rotate(90deg); }
.cp-city-name {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.cp-city-meta {
  font-size: 11px;
  color: rgba(255,255,255,.65);
  letter-spacing: .02em;
}
/* Cuerpo scrollable */
.cp-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-border, #E5E7EB) transparent;
}
.cp-body::-webkit-scrollbar { width: 3px; }
.cp-body::-webkit-scrollbar-track { background: transparent; }
.cp-body::-webkit-scrollbar-thumb { background: var(--color-neutral-border, #D1D5DB); border-radius: 2px; }
/* Loading state */
.cp-loading {
  text-align: center;
  padding: 30px 16px;
  color: var(--mid, #94A3B8);
  font-size: 12px;
}
/* Items de heladería en el panel */
.cp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: background 120ms;
  animation: cp-item-in 280ms cubic-bezier(.34,1.22,.64,1) both;
}
.cp-item:hover { background: var(--color-panel-hover, #F8FFFE); }
.cp-item:active { background: var(--color-panel-active, #E6FAF8); }
@keyframes cp-item-in {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cp-pos {
  min-width: 20px;
  font-size: 10px;
  font-weight: 700;
  color: var(--mid, #94A3B8);
  text-align: center;
}
.cp-pos-medal { font-size: 13px; }
.cp-info { flex: 1; min-width: 0; }
.cp-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy, #0B1F38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-sub {
  font-size: 10px;
  color: var(--mid, #94A3B8);
  margin-top: 1px;
}
.cp-score {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal, #0D9488);
  flex-shrink: 0;
}
/* Bolas dots en el panel */
.cp-bolas {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.cp-bola {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal, #0D9488);
  opacity: .85;
}
.cp-bola.half { opacity: .4; }
/* Título de sección dentro del panel */
.cp-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mid, #94A3B8);
  padding: 12px 14px 5px;
}
/* Vacío */
.cp-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--mid, #94A3B8);
  font-size: 12px;
  line-height: 1.5;
}
/* En móvil: el panel sale de abajo */
@media (max-width: 768px) {
  #cityPanel {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 60vh;
    /* Oculto hacia abajo */
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
    border-top: 1px solid var(--border, #E5E7EB);
    border-left: none;
    border-right: none;
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  }
  #cityPanel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ── WCAG 2.3.3: Disable animations for users who prefer reduced motion ──── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Preserve opacity transitions for visibility (show/hide) — no movement */
  .pf-press,
  .pf-card,
  .pf-list-item,
  .pf-btn {
    transition: opacity 0.15s ease !important;
  }
}