/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

/* FONDO + CENTRADO */
body {
    min-height: 100vh;
    padding: 20px;
    color: #fff;
    background: linear-gradient(135deg, #0a1b3d, #061024 50%, #030914);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    overflow-x: hidden;
}

/* Para pantallas pequeñas (móvil) */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }
}

/* IMAGEN CENTRAL DINÁMICA (fondo que se sube desde el panel admin).
   Se pinta en un bloque fijo, centrado horizontalmente y limitado a
   1400px con "contain" (no "cover"), así queda como una isla en medio
   de la página en vez de tapar todo el fondo de los costados. El valor
   de --fondo se define inline en el <body> desde el PHP; si no hay
   fondo configurado, simplemente no se dibuja nada (sin default). */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    height: 100%;
    background: var(--fondo) center no-repeat;
    background-size: contain;
    z-index: -1;
}

/* ==========================
   FRANJAS LATERALES "EXTRA"
   Solo en pantallas anchas, donde sobra espacio a los costados.
========================== */
.qm-side-strip{
  position:fixed;
  top:0;
  bottom:0;
  width:38px;
  background:linear-gradient(180deg,#fcd34d,#f59e0b 55%,#b45309);
  box-shadow:0 0 24px rgba(0,0,0,.35) inset;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
.qm-side-strip span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:#fff;
  font-weight:900;
  font-size:16px;
  letter-spacing:4px;
  white-space:nowrap;
  text-shadow:0 0 8px rgba(255,241,138,.9), 0 0 18px rgba(255,197,49,.55), 0 2px 3px rgba(0,0,0,.6);
}
.qm-side-left{ left:0; }
.qm-side-right{ right:0; }

@media (max-width:900px){
  .qm-side-strip{ display:none; }
}

/* CONTENEDOR */
.qm-page {
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
}

/* Zoom en pantallas chicas, como lo tenían. La alineación de las
   manitas ahora se calcula MIDIENDO el efecto real del zoom en el
   navegador del usuario (ver script), en vez de asumirlo — así
   funciona igual en iPhone/Safari que en Android/Chrome. */
@media (max-width:480px){
  body{ zoom:0.9; }
}


/* ===========================
   CARD PRINCIPAL
=========================== */
.qm-card {
    position: relative;
    background: linear-gradient(to bottom, #fcd34d, #f59e0b, #b45309);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);
}

/* Franjas amarillas "EXTRA" pegadas a los costados de la tarjeta
   (además de las que están a los costados de toda la página). */
.qm-card-strip{
  position:absolute;
  top:0;
  bottom:0;
  width:16px;
  background:linear-gradient(180deg,#fcd34d,#f59e0b 55%,#b45309);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:5;
  pointer-events:none;
}
.qm-card-strip span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:#fff;
  font-weight:900;
  font-size:9.5px;
  letter-spacing:2.5px;
  white-space:nowrap;
  text-shadow:0 0 6px rgba(255,241,138,.9), 0 0 12px rgba(255,197,49,.5);
}
.qm-card-strip-left{ left:0; }
.qm-card-strip-right{ right:0; }

/* Header */
.qm-card-header {
    position: relative;
    background: linear-gradient(to bottom, #fcd34d, #eab308, #b45309);
    padding: 10px 52px 14px 16px;
    text-align: center;
    display:flex;
    align-items:center;
    justify-content:center;
}

.qm-card-header img{
    width:52px;
    max-width:30%;
    height:auto;
    position:absolute;
    left:26px;
    top:8px;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));
}

.qm-card-header-text{
    margin-left:34px;
    max-width:220px;
}

.qm-titulo {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.2;
    text-shadow: 3px 3px 5px rgba(0,0,0,1);
}

.qm-subtitulo {
    font-size: 12.5px;
    margin-top: 3px;
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 2px 2px 4px rgba(0,0,0,1);
}

.qm-close {
    position: absolute;
    top: 8px;
    right: 26px;
    border: none;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 14px;
}


/* ===========================
   PARTIDOS
=========================== */
.qm-partidos {
    background: #ffffff;
    padding: 8px 22px 12px;
    position: relative;
    overflow: hidden;
}

.qm-partidos::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    background: url("../images/extralogo.png") center no-repeat;
    background-size: contain;
    opacity: 0.07;
    pointer-events: none;
    z-index: 1;
}

.qm-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 2fr 0.6fr 2fr;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #e3e3e3;
}

.qm-row:last-of-type {
    border-bottom: none;
}

.qm-team {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    min-width: 105px;
}

.qm-team-local { justify-content: flex-start; }
.qm-team-visit { justify-content: flex-end; }

.qm-empate {
    display: flex;
    justify-content: center;
}

.qm-team-name {
    font-size: 11.5px;
    font-weight: 700;
    color: #222;
    text-align: center;
    flex: 1;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    min-width: 0;
}

.qm-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ===========================
   CASILLAS CUADRADAS L / E / V
=========================== */
.qm-pick {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 2px solid #888;
    background: #fff;
    cursor: pointer;
    transition: 0.15s ease;
    color: #555 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 900;
}

.qm-pick:hover {
    background: #f3f3f3;
}

/* Todas las opciones se pintan de AMARILLO al activarse (igual que en
   Revanchita se pintan todas de rojo, sin distinguir L/E/V). */
.qm-pick.activo {
    background: linear-gradient(to bottom right, #fcd34d, #f59e0b) !important;
    border-color: #b45309 !important;
    color: #3d2103 !important;
}

/* ===========================
   BOTONES PRINCIPALES (look premium: degradado en
   3 tonos, brillo superior, mejor hover/active)
=========================== */
.qm-btn{
  position:relative;
  height:44px;
  border:0;
  border-radius:14px;
  padding:0 16px;
  color:#fff;
  font-size:12.5px;
  font-weight:900;
  letter-spacing:.3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap;
  cursor:pointer;
  isolation:isolate;
  background:linear-gradient(155deg,#fcd34d 0%,#f59e0b 65%,#b45309 100%);
  box-shadow:0 10px 20px rgba(217,119,6,.35), 0 1px 0 rgba(255,255,255,.25) inset;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.qm-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%);
  opacity:.9;
  z-index:-1;
  pointer-events:none;
}
.qm-btn i{ font-size:13px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.qm-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 14px 26px rgba(217,119,6,.35), 0 1px 0 rgba(255,255,255,.3) inset; }
.qm-btn:active{ transform:translateY(0) scale(.97); filter:brightness(.98); }

.qm-btn-add{ min-width:126px; background:linear-gradient(155deg,#fcd34d 0%,#eab308 55%,#b45309 100%); box-shadow:0 10px 20px rgba(217,119,6,.35), 0 1px 0 rgba(255,255,255,.28) inset; color:#3d2103; }

/* ===========================
   BOTÓN "PASTILLA" (círculo blanco + texto) — solo AGREGAR
=========================== */
.qm-btn-pill{
  position:relative;
  justify-content:flex-start;
  padding-left:44px;
  padding-right:14px;
  border-radius:999px;
  gap:0;
  overflow:visible;
}
.qm-btn-icon{
  position:absolute;
  left:-2px;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
  flex-shrink:0;
}
.qm-btn-icon i{ font-size:17px; color:#b45309; animation:none !important; filter:none; }
.qm-btn-text{
  flex:1;
  text-align:center;
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.3px;
}
.qm-btn-enviar{
  background:linear-gradient(155deg,#34e08a 0%,#25d366 45%,#0f8f6b 100%);
  box-shadow:0 10px 22px rgba(18,140,126,.35), 0 1px 0 rgba(255,255,255,.3) inset;
}
.qm-btn-red{
  background:linear-gradient(155deg,#f16565 0%,#ef4444 55%,#991b1b 100%);
  box-shadow:0 10px 20px rgba(153,27,27,.3), 0 1px 0 rgba(255,255,255,.25) inset;
}
#btnRandom{
  background:linear-gradient(155deg,#38bdf8 0%,#0284c7 55%,#075985 100%) !important;
  box-shadow:0 10px 20px rgba(2,132,199,.32), 0 1px 0 rgba(255,255,255,.28) inset;
}
.qm-btn-sec{
  background:linear-gradient(155deg,#b6b0ac 0%,#8f8983 55%,#6b665f 100%);
  box-shadow:0 6px 14px rgba(28,25,23,.18), 0 1px 0 rgba(255,255,255,.18) inset;
  opacity:.85;
  color:#fff;
}
.qm-btn-sec:hover{ opacity:1; }
.qm-btn-sec.dobles-activo{
  background:linear-gradient(155deg,#9d5cf5 0%,#7c3aed 55%,#4c1d95 100%);
  box-shadow:0 10px 20px rgba(76,29,149,.3), 0 1px 0 rgba(255,255,255,.25) inset;
  opacity:1;
}

/* ===========================
   VISTA PREVIA
=========================== */
.qm-preview {
    margin:16px auto 12px;
    max-width:520px;
    background: linear-gradient(120deg,#f59e0b,#fcd34d);
    color: #3d2103;
    padding: 8px 14px;
    border-radius: 14px;
    font-weight: 800;
    text-align: center;
    font-size: 19px;
    letter-spacing: 3px;
    box-shadow:0 10px 22px rgba(217,119,6,.35), 0 1px 0 rgba(255,255,255,.25) inset;
}

/* ===========================
   ENTRADA NOMBRE
=========================== */
.qm-nombre-row {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.qm-input{
  flex:1;
  height:44px;
  border-radius:13px;
  border:1px solid #e6e9f5;
  padding:0 14px;
  font-size:13.5px;
  font-weight:600;
  color:#1c1917;
  background:#fbfaf9;
  outline:none;
  transition:.18s ease;
}
.qm-input:focus{
  border-color:#f59e0b;
  background:#fff;
  box-shadow:0 0 0 4px rgba(217,119,6,.15);
}
.qm-input::placeholder{ color:#a8a29e; font-weight:500; }

/* ===========================
   BOTONES INFERIORES
=========================== */
.qm-controles2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

.qm-controles2-izq{
    display:flex;
    gap:8px;
}

#resumenCosto{
    text-align:right;
    font-size:14px;
    font-weight:700;
    color:#fff;
    line-height:1.3;
    text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.5);
}
#resumenCosto strong{ font-weight:900; }
#resumenCosto .qm-resumen-cant{ font-size:11px; opacity:.85; margin-top:1px; }

.qm-controles-bottom {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.qm-controles-bottom .qm-btn {
    flex: 1;
}

/* ===========================
   TABLA FINAL (diseño anterior, compatible con los botones premium)
=========================== */
.qm-tabla-final{
  margin-top:16px;
}

.qm-save-row{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid #e6e9f5;
  border-radius:14px;
  padding:8px 10px;
  margin-bottom:8px;
  box-shadow:0 4px 12px rgba(28,25,23,.06);
}
.qm-save-row:last-child{ margin-bottom:0; }

.qm-save-cols{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.qm-save-cell{
  padding:3px 7px;
  text-align:center;
  background:#fef3c7;
  border-radius:6px;
  min-width:20px;
  font-size:12px;
  font-weight:800;
  color:#1c1917;
}

.qm-save-cell.qm-save-nombre{
  max-width:110px;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:#1a1406;
  color:#fff;
}
.qm-save-cell.qm-save-cant{
  background:#f59e0b;
  color:#3d2103;
}

.qm-save-del{
  margin-left:5px;
  border:none;
  background:#dc2626;
  color:#fff;
  border-radius:50%;
  width:24px;
  height:24px;
  font-size:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:.15s;
}
.qm-save-del:hover{ transform:scale(1.15); }

/* ===========================
   MANITAS TUTORIAL — animación de pulso real
=========================== */
.qm-hand{
  display:none;
  position:absolute;
  z-index:9999;
  pointer-events:none;
  isolation:isolate;
}
.qm-hand::before{
  content:"";
  position:absolute;
  top:6px;
  left:6px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(252,211,77,.55), rgba(252,211,77,0) 70%);
  animation:qmPingRing 1.5s ease-out infinite;
  z-index:-1;
}
.qm-hand img{
  display:block;
  width:60px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
  transform-origin:65% 20%;
  animation:qmHandTap 1.1s ease-in-out infinite;
}

@keyframes qmHandTap{
  0%, 100% { transform:scale(1) translateY(0) rotate(0deg); }
  45%      { transform:scale(.88) translateY(5px) rotate(-2deg); }
  60%      { transform:scale(1.02) translateY(0) rotate(0deg); }
}

@keyframes qmPingRing{
  0%   { transform:scale(.5);  opacity:.65; }
  70%  { transform:scale(2.4); opacity:0; }
  100% { opacity:0; }
}

/* ===========================
   BADGE "POWERED BY"
=========================== */
.qm-powered-badge{
    margin:20px auto 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    background:linear-gradient(150deg,#2a2422 0%,#171311 60%,#0a0807 100%);
    padding:6px 12px;
    border-radius:14px;
    text-decoration:none;
    width:max-content;
    box-shadow:0 6px 14px rgba(0,0,0,.32);
}
.qm-powered-badge img{ width:22px; height:22px; border-radius:50%; }
.qm-powered-badge span{ color:#fff; font-size:11px; font-weight:700; }

/* Ya no se usa "zoom": esa propiedad no es estándar y Safari/iPhone la
   maneja distinto a Chrome/Android, lo que desalineaba las manitas en
   algunos equipos. Todo lo demás queda exactamente igual que antes. */

@media (prefers-reduced-motion: reduce){
  .qm-hand img, .qm-hand::before{ animation:none !important; }
}