/* ============================================================
   css/estilos.css — Sistema de diseño QuinielaYa
   Mobile-first. Tipografía grande, alto contraste, botones táctiles.
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Paleta */
  --verde:           #1a7f4b;
  --verde-oscuro:    #0d5c35;
  --verde-claro:     #f0fdf4;
  --acento:          #d97706;
  --acento-claro:    #fffbeb;
  --fondo:           #f0f7f4;
  --fondo-card:      #ffffff;
  --texto:           #1e293b;
  --texto-suave:     #64748b;
  --borde:           #cbd5e1;
  --borde-suave:     #e2e8f0;

  /* Estados */
  --pendiente-bg:    #fffbeb;
  --pendiente-color: #92400e;
  --pendiente-borde: #f59e0b;
  --revision-bg:     #eff6ff;
  --revision-color:  #1e40af;
  --revision-borde:  #3b82f6;
  --pagada-bg:       #f0fdf4;
  --pagada-color:    #14532d;
  --pagada-borde:    #22c55e;
  --rechazada-bg:    #fef2f2;
  --rechazada-color: #991b1b;
  --rechazada-borde: #ef4444;
  --expirada-bg:     #f8fafc;
  --expirada-color:  #475569;
  --expirada-borde:  #94a3b8;

  /* Tipografía */
  --fuente:      'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-xs:        14px;
  --f-sm:        15px;
  --f-base:      18px;
  --f-md:        21px;
  --f-lg:        26px;
  --f-xl:        32px;
  --f-monto:     42px;

  /* Geometría */
  --radio:       16px;
  --radio-sm:    8px;
  --sombra:      0 2px 12px rgba(0,0,0,0.08);
  --sombra-lg:   0 6px 28px rgba(0,0,0,0.13);
}

/* ── Reset mínimo ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--f-base); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--fuente); background: var(--fondo); color: var(--texto); min-height: 100vh; line-height: 1.5; }
a { color: inherit; }
button { font-family: var(--fuente); }
img { max-width: 100%; height: auto; display: block; }

/* ── Layout ────────────────────────────────────────────────── */
.contenedor {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px 100px; /* espacio inferior para botón WA */
}

/* ── Header cliente ────────────────────────────────────────── */
.header {
  background: var(--verde);
  color: white;
  text-align: center;
  padding: 18px 16px 0;
}
.header-logo {
  font-size: var(--f-lg);
  font-weight: 900;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.header-logo-texts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

/* Logo del negocio en el header cliente */
.logo-header {
  height: 56px;
  width: auto;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Logo en el sidebar del admin */
.sb-logo {
  height: 52px;
  width: auto;
  display: block;
  margin: 0 auto 6px;
}
.header-sub {
  font-size: var(--f-sm);
  opacity: 0.85;
  margin-top: 2px;
  padding-bottom: 16px;
}

/* Barra de progreso (dentro del header en jugar.html) */
.progreso-wrap {
  background: rgba(0,0,0,0.15);
  padding: 10px 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.progreso-label {
  color: white;
  font-size: var(--f-sm);
  font-weight: 700;
  white-space: nowrap;
  min-width: 80px;
}
.progreso-barra {
  flex: 1;
  height: 7px;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
  overflow: hidden;
}
.progreso-fill {
  height: 100%;
  background: white;
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* ── Tipografía ────────────────────────────────────────────── */
h1 { font-size: var(--f-xl); font-weight: 900; line-height: 1.15; }
h2 { font-size: var(--f-lg); font-weight: 800; }
h3 { font-size: var(--f-md); font-weight: 700; }
p  { font-size: var(--f-base); }
.texto-suave { color: var(--texto-suave); font-size: var(--f-sm); }
.monto {
  font-size: var(--f-monto);
  font-weight: 900;
  color: var(--acento);
  line-height: 1;
  letter-spacing: -1px;
}
.alias-tag {
  display: inline-block;
  background: #e8f5e9;
  border: 2px solid var(--verde);
  border-radius: var(--radio-sm);
  padding: 10px 18px;
  font-family: 'Courier New', monospace;
  font-size: var(--f-lg);
  font-weight: 900;
  color: var(--verde-oscuro);
  letter-spacing: 1px;
  word-break: break-all;
}
.titular-tag {
  font-size: var(--f-md);
  font-weight: 700;
  color: var(--texto);
}

/* ── Botones ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  padding: 14px 24px;
  border: none;
  border-radius: var(--radio);
  font-size: var(--f-base);
  font-weight: 700;
  font-family: var(--fuente);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s, opacity 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  line-height: 1.3;
}
.btn:active            { transform: scale(0.97); }
.btn:focus-visible     { outline: 3px solid var(--acento); outline-offset: 2px; }
.btn-primario          { background: var(--verde); color: white; }
.btn-primario:hover    { background: var(--verde-oscuro); }
.btn-acento            { background: var(--acento); color: white; }
.btn-acento:hover      { background: #b45309; }
.btn-secundario        { background: white; color: var(--verde); border: 2px solid var(--verde); }
.btn-secundario:hover  { background: var(--verde-claro); }
.btn-peligro           { background: var(--rechazada-bg); color: var(--rechazada-color); border: 2px solid var(--rechazada-borde); }
.btn-peligro:hover     { background: #fecaca; }
.btn-wsp               { background: #25d366; color: white; }
.btn-wsp:hover         { background: #1aab54; }
.btn-sm                { min-height: 44px; font-size: var(--f-sm); padding: 10px 18px; width: auto; }
.btn-full              { width: 100%; }
.btn:disabled          { opacity: 0.5; cursor: not-allowed; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--fondo-card);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
  margin-bottom: 14px;
}
.card-link {
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  display: block;
  text-decoration: none;
  color: inherit;
}
.card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-lg);
  border-color: var(--verde);
}

/* ── Badges de estado ──────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 100px;
  font-size: var(--f-sm);
  font-weight: 700;
  white-space: nowrap;
  border: 1.5px solid;
}
.badge-PENDIENTE_PAGO { background: var(--pendiente-bg); color: var(--pendiente-color); border-color: var(--pendiente-borde); }
.badge-EN_REVISION    { background: var(--revision-bg);  color: var(--revision-color);  border-color: var(--revision-borde);  }
.badge-PAGADA         { background: var(--pagada-bg);    color: var(--pagada-color);    border-color: var(--pagada-borde);    }
.badge-RECHAZADA      { background: var(--rechazada-bg); color: var(--rechazada-color); border-color: var(--rechazada-borde); }
.badge-EXPIRADA       { background: var(--expirada-bg);  color: var(--expirada-color);  border-color: var(--expirada-borde);  }

/* ── Formularios ───────────────────────────────────────────── */
.campo { margin-bottom: 22px; }
.campo label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: var(--f-base);
}
.campo input,
.campo select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: var(--f-md);
  font-family: var(--fuente);
  color: var(--texto);
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}
.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(26,127,75,0.15);
}
.campo input::placeholder { color: #94a3b8; }
.campo .hint { margin-top: 6px; color: var(--texto-suave); font-size: var(--f-sm); }
.campo .error { margin-top: 6px; color: var(--rechazada-color); font-size: var(--f-sm); display: none; }
.campo.con-error input,
.campo.con-error select { border-color: var(--rechazada-borde); }
.campo.con-error .error { display: block; }

/* Selector de código de país + teléfono */
.tel-pais-flag {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.tel-grupo {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.tel-grupo #reg-tel {
  flex: 1;
  min-width: 0;
}

.tel-pais-custom {
  position: relative;
  flex-shrink: 0;
}

.tel-pais-selected {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 100%;
  min-height: 48px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-sm);
  background: white;
  cursor: pointer;
  font-size: var(--f-sm);
  white-space: nowrap;
  user-select: none;
  transition: border-color 0.2s;
}

.tel-pais-selected:hover {
  border-color: var(--verde);
}

.tel-pais-arrow {
  font-size: 10px;
  color: var(--texto-suave);
  margin-left: 2px;
}

.tel-pais-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: white;
  border: 2px solid var(--borde);
  border-radius: var(--radio-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 100;
  min-width: 130px;
  overflow: hidden;
}

.tel-pais-dropdown.abierto {
  display: block;
}

.tel-pais-option {
  padding: 10px 14px;
  cursor: pointer;
  font-size: var(--f-sm);
  white-space: nowrap;
}

.tel-pais-option:hover {
  background: var(--verde-claro, #f0fdf4);
}

/* Input de importe con prefijo $ */
.input-prefijo {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--borde);
  border-radius: var(--radio-sm);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-prefijo:focus-within {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(26,127,75,0.15);
}
.input-prefijo .simbolo {
  padding: 14px 14px 14px 16px;
  background: #f8fafc;
  border-right: 2px solid var(--borde);
  font-size: var(--f-md);
  font-weight: 800;
  color: var(--texto-suave);
  display: flex;
  align-items: center;
}
.input-prefijo input {
  flex: 1;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-size: var(--f-xl);
  font-weight: 900;
  padding: 14px 16px;
}
.input-prefijo input:focus { outline: none; }

/* Botones de importe rápido */
.importes-rapidos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.btn-importe {
  min-height: 46px;
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: var(--f-sm);
  font-weight: 700;
  font-family: var(--fuente);
  cursor: pointer;
  color: var(--texto);
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn-importe:hover,
.btn-importe.activo {
  background: var(--verde);
  border-color: var(--verde);
  color: white;
}

/* Grid de números (Lotería / Quini6) */
.numeros-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.numeros-grid input {
  text-align: center;
  font-size: var(--f-lg) !important;
  font-weight: 900 !important;
  padding: 14px 4px !important;
}
.input-numero-unico {
  text-align: center;
  font-size: 44px !important;
  font-weight: 900 !important;
  letter-spacing: 10px;
}

/* ── Selección de juego (paso 1) ───────────────────────────── */
.juegos-lista { display: grid; gap: 14px; margin-top: 24px; }
.btn-juego {
  background: white;
  border: 3px solid var(--borde);
  border-radius: var(--radio);
  padding: 22px 18px;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  gap: 18px;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}
.btn-juego:hover, .btn-juego:focus-visible {
  border-color: var(--verde);
  background: var(--verde-claro);
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}
.btn-juego .juego-emoji { font-size: 44px; line-height: 1; }
.btn-juego .juego-nombre { font-size: var(--f-md); font-weight: 900; color: var(--texto); }
.btn-juego .juego-desc   { font-size: var(--f-sm); color: var(--texto-suave); margin-top: 3px; }

/* ── Animaciones ───────────────────────────────────────────── */
.tilde-circulo {
  width: 88px;
  height: 88px;
  background: var(--verde);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes popIn {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
.tilde-circulo svg {
  width: 44px; height: 44px;
  stroke: white; stroke-width: 3.5;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 65;
  stroke-dashoffset: 65;
  animation: dibujarTilde 0.55s 0.35s ease forwards;
}
@keyframes dibujarTilde {
  to { stroke-dashoffset: 0; }
}

.festejo-circulo {
  width: 88px;
  height: 88px;
  font-size: 54px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* Feedback "¡Copiado!" */
.feedback-copia {
  display: inline-block;
  background: var(--verde);
  color: white;
  padding: 3px 11px;
  border-radius: 100px;
  font-size: var(--f-xs);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.25s;
  margin-left: 8px;
  vertical-align: middle;
}
.feedback-copia.visible { opacity: 1; }

/* ── Preview de comprobante ────────────────────────────────── */
.preview-img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: var(--radio-sm);
  border: 2px solid var(--borde);
  margin-top: 12px;
  display: none;
}
.preview-img.visible { display: block; }

/* ── Boleta ─────────────────────────────────────────────────── */
.boleta {
  border: 2px dashed var(--borde);
  border-radius: var(--radio);
  padding: 22px;
  background: white;
}
.boleta-header {
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borde-suave);
  margin-bottom: 16px;
}
.boleta-titulo { font-size: var(--f-md); font-weight: 900; color: var(--verde); }
.boleta-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--borde-suave);
  gap: 12px;
}
.boleta-fila:last-child { border-bottom: none; }
.boleta-fila .etq { color: var(--texto-suave); font-size: var(--f-sm); white-space: nowrap; }
.boleta-fila .val { font-weight: 700; text-align: right; word-break: break-all; }
.qr-placeholder  { width: 120px; height: 120px; margin: 16px auto 0; display: block; }

/* ── Botón flotante WhatsApp ───────────────────────────────── */
.wsp-flotante {
  position: fixed;
  bottom: 22px;
  right: 18px;
  z-index: 200;
  background: #25d366;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  text-decoration: none;
  transition: transform 0.2s;
}
.wsp-flotante:hover { transform: scale(1.1); }

/* ── Separador ─────────────────────────────────────────────── */
.sep { border: none; border-top: 1px solid var(--borde-suave); margin: 20px 0; }

/* ── Estado vacío ──────────────────────────────────────────── */
.vacio {
  text-align: center;
  padding: 52px 20px;
  color: var(--texto-suave);
}
.vacio .icono { font-size: 52px; margin-bottom: 16px; }

/* ── Toast (admin) ─────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--texto);
  color: white;
  padding: 14px 24px;
  border-radius: var(--radio);
  font-size: var(--f-base);
  font-weight: 700;
  box-shadow: var(--sombra-lg);
  z-index: 999;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s;
  opacity: 0;
  max-width: 90vw;
  text-align: center;
}
.toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast-ok   { background: var(--verde); }
.toast-error { background: var(--rechazada-color); }

/* ── Admin header ──────────────────────────────────────────── */
.admin-header {
  background: #1e293b;
  color: white;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-logo { font-size: var(--f-md); font-weight: 900; }
.admin-contenedor { max-width: 1100px; margin: 0 auto; padding: 20px 16px 80px; }

/* Métricas admin */
.metricas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.metrica-card {
  background: white;
  border-radius: var(--radio);
  padding: 16px;
  box-shadow: var(--sombra);
  text-align: center;
}
.metrica-num   { font-size: 34px; font-weight: 900; color: var(--verde); line-height: 1; }
.metrica-label { font-size: var(--f-xs); color: var(--texto-suave); margin-top: 5px; }

/* Buscador admin */
.buscador {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.buscador input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: var(--f-base);
  font-family: var(--fuente);
  color: var(--texto);
}
.buscador input:focus { outline: none; border-color: var(--verde); }

/* Filtros admin */
.filtros {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 16px;
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.btn-filtro {
  flex-shrink: 0;
  padding: 8px 18px;
  background: white;
  border: 2px solid var(--borde);
  border-radius: 100px;
  font-size: var(--f-sm);
  font-weight: 700;
  font-family: var(--fuente);
  cursor: pointer;
  white-space: nowrap;
  color: var(--texto);
  transition: all 0.15s;
}
.btn-filtro:hover, .btn-filtro.activo {
  background: var(--verde);
  border-color: var(--verde);
  color: white;
}

/* Tabla admin (tarjetas en mobile, tabla en desktop) */
.jugadas-tabla {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.jugadas-tabla th {
  background: #f8fafc;
  padding: 11px 14px;
  text-align: left;
  font-size: var(--f-xs);
  color: var(--texto-suave);
  font-weight: 700;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
.jugadas-tabla td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--borde-suave);
  font-size: var(--f-sm);
  vertical-align: middle;
}
.jugadas-tabla tr:last-child td { border-bottom: none; }
.jugadas-tabla tr.fila-click { cursor: pointer; transition: background 0.1s; }
.jugadas-tabla tr.fila-click:hover td { background: #f8fafc; }
.icono-comp { color: var(--verde); font-weight: 900; }

/* ── Utilidades ────────────────────────────────────────────── */
.text-center    { text-align: center; }
.oculto         { display: none !important; }
.negrita        { font-weight: 700; }
.mt-8  { margin-top:  8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8  { margin-bottom:  8px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.gap-8  { gap:  8px; }
.gap-12 { gap: 12px; }
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ══════════════════════════════════════════════════════════════
   NUEVOS BADGES v2 — estados jugada y registro en Lotería
   ══════════════════════════════════════════════════════════════ */

/* Estados de jugada v2 */
.badge-NUEVA              { background: #f0f9ff; color: #0369a1; border-color: #7dd3fc; }
.badge-ESPERANDO_REGISTRO { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.badge-LISTA_PARA_CARGAR  { background: #f0fdf4; color: #166534; border-color: #86efac; }
.badge-CARGADA_EN_LOTERIA { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
.badge-BOLETA_EMITIDA     { background: #f0fdf4; color: #14532d; border-color: #22c55e; }

/* Estados de registro en Lotería (cliente) */
.badge-NO_REGISTRADO        { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.badge-ESPERANDO_CONTRASENA { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.badge-REGISTRADO           { background: #f0fdf4; color: #166534; border-color: #86efac; }

/* ── Chips de "próximo paso" (bandeja admin) ───────────────── */
.paso-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1.5px solid;
}
.paso-registro { background: #fef2f2; color: #991b1b;  border-color: #fca5a5; }
.paso-espera   { background: #fffbeb; color: #92400e;  border-color: #fcd34d; }
.paso-cargar   { background: #eff6ff; color: #1e40af;  border-color: #93c5fd; }
.paso-pago     { background: #fff7ed; color: #9a3412;  border-color: #fed7aa; }
.paso-boleta   { background: #f0fdf4; color: #166534;  border-color: #86efac; }
.paso-ok       { background: #f0fdf4; color: #166534;  border-color: #86efac; }
.paso-revision { background: #eff6ff; color: #1e40af;  border-color: #93c5fd; }
.paso-cerrado  { background: #f8fafc; color: #64748b;  border-color: #cbd5e1; }

/* ── Checklist de progreso (detalle admin) ─────────────────── */
.checklist { list-style: none; padding: 0; margin: 0; }
.check-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--borde-suave);
}
.check-item:last-child { border-bottom: none; }
.check-icono {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 900;
}
.check-item.hecho    .check-icono { background: var(--verde); color: white; }
.check-item.actual   .check-icono { background: var(--acento); color: white; animation: pulseIcon 1.5s infinite; }
.check-item.pendiente .check-icono { background: #e2e8f0; color: #94a3b8; }
@keyframes pulseIcon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(217,119,6,0); }
}
.check-texto { font-size: var(--f-sm); font-weight: 700; flex: 1; }
.check-sub   { font-size: 12px; font-weight: 400; color: var(--texto-suave); margin-top: 1px; }
.check-item.hecho    .check-texto { color: var(--texto-suave); text-decoration: line-through; }
.check-item.actual   .check-texto { color: var(--texto); font-size: var(--f-base); }
.check-item.pendiente .check-texto { color: #94a3b8; }

/* ── Cards de acción admin ─────────────────────────────────── */
.accion-card {
  border: 2px solid;
  border-radius: var(--radio);
  padding: 20px;
  margin-bottom: 12px;
}
.accion-registro { border-color: #fca5a5; background: #fef9f9; }
.accion-espera   { border-color: #fcd34d; background: #fffdf0; }
.accion-cargar   { border-color: #93c5fd; background: #f0f6ff; }
.accion-pago     { border-color: #fed7aa; background: #fffaf5; }
.accion-boleta   { border-color: #86efac; background: #f2fdf5; }
.accion-ok       { border-color: #86efac; background: #f2fdf5; text-align: center; }
.accion-card h3  { font-size: var(--f-md); font-weight: 800; margin-bottom: 8px; }
.accion-card p   { font-size: var(--f-sm); color: var(--texto-suave); margin-bottom: 14px; line-height: 1.5; }

/* ── Toggle ORDEN_OPERACION ────────────────────────────────── */
.toggle-orden {
  background: white;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.toggle-orden label { font-weight: 700; font-size: var(--f-sm); color: var(--texto); }
.toggle-orden select {
  padding: 7px 12px;
  border: 2px solid var(--verde);
  border-radius: var(--radio-sm);
  font-size: var(--f-sm);
  font-weight: 700;
  font-family: var(--fuente);
  color: var(--verde);
  background: var(--verde-claro);
  cursor: pointer;
}
.toggle-orden .nota { font-size: 12px; color: var(--texto-suave); flex: 1 0 100%; margin-top: 4px; }

/* ── Alerta de bloqueo por pago ────────────────────────────── */
.alerta-bloqueo {
  background: #fef9c3;
  border: 2px solid #fde047;
  border-radius: var(--radio-sm);
  padding: 12px 16px;
  font-size: var(--f-sm);
  font-weight: 700;
  color: #713f12;
  margin-bottom: 12px;
}

/* ── Overlay de confirmación ───────────────────────────────── */
.overlay-accion {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  z-index: 500;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 24px;
  animation: fadeInOverlay 0.3s ease;
}
.overlay-accion.visible { display: flex; }
@keyframes fadeInOverlay { from { opacity:0; } to { opacity:1; } }
.overlay-accion-box {
  background: white;
  border-radius: var(--radio);
  padding: 32px 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--sombra-lg);
}
.overlay-accion-box h2 { font-size: var(--f-xl); margin-bottom: 12px; }
.overlay-accion-box p  { font-size: var(--f-base); color: var(--texto-suave); margin-bottom: 20px; line-height: 1.6; }
.overlay-icono { font-size: 64px; line-height: 1; margin-bottom: 16px; }

/* ── Card de pago en jugada.html (cliente) ─────────────────── */
.pago-info-card { border: 2px solid var(--verde); background: var(--verde-claro); }
.pago-en-revision-card { border: 2px solid #93c5fd; background: #f0f6ff; }
.pago-ok-card { border: 2px solid #86efac; background: #f2fdf5; }

/* ── Impresión ─────────────────────────────────────────────── */
@media print {
  body > *:not(#zona-boleta) { display: none !important; }
  #zona-boleta { display: block !important; }
  .btn-imprimir { display: none !important; }
  .boleta { border: 1px solid #000; }
}

/* ── Desktop base ───────────────────────────────────────────── */
@media (min-width: 768px) {
  .contenedor { padding-bottom: 60px; }
  .juegos-lista { grid-template-columns: repeat(3, 1fr); }
  .metricas { grid-template-columns: repeat(4, 1fr); }
  .jugadas-tabla th, .jugadas-tabla td { padding: 14px 18px; }
}

/* ══════════════════════════════════════════════════════════════
   v3 — TICKET BUILDER (jugar.html)
   ══════════════════════════════════════════════════════════════ */

/* Banner de promo */
.promo-banner {
  background: linear-gradient(135deg, var(--acento) 0%, #b45309 100%);
  color: white;
  border-radius: var(--radio);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.promo-banner-icon { font-size: 36px; flex-shrink: 0; }
.promo-banner-titulo { font-size: var(--f-md); font-weight: 900; line-height: 1.2; }
.promo-banner-bajada { font-size: var(--f-sm); opacity: 0.9; margin-top: 3px; }

/* Chips de selección (sorteo, posición) */
.chips-label {
  font-weight: 700;
  font-size: var(--f-base);
  margin-bottom: 10px;
  display: block;
}
.chips-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.chips-grid-2 { grid-template-columns: repeat(2, 1fr); }
.chips-grid-4 { grid-template-columns: repeat(4, 1fr); }
.chip-btn {
  min-height: 52px;
  padding: 10px 8px;
  background: white;
  border: 2.5px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: var(--f-sm);
  font-weight: 700;
  font-family: var(--fuente);
  cursor: pointer;
  color: var(--texto);
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  line-height: 1.3;
}
.chip-btn:hover   { border-color: var(--verde); background: var(--verde-claro); }
.chip-btn.activo  { background: var(--verde); border-color: var(--verde); color: white; }
.chip-btn:active  { transform: scale(0.97); }

/* Input de número grande */
.inp-numero-ticket {
  text-align: center;
  font-size: 52px !important;
  font-weight: 900 !important;
  letter-spacing: 8px;
  width: 100%;
  padding: 12px 16px !important;
}

/* Toggle redoblona */
.redoblona-wrap {
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 18px;
  transition: border-color 0.2s, background 0.2s;
}
.redoblona-wrap.activa {
  border-color: var(--acento);
  background: var(--acento-claro);
}
.redoblona-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.redoblona-label { font-weight: 700; font-size: var(--f-base); }
.toggle-switch {
  position: relative; width: 52px; height: 28px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--borde); border-radius: 14px;
  transition: background 0.2s;
  cursor: pointer;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--acento); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(24px); }
.redoblona-campos { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde-suave); }
.redoblona-ayuda {
  margin-top: 12px;
  background: #fffbeb;
  border: 1.5px solid #fcd34d;
  border-radius: var(--radio-sm);
  padding: 10px 14px;
  font-size: var(--f-sm);
  color: #78350f;
  cursor: pointer;
}
.redoblona-ayuda summary { font-weight: 700; list-style: none; }
.redoblona-ayuda summary::before { content: "❓ "; }

/* Lista de jugadas en el ticket */
.ticket-lista {
  margin-bottom: 20px;
}
.ticket-lista-titulo {
  font-size: var(--f-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--texto-suave);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.jugada-linea {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 2px solid var(--borde-suave);
  border-radius: var(--radio-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.jugada-linea-num {
  font-size: var(--f-lg);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--texto);
  min-width: 60px;
}
.jugada-linea-desc {
  flex: 1;
  font-size: var(--f-sm);
  color: var(--texto-suave);
  line-height: 1.4;
}
.jugada-linea-importe {
  font-weight: 800;
  color: var(--acento);
  white-space: nowrap;
}
.jugada-linea-del {
  background: none;
  border: none;
  color: var(--rechazada-color);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.ticket-vacio {
  text-align: center;
  padding: 20px;
  color: var(--texto-suave);
  font-size: var(--f-sm);
  border: 2px dashed var(--borde);
  border-radius: var(--radio-sm);
  margin-bottom: 10px;
}

/* Resumen de totales */
.resumen-totales {
  background: white;
  border: 2px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.resumen-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: var(--f-sm);
}
.resumen-fila.total {
  border-top: 2px solid var(--borde);
  margin-top: 8px;
  padding-top: 12px;
  font-size: var(--f-md);
  font-weight: 900;
}
.resumen-fila.descuento { color: var(--verde); }
.resumen-fila.total .val { font-size: var(--f-xl); color: var(--acento); }
.aviso-minimo {
  background: var(--pendiente-bg);
  border: 1.5px solid var(--pendiente-borde);
  border-radius: var(--radio-sm);
  padding: 12px 16px;
  font-size: var(--f-sm);
  font-weight: 700;
  color: var(--pendiente-color);
  margin-bottom: 12px;
}

/* Separadores de sección en jugar.html */
.seccion-titulo-builder {
  font-size: var(--f-md);
  font-weight: 900;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--borde-suave);
}
.paso-contenido .card-builder {
  background: white;
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
  margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════
   v3 — ADMIN DESKTOP LAYOUT
   ══════════════════════════════════════════════════════════════ */

/* Shell de dos columnas */
.admin-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #1e293b;
  color: white;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-logo {
  padding: 20px 20px 14px;
  font-size: var(--f-md);
  font-weight: 900;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-logo span { font-weight: 400; font-size: var(--f-xs); opacity: 0.5; display: block; margin-top: 2px; }
.admin-nav { flex: 1; padding: 12px 0; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-size: var(--f-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--fuente);
  width: 100%;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  border-radius: 0;
}
.nav-item:hover  { background: rgba(255,255,255,0.08); color: white; }
.nav-item.activo { background: rgba(255,255,255,0.13); color: white; }
.nav-item .nav-icon { font-size: 18px; width: 22px; text-align: center; }
.nav-item.peligro   { color: rgba(248,113,113,0.85); }
.nav-item.peligro:hover { background: rgba(239,68,68,0.15); color: #fca5a5; }
.sidebar-bottom {
  padding: 12px 0 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Área principal */
.admin-main {
  flex: 1;
  min-width: 0;
  background: #f1f5f9;
  display: flex;
  flex-direction: column;
}
.admin-topbar {
  background: white;
  border-bottom: 1px solid var(--borde-suave);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.admin-topbar-titulo { font-size: var(--f-md); font-weight: 900; }
.admin-content { padding: 20px 24px 60px; max-width:100%;}

/* Métricas densas (desktop) */
.metricas-v3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.metrica-v3 {
  background: white;
  border-radius: var(--radio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
  border-left: 4px solid var(--borde);
}
.metrica-v3.acento  { border-left-color: var(--acento); }
.metrica-v3.alerta  { border-left-color: #ef4444; }
.metrica-v3.azul    { border-left-color: #3b82f6; }
.metrica-v3.verde   { border-left-color: var(--verde); }
.metrica-v3 .num    { font-size: 28px; font-weight: 900; line-height: 1; margin-bottom: 3px; }
.metrica-v3 .etq    { font-size: var(--f-xs); color: var(--texto-suave); }
.periodo-label {
  font-size: var(--f-xs);
  color: var(--texto-suave);
  margin-bottom: 14px;
}

/* Filtros de fecha */
.fecha-filtros {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.fecha-filtros label {
  font-size: var(--f-xs);
  font-weight: 700;
  color: var(--texto-suave);
  margin-right: 4px;
}
.btn-fecha {
  padding: 6px 14px;
  background: white;
  border: 2px solid var(--borde);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--fuente);
  cursor: pointer;
  color: var(--texto);
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-fecha:hover, .btn-fecha.activo {
  background: #1e293b;
  border-color: #1e293b;
  color: white;
}
.custom-fecha-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.custom-fecha-wrap input[type="date"] {
  padding: 5px 10px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: 13px;
  font-family: var(--fuente);
  color: var(--texto);
  background: white;
}
.custom-fecha-wrap input[type="date"]:focus {
  outline: none;
  border-color: var(--verde);
}

/* Tabla compacta admin (desktop) */
.tabla-tickets {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  font-size: 13px;
}
.tabla-tickets th {
  background: #f8fafc;
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  color: var(--texto-suave);
  font-weight: 700;
  border-bottom: 2px solid var(--borde);
  white-space: nowrap;
  user-select: none;
}
.tabla-tickets td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde-suave);
  vertical-align: middle;
  line-height: 1.4;
}
.tabla-tickets tr:last-child td { border-bottom: none; }
.tabla-tickets tr.fila-click { cursor: pointer; transition: background 0.1s; }
.tabla-tickets tr.fila-click:hover td { background: #f0f7f4; }
.tabla-tickets .num-grande { font-size: 15px; font-weight: 900; letter-spacing: 1px; }
.tabla-tickets .sub-gris   { font-size: 12px; color: var(--texto-suave); }
.tabla-tickets .importe-td { font-weight: 800; color: var(--acento); white-space: nowrap; }

/* Buscador compacto admin */
.buscador-admin {
  flex: 1;
  max-width: 320px;
}
.buscador-admin input {
  width: 100%;
  padding: 8px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: var(--f-sm);
  font-family: var(--fuente);
}
.buscador-admin input:focus { outline: none; border-color: var(--verde); }

/* Filtros estado en admin */
.filtros-estado {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.filtros-estado::-webkit-scrollbar { display: none; }

/* Bloqueo visual de pasos cuando falta pago */
.bloqueo-pago {
  background: #fef9c3;
  border: 2px solid #fde047;
  border-radius: var(--radio-sm);
  padding: 10px 14px;
  font-size: var(--f-sm);
  font-weight: 700;
  color: #713f12;
  margin-bottom: 8px;
}

/* ── Hamburger button (solo mobile) ──────────────────────────── */
.admin-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--texto);
  border-radius: var(--radio-sm);
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.admin-hamburger:hover { background: #f1f5f9; }

/* ── Overlay oscuro detrás del drawer ────────────────────────── */
.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
}

/* Mobile: drawer lateral, hambuerger visible */
@media (max-width: 1023px) {
  .admin-hamburger { display: flex; }
  .admin-shell     { display: block; }
  .admin-main      { min-height: 100vh; }
  .admin-content   { padding: 16px 14px 80px; }
  .metricas-v3     { grid-template-columns: repeat(2, 1fr); }
  .tabla-tickets   { font-size: 12px; }
  .tabla-tickets th, .tabla-tickets td { padding: 8px 8px; }

  /* Sidebar: posición fija fuera de pantalla por defecto */
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cuando el drawer está abierto */
  .admin-shell.sidebar-open .admin-sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
  }
  .admin-shell.sidebar-open .admin-sidebar-overlay {
    display: block;
  }
}

/* ══════════════════════════════════════════════════════════════
   v4 — JUGAR.HTML — Mecánica real de quiniela
   ══════════════════════════════════════════════════════════════ */

/* Color de marca configurable */
:root { --color-marca: var(--verde); }

/* ── Chips de loterías (grid de 3 en mobile) ─────────────────── */
.chips-grid-loterias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.chip-todas {
  width: 100%;
  margin-bottom: 18px;
  padding: 9px 14px;
  background: white;
  border: 2px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: var(--f-sm);
  font-weight: 700;
  font-family: var(--fuente);
  cursor: pointer;
  color: var(--texto-suave);
  transition: all 0.15s;
  text-align: center;
}
.chip-todas:hover   { border-color: var(--verde); color: var(--verde); }
.chip-todas.activo  { background: var(--verde-claro); border-color: var(--verde); color: var(--verde); }
.chip-cerrado {
  opacity: 0.45;
  text-decoration: line-through;
  cursor: not-allowed !important;
}
.chip-cerrado:hover { border-color: var(--borde) !important; background: white !important; }
.chip-cierre {
  font-size: 11px;
  opacity: 0.75;
  display: block;
  font-weight: 400;
  margin-top: 2px;
}

/* ── Tabs NORMAL / REDOBLONA ──────────────────────────────────── */
.modo-tabs {
  display: flex;
  border: 2px solid var(--borde);
  border-radius: var(--radio-sm);
  overflow: hidden;
  margin-bottom: 20px;
}
.modo-tab {
  flex: 1;
  padding: 13px 12px;
  background: white;
  border: none;
  font-size: var(--f-base);
  font-weight: 700;
  font-family: var(--fuente);
  cursor: pointer;
  color: var(--texto-suave);
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.modo-tab + .modo-tab { border-left: 2px solid var(--borde); }
.modo-tab.activo { background: var(--verde); color: white; }
.modo-tab:not(.activo):hover { background: var(--fondo); }

/* ── Fila de número (NORMAL o REDOBLONA) ────────────────────── */
.numero-fila {
  border: 2px solid var(--borde-suave);
  border-radius: var(--radio-sm);
  padding: 14px 14px 12px;
  margin-bottom: 10px;
  background: white;
  position: relative;
}
.numero-fila-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
  display: block;
}
.inp-num-fila {
  text-align: center;
  font-size: 40px !important;
  font-weight: 900 !important;
  letter-spacing: 6px;
  padding: 8px 10px !important;
  width: 100%;
}
.ubic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}
.ubic-mini-btn {
  flex: 1 1 auto;
  min-width: 56px;
  min-height: 38px;
  padding: 5px 4px;
  background: white;
  border: 2px solid var(--borde);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--fuente);
  cursor: pointer;
  color: var(--texto);
  transition: all 0.12s;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  line-height: 1.3;
}
.ubic-mini-btn:hover   { border-color: var(--verde); background: var(--verde-claro); }
.ubic-mini-btn.activo  { background: var(--verde); border-color: var(--verde); color: white; }

/* Monto por fila */
.monto-fila-wrap { margin-top: 10px; }
.importes-mini {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.monto-mini-btn {
  padding: 6px 10px;
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: var(--radio-sm);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--fuente);
  cursor: pointer;
  color: var(--texto);
  transition: all 0.12s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.monto-mini-btn:hover, .monto-mini-btn.activo {
  background: var(--acento);
  border-color: var(--acento);
  color: white;
}

/* Separador REDOBLONA */
.redoblona-sep {
  text-align: center;
  font-weight: 900;
  color: var(--acento);
  font-size: var(--f-lg);
  margin: 6px 0;
  line-height: 1;
}

/* Eliminar fila */
.fila-del {
  position: absolute;
  top: 8px; right: 8px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.1s, background 0.1s;
}
.fila-del:hover { color: var(--rechazada-color); background: var(--rechazada-bg); }

/* ── Preview de cálculo (dentro del formulario) ─────────────── */
.desglose-preview {
  background: var(--fondo);
  border: 2px solid var(--borde-suave);
  border-radius: var(--radio-sm);
  padding: 10px 14px;
  font-size: var(--f-sm);
  color: var(--texto-suave);
  line-height: 1.5;
  margin: 8px 0 14px;
  min-height: 40px;
}
.desglose-preview .des-num {
  font-size: var(--f-md);
  font-weight: 900;
  color: var(--acento);
}

/* ── Jugada colapsada en el ticket ──────────────────────────── */
.jugada-tarjeta {
  background: white;
  border: 2px solid var(--borde-suave);
  border-radius: var(--radio-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.jugada-tarjeta-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.jugada-tarjeta-header:hover { background: var(--fondo); }
.jugada-tarjeta-num {
  width: 26px; height: 26px;
  background: var(--verde);
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
  flex-shrink: 0;
}
.jugada-tarjeta-info { flex: 1; min-width: 0; }
.jugada-tarjeta-nums {
  font-size: var(--f-md);
  font-weight: 900;
  letter-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jugada-tarjeta-sub {
  font-size: 12px;
  color: var(--texto-suave);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jugada-tarjeta-imp {
  font-weight: 800;
  color: var(--acento);
  white-space: nowrap;
  font-size: var(--f-sm);
}
.jugada-tarjeta-body {
  display: none;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--borde-suave);
  font-size: var(--f-sm);
}
.jugada-tarjeta-body.abierta { display: block; }
.jugada-del {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color 0.1s;
}
.jugada-del:hover { color: var(--rechazada-color); }

/* ── Total box del ticket ───────────────────────────────────── */
.total-box {
  background: white;
  border: 3px solid var(--color-marca);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.total-box-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: var(--f-sm);
}
.total-box-fila.bono { color: var(--verde); font-weight: 700; }
.total-box-fila.total {
  border-top: 2px solid var(--borde);
  margin-top: 8px;
  padding-top: 12px;
  font-size: var(--f-md);
  font-weight: 900;
}
.total-box-fila.total .val { font-size: var(--f-xl); color: var(--acento); }

/* ── Admin: Toggle switch pequeño en tabla ────────────────────── */
.toggle-switch-sm { position: relative; width: 42px; height: 22px; flex-shrink: 0; }
.toggle-switch-sm input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider-sm {
  position: absolute; inset: 0;
  background: var(--borde); border-radius: 11px;
  transition: background 0.2s; cursor: pointer;
}
.toggle-slider-sm::before {
  content: ""; position: absolute;
  width: 16px; height: 16px; left: 3px; top: 3px;
  background: white; border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch-sm input:checked + .toggle-slider-sm { background: var(--verde); }
.toggle-switch-sm input:checked + .toggle-slider-sm::before { transform: translateX(20px); }

/* ── Modal para admin (bonos) ────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.75);
  z-index: 400;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeInOverlay 0.25s ease;
}
.modal-overlay.visible { display: flex; }
.modal-box {
  background: white;
  border-radius: var(--radio);
  padding: 28px 24px;
  max-width: 520px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--sombra-lg);
}
.modal-box h2 { font-size: var(--f-lg); margin-bottom: 18px; }

/* ── Bono chip (en banner cliente) ──────────────────────────── */
.aplica-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 700; border: 1.5px solid;
  white-space: nowrap;
}
.aplica-TODOS                { background:#f0fdf4; color:#166534; border-color:#86efac; }
.aplica-NUEVOS               { background:#f0f9ff; color:#0369a1; border-color:#7dd3fc; }
.aplica-REGISTRADO           { background:#fffbeb; color:#92400e; border-color:#fcd34d; }
.aplica-ESPERANDO_CONTRASENA { background:#dbeafe; color:#1d4ed8; border-color:#93c5fd; }

/* ===== HOME REDISEÑO ===== */

/* ── Hero con bolas ─────────────────────────────────────────── */
.qy-hero {
  background: linear-gradient(160deg, #0d5c35 0%, #1a7f4b 55%, #22a860 100%);
  padding: 32px 24px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.qy-hero-bg {
  position: absolute; inset: 0; opacity: 0.06;
  background-image: radial-gradient(circle, white 1px, transparent 1px);
  background-size: 38px 38px;
}
.balls-stage {
  height: 84px; display: flex; justify-content: center;
  align-items: center; gap: 12px; margin-bottom: 20px; position: relative;
}
.ball {
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
  opacity: 0; transform: translateX(-400px) rotate(-720deg);
  box-shadow: 3px 6px 18px rgba(0,0,0,0.45),
              inset -4px -4px 10px rgba(0,0,0,0.25),
              inset 3px 3px 8px rgba(255,255,255,0.35);
}
.ball-inner {
  width: 38px; height: 38px; border-radius: 50%;
  background: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: #111;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
  position: relative; z-index: 2;
  font-family: 'Arial Black', sans-serif;
}
.ball-azul     { background: radial-gradient(circle at 35% 30%, #6ab0f5, #1565c0 60%, #0a3d7a 100%); }
.ball-rojo     { background: radial-gradient(circle at 35% 30%, #f87171, #c0392b 60%, #7a1010 100%); }
.ball-amarillo { background: radial-gradient(circle at 35% 30%, #fef08a, #d4a017 60%, #8a6000 100%); }
.ball-verde-b  { background: radial-gradient(circle at 35% 30%, #6ee7a0, #1a7f4b 60%, #0a4028 100%); }
.qy-hero h1  { color: white; font-size: var(--f-xl); font-weight: 900; line-height: 1.15; margin-bottom: 10px; position: relative; }
.qy-hero p   { color: rgba(255,255,255,0.82); font-size: var(--f-sm); margin-bottom: 24px; position: relative; }
.qy-btn-hero {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--acento); color: white; font-weight: 900;
  font-size: var(--f-md); padding: 16px 32px; border-radius: var(--radio);
  text-decoration: none; box-shadow: 0 4px 18px rgba(217,119,6,0.45); position: relative;
}
.qy-trust {
  display: flex; align-items: center; justify-content: center;
  margin-top: 25px; position: relative; flex-wrap: wrap;
}
.qy-trust-badge {
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 100px; padding: 6px 14px; font-size: var(--f-xs);
  color: white; font-weight: 700; display: flex; align-items: center; gap: 6px;
}
.lsf-mini {
  background: white; border-radius: 4px; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--verde); font-weight: 900; flex-shrink: 0;
}
.qy-trust-agencia {
  color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 6px;
  letter-spacing: 0.5px; width: 100%;
}

/* ── Secciones generales del home ────────────────────────────── */
.qy-section { margin-top: 22px; }
.qy-section-title {
  font-size: var(--f-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--texto-suave); margin-bottom: 12px;
}

/* ── Banner en vivo (dentro de main) ────────────────────────── */
.qy-envivo {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border-radius: var(--radio); padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  color: white; text-decoration: none;
}
.qy-envivo-text { flex: 1; }
.qy-envivo-text strong { display: block; font-size: var(--f-sm); font-weight: 900; }
.qy-envivo-text span   { font-size: var(--f-xs); opacity: 0.85; }
.qy-lsf-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  background: transparent;
  padding: 0;
}
.chip-logo-lsf {
  height: 26px;
  width: auto;
  display: block;
}
.qy-lsf-chip-inner { font-size: 10px; font-weight: 900; color: var(--verde); text-align: center; line-height: 1.2; }

/* ── Carrusel de banners ─────────────────────────────────────── */
.qy-carousel { position: relative; overflow: hidden; border-radius: var(--radio); }
.qy-carousel-track { display: flex; transition: transform 0.4s ease; }
.qy-slide {
  min-width: 100%; height: 140px; border-radius: var(--radio);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.qy-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qy-slide-placeholder { background: linear-gradient(135deg, var(--verde), var(--verde-oscuro)); }
.qy-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.qy-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--borde);
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.qy-dot.active { background: var(--verde); transform: scale(1.3); }

/* ── Card comunidad WhatsApp ─────────────────────────────────── */
.comunidad-card {
  width: 100%;
  background: linear-gradient(135deg, #075e54 0%, #128c7e 50%, #25d366 100%);
  border-radius: var(--radio); padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 20px rgba(37,211,102,0.35);
}
.comunidad-card::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: comunidadShimmer 3s ease-in-out infinite;
}
@keyframes comunidadShimmer { 0%{left:-100%} 55%{left:150%} 100%{left:150%} }
.comunidad-card::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--radio);
  animation: comunidadPulse 3s ease-in-out infinite;
}
@keyframes comunidadPulse {
  0%  { box-shadow: 0 0 0 0   rgba(37,211,102,0.4); }
  50% { box-shadow: 0 0 0 5px rgba(37,211,102,0);   }
  100%{ box-shadow: 0 0 0 0   rgba(37,211,102,0.4); }
}
.comunidad-badge {
  position: absolute; top: -1px; right: 12px;
  background: #e53e3e; color: white; font-size: 9px; font-weight: 900;
  padding: 2px 8px; border-radius: 0 0 6px 6px; z-index: 2; letter-spacing: 0.3px;
  animation: badgePop 3s ease-in-out infinite;
}
@keyframes badgePop { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.06)} }
.wsp-icon-round {
  width: 46px; height: 46px; background: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.comunidad-texto { flex: 1; position: relative; z-index: 1; min-width: 0; }
.comunidad-titulo { color: white; font-size: var(--f-sm); font-weight: 900; line-height: 1.2; }
.comunidad-sub   { color: rgba(255,255,255,0.82); font-size: var(--f-xs); margin-top: 3px; font-weight: 500; }
.comunidad-flecha {
  color: white; font-size: 20px; font-weight: 900;
  position: relative; z-index: 1; flex-shrink: 0;
  animation: flechaPulse 1.4s ease-in-out infinite;
}
@keyframes flechaPulse { 0%,100%{transform:translateX(0);opacity:1} 50%{transform:translateX(4px);opacity:0.65} }

/* ── Accesos rápidos ─────────────────────────────────────────── */
.qy-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qy-quick-btn {
  background: white; border: 2px solid var(--verde); border-radius: var(--radio);
  padding: 14px 12px; text-align: center; text-decoration: none; color: var(--verde);
  font-weight: 800; font-size: var(--f-xs);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: var(--sombra);
}
.qy-quick-icon { font-size: 22px; }

/* ── Pasos "Cómo jugar" ───────────────────────────────────────── */
.qy-steps { display: flex; flex-direction: column; gap: 10px; }
.qy-step  { display: flex; align-items: flex-start; gap: 14px; }
.qy-step-num {
  background: var(--verde); color: white; width: 34px; height: 34px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: var(--f-sm); flex-shrink: 0;
}
.qy-step-title  { font-size: var(--f-sm); font-weight: 800; }
.qy-step-desc   { font-size: var(--f-xs); margin-top: 3px; line-height: 1.5; }
.qy-step-detail { font-size: 12px; color: var(--verde); font-weight: 700; margin-top: 6px; }

/* ── Cómo funciona (FAQ cards) ───────────────────────────────── */
.qy-cf-lista  { display: flex; flex-direction: column; gap: 10px; }
.qy-cf-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qy-cf-icon   { font-size: 22px; flex-shrink: 0; }
.qy-cf-title  { font-size: var(--f-sm); font-weight: 800; }
.qy-cf-body   { font-size: var(--f-xs); color: var(--texto-suave); line-height: 1.6; }
.qy-cf-tip {
  background: var(--verde-claro); border-left: 3px solid var(--verde);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  padding: 8px 12px; margin-top: 10px;
  font-size: 12px; color: var(--verde); font-weight: 600;
}

/* ── Premios ─────────────────────────────────────────────────── */
.qy-premios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qy-premio {
  background: var(--verde-claro); border: 1px solid #bbf7d0;
  border-radius: var(--radio-sm); padding: 10px 12px; text-align: center;
}
.qy-premio-mult  { font-size: var(--f-md); font-weight: 900; color: var(--verde); line-height: 1; }
.qy-premio-label { font-size: 12px; color: var(--texto-suave); margin-top: 3px; }

/* ── Footer ──────────────────────────────────────────────────── */
.qy-footer { background: #0d5c35; padding: 28px 20px 20px; text-align: center; }
.qy-footer-logo { margin: 0 auto 10px; }
.qy-footer-logo-img { height: 52px; width: auto; margin: 0 auto; }
.qy-footer-logo-fallback {
  width: 52px; height: 52px; background: rgba(255,255,255,0.15); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 0 auto;
}
.qy-footer-name    { color: white; font-size: var(--f-md); font-weight: 900; }
.qy-footer-oficial {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; color: rgba(255,255,255,0.75); font-size: var(--f-xs);
}
.qy-footer-lsf    { background: white; border-radius: 6px; padding: 3px 7px; font-size: 10px; font-weight: 900; color: var(--verde); }
.qy-footer-agnum  { color: rgba(255,255,255,0.5); font-size: 11px; margin-top: 4px; }
.qy-footer-horario { color: rgba(255,255,255,0.65); font-size: var(--f-xs); margin-top: 14px; line-height: 1.6; }
.qy-footer-legal  { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); }
.qy-footer-18     {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radio-sm); padding: 6px 14px;
  color: white; font-size: var(--f-xs); font-weight: 800; margin-bottom: 10px;
}
.qy-footer-ley  {
  color: rgba(255,255,255,0.55); font-size: 11px; line-height: 1.5;
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.3px;
}
.qy-footer-copy { color: rgba(255,255,255,0.4); font-size: 11px; margin-bottom: 8px; }
.qy-footer-tyc  { color: rgba(255,255,255,0.55); font-size: var(--f-xs); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   EN VIVO
   ═══════════════════════════════════════════════════════════════ */

/* ===== EN VIVO ===== */

/* ── Badge/banner en el home ───────────────────────────────── */
.envivo-badge {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  border-radius: var(--radio);
  padding: 14px 20px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.30);
  flex-wrap: wrap;
  transition: filter .15s;
}
.envivo-badge:hover { filter: brightness(1.07); }

.envivo-badge-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.envivo-badge-titulo {
  font-size: var(--f-md);
  font-weight: 900;
  line-height: 1.2;
}
.envivo-badge-sub {
  font-size: var(--f-sm);
  font-weight: 400;
  opacity: 0.88;
}

/* Punto rojo parpadeante */
.envivo-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  background: white;
  border-radius: 50%;
  flex-shrink: 0;
  animation: envivoPulse 1.5s ease-in-out infinite;
}
@keyframes envivoPulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.3; transform: scale(0.65); }
}

/* Botón "Ver sorteos" */
.envivo-btn {
  background: white;
  color: #b91c1c;
  font-weight: 900;
  font-size: var(--f-sm);
  font-family: var(--fuente);
  border: none;
  border-radius: var(--radio-sm);
  padding: 10px 18px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  flex-shrink: 0;
  transition: background .15s;
}
.envivo-btn:hover { background: #fee2e2; color: #991b1b; }

/* ── Página en-vivo.php ─────────────────────────────────────── */
.envivo-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 80px;
}

.envivo-header {
  text-align: center;
  padding: 32px 0 24px;
}
.envivo-header h1 {
  font-size: var(--f-xl);
  color: #dc2626;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.envivo-header p {
  color: var(--texto-suave);
  font-size: var(--f-sm);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Wrapper con borde redondeado y sombra */
.envivo-video-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.18);
  background: #000;
}

/* Técnica padding-bottom 16:9 */
.envivo-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.envivo-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Caja de info debajo del video */
.envivo-info {
  background: white;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px 24px;
  margin-top: 24px;
  font-size: var(--f-sm);
  line-height: 1.75;
  color: var(--texto);
}
.envivo-info h2 {
  font-size: var(--f-base);
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--texto);
}
.envivo-info a {
  color: var(--verde);
  font-weight: 700;
  text-decoration: underline;
}
.envivo-volver {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: var(--f-sm);
  color: var(--texto-suave);
}
.envivo-volver a { color: var(--verde); font-weight: 700; text-decoration: underline; }

/* ── Mobile (en-vivo.php) ────────────────────────────────────── */
@media (max-width: 600px) {
  .envivo-wrapper { padding: 0 12px 60px; }
  .envivo-header { padding: 20px 0 18px; }
  .envivo-header h1 { font-size: var(--f-lg); gap: 6px; }
  .envivo-badge { gap: 10px; padding: 12px 14px; }
  .envivo-badge-titulo { font-size: var(--f-base); }
  .envivo-badge .envivo-btn { width: 100%; text-align: center; padding: 12px; margin-top: 4px; }
  .envivo-info { padding: 16px 18px; }
}

/* ── Fix mobile: card "En vivo" en home (index.php) ─────────── */
@media (max-width: 480px) {
  .qy-envivo {
    gap: 8px;
    padding: 12px 14px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .envivo-dot {
    flex-shrink: 0;
  }

  .qy-envivo-text {
    flex: 1;
    min-width: 0;
  }

  .qy-envivo-text strong {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .qy-envivo-text span {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .qy-envivo .envivo-btn {
    flex-shrink: 0;
    padding: 7px 10px;
    font-size: 12px;
    width: auto;
    margin-top: 0;
  }
}

/* ── Logos reales LSF / QSF ──────────────────────────────────── */
.lsf-mini-img {
  height: 18px;
  width: auto;
  display: block;
  flex-shrink: 0;
}


.footer-lsf-img {
  height: 20px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* ── Banners iframe ──────────────────────────────────────────── */
.qy-slide {
  min-width: 100%;
  height: 160px;
  border-radius: var(--radio);
  overflow: hidden;
}
.banner-iframe {
  width: 100%;
  height: 160px;
  border: none;
  display: block;
  border-radius: var(--radio);
}
@media (min-width: 600px) {
  .qy-slide,
  .banner-iframe {
    height: 180px;
  }
}

/* ── Campo código de descuento (jugar.php) ───────────────────── */
.codigo-bono-wrap { margin-bottom: 18px; }

#hint-codigo-bono {
  font-size: var(--f-xs);
  margin-top: 6px;
  min-height: 20px;
  transition: color 0.2s;
}
#hint-codigo-bono.ok    { color: var(--verde); font-weight: 700; }
#hint-codigo-bono.error { color: var(--rechazada-color); }

#btn-aplicar-codigo.cargando { opacity: 0.6; pointer-events: none; }

/* ── Selector de límite de registros (admin) ─────────────── */
.btn-limite {
  background: white;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 5px 14px;
  font-size: var(--f-xs);
  font-weight: 700;
  color: var(--texto-suave);
  cursor: pointer;
  font-family: var(--fuente);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-limite.activo {
  border-color: var(--verde);
  color: var(--verde);
  background: var(--verde-claro);
}

/* ── Login / Registro (login.php) ────────────────────────── */
.login-tabs {
  display: flex;
  border-bottom: 2px solid var(--borde-suave);
  margin-bottom: 24px;
  gap: 4px;
}
.login-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 12px 8px;
  font-size: var(--f-sm);
  font-weight: 700;
  color: var(--texto-suave);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: var(--fuente);
}
.login-tab.activo {
  color: var(--verde);
  border-bottom-color: var(--verde);
}

/* ── Ticket preview paso 2 ───────────────────────────────── */
.ticket-preview {
  background: #fff;
  border: 2px solid var(--verde);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.ticket-preview-header {
  background: var(--verde);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ticket-preview-logo {
  font-size: 28px;
}

.ticket-preview-titulo {
  font-size: var(--f-md);
  font-weight: 700;
  color: #fff;
}

.ticket-preview-subtitulo {
  font-size: var(--f-xs);
  color: rgba(255,255,255,0.8);
}

.ticket-preview-jugadas {
  padding: 16px 18px;
  border-bottom: 1px dashed var(--borde);
}

.ticket-preview-footer {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: var(--verde-claro, #f0faf0);
}

.ticket-preview-label {
  font-size: var(--f-sm);
  color: var(--verde-oscuro);
  font-weight: 700;
  text-transform: uppercase;
}

.ticket-preview-monto {
  font-size: var(--f-xl);
  font-weight: 700;
  color: var(--verde);
}


/* ── Raspadita ──────────────────────────────────────────── */
.raspadita-card {
  background: var(--superficie);
  border-radius: var(--radio);
  padding: 20px;
  text-align: center;
  border: 1px solid var(--borde);
}
.raspadita-sub {
  font-size: var(--f-sm);
  color: var(--texto-suave);
  margin-bottom: 16px;
}
.raspadita-grid {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
.raspadita-item {
  position: relative;
  width: 64px;
  height: 64px;
}
.raspadita-numero {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: var(--verde);
  background: var(--superficie);
  border-radius: var(--radio-sm);
  border: 2px solid var(--verde);
}
.raspadita-canvas {
  position: absolute;
  inset: 0;
  border-radius: var(--radio-sm);
  cursor: crosshair;
  touch-action: none;
}
.raspadita-btn {
  background: var(--verde);
  color: white;
  border: none;
  border-radius: var(--radio-sm);
  padding: 10px 24px;
  font-size: var(--f-sm);
  font-weight: 700;
  font-family: var(--fuente);
  cursor: pointer;
}