/* ============================================================
   "Prepará la próxima fecha" (Fase Reactivación) — una card de
   estado real (Fantasy/Penca/Trivia/Avisos) con UNA acción primaria.
   Mobile-first; hereda tokens de estadio.css con fallbacks propios.
   ============================================================ */
.prepara {
    position: relative;
    margin: 14px 0 0;
    border-radius: 18px;
    padding: 16px 16px 18px;
    background: linear-gradient(180deg, rgba(21, 51, 110, .55), rgba(11, 31, 82, .35));
    border: 1px solid rgba(151, 177, 232, .22);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
/* P3.6 — el descarte sigue midiendo 30px a la vista (es secundario y no debe competir
   con la acción dorada); el área de toque llega a 44 con un pseudo-elemento invisible. */
.prepara__x {
    position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
    border: 0; border-radius: 9px; cursor: pointer; color: #9fb1e8;
    background: rgba(255, 255, 255, .06); font-size: 15px; line-height: 1;
}
.prepara__x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.prepara__x:hover { background: rgba(255, 255, 255, .12); color: #eaf1ff; }
.prepara__hd {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font-weight: 800; font-size: var(--fs-body-strong); color: #fff; letter-spacing: .01em;
}
.prepara__hd i { color: var(--gold, #ffc233); }

.prepara__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.prepara__chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 11px; border-radius: 11px; font-size: var(--fs-body-sm); font-weight: 700;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #cdd9f2;
}
.prepara__chip i { font-size: var(--fs-body-strong); }
.prepara__chip--done { color: #8fe3b4; border-color: rgba(99, 214, 155, .3); background: rgba(99, 214, 155, .08); }
.prepara__chip--todo { color: #ffdf9e; border-color: rgba(255, 194, 51, .34); background: rgba(255, 194, 51, .1); }
.prepara__chip--muted { color: #8fa2c9; opacity: .8; }

.prepara__cta {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 13px 14px; border-radius: 14px;
    background: rgba(255, 194, 51, .1); border: 1px solid rgba(255, 194, 51, .28);
}
.prepara__msg { flex: 1; min-width: 160px; font-size: var(--fs-body); font-weight: 600; color: #ffe9c2; line-height: 1.3; }
.prepara__act {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
    min-height: 44px;   /* P3.6: medía 39 — es la acción primaria de la card */
    border: 0; border-radius: 11px; padding: 11px 16px; font-family: inherit; font-weight: 800; font-size: var(--fs-body);
    color: #08132e; background: linear-gradient(180deg, #ffd45e, #ffc233); box-shadow: 0 6px 16px rgba(255, 194, 51, .26);
}
/* press feedback: lo da .tap del sistema (respeta prefers-reduced-motion); la regla
   local translateY(1px) pisaba el transform de .tap:active y se quitó */
.prepara__act[disabled] { opacity: .6; cursor: default; }
.prepara__note { width: 100%; margin: 8px 2px 0; font-size: var(--fs-body-sm); color: #9fb1e8; }

/* ---- modo integrado: estado de la fecha DENTRO de la card de próximos (#fechaSlot) ---- */
.fecha8 { border-top: 1px solid rgba(151, 177, 232, .14); padding-top: 12px; }
.fecha8 .prepara__chips { margin-bottom: 10px; }
.fecha8 .prepara__msg { color: #ffe9c2; margin-bottom: 10px; }
.prepara__act--block { width: 100%; justify-content: center; }
.fecha8__ok {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 14px; border-radius: 12px; font-size: var(--fs-body); font-weight: 700;
    color: #8fe3b4; background: rgba(99, 214, 155, .08); border: 1px solid rgba(99, 214, 155, .26);
}
.fecha8__ok i { font-size: 1.05rem; }

/* Desktop: mensaje a la izquierda + botón dorado contenido a la derecha (patrón de
   .prepara__cta standalone). Una barra dorada de 1100px pesaba más que el propio hero. */
@media (min-width: 720px) {
    .fecha8 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
    .fecha8 .prepara__chips { flex: 0 0 100%; }
    .fecha8 .prepara__msg { flex: 1 1 auto; margin-bottom: 0; }
    .fecha8 .prepara__act--block { width: auto; flex: none; padding-inline: 22px; }
    .fecha8 .fecha8__ok { flex: 1 1 100%; }
}