/* ─── 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); }
.fi-pill-lugar { background: var(--brand-warm); color: var(--brand); border: 1px solid var(--brand-warm-border); }
.fi-pill-maps { background: var(--brand-warm); color: var(--brand); border: 1px solid var(--brand-warm-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-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); }

.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; }

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

.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;
  border: 1px solid var(--border); background: var(--surface-2);
  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"] { 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; }
.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); }
}

/* ── 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-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); }