/* =========================================================
   V2 · polish.css — Capa de pulido de interacción y movimiento.
   Principios: Emil Kowalski (design engineering) + impeccable.
   Aditiva: se carga la última, solo refina feedback, foco, motion y profundidad.
   No cambia layout ni colores de marca.
   ========================================================= */

/* ---- 1) Feedback de pulsación: los elementos pulsables deben "responder" ----
   (Emil: transform: scale(.97) en :active da feedback instantáneo.) */
.btn,
.v2-tabs__tab,
.v2-chip-rm,
.admin-pos-browser-tile,
.admin-pos-stepper,
.v2-nav__item,
.v2-slot.is-avail {
  transition: transform var(--t-fast), background-color var(--t-fast),
    border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), filter var(--t-fast);
}
.btn:active,
.v2-tabs__tab:active,
.admin-pos-browser-tile:active,
.admin-pos-stepper:active,
.v2-slot.is-avail:active {
  transform: scale(.97);
}
.v2-nav__item:active { transform: scale(.985); }

/* ---- 2) Foco visible accesible (anillo de marca, no el outline del navegador) ---- */
:where(.btn, .v2-input, .v2-select, .v2-tabs__tab, a, [tabindex], textarea):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ring);
}

/* ---- 3) Inputs: foco con anillo de marca + borde que reacciona ---- */
.v2-input,
.v2-select,
textarea.v2-input {
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.v2-input:focus,
.v2-select:focus,
textarea.v2-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ---- 4) Profundidad sutil en hover, solo en elementos interactivos y punteros finos ----
   (Emil: gate de hover; impeccable: nada de lift en todas las cards.) */
@media (hover: hover) and (pointer: fine) {
  .admin-pos-browser-tile,
  .v2-kpi {
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  }
  .admin-pos-browser-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
  }
  .v2-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .btn--brand:hover { filter: brightness(1.06); }
  .v2-resv-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
}
.v2-resv-chip { transition: transform var(--t-fast), box-shadow var(--t-fast); }

/* ---- 5) Modales: entrar desde scale(.96) (Emil: nunca desde scale(0)) con curva fuerte;
   sin el rebote del overshoot anterior. ---- */
.v2-modal { animation: v2-pop-in 220ms var(--ease-out); }
@keyframes v2-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.v2-modal-overlay { animation: v2-fade-in 200ms var(--ease-out); }
@keyframes v2-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- 6) Toasts: curva fuerte e interrumpible ---- */
.v2-toast { transition: transform var(--t-slow), opacity var(--t-slow); }

/* ---- 7) Reduced motion: sin movimiento, solo opacidad (Emil: reducir, no eliminar) ---- */
@media (prefers-reduced-motion: reduce) {
  .v2-modal { animation: v2-fade-in 150ms ease; }
  .btn:active,
  .v2-tabs__tab:active,
  .admin-pos-browser-tile:active,
  .admin-pos-stepper:active,
  .v2-slot.is-avail:active,
  .admin-pos-browser-tile:hover,
  .v2-kpi:hover,
  .v2-resv-chip:hover { transform: none; }
}

/* =========================================================
   RONDA 2 — Carácter en reposo: jerarquía tipográfica, profundidad
   "material" de superficie y presencia del CTA. Sigue siendo aditiva:
   no cambia layout ni paleta, solo refina el estado de reposo.
   ========================================================= */

/* ---- 2.1 Tipografía: titulares equilibrados (sin líneas viudas) ---- */
h1, h2, h3, .v2-kpi__value { text-wrap: balance; }
p, .v2-prose, .v2-kpi__hint { text-wrap: pretty; }

/* ---- 2.2 Superficies "material": hairline highlight superior + brillo cenital sutil.
   (impeccable: las cards planas parecen pegatinas; un borde de luz arriba las hace material.) ---- */
.card {
  background-image: linear-gradient(180deg, rgba(255,255,255,.045), transparent 40%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-sm);
}
.v2-kpi, .v2-match {
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- 2.3 KPI: la barra de acento gana un glow tenue para que "respire" ---- */
.v2-kpi::before { box-shadow: 0 0 12px -1px var(--brand); }

/* ---- 2.4 CTA de marca: presencia en reposo (sombra de color) que crece en hover ---- */
.btn--brand { box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .btn--brand:hover { box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--brand) 85%, transparent); }
}

/* =========================================================
   RONDA 3 — Vocabulario de estado y legibilidad de datos.
   Product register (impeccable): color semántico y acento al
   servicio de la tarea (estados, selección, datos), nunca
   decoración. Aditiva: completa estados que faltaban y afina
   la lectura; no cambia layout ni paleta.
   ========================================================= */

/* ---- 3.1 Alertas: completar el vocabulario semántico (ya existía .v2-alert--ok).
   Mismo patrón que --ok: borde al 42% del hue + fondo tintado al 12%. ---- */
.v2-alert--warn   { border-color: color-mix(in srgb, var(--warning) 42%, var(--border)); background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
.v2-alert--danger { border-color: color-mix(in srgb, var(--danger) 42%, var(--border));  background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.v2-alert--info   { border-color: color-mix(in srgb, var(--info) 42%, var(--border));    background: color-mix(in srgb, var(--info) 12%, var(--surface)); }
.v2-alert__title  { font-weight: 800; letter-spacing: -.01em; margin-bottom: 2px; }

/* ---- 3.2 Inputs: estados que faltaban (hover, disabled) + placeholder legible.
   (product: cada control con default/hover/focus/disabled.) ---- */
.v2-input::placeholder, textarea.v2-input::placeholder, .v2-select::placeholder { color: var(--muted); opacity: 1; }
.v2-input:hover:not(:focus):not(:disabled),
.v2-select:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); }
.v2-input:disabled, .v2-select:disabled, textarea.v2-input:disabled {
  opacity: .6; cursor: not-allowed; background: var(--surface-2);
}

/* ---- 3.3 Datos: cifras tabulares alineadas (importes, KPIs, columnas numéricas) ---- */
.v2-table td.is-right, .v2-table th.is-right, .v2-money, .v2-num,
.v2-kpi__value, .admin-pos-browser-tile__price { font-variant-numeric: tabular-nums; }
.v2-kpi__value { letter-spacing: -.02em; }

/* ---- 3.4 Tablas: zebra muy sutil para escanear filas densas; el hover siempre manda ---- */
.v2-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.v2-table tbody tr:hover td { background: var(--surface-2); }

/* ---- 3.5 Prosa: longitud de línea legible (65–75ch) ---- */
.v2-prose { max-width: 72ch; }

/* ---- 3.6 Enlaces de texto: subrayado fino y separado (no los botones ni la nav) ---- */
a:not(.btn):not(.v2-nav__item):not(.v2-catpill):hover { text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* =========================================================
   RONDA 4 — Carga/vacíos, navegación y táctil (responsive).
   Product register: skeletons en vez de spinners, vacíos que
   enseñan, vocabulario de navegación consistente, objetivos
   táctiles cómodos. Aditiva (CSS); los skeletons/vacíos reales
   por vista se cablean luego en JS usando estas utilidades.
   ========================================================= */

/* ---- 4.1 Carga: utilidad skeleton con shimmer (para sustituir spinners de contenido) ---- */
.v2-skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); }
.v2-skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 9%, transparent), transparent);
  animation: v2-shimmer 1.3s var(--ease-in-out) infinite;
}
@keyframes v2-shimmer { to { transform: translateX(100%); } }
.v2-skeleton--text   { height: .72em; margin: .35em 0; border-radius: 999px; }
.v2-skeleton--title  { height: 1.3em; width: 55%; border-radius: 6px; }
.v2-skeleton--circle { border-radius: 50%; }
.v2-skeleton--btn    { height: 40px; width: 120px; }

/* ---- 4.2 Vacíos: el estado vacío existente, con más jerarquía y un icono de marca ---- */
.v2-empty__icon  { color: color-mix(in srgb, var(--brand) 65%, var(--muted)); }
.v2-empty__title { font-family: var(--font-display); letter-spacing: -.01em; }
.v2-empty__msg   { color: var(--text-soft); margin-inline: auto; }

/* ---- 4.3 Navegación y cabecera: estados de la barra superior + activo más legible ---- */
.v2-iconbtn { transition: transform var(--t-fast), border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast); }
.v2-iconbtn:active { transform: scale(.94); }
.v2-userchip { transition: border-color var(--t-fast), background-color var(--t-fast); }
.v2-userchip:hover { border-color: var(--border-strong); background: var(--surface-2); }
.v2-nav__item { transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.v2-nav__item.is-active { font-weight: 700; }

/* ---- 4.4 Táctil/responsive: objetivos cómodos y sin auto-zoom en iOS ---- */
@media (max-width: 640px) {
  .btn { min-height: 44px; }
  .v2-iconbtn { width: 44px; height: 44px; }
  .v2-nav__item { padding-block: 12px; }
  .v2-bottomnav__item { min-height: 52px; justify-content: center; }
  /* font-size >=16px evita el zoom automático de Safari iOS al enfocar un campo */
  .v2-input, .v2-select, textarea.v2-input { font-size: 16px; }
}

/* ---- 4.5 Reduced-motion: el shimmer se detiene (el bloque sigue comunicando "cargando") ---- */
@media (prefers-reduced-motion: reduce) {
  .v2-skeleton::after { animation: none; }
  .v2-iconbtn:active { transform: none; }
}

/* =========================================================
   RONDA 5 — Atmósfera y marco (visible en TODAS las pantallas).
   Da profundidad al fondo y más presencia a la barra lateral, la
   navegación activa y la cabecera. Aditiva; respeta paleta y layout.
   ========================================================= */

/* ---- 5.1 Fondo con atmósfera: halo de marca muy tenue, no plano ---- */
body {
  background-color: var(--bg);
  background-image: radial-gradient(1100px 560px at 100% -8%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 58%);
  background-repeat: no-repeat;
}

/* ---- 5.2 Barra lateral: segunda capa más definida + hilo de luz superior ---- */
.v2-sidebar {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, transparent), transparent 28%);
  border-right-color: var(--border-strong);
}

/* ---- 5.3 Navegación: el item activo se lee de un vistazo (tinte e icono de marca) ---- */
.v2-nav__item.is-active {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  border-color: color-mix(in srgb, var(--brand) 48%, transparent);
}
.v2-nav__item.is-active .v2-nav__icon { color: var(--brand); }

/* ---- 5.4 Cabecera: una línea de luz de marca + sombra para separarla del contenido ---- */
.v2-topbar { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--brand) 12%, transparent), var(--shadow-sm); }

/* =========================================================
   RONDA 6 — "Bolder" (registro PRODUCTO): la intensidad va en la
   CLARIDAD, no en el drama (impeccable/bolder). Jerarquía más fuerte,
   un acento más afilado y más contraste de peso. Aditiva.
   ========================================================= */

/* ---- 6.1 KPIs como protagonista: número dominante, etiqueta secundaria ---- */
.v2-kpi__value { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.03em; line-height: .95; }
.v2-kpi__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.v2-kpi::before { width: 5px; }
.v2-kpi { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px -18px rgba(0,0,0,.55); }

/* ---- 6.2 Títulos de página con más presencia (contraste de escala) ---- */
.v2-main h1, .v2-container > h1 { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.03em; }

/* ---- 6.3 Navegación: el activo como pastilla sólida (acento decisivo, se lee al instante) ---- */
.v2-nav__item.is-active {
  background: var(--brand-grad); color: var(--brand-contrast);
  border-color: transparent;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 75%, transparent);
}
.v2-nav__item.is-active .v2-nav__icon { color: var(--brand-contrast); }
.v2-nav__item.is-active .v2-nav__badge { background: rgba(0,0,0,.28); color: #fff; }

/* ---- 6.4 CTA de marca: acento más comprometido ---- */
.btn--brand { font-weight: 800; box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--brand) 82%, transparent); }

/* ---- 6.5 Cifras destacadas (importes, saldo) con más peso ---- */
.v2-money, .v2-userchip__bal, .admin-pos-browser-tile__price { font-weight: 800; }

/* ---- 6.6 Móvil/tablet: bajar la escala grande para que NO se corte en columnas
   estrechas (.v2-kpi tiene overflow:hidden; un valor de 48px desbordaría a 2 cols) ---- */
@media (max-width: 860px) {
  .v2-kpi__value { font-size: var(--fs-2xl); }
  .v2-main h1, .v2-container > h1 { font-size: var(--fs-2xl); }
}
@media (max-width: 380px) {
  .v2-kpi__value { font-size: var(--fs-xl); }
  .v2-main h1, .v2-container > h1 { font-size: var(--fs-xl); }
}

/* =========================================================
   R7 — VISTA: Reservas (tablero pistas×horas). Pulido dirigido:
   cabecera con presencia, líneas de hora legibles, chips con volumen
   y una línea de "ahora". No cambia los colores por tipo ni la lógica.
   ========================================================= */

/* ---- 7.1 Cabecera de pistas: jerarquía y separación clara ---- */
.v2-resv-board__head > div {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  color: var(--text); font-weight: 800;
  border-bottom: 1px solid var(--border-strong);
}

/* ---- 7.2 Líneas de hora en punto más marcadas (mejor lectura de franjas) ---- */
.v2-resv-cell.is-hour { border-top-color: var(--border-strong); }

/* ---- 7.3 Chips: volumen "material" (luz arriba) + sombra que los despega de la rejilla ---- */
.v2-resv-chip { box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 2px 7px -3px rgba(0,0,0,.5); }
.v2-resv-chip__time { letter-spacing: .01em; }

/* ---- 7.4 Hueco libre: el hover invita más al clic ---- */
.v2-resv-cell.is-free:hover {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent);
}

/* ---- 7.5 Línea de "ahora": marca la hora actual de un vistazo (la posiciona board.js) ---- */
.v2-resv-now { position: absolute; left: 0; right: 0; height: 0; z-index: 4; pointer-events: none;
  border-top: 2px solid var(--danger); }
.v2-resv-now::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent); }

/* =========================================================
   R8 — VISTA: Ranking (podio + clasificación por ELO). Pulido
   dirigido: podio con volumen y campeón destacado, "mi fila"
   reconocible, barra de ELO con presencia. No cambia la lógica.
   ========================================================= */

/* ---- 8.1 Podio: barras con volumen, medallas con relieve, campeón con aura dorada ---- */
.v2-podium__bar { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -8px rgba(0,0,0,.5); }
.v2-podium__medal { filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.v2-podium__item--1 .v2-podium__ava {
  box-shadow: 0 0 0 3px var(--gold), 0 0 22px -2px color-mix(in srgb, var(--gold) 55%, transparent);
}

/* ---- 8.2 Lista: "mi fila" se reconoce al instante ---- */
.v2-rank.is-me {
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}
.v2-rank.is-me .v2-rank__name::after { content: " · Tú"; color: var(--brand); font-weight: 800; }

/* ---- 8.3 Barra de progreso de ELO con un punto más de presencia ---- */
.v2-rank__bar { height: 6px; }
.v2-rank__bar-fill { box-shadow: 0 0 8px -2px color-mix(in srgb, var(--brand) 60%, transparent); }

/* ---- 8.4 Badge de 1ª categoría en dorado (la variante 'gold' faltaba en el set) ---- */
.v2-badge--gold { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); border-color: transparent; }

/* =========================================================
   R9 — VISTA: Padel Slam (cartas de campeón / tronos). Vista de
   engagement: admite más carácter. La carta del rey se siente
   especial; el trono libre invita. Dirigido, no cambia la lógica.
   ========================================================= */

/* ---- 9.1 Carta de campeón: aura dorada sutil; la vacante se mantiene apagada ---- */
.v2-slam-card:not(.is-vacant) {
  border-color: color-mix(in srgb, var(--gold) 38%, var(--border));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px -18px color-mix(in srgb, var(--gold) 50%, transparent);
}

/* ---- 9.2 Avatares de la pareja campeona: más presencia ---- */
.v2-slam-duo .v2-slam-ava { box-shadow: 0 4px 12px -4px rgba(0,0,0,.5); }

/* ---- 9.3 Trono libre que brilla + valores de stats con un toque de marca ---- */
.v2-slam-throne { filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--gold) 45%, transparent)); }
.v2-slam-stats code { background: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); }

/* =========================================================
   R10 — VISTAS: Mensajes (chat) + resultados de partido (.v2-match,
   usado en torneos y reservas). Pulido dirigido a su markup propio.
   ========================================================= */

/* ---- 10.1 Chat: burbujas con "cola" y profundidad; la mía con sombra de marca ---- */
.v2-msg__bubble { box-shadow: var(--shadow-sm); border-bottom-left-radius: 5px; }
.v2-msg.is-mine .v2-msg__bubble {
  border-bottom-left-radius: var(--r-md); border-bottom-right-radius: 5px;
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--brand) 55%, transparent);
}

/* ---- 10.2 Resultado de partido: pareja ganadora clara + marcador destacado ---- */
.v2-match { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-sm); }
.v2-match__row.is-winner { font-weight: 800; }
.v2-match__row.is-winner .v2-match__score { color: var(--brand); }
.v2-match__score { font-size: var(--fs-md); }

/* =========================================================
   R11 — VISTA: Detalle de reserva (admin, estilo MatchPoint). La
   tarjeta por jugador gana material y feedback; el avatar, presencia.
   ========================================================= */
.v2-rd-summary { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.v2-rd-card { transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.v2-rd-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.v2-rd-card__avatar { box-shadow: 0 3px 10px -4px rgba(0,0,0,.5); }

/* =========================================================
   Ajustes de TEMA CLARO — los badges amarillos (warn/gold) pierden
   contraste en claro (texto del hue sobre tinte pálido). Oscurecemos
   el texto SOLO en [data-theme="light"]; el tema oscuro no cambia.
   (Verificado: reservas, podio, aura dorada y cartas ya iban bien en claro.)
   ========================================================= */
[data-theme="light"] .v2-badge--warn {
  color: color-mix(in srgb, var(--warning) 52%, #2e1d00);
  background: color-mix(in srgb, var(--warning) 26%, transparent);
}
[data-theme="light"] .v2-badge--gold {
  color: color-mix(in srgb, var(--gold) 52%, #2e2200);
  background: color-mix(in srgb, var(--gold) 30%, transparent);
}

/* =========================================================
   R12 — Fragmentos menores: tratamiento uniforme (feedback al
   pulsar, material y sombra). Retorno pequeño pero coherente.
   ========================================================= */

/* Pills de categoría / chips de selección: feedback de pulsación */
.v2-catpill:active,
.v2-slot-pick__item:active { transform: scale(.97); }
.v2-slot-pick__item { transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.v2-slot-pick__item:hover:not(.is-selected) { border-color: var(--brand); color: var(--text); }

/* Drag&drop de grupos (liga admin): las fichas se sienten "agarrables" */
.v2-dnd-chip { box-shadow: var(--shadow-sm); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.v2-dnd-chip:hover { border-color: var(--border-strong); }
.v2-dnd-chip.is-dragging { box-shadow: var(--shadow); }

/* Resumen de reserva + listas de definición: material y cierre limpio */
.v2-book-summary { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.v2-deflist__row:last-child { border-bottom: none; }

@media (prefers-reduced-motion: reduce) {
  .v2-catpill:active, .v2-slot-pick__item:active { transform: none; }
}

/* =========================================================
   QA pre-lanzamiento — táctil móvil + legibilidad tema claro
   (hallazgos confirmados de la revisión F2 de la campaña)
   ========================================================= */

/* Podio: las barras metálicas (oro/plata/bronce) son claras en ambos temas;
   el ordinal usaba var(--brand-contrast), blanco en tema claro = ilegible.
   Texto oscuro constante, como constantes son los gradientes. */
.v2-podium__bar { color: #0d1f18; text-shadow: 0 1px 0 rgba(255,255,255,.25); }

/* Objetivos táctiles que se escapaban de la regla global de 44px */
@media (max-width: 720px) {
  /* las flechas de fecha del tablero tenían 36px con mayor especificidad */
  .v2-datenav .v2-iconbtn { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .admin-pos-stepper { width: 42px; height: 42px; }      /* steppers de cantidad del TPV (26px) */
  .v2-modal__close, .v2-sheet__close { width: 44px; height: 44px; } /* cierre de modales (34px) */
}

/* Toasts en móvil: que no desborden el viewport ni tapen la bottom-nav */
@media (max-width: 640px) {
  .v2-toasts { left: var(--sp-4); right: var(--sp-4); max-width: none; bottom: calc(64px + var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
}

/* × de quitar jugador en chips: área táctil ampliada sin crecer visualmente */
.v2-chip-rm__x { padding: 8px 10px; margin: -6px -8px -6px -6px; }