/* ============================================================
   3sRevendedores — Rediseño visual (capa de maquetación)
   Se carga después de theme.css. Solo estilos: no cambia IDs,
   formularios ni scripts. Escala: 4/8px · tipo 12/14/16/18/24/32.
   ============================================================ */

:root {
  --ui-radius-sm: 8px;
  --ui-radius: 12px;
  --ui-radius-lg: 16px;
  --ui-radius-xl: 20px;
  --ui-header-h: 64px;
  --ui-panel: var(--rc-panel); /* opaco: el blur no funciona dentro de la cabecera (que ya usa backdrop-filter) */
  --ui-elev: rgba(255, 255, 255, 0.06) 0 1px 0 0 inset, rgba(0, 0, 0, 0.5) 0 12px 32px -8px, rgba(255, 255, 255, 0.08) 0 0 0 1px;
  --ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body { line-height: 1.5; font-size: 16px; }

@keyframes ui-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ui-pop  { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ============================================================
   CABECERA PÚBLICA
   ============================================================ */
.header {
  position: sticky !important;
  top: 0;
  z-index: 50 !important;
  height: var(--ui-header-h);
  padding: 0 clamp(12px, 3vw, 32px) !important;
  background: rgba(var(--rc-canvas-rgb), 0.72) !important;
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid rgba(var(--rc-ink), 0.06) !important;
  gap: 8px;
}
.header .hamburger { order: 0; }
.header::before {
  order: 1;
  content: '3sRevendedores';
  flex: 1;
  margin-left: 4px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--rc-text);
  padding-left: 22px;
  text-align: left;
  background: no-repeat left center / 12px 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2' y='2' width='8' height='8' rx='1.5' transform='rotate(45 6 6)' fill='%23ff1a1a'/%3E%3C/svg%3E");
}
.header .icon-container { order: 2; gap: 4px !important; }

/* Botones de icono con área táctil amplia */
.hamburger, .icon-container > div, .icon-container > a, .icon-container > svg {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}
.hamburger:hover, .icon-container > div:hover, .icon-container > a:hover, .icon-container > svg:hover {
  background: rgba(var(--rc-ink), 0.06);
}
.header .icon, .hamburger .icon { width: 22px !important; height: 22px !important; }
.header .icon:hover { transform: none !important; }

/* Globos de notificación */
.news-notification-badge, .wallet-notification-badge {
  top: 2px !important; right: 2px !important;
  width: auto !important; min-width: 18px; height: 18px !important;
  padding: 0 5px;
  border-radius: 999px !important;
  font-size: 11px !important;
  border: 2px solid var(--rc-canvas) !important;
  animation: none !important;
  background: var(--rc-coral) !important;
  color: var(--rc-card) !important;
}

/* Paneles desplegables (menú de juegos / usuario) */
.menu-juegos, .user-box {
  top: calc(100% + 10px) !important;
  background: var(--ui-panel) !important;
  border: 0 !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-elev) !important;
  padding: 8px !important;
  z-index: 60;
}
.menu-juegos { width: 260px !important; max-height: calc(100vh - 96px); overflow-y: auto; cursor: default; }
.menu-juegos.visible, .user-box.visible { animation: ui-pop 0.16s var(--ui-ease); }
.menu-juegos .menu-title {
  margin: 8px 10px 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-ash) !important;
}
.menu-juegos ul { margin: 0 !important; }
.menu-juegos li { margin: 0 !important; }
.menu-juegos > li { border-color: rgba(var(--rc-ink), 0.06) !important; margin: 6px 4px !important; }
.menu-juegos a {
  display: flex; align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--rc-mist) !important;
  text-decoration: none;
}
.menu-juegos a:hover { background: rgba(var(--rc-ink), 0.06); color: var(--rc-text) !important; font-weight: 500 !important; }

.user-box { min-width: 260px !important; text-align: left !important; }
.menu-juegos, .user-box, .menu-juegos *, .user-box * { box-sizing: border-box; }
.user-box p {
  margin: 4px 10px 8px !important;
  font-size: 13px !important;
  color: var(--rc-ash);
  overflow-wrap: anywhere;
}
.user-box p strong { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rc-smoke); }
.user-box a {
  display: flex !important; align-items: center;
  width: 100%;
  min-height: 40px;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--rc-mist) !important;
  font-size: 14px !important;
  font-weight: 500;
  text-decoration: none;
}
.user-box a:hover { background: rgba(var(--rc-ink), 0.06) !important; color: var(--rc-text) !important; }
.user-box .logout-btn { color: var(--rc-coral) !important; border-top: 1px solid rgba(var(--rc-ink), 0.06); border-radius: 0 0 10px 10px !important; margin-top: 4px !important; }

/* Sub-barra con ID y saldo */
.user-panel {
  background: transparent !important;
  border: 0 !important;
  padding: 16px 16px 0 !important;
}
.user-chip {
  height: 32px;
  padding: 0 12px !important;
  background: var(--rc-card) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 999px !important;
  color: var(--rc-ash) !important;
  font-size: 13px !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.user-chip .chip-value { font-family: var(--rc-mono); font-size: 13px !important; font-weight: 500 !important; color: var(--rc-text) !important; }
.user-chip.chip-saldo .chip-value { color: var(--rc-hl) !important; }
.user-chip.chip-saldo svg { stroke: var(--rc-hl) !important; }

/* ============================================================
   TÍTULOS DE PÁGINA
   ============================================================ */
.transaction-title, .section-title, .news-page-title {
  display: block !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 8px 0 24px !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--rc-text) !important;
}

/* Títulos dentro de tarjetas: un escalón menor */
.games-section .section-title, .stats-section .section-title, .juego-container .section-title {
  font-size: 18px !important; margin: 0 0 16px !important;
}

/* ============================================================
   HISTORIAL DE TRANSACCIONES / CRÉDITOS
   ============================================================ */
.transactions { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px !important; text-align: left !important; }
.transactions > .transaction-title { text-align: left; }
.transaction-container { max-width: none !important; margin: 0 !important; gap: 12px !important; }

.transaction-card-simple {
  position: relative;
  padding: 16px 20px !important;
  background: var(--rc-card) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: rgba(var(--rc-ink), 0.04) 0 1px 0 0 inset !important;
  text-align: left !important;
  animation: ui-rise 0.22s var(--ui-ease) both;
  transition: border-color 0.15s ease;
}
.transaction-card-simple:hover { border-color: var(--rc-border-strong) !important; }
.transaction-header {
  display: flex !important;
  justify-content: flex-start !important;
  width: auto !important;
  margin: 0 0 12px !important;
  padding: 0 0 12px !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rc-border) !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-ash) !important;
}
.transaction-row { align-items: stretch !important; gap: 8px !important; margin: 0 !important; text-align: left !important; }
.transaction-main { align-items: stretch !important; gap: 6px !important; }
.user-simple { font-size: 15px; font-weight: 600; color: var(--rc-text) !important; }
.control-status { display: flex; align-items: center; gap: 8px; justify-content: flex-start !important; }
.control-num { font-family: var(--rc-mono); font-size: 12px; color: var(--rc-ash) !important; }
.package-cost { display: flex !important; align-items: baseline; justify-content: space-between !important; gap: 12px; }
.package-cost .package { font-weight: 500; color: var(--rc-text) !important; }
.package-cost .cost, .cost { font-family: var(--rc-mono); font-weight: 500; color: var(--rc-hl) !important; font-variant-numeric: tabular-nums; }
.transaction-pin, .transaction-footer {
  display: flex; justify-content: flex-start !important; align-self: flex-start !important;
  background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
}
.date-simple {
  background: none !important; border: 0 !important; padding: 0 !important;
  font-family: var(--rc-mono); font-size: 12px !important; color: var(--rc-ash) !important;
}
.transaction-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* PINs dentro de tarjetas y resultados */
.pin-code, .pin-item, .ffid-voucher-line {
  font-family: var(--rc-mono) !important;
  letter-spacing: 0.02em;
}
.copy-btn, .copy-btn-simple { min-width: 32px; min-height: 32px; border-radius: 8px !important; }

/* Bloque de PINs en el historial */
.multiple-pins {
  display: flex !important; flex-direction: column; align-items: stretch !important; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rc-border);
  text-align: left !important;
}
.pins-count {
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rc-ash) !important;
}
.pin-item-simple {
  display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin: 0 !important;
  padding: 6px 6px 6px 12px !important;
  background: var(--rc-recess) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 10px !important;
}
.pin-code-simple { font-family: var(--rc-mono) !important; font-size: 14px !important; color: var(--rc-text) !important; overflow-wrap: anywhere; }
/* Icono SVG de copiar en lugar del emoji */
/* Solo-icono únicamente en los botones que eran solo '📋' (los que tienen texto llevan atributo style) */
.copy-btn-simple:not([style]), .copy-btn:not([style]) {
  position: relative;
  font-size: 0 !important; color: transparent !important;
  width: 32px; height: 32px; padding: 0 !important;
}
.copy-btn-simple:not([style])::before, .copy-btn:not([style])::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  background: var(--rc-mist);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.copy-btn-simple:not([style]):hover::before, .copy-btn:not([style]):hover::before { background: var(--rc-text); }
.copy-all-btn-simple { min-height: 36px; font-size: 13px !important; }

/* Paginación */
.pagination a, .pagination span, .page-btn, .pagination button {
  min-width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: 10px !important;
}

/* Estados vacíos (skill: mensaje útil) */
.empty-state, .no-transactions, .no-news {
  padding: 48px 16px !important;
  border: 1px dashed var(--rc-border) !important;
  border-radius: var(--ui-radius-lg);
  text-align: center;
}
.empty-state svg, .empty-icon { opacity: 0.6; }
.empty-state p { font-size: 15px !important; color: var(--rc-ash) !important; }

/* ============================================================
   PÁGINAS DE JUEGO (compra)
   ============================================================ */
.juego-container {
  max-width: 560px !important;
  margin: 24px auto 48px !important;
  padding: 32px !important;
  border-radius: var(--ui-radius-xl) !important;
  animation: ui-rise 0.22s var(--ui-ease) both;
}
.juego-titulo {
  font-size: clamp(24px, 4vw, 32px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin: 0 0 24px !important;
  text-align: left !important;
}
.juego-form {
  background: var(--rc-recess) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  padding: 20px !important;
  box-shadow: none !important;
}
.juego-form .form-row { gap: 16px !important; }
.juego-form label, .form-col label {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  color: var(--rc-ash) !important;
  margin-bottom: 6px !important;
  text-shadow: none !important;
}
.juego-form .form-control, .juego-form select, .juego-form input:not([type=checkbox]):not([type=radio]) {
  min-height: 48px;
  padding: 0 14px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
}
.juego-form button, .juego-form .submit-btn {
  min-height: 48px;
  border-radius: 12px !important;
  font-size: 15px !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
}
.total-price { font-family: var(--rc-mono); color: var(--rc-text) !important; }

/* Bloques informativos y pasos */
.juego-descripcion, .entrega-info, .informacion {
  margin-top: 16px !important;
  background: transparent !important;
  border: 1px solid var(--rc-border) !important;
  border-left-width: 1px !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: none !important;
  color: var(--rc-ash) !important;
  font-size: 14px;
}
.juego-descripcion ol li, .juego-descripcion ul li, .entrega-info li { text-align: left; }

/* Resultado de compra */
.compra-exitosa, .solicitud-container {
  margin-top: 16px !important;
  background: linear-gradient(180deg, rgba(89, 212, 153, 0.08), rgba(89, 212, 153, 0.02)) !important;
  border: 1px solid rgba(89, 212, 153, 0.25) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: none !important;
  animation: ui-rise 0.25s var(--ui-ease) both;
}
.pines-container, .pin-container { gap: 8px; }
.pin-item {
  background: var(--rc-card) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 10px !important;
}

/* Volver: enlace discreto */
.volver-container { margin-top: 24px !important; text-align: center; }
.volver-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--rc-ash) !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
}
.volver-btn:hover { color: var(--rc-text) !important; background: rgba(var(--rc-ink), 0.06) !important; }
.volver-btn::before { content: none !important; } /* el texto ya trae la flecha */

/* Pie de tarjeta (billetera): fecha a la izquierda, usuario a la derecha */
.transaction-footer {
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  align-self: stretch !important;
  width: 100%;
  gap: 12px;
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--rc-border) !important;
}
.transaction-footer .user-simple { font-size: 13px; font-weight: 500; color: var(--rc-ash) !important; }

/* Tarjetas de juegos por ID / dinámicos: el "comprobante" es el cuerpo de la tarjeta */
.transaction-card-simple:has(.ffid-voucher) .transaction-row:not(:has(.transaction-actions)) { display: none !important; }
.transaction-footer:has(.ffid-voucher) {
  display: block !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.ffid-voucher {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important;
  font-family: var(--rc-font) !important;
}
.ffid-voucher-status {
  display: flex !important; align-items: center; justify-content: flex-start !important; gap: 8px;
  background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 10px !important;
}
.ffid-voucher-status-label { font-size: 13px !important; color: var(--rc-ash) !important; font-weight: 500 !important; }
.ffid-voucher-status-value {
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.06em;
  padding: 3px 10px !important; border-radius: 999px !important;
  background: rgba(89, 212, 153, 0.12) !important; color: var(--rc-green) !important;
  border: 0 !important;
}
.ffid-voucher-details { padding: 0 !important; background: none !important; border: 0 !important; font-family: var(--rc-font) !important; }
.ffid-voucher-line {
  font-family: var(--rc-font) !important; font-size: 14px !important;
  color: var(--rc-text) !important; margin: 4px 0 !important; text-align: left !important;
}
.ffid-voucher-line strong { font-weight: 500 !important; color: var(--rc-ash) !important; }
/* Código/serial entregado */
.ffid-voucher-details > div[style] { border-radius: 12px !important; }
.ffid-voucher-details > div[style] > div:nth-child(2) { font-family: var(--rc-mono) !important; letter-spacing: 0.04em !important; }
.tx-corner-date {
  position: static !important;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rc-border);
  font-family: var(--rc-mono); font-size: 12px !important; color: var(--rc-text) !important; font-weight: 800 !important;
  text-align: left !important; background: none !important;
}

/* Formulario en modo PIN/tarjeta: etiqueta + selector + botón sin contenedor */
.juego-form > label { display: block; }
.juego-form > select + button, .juego-form > .form-control + button { margin-top: 16px !important; }

/* ============================================================
   DASHBOARD DE USUARIO (bento)
   ============================================================ */
.dashboard-container {
  max-width: 1100px;
  margin: 24px auto 48px !important;
  padding: 24px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.filter-buttons-integrated {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px;
  background: var(--rc-card);
  border: 1px solid var(--rc-border);
  border-radius: 12px;
}
.filter-buttons-integrated button, .filter-buttons-integrated a {
  border: 0 !important;
  background: transparent !important;
  color: var(--rc-ash) !important;
  border-radius: 8px !important;
  min-height: 36px;
  padding: 0 14px !important;
  box-shadow: none !important;
}
.filter-buttons-integrated .active, .filter-buttons-integrated button:hover {
  background: var(--rc-graphite) !important;
  color: var(--rc-text) !important;
}
.stats-grid { display: grid !important; gap: 16px !important; }
.stat-card {
  border-radius: var(--ui-radius-lg) !important;
  padding: 20px 24px !important;
  border-left-width: 1px !important;
  animation: ui-rise 0.22s var(--ui-ease) both;
}
.stat-title, .stat-card h3 {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-ash) !important;
}
.stat-value, .stat-number {
  font-family: var(--rc-mono) !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 3.2vw, 32px) !important;
  letter-spacing: -0.02em;
  color: var(--rc-text) !important;
  font-variant-numeric: tabular-nums;
}
.stat-subtitle { font-size: 13px; color: var(--rc-ash) !important; }
.games-section {
  background: var(--rc-card) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: none !important;
}

/* Tablas modernas */
.table-responsive { border: 1px solid var(--rc-border); border-radius: var(--ui-radius); overflow: hidden; }
table { border-collapse: separate !important; border-spacing: 0; width: 100%; }
th, td { padding: 12px 16px !important; }
th { background: var(--rc-card) !important; border-bottom: 1px solid var(--rc-border) !important; text-align: left; }
td { border-bottom: 1px solid var(--rc-border) !important; font-size: 14px; }
tbody tr:last-child td { border-bottom: 0 !important; }

/* ============================================================
   BILLETERA / NOTICIAS
   ============================================================ */
.recarga-card, .billetera-container {
  max-width: 560px;
  margin-left: auto !important; margin-right: auto !important;
  border-radius: var(--ui-radius-xl) !important;
  padding: 24px !important;
}
.recarga-card-header { font-size: 18px !important; text-align: left !important; padding: 0 !important; margin-bottom: 16px !important; }
.recarga-btn { min-height: 48px; border-radius: 12px !important; font-size: 15px !important; }

.news-container { max-width: 720px; margin: 0 auto; }
.news-card {
  border-radius: var(--ui-radius-lg) !important;
  padding: 20px !important;
  text-align: left;
  animation: ui-rise 0.22s var(--ui-ease) both;
}
.news-title { font-size: 18px !important; font-weight: 600 !important; color: var(--rc-text) !important; }
.news-date { font-family: var(--rc-mono); font-size: 12px !important; color: var(--rc-ash) !important; }
.news-content { color: var(--rc-mist) !important; line-height: 1.6; }
.news-important-badge {
  background: var(--rc-ember) !important; color: var(--rc-coral) !important;
  border-radius: 6px !important; font-size: 11px !important; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px !important;
}

/* ============================================================
   AVISOS (toasts)
   ============================================================ */
.flash-messages-main, .flash-messages {
  top: calc(var(--ui-header-h) + 12px) !important;
  right: 16px !important;
  max-width: min(380px, calc(100vw - 32px)) !important;
  z-index: 1000 !important;
}
.flash-message-main, .flash-message, .flash {
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  animation: ui-pop 0.2s var(--ui-ease) both;
}

/* ============================================================
   LOGIN / REGISTRO
   ============================================================ */
.auth-panel {
  width: min(420px, calc(100vw - 32px)) !important;
  padding: 32px !important;
  border-radius: var(--ui-radius-xl) !important;
  background: var(--rc-card) !important;
  border: 1px solid var(--rc-border) !important;
  box-shadow: rgba(var(--rc-ink), 0.05) 0 1px 0 0 inset !important;
  animation: ui-rise 0.25s var(--ui-ease) both;
}
.auth-header h1 {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  padding-left: 26px;
  display: inline-block;
  background: no-repeat left center / 14px 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2' y='2' width='8' height='8' rx='1.5' transform='rotate(45 6 6)' fill='%23ff1a1a'/%3E%3C/svg%3E") !important;
}
.auth-header p { color: var(--rc-ash) !important; font-size: 14px !important; }
.tab-buttons {
  display: flex !important;
  gap: 4px;
  padding: 4px !important;
  background: var(--rc-recess) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 12px !important;
}
.tab-buttons button {
  flex: 1;
  min-height: 40px;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--rc-ash) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.tab-buttons button.active-tab, .tab-buttons .active-tab {
  background: var(--rc-graphite) !important;
  background-image: none !important;
  color: var(--rc-text) !important;
  box-shadow: rgba(var(--rc-ink), 0.06) 0 1px 0 0 inset !important;
}
.input-group label { font-size: 13px !important; font-weight: 500 !important; color: var(--rc-ash) !important; }
.input-group input { min-height: 48px; font-size: 15px !important; }
.submit-btn { min-height: 48px; border-radius: 12px !important; font-size: 15px !important; }
.aviso-banner {
  background: var(--rc-card) !important;
  background-image: none !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--ui-radius-lg) !important;
}

/* ============================================================
   PANEL ADMIN
   ============================================================ */
.admin-main { padding: 24px clamp(12px, 3vw, 32px) !important; }
.admin-shell { margin-top: 0 !important; gap: 24px !important; }
.admin-sidebar {
  top: 24px !important;
  padding: 12px !important;
  border-radius: var(--ui-radius-lg) !important;
}
.admin-sidebar::before {
  content: '3sRevendedores';
  display: block;
  padding: 6px 10px 14px 32px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--rc-border);
  font-weight: 600;
  font-size: 14px;
  color: var(--rc-text);
  background: no-repeat 10px 9px / 12px 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2' y='2' width='8' height='8' rx='1.5' transform='rotate(45 6 6)' fill='%23ff1a1a'/%3E%3C/svg%3E");
}
.side-tab-button {
  min-height: 40px;
  margin: 2px 0 !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  gap: 12px !important;
}
.side-tab-button .label { font-size: 14px !important; font-weight: 500; }
.admin-sidebar .icon svg { width: 18px !important; height: 18px !important; }

.tab-content { padding: 0 !important; animation: ui-rise 0.2s var(--ui-ease) both !important; }
.stats-admin-section, .tab-content > section:not(.um-section) {
  border-radius: var(--ui-radius-xl) !important;
  padding: 24px !important;
}
.tab-content h2, .stats-admin-section h2 {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
.stats-section, .stats-admin-grid { gap: 16px !important; }

/* Subpáginas admin sueltas */
.back-button, a.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px !important;
  border-radius: 10px !important;
  background: var(--rc-graphite) !important;
  border: 1px solid var(--rc-border) !important;
  color: var(--rc-mist) !important;
  text-decoration: none !important;
  font-size: 14px !important;
}
.back-button:hover, a.back-link:hover { background: var(--rc-slate) !important; color: var(--rc-text) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  :root { --ui-header-h: 56px; }
  .header::before { font-size: 14px; }
  .hamburger, .icon-container > div, .icon-container > a, .icon-container > svg { min-width: 44px; height: 44px; }
  .header .icon-container { gap: 0 !important; }
  .juego-container { box-sizing: border-box !important; width: calc(100% - 24px) !important; margin: 16px auto 32px !important; padding: 20px !important; border-radius: var(--ui-radius-lg) !important; }
  .juego-form { padding: 16px !important; }
  .dashboard-container { padding: 16px 12px !important; margin-top: 8px !important; }
  .transaction-card-simple { padding: 16px !important; }
  .auth-panel { padding: 24px !important; }
  .stats-admin-section, .tab-content > section:not(.um-section) { padding: 16px !important; border-radius: var(--ui-radius-lg) !important; }
  .admin-sidebar::before { display: none; }
}
@media (max-width: 420px) {
  .header::before { content: '3sR'; }
}

/* ---------- Historial: comprobante compacto (filas etiqueta · valor) ---------- */
.transaction-card-simple:has(.ffid-voucher) { padding: 14px 16px !important; }
.transaction-card-simple:has(.ffid-voucher) .transaction-header { margin-bottom: 10px !important; padding-bottom: 10px !important; }
.ffid-voucher-status { margin: 0 0 6px !important; }
.ffid-voucher-status-label { font-size: 12px !important; }
.ffid-voucher-status-value { font-size: 10px !important; padding: 2px 8px !important; }
.ffid-voucher-details { display: flex !important; flex-direction: column; gap: 0 !important; }
.ffid-voucher-line, .ffid-voucher-amount {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 !important;
  padding: 4px 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: right !important;
  color: var(--rc-text) !important;
  font-family: var(--rc-font) !important;
  border: 0 !important;
  overflow-wrap: anywhere;
}
.ffid-voucher-line strong, .ffid-voucher-amount strong {
  flex-shrink: 0;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--rc-ash) !important;
  text-align: left;
}
.ffid-voucher-amount {
  margin-top: 4px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--rc-border) !important;
  font-family: var(--rc-mono) !important;
  color: var(--rc-hl) !important;
}
.ffid-player-name { font-weight: 600 !important; color: var(--rc-hl) !important; }
/* Código/serial más compacto */
.ffid-voucher-details > div[style] { margin: 6px 0 !important; padding: 8px 12px !important; }
.ffid-voucher-details > div[style] > div:nth-child(2) { font-size: 14px !important; }
.ffid-voucher-details > div[style] .copy-btn-simple { min-height: 28px; padding: 0 10px !important; font-size: 12px !important; }
.transaction-card-simple:has(.ffid-voucher) .tx-corner-date { margin-top: 6px; padding-top: 8px; font-size: 11px !important; }
.ffid-voucher-amount strong { font-family: var(--rc-font) !important; }

/* La barra lateral se vuelve de solo iconos por debajo de 992px: sin marca de texto */
@media (max-width: 992px) { .admin-sidebar::before { display: none !important; } }

/* ============================================================
   MENÚ DE JUEGOS: columna lateral desplegable desde ☰
   ============================================================ */
.menu-juegos {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  position: fixed !important;
  top: var(--ui-header-h) !important;
  left: 0 !important;
  width: min(300px, 86vw) !important;
  height: calc(100vh - var(--ui-header-h));
  height: calc(100dvh - var(--ui-header-h));
  max-height: none !important;
  margin: 0 !important;
  padding: 16px 12px !important;
  border-radius: 0 !important;
  background: var(--rc-card) !important;
  border: 0 !important;
  border-right: 1px solid var(--rc-border) !important;
  box-shadow: none !important;
  overflow-y: auto;
  text-align: left !important;
  z-index: 40;
  transform: translateX(-100%);
  visibility: hidden;
  animation: none !important;
  transition: transform 0.22s var(--ui-ease), visibility 0s linear 0.22s;
}
.menu-juegos.visible {
  transform: none;
  visibility: visible;
  transition: transform 0.22s var(--ui-ease), visibility 0s;
}
/* Fondo oscurecido bajo la cabecera mientras el menú está abierto */
body:has(#menu-juegos.visible)::after {
  content: '';
  position: fixed;
  inset: var(--ui-header-h) 0 0 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 45;
  animation: ui-fade 0.2s ease both;
}
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
.hamburger:has(.menu-juegos.visible) { background: rgba(var(--rc-ink), 0.08); }

/* Títulos de sección con icono */
.menu-juegos .menu-title {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 12px 8px 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-ash) !important;
}
.menu-juegos .menu-title:first-child { margin-top: 0 !important; }
.menu-ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--rc-mist); }
.menu-juegos ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.menu-juegos ul a { padding-left: 36px !important; }
.menu-juegos ul:empty { display: none; }

/* "Recargar saldo" fijo al pie de la columna */
.menu-juegos .menu-footer {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--rc-border);
}
.menu-juegos .menu-footer a.menu-recargar {
  gap: 10px;
  padding-left: 8px !important;
  color: var(--rc-text) !important;
  font-weight: 600 !important;
}

/* ============================================================
   LISTAS DESPLEGABLES (ver static/ui-select.js)
   ============================================================ */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c9c9d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 38px !important;
  cursor: pointer;
  text-overflow: ellipsis;
}
select:not([multiple]):not([size]):hover { border-color: var(--rc-border-strong) !important; }
select.ui-select-open {
  border-color: var(--rc-ash) !important;
  box-shadow: 0 0 0 3px rgba(var(--rc-ink), 0.08) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") !important;
}

.ui-select-panel {
  position: fixed;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 6px;
  background: var(--rc-panel);
  border: 1px solid var(--rc-border-strong);
  border-radius: 12px;
  box-shadow: rgba(var(--rc-ink), 0.05) 0 1px 0 0 inset, rgba(0, 0, 0, 0.55) 0 16px 40px -8px;
  font-family: var(--rc-font);
  animation: ui-pop 0.14s var(--ui-ease);
  transform-origin: top;
}
.ui-select-panel.is-up { transform-origin: bottom; }
.ui-select-search {
  flex-shrink: 0;
  height: 36px !important;
  margin: 0 0 6px !important;
  padding: 0 10px 0 32px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  background: rgba(var(--rc-ink), 0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c9c9d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 10px center / 14px 14px !important;
}
.ui-select-list { overflow-y: auto; overscroll-behavior: contain; outline: none; }
.ui-select-group {
  padding: 10px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-ash);
}
.ui-select-option {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 34px 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--rc-mist);
  cursor: pointer;
  user-select: none;
}
.ui-select-option.is-grouped { padding-left: 18px; }
.ui-select-option.is-active { background: rgba(var(--rc-ink), 0.07); color: var(--rc-text); }
.ui-select-option.is-placeholder { color: var(--rc-ash); }
.ui-select-option.is-selected { color: var(--rc-text); font-weight: 600; }
.ui-select-option.is-selected::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: var(--rc-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ui-select-option.is-disabled { color: var(--rc-smoke); cursor: not-allowed; }
.ui-select-label { overflow-wrap: anywhere; }
.ui-select-empty { padding: 12px 10px; font-size: 13px; color: var(--rc-ash); }
.ui-select-option[hidden], .ui-select-group[hidden], .ui-select-empty[hidden] { display: none !important; }

/* ============================================================
   MENÚ LATERAL v2: secciones en contenedores
   ============================================================ */
.menu-juegos { gap: 12px !important; padding: 14px !important; background: var(--rc-canvas) !important; }
.menu-group {
  background: var(--rc-card);
  border: 1px solid var(--rc-border);
  border-radius: 14px;
  padding: 6px;
  box-shadow: rgba(var(--rc-ink), 0.04) 0 1px 0 0 inset;
}
.menu-group-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.menu-ico-tile {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--rc-graphite);
  border: 1px solid var(--rc-border-strong);
}
.menu-ico-tile .menu-ico { width: 17px; height: 17px; color: var(--rc-text); }
.menu-group-title { flex: 1; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--rc-text); }
.menu-count {
  min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: var(--rc-graphite); color: var(--rc-ash);
  font-family: var(--rc-mono); font-size: 11px; text-align: center;
}
.menu-group ul { border-top: 1px solid var(--rc-border); padding-top: 6px !important; }
.menu-group ul:empty { display: none; }
.menu-empty { margin: 0; padding: 6px 10px 10px; font-size: 12px; color: var(--rc-ash); }

.menu-juegos a.menu-item {
  position: relative;
  display: flex !important; align-items: center; gap: 10px;
  min-height: 38px;
  padding: 0 28px 0 8px !important;
  border-radius: 9px !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  color: var(--rc-ash) !important;
  transition: background-color 0.15s, color 0.15s;
}
.menu-juegos a.menu-item:hover { background: rgba(var(--rc-ink), 0.05) !important; color: var(--rc-text) !important; }
.menu-juegos a.menu-item::after {
  content: ''; position: absolute; right: 10px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px; opacity: 0;
  background: var(--rc-ash);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateX(-3px);
  transition: opacity 0.15s, transform 0.15s;
}
.menu-juegos a.menu-item:hover::after { opacity: 1; transform: none; }
.menu-item-ini {
  display: grid; place-items: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--rc-graphite); color: var(--rc-mist);
  font-size: 11px; font-weight: 600; text-transform: uppercase;
}
.menu-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-juegos a.menu-item.is-current { background: rgba(var(--rc-ink), 0.07) !important; color: var(--rc-text) !important; }
.menu-juegos a.menu-item.is-current .menu-item-ini { background: var(--rc-accent); color: var(--rc-accent-ink); }

/* Pie: botón principal "Recargar saldo" */
.menu-juegos .menu-footer { margin-top: auto !important; padding-top: 4px !important; border-top: 0 !important; }
.menu-juegos .menu-footer a.menu-recargar {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px;
  padding: 0 16px !important;
  border-radius: 12px !important;
  background: var(--rc-mist) !important;
  color: var(--rc-card) !important;
  font-size: 14px !important; font-weight: 600 !important;
  box-shadow: var(--rc-lift);
}
.menu-juegos .menu-footer a.menu-recargar:hover { background: var(--rc-text) !important; }
.menu-juegos .menu-footer .menu-ico { color: var(--rc-card); }
.menu-juegos { width: min(330px, 88vw) !important; }

/* ---------- Historial: formato recibo (estrecho y compacto) ---------- */
.transactions { max-width: 520px !important; }
.transaction-container { gap: 10px !important; }
.transaction-card-simple:has(.ffid-voucher) { padding: 12px 14px !important; border-radius: 14px !important; }
.transaction-card-simple:has(.ffid-voucher) .transaction-header {
  margin-bottom: 8px !important; padding-bottom: 8px !important; font-size: 10.5px !important;
}
.ffid-voucher-status { margin: 0 0 4px !important; }
.ffid-voucher-line, .ffid-voucher-amount { padding: 2px 0 !important; font-size: 12.5px !important; line-height: 1.35 !important; gap: 10px; }
.ffid-voucher-line strong, .ffid-voucher-amount strong { font-size: 12.5px !important; }
.ffid-voucher-amount { margin-top: 4px !important; padding-top: 6px !important; }
.ffid-voucher-details > div[style] { margin: 4px 0 !important; padding: 6px 10px !important; }
.ffid-voucher-details > div[style] > div:first-child { font-size: 11px !important; margin-bottom: 2px !important; }
.ffid-voucher-details > div[style] > div:nth-child(2) { font-size: 13px !important; }
.ffid-voucher-details > div[style] .copy-btn-simple { min-height: 26px !important; margin-top: 4px !important; font-size: 11.5px !important; }
.transaction-card-simple:has(.ffid-voucher) .tx-corner-date { margin-top: 4px !important; padding-top: 6px !important; font-size: 10.5px !important; }

/* ============================================================
   JUEGOS POR ID (static/id-game.js)
   ============================================================ */
.idg .idg-hidden-col { display: none !important; }
.idg .juego-form, .idg { }
.juego-container:has(form.idg) { max-width: 760px !important; }

/* Fila del ID + botón Verificar */
.idg-id-row { display: flex; gap: 8px; align-items: stretch; }
.idg-id-row input { flex: 1; min-width: 0; }
.idg-verify-btn {
  flex-shrink: 0;
  min-height: 48px;
  padding: 0 16px !important;
  border-radius: 10px !important;
  background: var(--rc-graphite) !important;
  color: var(--rc-text) !important;
  border: 1px solid var(--rc-border-strong) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  width: auto !important;
  margin: 0 !important;
}
.idg-verify-btn:hover { background: var(--rc-slate) !important; }
.idg-verify-btn.is-loading { opacity: 0.7; cursor: progress; }
.idg-verify-result { min-height: 18px; margin-top: 6px; font-size: 13px; color: var(--rc-ash); }
.idg-verify-result.is-ok { color: var(--rc-green); font-weight: 600; }
.idg-verify-result.is-error { color: var(--rc-coral); }

/* Paquetes en tarjetas */
.idg-packages { margin-top: 20px; }
.idg-packages-title { font-size: 13px; font-weight: 500; color: var(--rc-ash); margin-bottom: 10px; }
.idg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.idg-pkg {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 84px;
  padding: 12px !important;
  margin: 0 !important;
  width: auto !important;
  text-align: left;
  background: var(--rc-card) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 12px !important;
  color: var(--rc-text) !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
}
.idg-pkg:hover { border-color: var(--rc-border-strong) !important; background: var(--rc-hover-bg) !important; }
.idg-pkg-name { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.idg-pkg-price { font-family: var(--rc-mono); font-size: 14px; color: var(--rc-hl); }
.idg-pkg.is-selected {
  border-color: var(--rc-mist) !important;
  background: var(--rc-sel-bg) !important;
  box-shadow: 0 0 0 1px var(--rc-mist) inset !important;
}
.idg-pkg.is-selected::after {
  content: '';
  position: absolute;
  top: 10px; right: 10px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--rc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307080a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.idg-pkg.is-disabled { opacity: 0.4; cursor: not-allowed; }
.idg-empty { grid-column: 1 / -1; margin: 0; color: var(--rc-ash); font-size: 14px; }

/* Botón Recargar: solo cuando hay paquete elegido */
form.idg:not(.idg-has-pkg) > button[type=submit] { display: none !important; }
form.idg.idg-has-pkg > button[type=submit] { margin-top: 18px !important; animation: ui-rise 0.2s var(--ui-ease) both; }

/* Ventana de confirmación */
.idg-dialog {
  position: fixed; inset: 0; margin: auto !important; height: fit-content;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); overflow: auto;
  padding: 0;
  background: var(--rc-panel); color: var(--rc-text);
  border: 1px solid var(--rc-border-strong); border-radius: 16px;
  box-shadow: rgba(var(--rc-ink), 0.06) 0 1px 0 0 inset, rgba(0, 0, 0, 0.6) 0 24px 64px -12px;
  font-family: var(--rc-font);
}
.idg-dialog[open] { animation: ui-pop 0.18s var(--ui-ease); }
.idg-dialog::backdrop { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.idg-dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 6px; }
.idg-dlg-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.idg-dlg-game { margin: 2px 0 0; font-size: 13px; color: var(--rc-ash); }
.idg-dlg-x { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--rc-ash); font-size: 22px; line-height: 1; cursor: pointer; }
.idg-dlg-x:hover { background: var(--rc-graphite); color: var(--rc-text); }
.idg-dlg-rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; padding: 10px 20px; }
.idg-dlg-rows dt { font-size: 13px; color: var(--rc-ash); }
.idg-dlg-rows dd { margin: 0; font-size: 14px; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.idg-dlg-rows dd.is-mono { font-family: var(--rc-mono); }
.idg-dlg-rows dd.is-ok { color: var(--rc-green); font-weight: 600; }
.idg-dlg-rows dd.is-muted { color: var(--rc-ash); font-weight: 400; }
.idg-dlg-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 6px 20px 0; padding: 12px 14px;
  background: rgba(89, 212, 153, 0.08); border-radius: 10px;
}
.idg-dlg-total span { font-size: 13px; color: var(--rc-ash); }
.idg-dlg-total strong { font-family: var(--rc-mono); font-size: 22px; font-weight: 600; color: var(--rc-hl); }
.idg-dlg-saldo { margin: 8px 20px 0; font-size: 12px; color: var(--rc-ash); }
.idg-dlg-saldo.is-error { color: var(--rc-coral); }
.idg-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px 20px; }
.idg-dlg-cancel, .idg-dlg-confirm { min-height: 42px; padding: 0 18px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.idg-dlg-cancel { background: transparent; color: var(--rc-text); border: 1px solid var(--rc-border-strong); }
.idg-dlg-cancel:hover { background: var(--rc-graphite); }
.idg-dlg-confirm { background: var(--rc-mist); color: var(--rc-card); border: 1px solid transparent; }
.idg-dlg-confirm:hover { background: var(--rc-text); }

@media (max-width: 720px) {
  .idg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idg-id-row { flex-wrap: nowrap; }
  .idg-verify-btn { padding: 0 12px !important; font-size: 13px !important; }
}

/* Especificidad sobre .juego-form button (theme.css) */
.juego-form button.idg-pkg {
  background: var(--rc-card) !important; color: var(--rc-text) !important;
  border: 1px solid var(--rc-border) !important; box-shadow: none !important;
  min-height: 84px !important; font-size: 14px !important; font-weight: 400 !important;
}
.juego-form button.idg-pkg:hover { background: var(--rc-hover-bg) !important; border-color: var(--rc-border-strong) !important; }
.juego-form button.idg-pkg.is-selected { background: var(--rc-sel-bg2) !important; border-color: var(--rc-mist) !important; box-shadow: 0 0 0 1px var(--rc-mist) inset !important; }
.juego-form button.idg-verify-btn {
  background: var(--rc-graphite) !important; color: var(--rc-text) !important;
  border: 1px solid var(--rc-border-strong) !important; box-shadow: none !important;
  min-height: 48px !important;
}
.juego-form button.idg-verify-btn:hover { background: var(--rc-slate) !important; }
.idg-packages, .idg-packages-title, .idg-verify-result, .idg-pkg { text-align: left !important; }
.idg-dlg-rows dt { text-align: left; }
.idg-dlg-saldo { text-align: left; }

/* ============================================================
   MODO "OCULTAR PRECIOS" (static/price-privacy.js)
   ============================================================ */
.price-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 2px 0 6px; padding: 10px;
  border-radius: 10px;
  background: var(--rc-recess);
  border: 1px solid var(--rc-border);
  cursor: pointer; user-select: none;
}
.price-toggle-text { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; color: var(--rc-text); }
.price-toggle-text small { font-size: 12px; font-weight: 400; color: var(--rc-ash); margin-top: 1px; }
.price-toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.price-toggle-switch {
  position: relative; flex-shrink: 0;
  width: 40px; height: 22px; border-radius: 999px;
  background: var(--rc-slate); transition: background-color 0.18s ease;
}
.price-toggle-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--rc-mist); transition: transform 0.18s var(--ui-ease);
}
.price-toggle-input:checked + .price-toggle-switch { background: var(--rc-accent); }
.price-toggle-input:checked + .price-toggle-switch::after { transform: translateX(18px); background: var(--rc-text); }
.price-toggle-input:focus-visible + .price-toggle-switch { outline: 2px solid var(--rc-mist); outline-offset: 2px; }

/* Importes sustituidos por ••• */
.hide-prices .money { letter-spacing: 0.04em; }
/* (Los importes se muestran como $****; no se ocultan filas) */

/* ---------- Paquetes compactos: siempre 4 por fila, altura según contenido ---------- */
.idg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
.juego-form button.idg-pkg {
  min-height: 0 !important;
  gap: 2px !important;
  padding: 8px 22px 8px 10px !important;
  border-radius: 10px !important;
  justify-content: flex-start !important;
}
.idg-pkg-name { font-size: 13px !important; line-height: 1.25 !important; }
.idg-pkg-price { font-size: 12.5px !important; line-height: 1.3; }
.idg-pkg.is-selected::after { top: 7px !important; right: 7px !important; width: 14px !important; height: 14px !important; background-size: 9px !important; }
.idg-packages { margin-top: 12px !important; }
.idg-packages-title { margin-bottom: 8px !important; }
.idg-verify-result { min-height: 0 !important; margin-top: 4px !important; }
.idg-verify-result:empty { display: none; }
@media (max-width: 720px) {
  .idg-grid { gap: 6px !important; }
  .juego-form button.idg-pkg { padding: 7px 16px 7px 7px !important; border-radius: 8px !important; }
  .idg-pkg-name { font-size: 11.5px !important; }
  .idg-pkg-price { font-size: 11px !important; }
  .idg-pkg.is-selected::after { top: 5px !important; right: 5px !important; width: 12px !important; height: 12px !important; background-size: 8px !important; }
}
@media (max-width: 720px) {
  .juego-form button.idg-pkg { padding: 7px 6px !important; overflow: visible !important; }
  .idg-pkg-name { font-size: 11px !important; overflow-wrap: normal !important; word-break: normal !important; }
  .idg-pkg.is-selected::after { top: -5px !important; right: -5px !important; width: 14px !important; height: 14px !important; box-shadow: 0 0 0 2px var(--rc-recess); }
}

/* Paquetes: nombre y precio centrados */
.juego-form button.idg-pkg {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 8px 10px !important;
  overflow: visible !important;
}
.idg-pkg-name, .idg-pkg-price { text-align: center !important; }
.idg-pkg.is-selected::after { top: -6px !important; right: -6px !important; width: 16px !important; height: 16px !important; background-size: 10px !important; box-shadow: 0 0 0 2px var(--rc-recess); }
@media (max-width: 720px) {
  .juego-form button.idg-pkg { padding: 7px 5px !important; }
  .idg-pkg.is-selected::after { top: -5px !important; right: -5px !important; width: 14px !important; height: 14px !important; background-size: 8px !important; }
}

/* Contenedor de la página de juego por ID: más compacto */
.juego-container:has(form.idg) {
  max-width: 560px !important;
  padding: 22px !important;
  margin-top: 16px !important;
}
.juego-container:has(form.idg) .juego-titulo { font-size: 24px !important; margin-bottom: 16px !important; }
.juego-container:has(form.idg) .juego-form { padding: 16px !important; }
.juego-container:has(form.idg) .juego-descripcion,
.juego-container:has(form.idg) .entrega-info { padding: 14px !important; font-size: 13px; }
.juego-container:has(form.idg) .volver-container { margin-top: 14px !important; }
@media (max-width: 720px) {
  .juego-container:has(form.idg) { padding: 16px !important; margin: 12px auto 24px !important; }
  .juego-container:has(form.idg) .juego-form { padding: 12px !important; }
}

/* Juegos por ID: formato móvil también en escritorio (≈420px) */
.juego-container:has(form.idg) {
  box-sizing: border-box !important;
  max-width: 420px !important;
  width: calc(100% - 20px) !important;
  padding: 16px !important;
  border-radius: 18px !important;
}
.juego-container:has(form.idg) .juego-titulo { font-size: 20px !important; margin-bottom: 12px !important; }
.juego-container:has(form.idg) .juego-form { padding: 12px !important; border-radius: 14px !important; }
.juego-container:has(form.idg) .juego-form label { font-size: 12px !important; }
.juego-container:has(form.idg) .juego-form input:not([type=checkbox]):not([type=radio]),
.juego-container:has(form.idg) .juego-form select { min-height: 42px !important; font-size: 14px !important; }
.juego-container:has(form.idg) .form-row { gap: 10px !important; }
.juego-container:has(form.idg) button.idg-verify-btn { min-height: 42px !important; padding: 0 12px !important; font-size: 13px !important; }
.juego-container:has(form.idg) .idg-grid { gap: 6px !important; }
.juego-container:has(form.idg) button.idg-pkg { padding: 7px 5px !important; border-radius: 8px !important; }
.juego-container:has(form.idg) .idg-pkg-name { font-size: 11.5px !important; overflow-wrap: normal !important; word-break: normal !important; }
.juego-container:has(form.idg) .idg-pkg-price { font-size: 11px !important; }
.juego-container:has(form.idg) .idg-pkg.is-selected::after { top: -5px !important; right: -5px !important; width: 14px !important; height: 14px !important; background-size: 8px !important; }
.juego-container:has(form.idg) form.idg.idg-has-pkg > button[type=submit] { min-height: 44px !important; font-size: 14px !important; margin-top: 12px !important; }
.juego-container:has(form.idg) .juego-descripcion,
.juego-container:has(form.idg) .entrega-info { padding: 12px !important; font-size: 12px !important; }
.juego-container:has(form.idg) .juego-descripcion li,
.juego-container:has(form.idg) .entrega-info li { font-size: 12.5px !important; }

/* Pasos numerados: el texto fluye como párrafo (el HTML original usa flex y separa las negritas) */
.juego-container li[style*="display: flex"] {
  display: block !important;
  position: relative;
  padding-left: 36px !important;
  text-align: left !important;
  line-height: 1.45;
}
.juego-container li[style*="display: flex"] > span:first-child {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Ventana de confirmación: filas etiqueta/valor como antes, pero centradas */
.idg-dlg-head { position: relative; display: block !important; text-align: center; padding: 22px 48px 6px !important; }
.idg-dlg-head h3 { text-align: center; }
.idg-dlg-game { text-align: center; margin: 4px 0 0 !important; padding: 0 !important; }
.idg-dlg-x { position: absolute; top: 12px; right: 12px; }
.idg-dlg-rows {
  display: grid !important;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 8px 28px !important;
  width: fit-content;
  max-width: calc(100% - 40px);
  margin: 6px auto 0 !important;
  padding: 10px 0 !important;
}
.idg-dlg-rows dt { text-align: left !important; }
.idg-dlg-rows dd { text-align: right !important; }
.idg-dlg-total { max-width: 320px; margin: 8px auto 0 !important; }
.idg-dlg-saldo { text-align: center !important; }
.idg-dlg-actions { justify-content: center !important; }
/* El importe va envuelto en <span class="money">: que herede el estilo del total */
.idg-dlg-total strong .money, .idg-pkg-price .money, .cost .money { color: inherit !important; font-size: inherit !important; font-family: inherit; }

/* Confirmación: cada dato en su contenedor */
.idg-dlg-rows {
  display: flex !important;
  flex-direction: column;
  gap: 6px !important;
  width: auto !important;
  max-width: none !important;
  margin: 10px 20px 0 !important;
  padding: 0 !important;
}
.idg-dlg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: var(--rc-recess);
  border: 1px solid var(--rc-border);
  border-radius: 10px;
}
.idg-dlg-row dt { margin: 0 !important; font-size: 13px !important; color: var(--rc-ash); text-align: left !important; }
.idg-dlg-row dd { margin: 0 !important; font-size: 14px !important; text-align: right !important; }
.idg-dlg-total { max-width: none !important; margin: 8px 20px 0 !important; }

/* ============================================================
   PANTALLA DE COMPRA EXITOSA: comprobante compacto y profesional
   ============================================================ */
.compra-exitosa {
  max-width: 380px;
  margin: 16px auto 0 !important;
  padding: 18px 16px 14px !important;
  background: var(--rc-card) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 16px !important;
  text-align: left !important;
}
.compra-exitosa > h3 {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 0 0 12px !important;
  font-size: 16px !important; font-weight: 600 !important;
  color: var(--rc-text) !important; text-align: center;
}
.compra-exitosa > h3::before {
  content: '';
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(89, 212, 153, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359d499' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.compra-exitosa .solicitud-container {
  margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  animation: none !important;
}
.compra-exitosa .solicitud-info {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 12px !important; padding: 0 !important; background: none !important; border: 0 !important;
}
.compra-exitosa .solicitud-label { margin: 0 !important; font-size: 12px !important; color: var(--rc-ash) !important; }
.compra-exitosa .solicitud-estado {
  margin: 0 !important; padding: 3px 10px !important;
  border-radius: 999px; background: rgba(var(--rc-ink), 0.06);
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.05em;
}
.compra-exitosa .detalles-info {
  margin: 0 !important; padding: 4px 12px !important;
  background: var(--rc-recess) !important; border: 1px solid var(--rc-border) !important; border-radius: 12px !important;
}
.compra-exitosa .detalles-info > p {
  display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 0 !important; padding: 7px 0 !important;
  font-size: 13px !important; line-height: 1.35 !important;
  color: var(--rc-text) !important; text-align: right !important;
  border-top: 1px solid var(--rc-border) !important;
  overflow-wrap: anywhere;
}
.compra-exitosa .detalles-info > p:first-child {
  justify-content: center; border-top: 0 !important; padding-top: 8px !important;
  font-size: 14px !important;
}
.compra-exitosa .detalles-info > p strong { flex-shrink: 0; font-weight: 400 !important; color: var(--rc-ash) !important; text-align: left; }
.compra-exitosa .detalles-info > p:first-child strong { font-weight: 600 !important; color: var(--rc-text) !important; }
/* Monto (última fila) */
.compra-exitosa .detalles-info > p:last-child {
  margin-top: 0 !important; border-top: 1px solid var(--rc-border) !important;
  color: var(--rc-hl) !important; font-family: var(--rc-mono); font-size: 13px !important;
}
.compra-exitosa .detalles-info > p:last-child strong { font-family: var(--rc-font); }
/* Código / serial entregado */
.compra-exitosa .detalles-info > div[style] { margin: 6px 0 !important; padding: 8px 10px !important; border-radius: 10px !important; }
.compra-exitosa .detalles-info > div[style] p { margin: 0 !important; text-align: left; }
.compra-exitosa .detalles-info > div[style] p + p { font-family: var(--rc-mono); font-size: 14px !important; letter-spacing: 0.04em !important; }
.compra-exitosa + .entrega-info, .compra-exitosa .entrega-info { max-width: 380px; margin-left: auto !important; margin-right: auto !important; font-size: 12.5px; }

/* Filas etiqueta/valor sin flex: el valor no se parte si contiene un importe envuelto */
.compra-exitosa .detalles-info > p:not(:first-child),
.ffid-voucher-line, .ffid-voucher-amount {
  display: block !important;
  text-align: right !important;
}
.compra-exitosa .detalles-info > p:not(:first-child)::after,
.ffid-voucher-line::after, .ffid-voucher-amount::after { content: ''; display: table; clear: both; }
.compra-exitosa .detalles-info > p:not(:first-child) > strong:first-child,
.ffid-voucher-line > strong:first-child, .ffid-voucher-amount > strong:first-child {
  float: left;
  margin-right: 12px;
  text-align: left;
}
.compra-exitosa .detalles-info > p:first-child { display: block !important; text-align: center !important; }

/* Compra exitosa v2: cada dato en su contenedor, juego en color */
.compra-exitosa .detalles-info {
  display: flex !important; flex-direction: column; gap: 6px;
  padding: 0 !important; background: none !important; border: 0 !important;
}
.compra-exitosa .detalles-info > p:not(:first-child) {
  padding: 9px 12px !important;
  background: var(--rc-recess) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 10px !important;
}
.compra-exitosa .detalles-info > p:last-child { margin-top: 0 !important; }
.compra-exitosa .detalles-info > p:first-child {
  padding: 0 0 4px !important; border: 0 !important; background: none !important; font-size: 15px !important;
}
.compra-exitosa .detalles-info > p:first-child strong { color: var(--rc-coral) !important; font-weight: 600 !important; }
.compra-exitosa .detalles-info > div[style] { margin: 0 !important; }

/* Compra exitosa: sin Ref ni Número de Control; ID, jugador y juego en verde */
.compra-exitosa .dx-control, .compra-exitosa .dx-ref { display: none !important; }
.compra-exitosa .dx-id, .compra-exitosa .dx-player { color: var(--rc-hl) !important; font-weight: 600; }
.compra-exitosa .detalles-info > p:first-child strong { color: var(--rc-hl) !important; }
.compra-exitosa .detalles-info > p.dx-control, .compra-exitosa .detalles-info > p.dx-ref { display: none !important; }
.compra-exitosa .detalles-info > p.dx-id, .compra-exitosa .detalles-info > p.dx-player { color: var(--rc-hl) !important; font-weight: 600 !important; }

/* ---------- Buscador del historial ---------- */
.tx-search {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  margin: -8px 0 16px;
}
.tx-search-ico { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--rc-ash); pointer-events: none; }
.tx-search input[type=search] {
  flex: 1; min-width: 0; height: 42px;
  padding: 0 34px 0 38px !important;
  font-size: 14px !important; border-radius: 10px !important;
}
.tx-search input[type=search]::-webkit-search-cancel-button { display: none; }
.tx-search-clear {
  position: absolute; right: 96px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 7px;
  color: var(--rc-ash) !important; text-decoration: none !important; font-size: 18px; line-height: 1;
}
.tx-search-clear:hover { background: var(--rc-graphite); color: var(--rc-text) !important; }
.tx-search-btn {
  flex-shrink: 0; height: 42px; padding: 0 16px !important;
  border-radius: 10px !important; border: 0 !important;
  background: var(--rc-mist) !important; color: var(--rc-card) !important;
  font-size: 14px !important; font-weight: 600 !important;
}
.tx-search-btn:hover { background: var(--rc-text) !important; }
.tx-search-info { margin: -6px 0 14px; font-size: 13px; color: var(--rc-ash); }
.tx-search-info strong { color: var(--rc-text); }

/* ---------- Historial: nombre del juego destacado ---------- */
.transaction-card-simple .transaction-header {
  justify-content: center !important;
  text-align: center !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--rc-text) !important;
}
/* Código al final del recibo con botón pequeño */
.dx-code-line { align-items: center; }
.dx-code-line .dx-code-value { font-family: var(--rc-mono); font-weight: 600; color: var(--rc-hl); letter-spacing: 0.02em; }
.dx-code-line .copy-btn-simple {
  display: inline-grid !important; place-items: center; vertical-align: middle;
  width: 24px !important; height: 24px !important; min-width: 0 !important; min-height: 0 !important;
  margin: -3px 0 0 6px !important; border-radius: 6px !important;
}
.dx-code-line .copy-btn-simple::before { width: 13px !important; height: 13px !important; }
.dx-code-pending { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 197, 49, 0.1); color: var(--rc-yellow); font-size: 12px; }

/* ---------- Compra exitosa: código debajo del monto ---------- */
.compra-exitosa .detalles-info > p:last-child { color: inherit; font-family: inherit; }
.compra-exitosa .detalles-info > p:last-of-type {
  color: var(--rc-hl) !important; font-family: var(--rc-mono);
}
.compra-exitosa .detalles-info > p:last-of-type strong { font-family: var(--rc-font); }
.dx-code {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 12px;
  background: rgba(89, 212, 153, 0.08);
  border: 1px solid rgba(89, 212, 153, 0.35);
  border-radius: 10px;
}
.dx-code-label { font-size: 12px; color: var(--rc-ash); flex-shrink: 0; }
.dx-code-value { flex: 1; min-width: 0; text-align: right; font-family: var(--rc-mono); font-size: 13.5px; font-weight: 600; color: var(--rc-text); overflow-wrap: anywhere; }
.dx-copy {
  flex-shrink: 0; display: inline-grid; place-items: center;
  width: 28px !important; height: 28px !important; padding: 0 !important; margin: 0 !important;
  border-radius: 7px !important; border: 1px solid var(--rc-border-strong) !important;
  background: var(--rc-graphite) !important; color: var(--rc-mist) !important; cursor: pointer;
}
.dx-copy svg { width: 14px; height: 14px; }
.dx-copy:hover { background: var(--rc-slate) !important; color: var(--rc-text) !important; }
.dx-copy.is-copied { color: var(--rc-green) !important; border-color: rgba(89, 212, 153, 0.5) !important; }
.dx-copy.is-copied svg { display: none; }
.dx-copy.is-copied::after { content: '✓'; font-size: 14px; font-weight: 700; }

/* ============================================================
   DASHBOARD (Resumen del día)
   ============================================================ */
.dashboard-container { max-width: 760px !important; }
.dashboard-container .stats-header, .dashboard-container .dashboard-info-section { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--rc-text); }
.dash-date { margin: 2px 0 0; font-family: var(--rc-mono); font-size: 13px; color: var(--rc-ash); }
.dash-seg {
  display: inline-flex !important; gap: 2px !important; padding: 3px !important;
  background: var(--rc-card) !important; border: 1px solid var(--rc-border) !important; border-radius: 12px !important;
}
.dash-seg .filter-btn {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 34px !important; padding: 0 14px !important;
  border: 0 !important; border-radius: 9px !important;
  background: transparent !important; color: var(--rc-ash) !important;
  font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important;
  box-shadow: none !important; transition: background-color .15s, color .15s;
}
.dash-seg .filter-btn:hover { color: var(--rc-text) !important; background: rgba(var(--rc-ink),.05) !important; }
.dash-seg .filter-btn.active { background: var(--rc-mist) !important; color: var(--rc-card) !important; }
.dash-kpis { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 14px; }
.dash-kpi { padding: 12px 14px !important; border-radius: 12px !important; text-align: left !important; }
.dash-kpi .stat-title { font-size: 11px !important; margin-bottom: 4px; }
.dash-kpi .stat-value { font-size: 22px !important; line-height: 1.2; margin: 0 !important; }
.dash-kpi .stat-subtitle { font-size: 12px !important; margin-top: 2px; }
.dashboard-container .games-section { padding: 14px !important; }
.dashboard-container .games-section .section-title { font-size: 15px !important; margin: 0 !important; }
.dashboard-container .games-section td, .dashboard-container .games-section th { padding: 10px 12px !important; font-size: 13px; }
@media (max-width: 560px) {
  .dash-head { align-items: stretch; }
  .dash-seg { width: 100%; }
  .dash-seg .filter-btn { flex: 1; padding: 0 8px !important; }
}
@media (max-width: 560px) {
  .dash-seg .filter-btn { white-space: nowrap; font-size: 12.5px !important; padding: 0 6px !important; }
  .dashboard-container .games-section th:first-child,
  .dashboard-container .games-section td:first-child { display: none !important; }
  .dashboard-container .item-mobile { display: none !important; }
  .dashboard-container .item-desktop { display: inline !important; }
  .dashboard-container .games-section td, .dashboard-container .games-section th { padding: 9px 8px !important; font-size: 12.5px; }
  .dashboard-container .games-section > div:first-child { flex-wrap: wrap; gap: 4px; }
}

/* ============================================================
   ADMIN: barra lateral a toda altura y plegable
   ============================================================ */
.admin-main { padding-left: 16px !important; }
.admin-shell { --sb-w: 236px; grid-template-columns: var(--sb-w) minmax(0, 1fr) !important; gap: 24px !important; transition: grid-template-columns .2s var(--ui-ease); }
.admin-shell.sb-collapsed { --sb-w: 68px; }
.admin-shell .admin-sidebar {
  position: sticky !important; top: 12px !important; align-self: start;
  display: flex !important; flex-direction: column; gap: 2px !important;
  box-sizing: border-box; width: var(--sb-w) !important;
  height: calc(100vh - 24px); height: calc(100dvh - 24px);
  padding: 12px !important; overflow-y: auto; overflow-x: hidden;
}
.admin-shell .side-tab-button {
  width: 100% !important; height: auto !important; min-height: 42px;
  justify-content: flex-start !important; padding: 0 12px !important; margin: 1px 0 !important;
}
.admin-shell .side-tab-button .label { display: inline !important; white-space: nowrap; }
.admin-shell .side-tab-button .icon { display: inline-grid; place-items: center; width: 20px; flex-shrink: 0; }
.admin-shell .admin-sidebar a.side-tab-button[href="/"] { margin-top: auto !important; }
.sb-toggle {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 38px; margin: 0 0 6px !important; padding: 0 12px !important;
  border: 1px dashed var(--rc-border-strong) !important; border-radius: 10px !important;
  background: transparent !important; color: var(--rc-ash) !important;
  font-size: 13px !important; font-weight: 500 !important; cursor: pointer;
}
.sb-toggle:hover { color: var(--rc-text) !important; background: rgba(var(--rc-ink),.05) !important; }
.sb-toggle svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s var(--ui-ease); }
.sb-toggle .label { white-space: nowrap; }
/* Plegada: solo iconos, centrados */
.admin-shell.sb-collapsed .admin-sidebar { padding: 12px 10px !important; }
.admin-shell.sb-collapsed .admin-sidebar::before { display: none !important; }
.admin-shell.sb-collapsed .side-tab-button,
.admin-shell.sb-collapsed .sb-toggle { justify-content: center !important; padding: 0 !important; gap: 0 !important; }
.admin-shell.sb-collapsed .side-tab-button .label,
.admin-shell.sb-collapsed .sb-toggle .label { display: none !important; }
.admin-shell.sb-collapsed .sb-toggle svg { transform: scaleX(-1); }
.admin-shell.sb-collapsed .side-tab-button.active { box-shadow: inset 0 0 0 1px var(--rc-border-strong) !important; }
/* Pantallas pequeñas: desplegada se superpone al contenido */
@media (max-width: 992px) {
  .admin-shell { --sb-w: 68px; }
  .admin-shell:not(.sb-collapsed) .admin-sidebar {
    position: fixed !important; top: 0 !important; left: 0; z-index: 70;
    width: 236px !important; height: 100vh; height: 100dvh; border-radius: 0 16px 16px 0 !important;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.5) !important;
  }
  .admin-shell:not(.sb-collapsed)::before { content: ''; width: 68px; }
  .admin-shell:not(.sb-collapsed) .admin-sidebar::before { display: block !important; }
}

/* ============================================================
   ADMIN · PINES: 3 tarjetas por fila, info arriba, botones iguales abajo
   ============================================================ */
#package-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
#package-list .package-card {
  display: flex !important; flex-direction: column; gap: 10px;
  padding: 14px !important; min-width: 0;
  background: var(--rc-card) !important; border: 1px solid var(--rc-border) !important; border-radius: 14px !important;
}
#package-list .pk-info { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 !important; }
#package-list .package-stock { font-size: 12px !important; padding: 2px 10px !important; border-radius: 999px !important; background: var(--rc-graphite) !important; color: var(--rc-ash) !important; }
#package-list .package-title { font-size: 16px !important; font-weight: 700 !important; color: var(--rc-text) !important; }
#package-list .package-price { font-family: var(--rc-mono); font-size: 13px !important; color: var(--rc-hl) !important; background: none !important; padding: 0 !important; }
#package-list .pk-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; margin-top: auto; }
#package-list .pk-actions .btn {
  display: flex !important; align-items: center; justify-content: center;
  width: 100% !important; min-height: 36px !important; margin: 0 !important; padding: 0 10px !important;
  font-size: 13px !important; font-weight: 600 !important; border-radius: 9px !important; text-align: center;
}
#package-list .package-form.show { display: flex !important; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--rc-border); }
#package-list .package-form label { display: flex; justify-content: space-between; font-size: 12px; color: var(--rc-ash); }
#package-list .package-form textarea { min-height: 90px; font-family: var(--rc-mono); font-size: 12.5px; }
#package-list .package-form .btn { width: 100%; min-height: 36px; }
.batch-count { font-family: var(--rc-mono); color: var(--rc-ash); }
.batch-count.is-over { color: var(--rc-coral); font-weight: 700; }
@media (max-width: 720px) {
  #package-list { gap: 6px !important; }
  #package-list .package-card { padding: 10px !important; }
  #package-list .package-title { font-size: 13px !important; }
  #package-list .pk-actions .btn { font-size: 11px !important; min-height: 32px !important; padding: 0 4px !important; }
}
#package-list .pk-actions { margin: auto 0 0 !important; padding: 0 !important; width: 100% !important; }

/* ============================================================
   ADMIN · LISTA DE PINES (admin_pins.html)
   ============================================================ */
.pv-wrap { max-width: 880px; margin: 0 auto; padding: 24px 16px 96px; }
.pv-back { display: inline-block; margin-bottom: 12px; color: var(--rc-ash) !important; text-decoration: none !important; font-size: 13px; }
.pv-back:hover { color: var(--rc-text) !important; }
.pv-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pv-title { margin: 0; font-size: 24px; font-weight: 600; }
.pv-total { font-family: var(--rc-mono); font-size: 13px; color: var(--rc-ash); }
.pv-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 18px 0 16px; padding: 12px; background: var(--rc-card); border: 1px solid var(--rc-border); border-radius: 14px; }
.pv-field { display: flex; flex-direction: column; gap: 4px; min-width: 180px; flex: 1; }
.pv-field span { font-size: 12px; color: var(--rc-ash); }
.pv-field select { min-height: 40px; }
.pv-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px 0 12px; border-radius: 10px; background: var(--rc-graphite); border: 1px solid var(--rc-border-strong); font-size: 13px; }
.pv-chip a { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--rc-ash) !important; text-decoration: none !important; font-size: 18px; }
.pv-chip a:hover { background: var(--rc-slate); color: var(--rc-text) !important; }
.pv-day { margin-bottom: 12px; background: var(--rc-card); border: 1px solid var(--rc-border); border-radius: 14px; overflow: hidden; }
.pv-day-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--rc-recess); border-bottom: 1px solid var(--rc-border); }
.pv-check-all { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.pv-day-date { font-family: var(--rc-mono); font-weight: 600; font-size: 14px; }
.pv-day-meta { font-size: 12px; color: var(--rc-ash); }
.pv-list { list-style: none; margin: 0; padding: 0; }
.pv-row { display: grid; grid-template-columns: 20px minmax(0, 1.4fr) 28px minmax(0, 1fr) auto 44px; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--rc-border); }
.pv-row:first-child { border-top: 0; }
.pv-row:hover { background: rgba(var(--rc-ink), 0.02); }
.pv-row:has(.row-check:checked) { background: rgba(255, 99, 99, 0.06); }
.pv-code { font-family: var(--rc-mono); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.pv-copy { width: 26px !important; height: 26px !important; }
.pv-pkg { font-size: 13px; color: var(--rc-ash); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pv-badge.is-free { background: rgba(89, 212, 153, 0.12); color: var(--rc-green); }
.pv-badge.is-used { background: var(--rc-graphite); color: var(--rc-ash); }
.pv-time { font-family: var(--rc-mono); font-size: 12px; color: var(--rc-ash); text-align: right; }
.pv-empty { padding: 48px 16px; text-align: center; color: var(--rc-ash); border: 1px dashed var(--rc-border); border-radius: 14px; }
.pv-actionbar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: 14px;
  background: var(--rc-panel); border: 1px solid var(--rc-border-strong); box-shadow: rgba(0,0,0,.5) 0 12px 32px -8px;
  font-size: 14px; animation: ui-rise .2s var(--ui-ease);
}
.pv-actionbar[hidden] { display: none; }
.pv-clear, .pv-delete { min-height: 38px; padding: 0 14px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; }
.pv-clear { background: transparent; border: 1px solid var(--rc-border-strong); color: var(--rc-text); }
.pv-delete { background: var(--rc-ember); border: 1px solid rgba(255, 99, 99, 0.4); color: var(--rc-coral); }
.pv-delete:hover { filter: brightness(1.2); }
@media (max-width: 600px) {
  .pv-row { grid-template-columns: 20px minmax(0, 1fr) 28px auto; row-gap: 4px; }
  .pv-pkg { grid-column: 2 / 4; grid-row: 2; }
  .pv-time { grid-column: 4; grid-row: 2; }
  .pv-badge { grid-column: 4; grid-row: 1; }
  .pv-actionbar { left: 12px; right: 12px; transform: none; justify-content: space-between; }
}
.pv-row { grid-template-columns: 20px minmax(0, 1.4fr) 28px minmax(0, 1fr) 86px 44px; }
.pv-badge { justify-self: end; }
@media (max-width: 600px) { .pv-row { grid-template-columns: 20px minmax(0, 1fr) 28px 86px; } }

/* ============================================================
   ADMIN · PRECIOS
   ============================================================ */
.pr-wrap { display: flex !important; flex-direction: column; gap: 14px; }
/* Crear juego (desplegable) */
.pr-create { background: var(--rc-card); border: 1px dashed var(--rc-border-strong); border-radius: 14px; }
.pr-create[open] { border-style: solid; }
.pr-create > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.pr-create > summary::-webkit-details-marker { display: none; }
.pr-create-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--rc-mist); color: var(--rc-card); font-weight: 700; font-size: 16px; transition: transform .2s; }
.pr-create[open] .pr-create-ico { transform: rotate(45deg); }
#cj-title { font-weight: 600; font-size: 14px; color: var(--rc-text); }
.pr-create-hint { margin-left: auto; font-size: 12px; color: var(--rc-ash); }
.pr-create-body { padding: 4px 14px 14px; border-top: 1px solid var(--rc-border); }
.pr-create-body input, .pr-create-body select { min-height: 38px; }
/* Barra del juego */
.pr-toolbar { display: flex !important; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px !important; margin: 0 !important; background: var(--rc-card) !important; border: 1px solid var(--rc-border) !important; border-radius: 14px !important; }
.pr-select { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; }
.pr-select label { font-size: 12px !important; color: var(--rc-ash) !important; margin: 0 !important; }
.pr-select select { width: 100%; min-height: 40px; }
.pr-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pr-actions form { margin: 0; }
.pr-actions .btn { min-height: 36px !important; padding: 0 14px !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 9px !important; margin: 0 !important; }
/* Barra añadir paquete a todo el ancho, encima de los paquetes */
#add-pkg-area { margin: 0 0 12px !important; padding: 12px !important; background: var(--rc-recess) !important; border: 1px dashed var(--rc-border-strong) !important; border-radius: 12px !important; }
#add-pkg-area > div { grid-template-columns: 2fr 1fr auto !important; gap: 10px !important; }
#add-pkg-area input { min-height: 38px; }
#add-pkg-area .btn { min-height: 38px !important; padding: 0 16px !important; }
/* Paquetes compactos */
#price-package-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 8px !important; }
#price-package-list .package-card { padding: 10px !important; border-radius: 12px !important; gap: 6px; }
#price-package-list .package-card-header { margin: 0 0 4px !important; padding: 0 !important; }
#price-package-list .package-title { font-size: 12px !important; font-weight: 600 !important; color: var(--rc-ash) !important; font-family: var(--rc-mono); }
#price-package-list .package-form { display: flex !important; flex-direction: column; gap: 3px; margin: 0 0 6px !important; padding: 0 !important; }
#price-package-list .package-form label { font-size: 11px !important; color: var(--rc-ash) !important; margin: 0 !important; }
#price-package-list input { min-height: 32px !important; padding: 0 8px !important; font-size: 13px !important; }
#price-package-list .profit-info { font-size: 11px !important; margin-top: 3px !important; }
#batch-price-form > div:last-child { margin-top: 12px !important; }
@media (max-width: 600px) {
  #add-pkg-area > div { grid-template-columns: 1fr !important; }
  .pr-actions { width: 100%; }
  .pr-create-hint { display: none; }
}
#price-package-list .package-card, #price-package-list .package-card * { box-sizing: border-box; min-width: 0; }
#price-package-list input { width: 100% !important; max-width: 100% !important; }

/* ============================================================
   ADMIN · MAPEO (varios items por paquete, recarga secuencial)
   ============================================================ */
.mp-wrap { display: flex; flex-direction: column; gap: 14px; }
.mp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mp-head h2 { margin: 0 0 4px !important; font-size: 20px !important; }
.mp-head p { margin: 0; color: var(--rc-ash); font-size: 13px; max-width: 520px; line-height: 1.5; }
.mp-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-btn { min-height: 40px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; background: var(--rc-mist); color: var(--rc-card); border: 0; }
.mp-btn:disabled { opacity: .6; cursor: progress; }
.mp-btn-ghost { background: var(--rc-graphite); color: var(--rc-text); border: 1px solid var(--rc-border-strong); }
.mp-status { margin: 0; font-size: 13px; color: var(--rc-ash); min-height: 1em; }
.mp-status.is-ok { color: var(--rc-green); }
.mp-status.is-err { color: var(--rc-coral); }
.mp-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-field { display: flex; flex-direction: column; gap: 6px; }
.mp-field > span { font-size: 13px; font-weight: 600; color: var(--rc-mist); }
.mp-field select { width: 100%; min-height: 42px; }
.mp-editor { background: var(--rc-card); border: 1px solid var(--rc-border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.mp-editor[hidden] { display: none; }
.mp-card-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--rc-border); }
.mp-card-head strong { font-size: 16px; }
.mp-card-head span { font-size: 12px; color: var(--rc-ash); font-family: var(--rc-mono); }
.mp-cols, .mp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 90px 40px; gap: 8px; align-items: center; }
.mp-cols span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rc-smoke); }
.mp-row select, .mp-row input { width: 100%; min-height: 40px; box-sizing: border-box; font-size: 13px; }
.mp-row input { text-align: center; }
.mp-row .mp-hint { grid-column: 1 / -1; font-size: 12px; color: var(--rc-ash); margin-top: -2px; }
.mp-row .mp-hint:empty { display: none; }
#mp-items, #mp-items-resp { display: flex; flex-direction: column; gap: 8px; }
.mp-resp { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 12px; border: 1px dashed var(--rc-border-strong); border-radius: 12px; }
.mp-resp > strong { font-size: 13px; }
.mp-resp > span { font-size: 12px; color: var(--rc-ash); line-height: 1.5; }
.mp-del { width: 40px; height: 40px; border-radius: 10px; background: transparent; border: 1px solid var(--rc-border-strong); color: var(--rc-ash); font-size: 18px; cursor: pointer; }
.mp-del:hover { color: var(--rc-coral); border-color: var(--rc-ember); }
#mp-items { display: flex; flex-direction: column; gap: 8px; }
.mp-add { align-self: flex-start; min-height: 38px; padding: 0 14px; border-radius: 10px; background: transparent; border: 1px dashed var(--rc-border-strong); color: var(--rc-mist); font-weight: 600; font-size: 13px; cursor: pointer; }
.mp-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rc-text); cursor: pointer; }
.mp-summary { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--rc-recess); font-size: 13px; color: var(--rc-ash); }
.mp-summary.is-warn { color: var(--rc-yellow); }
.mp-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mp-save { min-height: 42px; padding: 0 18px; border-radius: 10px; font-weight: 600; background: var(--rc-green); color: var(--rc-card); border: 0; cursor: pointer; }
@media (max-width: 700px) {
  .mp-steps { grid-template-columns: 1fr; }
  .mp-cols { display: none; }
  .mp-row { grid-template-columns: minmax(0, 1fr) 70px 40px; padding: 10px; border: 1px solid var(--rc-border); border-radius: 12px; }
  .mp-row .mp-prod { grid-column: 1 / -1; }
}

/* ============================================================
   MENÚ DE USUARIO (cabecera) — versión profesional
   ============================================================ */
.user-box { min-width: 280px !important; width: 280px; padding: 6px !important; border: 1px solid var(--rc-border) !important; }
.user-box .ub-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--rc-border); }
.user-box .ub-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--rc-accent); color: var(--rc-accent-ink); font-weight: 700; font-size: 15px; }
.user-box .ub-who { display: flex; flex-direction: column; min-width: 0; }
.user-box .ub-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rc-smoke); }
.user-box .ub-mail { font-size: 13.5px; font-weight: 600; color: var(--rc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-box .price-toggle, .user-box .ub-theme { border-radius: 10px; }
.user-box .ub-theme {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 2px 0 6px; padding: 0 10px;
  background: transparent; border: 0; color: var(--rc-mist); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.user-box .ub-theme:hover { background: rgba(var(--rc-ink), 0.06); color: var(--rc-text); }
.user-box .ub-theme:focus-visible { outline: 2px solid var(--rc-blue); outline-offset: -2px; }
.user-box .ub-theme-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--rc-graphite); color: var(--rc-accent); }
.user-box .ub-theme-ico svg { width: 16px; height: 16px; }
.user-box .ub-theme-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.user-box .ub-theme-text small { font-size: 12px; color: var(--rc-ash); font-weight: 400; }
.user-box .ub-chev { width: 16px; height: 16px; color: var(--rc-smoke); }
.user-box .logout-btn { border-top: 1px solid var(--rc-border) !important; }

/* ---------- Juegos con Zone ID: el ID de jugador ocupa casi todo, Zone ID estrecho (4 dígitos) ---------- */
.juego-form .form-row:has(#player_id2) { flex-direction: row !important; align-items: flex-start; }
.juego-form .form-row:has(#player_id2) > .form-col:has(#player_id) { flex: 1 1 auto !important; min-width: 0; }
.juego-form .form-row:has(#player_id2) > .form-col:has(#player_id2) { flex: 0 0 96px !important; }
@media (max-width: 420px) {
  .juego-form .form-row:has(#player_id2) { flex-direction: column !important; }
  .juego-form .form-row:has(#player_id2) > .form-col:has(#player_id2) { flex-basis: auto !important; width: 96px; }
}