/* ─── fecha-item cards (s4) ─────────────────────────────────────── */
.fecha-item { position: relative; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; background: var(--surface-2); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.fecha-item.sel { border-color: var(--brand); background: var(--brand-warm); }
.fecha-item.agotada { opacity: 0.5; cursor: not-allowed; background: var(--disabled-bg); border-color: var(--disabled-border); }
.fecha-item.agotada-pendiente { opacity:1; cursor:pointer; }
.fecha-item.agotada-pendiente .fi-circle { opacity:0.35; }

.fi-header { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 12px; cursor: pointer; }
.fi-content { flex: 1; min-width: 0; }
.fi-title { font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.fi-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.fi-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font-size: 0.72rem; font-weight: 600; }
.fi-pill .material-symbols-outlined { font-size: 0.85rem; }
.fi-pill-hora { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border-soft); }
/* Cyan -- "información de ubicación" (--cyan/-20/-border, css/colors.css),
   unificado con el pill fusionado de la card de "Mis reservas" (ver
   .res-card-nueva .rn-top .fi-pill-lugar, css/home.css) -- antes tinte de
   marca/naranja-rojizo, un 3er color distinto para el mismo concepto. */
.fi-pill-lugar { background: var(--cyan-20); color: var(--cyan); border: 1px solid var(--cyan-border); text-decoration: none; }
.fi-pill-maps { background: var(--cyan-20); color: var(--cyan); border: 1px solid var(--cyan-border); text-decoration: none; }
.fi-pill-fin { background: var(--info-btn-bg); color: var(--info); border: 1px solid var(--info-btn-hover); }
.fi-pill-dur { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-bdr); }
.fi-pill-patines { background: var(--warning-bg); color: var(--amber); border: 1px solid var(--amber); }
.fi-pill-equip { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-bdr); }
.fi-pill-validez { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border-soft); }

.fi-circle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--brand-30); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: background 0.2s, border-color 0.2s; }
.fi-circle .material-symbols-outlined { font-size: 1rem; color: transparent; }
.fecha-item.sel .fi-circle { background: var(--brand); border-color: var(--brand); }
.fecha-item.sel .fi-circle .material-symbols-outlined { color: var(--white); }

/* Skeleton de #lista-fechas mientras cargarFechas() (js/reservas.js) espera
   la respuesta real — mismo shimmer que ya usa #gsignin-skeleton-main
   (index.html), sobre bloques con la forma de un .fi-header real (título +
   2 pills + círculo). */
.fi-skeleton .fi-header { align-items: center; cursor: default; }
.fi-skel-block { background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; animation: skeletonShimmer 1.2s ease-in-out infinite; border-radius: 4px; }
.fi-skel-title { width: 55%; height: 14px; margin-bottom: 10px; }
.fi-skel-pill { width: 72px; height: 22px; border-radius: 99px; }
.fi-skel-circle { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }

.fi-footer { border-top: 1px solid var(--border-2); padding: 10px 16px; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: background 0.2s; }
.fi-footer:hover { background: var(--brand-subtle); }
.fi-footer-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.fi-footer-chevron { font-size: 1rem; color: var(--brand); transition: transform 0.3s; }
.fecha-item.open .fi-footer-chevron { transform: rotate(180deg); }

.fi-body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-sheet); }
.fecha-item.open .fi-body { max-height: 400px; }
.fi-body-inner { padding: 14px 16px 16px; border-top: 1px solid var(--border-2); }
.fi-desc { font-size: 0.8rem; color: var(--text-2); line-height: 1.65; margin-bottom: 12px; }
.fi-extra { display: flex; gap: 7px; flex-wrap: wrap; }

.fecha-razon { font-size: 0.8rem; color: var(--brand); margin-top: 4px; font-weight: 500; }

.pago-metodo { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 14px; background: var(--surface-2); }
.pago-header { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem; color: var(--text); margin-bottom: 0; }
.pago-icon { font-size: 1.4rem; }
.pago-fila { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.88rem; border-bottom: 1px solid var(--border); }
.pago-fila:last-child { border-bottom: none; padding-bottom: 0; }
.pago-label { color: var(--muted); font-weight: 500; }
.pago-valor { font-weight: 700; color: var(--text); }

.total-box { background: var(--success-bg); border: 1px solid var(--success-bdr); border-radius: 12px; padding: 18px; text-align: center; font-weight: 800; font-size: 1.1rem; color: var(--success); box-shadow: 0 4px 14px var(--success-shadow); }
.total-box .total-detalle { font-size: 0.85rem; font-weight: 600; color: var(--success-bright); margin-top: 6px; }
.total-box .total-fechas-lista { font-size: 0.78rem; font-weight: 600; color: var(--success-bright); margin-top: 8px; line-height: 1.6; text-align: center; }

/* "Continuar" de s4 como card flotante (ver "Cambios recientes", pedido
   explícito -- Opción B): `.btn`/`.btn-outline` (css/ui.css) ya le dan
   `border-radius:12px` en las 4 esquinas (nunca fue full-bleed de ancho,
   `.cta-footer-fixed` ya lo insetea con `padding: 12px var(--space-screen)`)
   -- lo que faltaba era que se leyera como una CAPA separada de la nav de
   abajo en vez de una continuación: `--shadow-lg` (mismo token de elevación
   ya usado en el resto de la app, no un valor inventado) + el gap real de
   +14px ya sumado a `#cta-footer-s4` (css/estilos.css) logran el efecto
   "flotante" combinados -- ninguno de los 2 solos alcanzaba. */
#btn-s4-continuar { box-shadow: var(--shadow-lg); }

/* Panel de total fijo de s4 (#s4-total-fijo, ver actualizarTotalS4() en
   js/reservas.js) — hijo directo de #cta-footer-s4 (a su vez hijo directo de
   <body>, ver .cta-footer-fixed), anclado justo encima del botón "Continuar",
   siempre visible mientras se scrollea la lista de fechas/meses. Entrada/
   salida animada (fade + slide sutil, --ease-sheet) en vez de un aparecer/
   desaparecer seco — .mostrar es la única clase que togglea JS, el resto
   (display/innerHTML) lo maneja actualizarTotalS4() directo.
   max-height sumado (ver "Cambios recientes" — fade-out desprolijo al
   deseleccionar todas las fechas): antes solo transicionaban opacity/
   transform, así que el alto real (~94px) se mantenía fijo durante los
   0.32s del fade y recién colapsaba de golpe cuando actualizarTotalS4()
   aplicaba display:none a los 350ms — el "Continuar" de abajo saltaba de
   una sola vez en vez de acompañar el cierre. .success-bg (rgba, 8-10% de
   opacidad) hace que ese fade de opacity casi no se note a simple vista
   contra el fondo de #cta-footer-s4 (var(--bg), muy oscuro en dark mode) —
   sin el colapso de alto en simultáneo, el resultado se veía como "nada
   pasa, y de golpe desaparece" en vez de un cierre prolijo. Mismo patrón
   ya usado acá mismo para #s4-cupon-wrapper (ver esa entrada, abajo). */
#s4-total-fijo {
  opacity: 0; transform: translateY(8px); margin-bottom: 0; max-height: 0; overflow: hidden;
  transition: opacity 0.32s var(--ease-sheet), transform 0.32s var(--ease-sheet), max-height 0.32s var(--ease-sheet), margin-bottom 0.32s var(--ease-sheet);
}
#s4-total-fijo.mostrar { opacity: 1; transform: translateY(0); max-height: 180px; margin-bottom: 12px; }

/* Colapso animado de #s4-cupon-wrapper al aplicar el cupón (ver
   toggleCupon()/quitarCupon()/_s4SincronizarCuponWrapper() en js/reservas.js)
   — opacity Y max-height/margin en simultáneo (mismo timing/curva), para que
   #lista-fechas debajo se deslice hacia arriba acompañando el cierre del
   espacio en tiempo real, no recién cuando termina el fade. */
#s4-cupon-wrapper {
  overflow: hidden; max-height: 0; opacity: 0; margin: 0;
  transition: opacity 0.32s var(--ease-sheet), max-height 0.32s var(--ease-sheet), margin 0.32s var(--ease-sheet);
}
#s4-cupon-wrapper.mostrar { max-height: 300px; opacity: 1; margin: 0 0 18px; }
.s4-cupon-aplicado-linea { font-size: 0.78rem; font-weight: 700; color: var(--amber-dark); margin-top: 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.tipo-pago-wrapper { border-radius: 12px; margin-bottom: 20px; }

/* ── Nav fija de s4 (ver "Cambios recientes") ──────────
   `#s4-nav` (`.app-nav.app-nav-fixed`, mismo patrón que `#home-nav`) tiene 2
   variantes mutuamente excluyentes según `canPayMonthly() && !E.reagendando`
   (`_s4ActualizarNav()`, js/reservas.js): con selección Por clase/Mensual
   (`#tp-seg`, reubicado acá desde el body de la card -- antes vivía dentro
   de `#s4-tipo-pago-wrapper`, que ahora solo envuelve el hint de cupón) sin
   título ni ícono decorativo; o con el título de siempre (`#s4-titulo`), sin
   el selector. `flex:1` + `justify-content:center` centra `#tp-seg`
   (`display:inline-flex`, se ajusta a su contenido) dentro del espacio
   disponible de la nav. La flecha atrás (`#s4-nav-back`) ya NO es parte de
   esta alternancia (ver "Cambios recientes" -- antes vivía forzada a
   `display:none` en esta variante sin importar el origen): es independiente,
   así que puede convivir con el selector cuando corresponde mostrarla --
   en ese caso `#tp-seg` queda centrado en el espacio restante a la derecha
   de la flecha, no en el ancho total de la barra (corrimiento leve hacia la
   derecha, aceptado). */
.s4-nav-seg-wrap { flex: 1; display: flex; justify-content: center; }

.nota-pago-wrapper { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-top: 20px; }
.nota-pago-label { display: block; font-size: 0.82rem; font-weight: 800; color: var(--neutral-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.nota-pago-input { width: 100%; border: 0px solid var(--border-light); border-radius: 10px; font-size: 0.88rem; }
.nota-pago-hint { font-size: 0.82rem; color: var(--muted); margin-top: 8px; line-height: 1.5; }

.chk-pago-label { display: flex; align-items: center; gap: 12px; background: var(--warning-bg); border: 1px solid var(--warning-bdr); border-radius: 12px; padding: 16px; margin: 20px 0; cursor: pointer; font-size: 0.92rem; font-weight: 500; color: var(--text-2); line-height: 1.5; transition: all 0.3s; }
.chk-pago-label:hover { background: var(--amber-light); transform: scale(1.02); }
.chk-pago-label input { width: 20px; height: 20px; accent-color: var(--amber-accent); flex-shrink: 0; margin-top: 2px; cursor: pointer; }

.reserva-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; background: var(--surface-2); transition: all 0.3s var(--ease-sheet); }
.reserva-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px var(--black-sm); border-color: var(--border-mid); }
.reserva-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.reserva-fecha { font-weight: 800; font-size: 1rem; color: var(--text); }
.reserva-detalle { font-size: 0.9rem; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.btn-cancelar { width: 100%; margin-top: 12px; padding: 12px; background: var(--danger-bg); color: var(--danger); border: 0px solid var(--danger-bdr); border-radius: 10px; font-size: 0.9rem; font-weight: 800; cursor: pointer; transition: all 0.2s; }
.btn-cancelar:hover { background: var(--error-bg); transform: translateY(-2px); box-shadow: 0 4px 8px var(--error-light); }

.aviso-pendiente { background: var(--warning-bg); border: 1px solid var(--warning-bdr); border-radius: 10px; padding: 14px 16px; font-size: 0.9rem; font-weight: 500; color: var(--text-2); margin-bottom: 16px; text-align: center; line-height: 1.5; }

.meses-grid-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.meses-divider { grid-column: 1 / -1; height: 1px; background: var(--border); margin: 4px 0; }

.mes-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 11px 6px; border-radius: 99px;
  background: var(--brand-20);
  color: var(--muted); font-size: 0.8rem; font-weight: 700;
  text-align: center; cursor: pointer; transition: all 0.2s; user-select: none; line-height: 1;
}
.mes-item input[type="checkbox"], .mes-item input[type="radio"] { display: none; }
.mes-item:not(.mes-past):not(.mes-confirmado):hover { border-color: var(--brand-secondary); color: var(--text-2); }
.mes-item:has(input:checked):not(.mes-confirmado) { background: var(--brand); border-color: var(--brand); color: var(--white); }
.mes-past { opacity: 0.4; }
.mes-past:hover { opacity: 0.65; }
.mes-confirmado { background: var(--success-bg); border-color: var(--success-bdr); color: var(--success); cursor: default; pointer-events: none; opacity: 1; }
.mes-nombre { line-height: 1; }
.mes-badge { display: flex; align-items: center; gap: 3px; font-size: 0.6rem; font-weight: 700; color: var(--success); }
.mes-badge .material-symbols-outlined { font-size: 0.72rem; }

.btn-wp-inactivo, .btn-wp-activo, .btn-wp-grupo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 16px; border-radius: 12px; border: none;
  font-size: 0.88rem; font-weight: 800; cursor: pointer;
  text-decoration: none; transition: all 0.3s ease; letter-spacing: 0.3px; margin-top: 12px;
}
.btn-wp-inactivo { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-bdr); }
.btn-wp-inactivo:hover { background: var(--green-border); border-color: var(--success-bright); transform: translateY(-2px); box-shadow: 0 4px 12px var(--success-shadow-hover); }
.btn-wp-activo { background: var(--success-dark); color: var(--white); border: 0px solid var(--success-border-dark); pointer-events: none; }
.btn-wp-grupo { background: var(--wa-bg); color: var(--success); margin-top: 16px; }
.btn-wp-grupo:hover { background: var(--wa-bg-hover); border-color: var(--wa-brand); transform: translateY(-2px); }

.exito-icon { font-size: 4rem; text-align: center; margin-bottom: 16px; animation: popBounce 0.6s var(--ease-sheet); }
.exito-titulo { font-size: 1.5rem; font-weight: 800; color: var(--text); text-align: center; margin-bottom: 12px; }
.exito-texto { color: var(--muted); text-align: center; line-height: 1.6; font-size: 0.88rem; }
.exito-detalle { background: var(--green-light); border: 1px solid var(--green-border); border-radius: 12px; padding: 16px; margin: 20px 0; font-size: 0.9rem; color: var(--green-dark); text-align: left; white-space: pre-line; line-height: 1.6; box-shadow: 0 4px 12px var(--success-shadow); }

/* ─── segmented control tipo de pago ────────────────────────────── */
.tp-seg { display: inline-flex; position: relative; background: var(--brand-subtle); border: 1.5px solid var(--border); border-radius: 99px; }
.tp-slider { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 99px; background: var(--brand); z-index: 0; width: 0; }
.tp-slider.animado { transition: transform .35s cubic-bezier(.16,1,.3,1), width .35s cubic-bezier(.16,1,.3,1); }
.tp-opt { position: relative; z-index: 1; padding: 11px 22px; font-size: 0.88rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); transition: color .25s; user-select: none; white-space: nowrap; border-radius: 99px; }
.tp-opt.active { color: var(--white); }
.tp-cupon-ico { font-size: 1rem; }
/* Skeleton del selector Por clase/Mensual (#tp-seg, ver "Cambios recientes")
   mientras cargarFechas() (js/reservas.js) espera la respuesta real -- antes
   este selector se armaba completo (texto real, estado activo real) apenas
   se entraba a #s4, mientras el resto de la pantalla (#lista-fechas, mismo
   archivo) seguía mostrando su propio skeleton -- el selector "aparecía de
   golpe" contra el resto todavía shimmerizando. Reusa el `.tp-opt` REAL (no
   un bloque `.fi-skel-block` aparte superpuesto) -- mismo tamaño/padding
   exactos, cero riesgo de desajuste de layout entre el estado skeleton y el
   real -- solo pisa `color`/`background` con el mismo gradiente+animación
   que ya usa `.fi-skel-block` (mismo shimmer, sin duplicar el keyframe).
   `color:transparent` en el `<span>` de texto Y en el ícono de material
   symbols (pinta con `currentColor`, se oculta solo, sin regla aparte). */
.tp-seg-cargando .tp-slider { display: none; }
.tp-seg-cargando .tp-opt { color: transparent; background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; animation: skeletonShimmer 1.2s ease-in-out infinite; }
.tp-hint { display: none; align-items: flex-start; gap: 7px; font-size: 0.78rem; color: var(--purple); background: var(--purple-bg); border: 1px solid var(--purple-border-soft); border-radius: 10px; padding: 9px 12px; margin-top: 10px; line-height: 1.5; }
.tp-hint.visible { display: flex; }

/* ─── DARK MODE ──────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .fi-pill-hora { color: var(--dk-purple-text); }
  .fi-pill-fin  { color: var(--dk-info-text); }
  .fi-pill-validez { color: var(--dk-purple-text); }
}

/* ── Pills flujo equipamiento ────────────────── */
.equip-pills-bin { display:flex; gap:10px; margin-bottom:24px; }
.equip-pill-bin { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px 10px; border-radius:16px; border:1.5px solid var(--border-light); background:var(--surface-2); cursor:pointer; transition:all 0.15s; user-select:none; }
.equip-pill-ico { font-size:1.8rem; color:var(--muted); }
.equip-pill-label { font-size:0.82rem; font-weight:700; color:var(--muted); text-align:center; }
.equip-pill-bin:hover { border-color:var(--brand); background:var(--brand-light); }
.equip-pill-bin.sel-si { border-color:var(--success); background:var(--success-bg); }
.equip-pill-bin.sel-si .equip-pill-ico { color:var(--success); }
.equip-pill-bin.sel-si .equip-pill-label { color:var(--success-dark); }
.equip-pill-bin.sel-no { border-color:var(--brand); background:var(--brand-light); }
.equip-pill-bin.sel-no .equip-pill-ico { color:var(--brand); }
.equip-pill-bin.sel-no .equip-pill-label { color:var(--brand); }

.equip-tallas-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:8px; }
.equip-talla-pill { display:flex; align-items:center; justify-content:center; padding:14px 6px; border-radius:12px; border:1.5px solid var(--border-light); background:var(--surface-2); cursor:pointer; font-size:0.88rem; font-weight:700; color:var(--muted); transition:all 0.15s; user-select:none; }
.equip-talla-pill:hover { border-color:var(--brand); color:var(--brand); }
.equip-talla-pill.sel { border-color:var(--brand); background:var(--brand-light); color:var(--brand); }
.equip-talla-pill.agotada { opacity:0.35; cursor:not-allowed; pointer-events:none; }
.equip-talla-pill-no { flex:1 1 100%; padding:14px 16px; }

/* Skeleton de #tallas-grid (continuar_s3a(), js/reservas.js) — mismo shimmer
   que .fi-skel-block de arriba, sobre la forma real de un .equip-talla-pill. */
.equip-talla-pill.equip-skel { background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; animation: skeletonShimmer 1.2s ease-in-out infinite; border-color: transparent; cursor: default; }

.equip-pills-protec { display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.equip-pill-protec { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; border:1.5px solid var(--border-light); background:var(--surface-2); cursor:pointer; transition:all 0.15s; user-select:none; }
.equip-pico { font-size:1.2rem; color:var(--muted); flex-shrink:0; }
.equip-ptxt { flex:1; }
.equip-ptit { font-size:0.82rem; font-weight:700; color:var(--muted); }
.equip-psub { font-size:0.68rem; color:var(--muted); margin-top:2px; }
.equip-pcheck { width:22px; height:22px; border-radius:50%; border:2px solid var(--border-light); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.equip-pcheck .material-symbols-outlined { font-size:14px; color:transparent; }
.equip-pill-protec:hover { border-color:var(--brand); }
.equip-pill-protec.sel { border-color:var(--brand); background:var(--brand-light); }
.equip-pill-protec.sel .equip-pico { color:var(--brand); }
.equip-pill-protec.sel .equip-ptit { color:var(--brand); }
.equip-pill-protec.sel .equip-pcheck { background:var(--brand); border-color:var(--brand); }
.equip-pill-protec.sel .equip-pcheck .material-symbols-outlined { color:var(--white); }

#s4-cupon-wrapper .fi-circle { width:28px; height:28px; border-radius:50%; border:2px solid var(--brand-30); display:flex; align-items:center; justify-content:center; transition:background 0.2s, border-color 0.2s; flex-shrink:0; }
#s4-cupon-wrapper .fi-circle .material-symbols-outlined { font-size:1rem; color:transparent; transition:color 0.2s; }
#s4-cupon-wrapper .fi-circle.sel-cupon { background:var(--brand); border-color:var(--brand); }
#s4-cupon-wrapper .fi-circle.sel-cupon .material-symbols-outlined { color:var(--white); }

.chk-pago-label .fi-circle { flex-shrink:0; }
.chk-pago-label .fi-circle.sel-pago { background:var(--brand); border-color:var(--brand); }
.chk-pago-label .fi-circle.sel-pago .material-symbols-outlined { color:var(--white); }
.chk-pago-label.sel { background:var(--brand-warm); border-color:var(--brand); }

/* ─── MODAL WHATSAPP (s6, recordatorio de comprobante antes de volver a
   Mis Reservas) — mismas clases/valores que .modal-wp-* de
   inscripcion/inscripcion.css (mismo colors.css compartido), para que
   ambos modales se vean y animen idénticos. ─────────────────────────── */
.modal-wp-overlay {
  display: none; position: fixed; inset: 0; z-index: 9700;
  background: var(--overlay); align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.modal-wp-card {
  background: var(--bg);
  border-radius: 20px;
  padding: 28px 24px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
}
.modal-wp-overlay.modal-wp-visible .modal-wp-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal-wp-icono { font-size: 44px; margin-bottom: 12px; }
.modal-wp-card h3 { color: var(--text); margin-bottom: 8px; }
.modal-wp-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin-bottom: 20px; }
.modal-wp-card .btn-primary { display: flex; justify-content: center; margin-bottom: 12px; }