/* ============================================================
   QUINIELA REVANCHITA — tema ROJO
   Mismo layout/estructura que quiniela_extra.css (tema AMARILLO).
   Cambia únicamente las variables de color para mantener ambas
   quinielas visualmente equivalentes, como pide el diseño.
============================================================ */
:root{
  --accent-1:#f0524a;
  --accent-2:#8f1010;
  --accent-3:#3d0303;
  --accent-solid:#dc2626;
  --accent-ink:#7f1d1d;
  --accent-soft:rgba(220,38,38,.10);
  --accent-soft-2:rgba(220,38,38,.20);
  --accent-shadow:rgba(220,38,38,.35);

  --bg:#f6f4f2;
  --ink:#1c1917;
  --soft:#78716c;
  --line:#e7e2dd;
  --card:#ffffff;

  --ok:#16a34a;
  --warn:#eab308;
  --info:#2563eb;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:'Roboto',Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 10% -5%, var(--accent-soft), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(0,0,0,.05), transparent 30%),
    linear-gradient(180deg,#fbfaf9 0%,var(--bg) 100%);
  background-attachment:fixed;
}

body[data-fondo]{
  background-image:
    linear-gradient(180deg, rgba(246,244,242,.94), rgba(246,244,242,.97)),
    var(--fondo);
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.qm-page{
  max-width:560px;
  margin:0 auto;
  padding:18px 14px 46px;
}

/* ==========================
   TARJETA PRINCIPAL
========================== */
.qm-card{
  background:var(--card);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(28,25,23,.16), 0 2px 0 rgba(255,255,255,.6) inset;
  border:1px solid rgba(28,25,23,.06);
}

.qm-card-header{
  position:relative;
  padding:18px 54px 20px 108px;
  min-height:88px;
  color:#fff;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(115deg, var(--accent-1) 0%, var(--accent-2) 55%, var(--accent-3) 100%);
  box-shadow:0 10px 26px var(--accent-shadow);
}

.qm-card-header img{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:82px;
  height:82px;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

.qm-titulo{
  letter-spacing:.4px;
}

.qm-subtitulo{
  opacity:.94;
  letter-spacing:.3px;
}

.qm-close{
  position:absolute;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
  background:rgba(0,0,0,.22);
  color:#fff;
  font-size:16px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.15s ease;
}
.qm-close:hover{background:rgba(0,0,0,.38); transform:translateY(-1px)}

/* ==========================
   LISTA DE PARTIDOS
========================== */
.qm-partidos{
  padding:14px 14px 4px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.qm-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:8px 10px;
  box-shadow:0 4px 12px rgba(28,25,23,.05);
  transition:.15s ease;
}
.qm-row:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(28,25,23,.09);
  border-color:var(--accent-soft-2);
}

.qm-team{
  display:flex;
  align-items:center;
  gap:7px;
  flex:1;
  min-width:0;
}
.qm-team-visit{ justify-content:flex-end; }

.qm-team-name{
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:88px;
}

.qm-logo{
  width:26px;
  height:26px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));
}

.qm-empate{ flex:0 0 auto; }

.qm-pick{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fbfaf9;
  color:var(--soft);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.12s ease;
  -webkit-tap-highlight-color:transparent;
}
.qm-pick:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(28,25,23,.12); }

.qm-pick[data-option="L"]{ color:#15803d; background:#f0fdf4; border-color:#bbf0cf; }
.qm-pick[data-option="E"]{ color:#a16207; background:#fffbeb; border-color:#fde08a; }
.qm-pick[data-option="V"]{ color:#1d4ed8; background:#eff6ff; border-color:#bfdbfe; }

.qm-pick.selected-L, .qm-pick.qm-picked-L{
  background:linear-gradient(135deg,#22c55e,#15803d);
  color:#fff; border-color:#15803d;
  box-shadow:0 6px 14px rgba(21,128,61,.35);
}
.qm-pick.selected-E, .qm-pick.qm-picked-E{
  background:linear-gradient(135deg,#facc15,#d97706);
  color:#402c00; border-color:#d97706;
  box-shadow:0 6px 14px rgba(217,119,6,.32);
}
.qm-pick.selected-V, .qm-pick.qm-picked-V{
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  color:#fff; border-color:#1d4ed8;
  box-shadow:0 6px 14px rgba(29,78,216,.35);
}

/* ==========================
   NOMBRE + AGREGAR
========================== */
.qm-nombre-row{
  display:flex;
  gap:8px;
  padding:14px 14px 18px;
}

.qm-input{
  flex:1;
  height:44px;
  border-radius:13px;
  border:1px solid var(--line);
  padding:0 14px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  background:#fbfaf9;
  outline:none;
  transition:.15s ease;
}
.qm-input:focus{
  border-color:var(--accent-solid);
  background:#fff;
  box-shadow:0 0 0 4px var(--accent-soft);
}
.qm-input::placeholder{ color:#a8a29e; font-weight:500; }

.qm-btn{
  height:44px;
  border:0;
  border-radius:13px;
  padding:0 16px;
  color:#fff;
  font-size:12.5px;
  font-weight:900;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap;
  cursor:pointer;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  box-shadow:0 10px 20px var(--accent-shadow);
  transition:.15s ease;
}
.qm-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.qm-btn:active{ transform:translateY(0); }

.qm-btn-add{ min-width:126px; }

/* ==========================
   VISTA PREVIA
========================== */
.qm-preview{
  margin:0 auto 12px;
  max-width:520px;
  min-height:20px;
  padding:10px 14px;
  border-radius:14px;
  text-align:center;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  background:linear-gradient(120deg,var(--accent-2),var(--accent-1));
  box-shadow:0 10px 22px var(--accent-shadow);
}

/* ==========================
   BOTONES INFERIORES
========================== */
.qm-controles2{ padding:0 14px; }

.qm-btn-enviar{
  background:linear-gradient(135deg,#25d366,#128c7e);
  box-shadow:0 10px 20px rgba(18,140,126,.32);
}
.qm-btn-red{
  background:linear-gradient(135deg,#ef4444,#991b1b);
  box-shadow:0 10px 20px rgba(153,27,27,.28);
}

.qm-controles-bottom{
  display:flex;
  gap:8px;
  padding:12px 14px 0;
}
.qm-controles-bottom .qm-btn{ flex:1; }

.qm-btn-sec{
  background:linear-gradient(135deg,#7c3aed,#4c1d95);
  box-shadow:0 10px 20px rgba(76,29,149,.28);
}

/* ==========================
   TABLA FINAL (QUINIELAS AGREGADAS)
========================== */
.qm-tabla-final{
  margin:14px 14px 18px;
}

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

.qm-save-cols{
  flex:1;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 6px;
}

.qm-save-cell{
  font-size:11px;
  font-weight:800;
  color:var(--ink);
  background:var(--accent-soft);
  border-radius:7px;
  padding:3px 7px;
  white-space:nowrap;
}
.qm-save-cols .qm-save-cell:nth-last-child(2){
  background:transparent;
  padding-left:2px;
  color:var(--accent-ink);
  text-transform:uppercase;
  letter-spacing:.2px;
}
.qm-save-cols .qm-save-cell:last-child{
  background:transparent;
  color:var(--soft);
  padding-left:0;
}

.qm-save-del{
  flex:0 0 26px;
  width:26px;
  height:26px;
  border:0;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ef4444,#991b1b);
  box-shadow:0 6px 14px rgba(153,27,27,.32);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ==========================
   MANITAS TUTORIAL
========================== */
.qm-hand img{ filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }

/* ==========================
   RESPONSIVE
========================== */
@media (max-width:420px){
  .qm-card-header{ padding:16px 46px 18px 92px; min-height:78px; }
  .qm-card-header img{ width:68px; height:68px; }
  .qm-team-name{ max-width:66px; font-size:11px; }
  .qm-logo{ width:22px; height:22px; }
  .qm-pick{ width:31px; height:31px; min-width:31px; font-size:12px; }
  .qm-nombre-row{ flex-direction:column; }
  .qm-btn-add{ width:100%; }
}