/* ============================================================
   Beauty Bar CRM — "Editorial Noir" (flujo de reserva de citas)
   Aislado a propósito: solo lo carga reservar.php. El resto de
   loyalty/ (tarjeta, registro) sigue con el look "Nude Elegance"
   ya aprobado — no se tocan sus estilos.
   Tokens y comportamiento tomados literal de la referencia de
   diseño (stitch/editorial_noir/DESIGN.md + los code.html de cada
   pantalla) y portados a CSS escrito a mano — sin Tailwind CDN,
   para no romper la convención "cero dependencias externas de JS"
   de este proyecto.
   ============================================================ */

:root {
    --en-bg: #f5f3ec;
    --en-beige: #E2E2D9;
    --en-ink: #252923;
    --en-ink-2: #1c1b1a;
    --en-gold: #365b40;
    --en-muted: #737373;
    --en-outline: #c4c7c7;
    --en-surface-high: #e9e9e0;
    /* Mismo degradado cálido que usa la tarjeta de fidelidad (assets.css:
       --nude-card-dark/mid/light) en vez del negro plano original — pedido
       explícito para que las superficies grandes de esta sección (tarjetas
       de servicio, resumen, botón primario) combinen con la tarjeta. */
    --en-card-dark: #252923;
    --en-card-mid: #5f665b;
    --en-card-light: #6B5D52;
    --en-card-gradient: linear-gradient(135deg, var(--en-card-dark), var(--en-card-mid) 60%, var(--en-card-light));
    --en-touch: 48px;
    --en-margin: 20px;
    --en-gutter: 16px;
    --en-section-gap: 40px;
}

.en-body {
    background: var(--en-bg);
    color: var(--en-ink);
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}
.en-body * { box-sizing: border-box; }

.en-serif { font-family: 'Bricolage Grotesque', serif; }

/* ---- Top app bar ---- */
.en-topbar {
    background: var(--en-bg);
    border-bottom: 1px solid var(--en-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--en-margin);
    height: var(--en-touch);
    position: sticky;
    top: 0;
    z-index: 40;
}
.en-topbar h1 {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    flex: 1;
    margin: 0;
}
/* Logo real en vez del texto "Beauty Bar CRM" — el PNG trae fondo blanco
   sólido (no transparente); mix-blend-mode:multiply lo funde con el fondo
   crema del topbar en vez de dejar un rectángulo blanco visible. */
.en-topbar-brand { display: flex; align-items: center; justify-content: center; flex: 1; }
.en-topbar-brand img { height: 26px; width: auto; max-width: 170px; object-fit: contain; mix-blend-mode: multiply; }
.en-topbar a {
    color: var(--en-ink);
    text-decoration: none;
    width: 40px;
    height: var(--en-touch);
    display: flex;
    align-items: center;
    font-size: 1.3rem;
}

/* ---- Main canvas ---- */
.en-main {
    flex: 1;
    padding: 16px var(--en-margin) 140px;
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}

/* ---- Progress indicator ---- */
.en-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.en-progress-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--en-ink);
}
.en-progress-step {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--en-muted);
    text-transform: uppercase;
}
.en-progress-track { width: 100%; height: 2px; background: var(--en-outline); margin-bottom: 24px; }
.en-progress-fill { height: 100%; background: var(--en-ink); transition: width .3s; }

.en-heading {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 4px;
}
.en-subtext { font-size: 13px; color: var(--en-muted); margin: 0 0 24px; }

/* ---- Service / add-on cards ----
   Tomado del lenguaje visual de la tarjeta de fidelidad (assets.css: .card,
   .premium-card): esquinas redondeadas + sombra suave en vez del look
   "brutalista" original de esquinas cuadradas — a pedido explícito del
   usuario, para que el sitio de reservas se sienta de la misma familia
   visual que la tarjeta. El resto de la paleta ink/beige de Editorial Noir
   se mantiene igual. */
.en-service-card {
    position: relative;
    width: 100%;
    background: var(--en-card-gradient);
    color: var(--en-beige);
    padding: 20px 22px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 1.25rem;
    box-shadow: 0 8px 24px rgba(18,18,18,0.16);
    cursor: pointer;
    margin-bottom: 16px;
    transition: transform .1s, box-shadow .15s;
    text-decoration: none;
}
.en-service-card:active { transform: scale(0.99); }
.en-service-card.is-selected { border-color: var(--en-gold); box-shadow: 0 8px 24px rgba(18,18,18,0.16), inset 0 0 0 2px var(--en-gold); }

/* Visto bueno del servicio elegido — badge circular dorado en la esquina,
   oculto por defecto y visible solo cuando se selecciona (pedido explícito:
   el borde dorado solo no se notaba lo suficiente). */
.en-select-check {
    position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 999px;
    background: var(--en-gold); color: var(--en-ink);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.5); transition: opacity .15s, transform .15s;
}
.en-select-check svg { width: 14px; height: 14px; }
.en-service-card.is-selected .en-select-check { opacity: 1; transform: scale(1); }
.en-service-card h3 { font-family: 'Bricolage Grotesque', serif; font-size: 22px; color: #fff; margin: 0 0 6px; }
.en-service-card .en-badge-popular {
    font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500;
    background: var(--en-gold); color: var(--en-ink); border-radius: 999px; padding: 3px 8px; margin-left: 8px;
}
/* --en-muted (#737373) da buen contraste sobre --en-bg (claro), pero aquí el
   fondo real es el degradado oscuro de la tarjeta (--en-card-gradient) — ahí
   ese gris queda en ~2.6:1, bajo el mínimo de accesibilidad (4.5:1) y
   reportado ilegible por el usuario. Un tono beige claro propio para este
   contexto (sin tocar la variable global, que sigue correcta en fondo claro)
   da ~6.9:1. */
.en-service-meta { display: flex; align-items: center; gap: 6px; color: #C9C2B7; font-size: 12px; }
.en-service-desc { font-size: 12px; color: #C9C2B7; margin-top: 8px; max-width: 22rem; font-weight: 300; }
.en-service-price { text-align: right; font-size: 14px; font-weight: 500; letter-spacing: 1px; color: var(--en-gold); white-space: nowrap; }

/* Icono circular (reemplaza el emoji "⏱" suelto) — mismo patrón que
   .reward-node-icon de la tarjeta: badge redondo, tamaño fijo, centrado. */
.en-icon-badge {
    width: 1.5rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.12);
}
.en-service-card .en-icon-badge { background: rgba(255,255,255,0.14); }
.en-icon-badge svg { width: 0.8rem; height: 0.8rem; }

.en-addon-card {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(18,18,18,0.4);
    border-radius: 1rem;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 12px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(18,18,18,0.05);
}
.en-addon-card.is-checked { border-color: var(--en-ink); background: var(--en-surface-high); box-shadow: 0 6px 18px rgba(18,18,18,0.1); }
.en-addon-check {
    width: 22px; height: 22px; border: 1px solid var(--en-ink); border-radius: 999px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.en-addon-check svg { width: 12px; height: 12px; opacity: 0; transition: opacity .1s; }
.en-addon-card.is-checked .en-addon-check { background: var(--en-ink); color: var(--en-beige); }
.en-addon-card.is-checked .en-addon-check svg { opacity: 1; }
.en-addon-name { font-family: 'Bricolage Grotesque', serif; font-size: 17px; margin: 0 0 2px; }
.en-addon-price { font-size: 14px; font-weight: 500; letter-spacing: 1px; }

.en-section-label {
    font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
    margin: 32px 0 14px;
}

/* ---- Calendar ---- */
.en-calendar { background: var(--en-beige); border: 1px solid var(--en-ink); border-radius: 1rem; overflow: hidden; margin-bottom: 28px; box-shadow: 0 4px 16px rgba(18,18,18,0.08); }
.en-cal-header {
    display: flex; align-items: center; justify-content: space-between; padding: 10px;
    border-bottom: 1px solid var(--en-ink); background: var(--en-card-gradient); color: var(--en-beige);
}
.en-cal-header button { background: none; border: none; color: inherit; font-size: 1.1rem; cursor: pointer; padding: 4px; }
.en-cal-header h3 { font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; margin: 0; }
.en-cal-dow { display: grid; grid-template-columns: repeat(7,1fr); border-bottom: 1px solid var(--en-ink); background: var(--en-surface-high); }
.en-cal-dow span { padding: 8px 0; text-align: center; font-size: 11px; font-weight: 500; color: var(--en-muted); }
.en-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); }
.en-cal-day, .en-cal-empty { height: 44px; border-bottom: 1px solid rgba(18,18,18,0.2); border-right: 1px solid rgba(18,18,18,0.2); display: flex; align-items: center; justify-content: center; font-size: 13px; background: transparent; text-decoration: none; color: var(--en-ink); }
.en-cal-day.is-past { color: var(--en-muted); opacity: .4; pointer-events: none; }
.en-cal-day.is-selected { background: var(--en-ink); color: var(--en-beige); font-weight: 500; }
@media (hover:hover) and (pointer:fine){.en-cal-day:not(.is-past):not(.is-selected):hover{ background: var(--en-surface-high); }}

/* Móvil primero: una sola columna, botones grandes y apilados (igual que
   Calendly) — es lo que la mayoría de clientas va a usar para reservar. En
   pantallas más anchas (tablet/desktop) sí aprovecha el espacio horizontal. */
.en-slots { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }
@media (min-width: 480px) { .en-slots { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 700px) { .en-slots { grid-template-columns: repeat(3,1fr); } }
.en-slot {
    height: var(--en-touch); border: 1px solid var(--en-ink); border-radius: 0.85rem; background: var(--en-beige); color: var(--en-ink);
    font-size: 14px; font-weight: 500; letter-spacing: 1px;
    display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
    user-select: none; transition: background .1s, color .1s, box-shadow .15s;
}
@media (hover:hover) and (pointer:fine){.en-slot:hover{ background: var(--en-card-gradient); color: var(--en-beige); }}
.en-slot.is-selected { background: var(--en-card-gradient); color: var(--en-beige); box-shadow: 0 6px 16px rgba(18,18,18,0.25); }
.en-slot.is-full { border-color: var(--en-outline); background: var(--en-beige); color: var(--en-muted); text-decoration: line-through; pointer-events: none; }

/* Chips de día — fila horizontal con scroll, como el selector de fecha de
   Calendly pero compacto; el día activo queda resaltado en negro. */
.en-day-chips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
.en-day-chip {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 56px; height: 64px; border: 1px solid var(--en-ink); border-radius: 1rem; text-decoration: none; color: var(--en-ink);
    box-shadow: 0 2px 8px rgba(18,18,18,0.05); transition: box-shadow .15s;
}
.en-day-chip-dow { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--en-muted); }
.en-day-chip-num { font-family: 'Bricolage Grotesque', serif; font-size: 20px; font-weight: 600; margin-top: 2px; }
.en-day-chip.is-active { background: var(--en-card-gradient); color: var(--en-beige); box-shadow: 0 6px 16px rgba(18,18,18,0.2); }
.en-day-chip.is-active .en-day-chip-dow { color: var(--en-gold); }

.en-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Buttons ----
   Pill (border-radius:999px), igual que .btn de la tarjeta de fidelidad. */
.en-btn {
    height: var(--en-touch); width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
    border: 1px solid var(--en-ink); border-radius: 999px; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s, transform .12s;
}
.en-btn-primary { background: var(--en-card-gradient); color: var(--en-beige); box-shadow: 0 8px 20px rgba(18,18,18,0.2); }
@media (hover:hover) and (pointer:fine){.en-btn-primary:hover{ filter: brightness(1.08); }}
.en-btn-primary:active { transform: scale(0.98); }
.en-btn-secondary { background: transparent; color: var(--en-ink); }
@media (hover:hover) and (pointer:fine){.en-btn-secondary:hover{ background: var(--en-surface-high); }}

/* ---- Sticky footer action bar ---- */
.en-footer-bar {
    position: fixed; bottom: 0; left: 0; width: 100%; background: var(--en-bg);
    border-top: 1px solid rgba(18,18,18,0.2); padding: 14px var(--en-margin); z-index: 40;
}
.en-footer-bar-inner { max-width: 560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* ---- Form inputs (borde inferior, sin recuadro) ---- */
.en-field { position: relative; padding-top: 22px; margin-bottom: 18px; }
.en-field label {
    position: absolute; top: 0; left: 0; font-size: 12px; font-weight: 500; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--en-muted);
}
.en-field input, .en-field textarea {
    width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--en-ink);
    height: var(--en-touch); padding: 8px 0; font-family: 'DM Sans', sans-serif; font-size: 14px;
    color: var(--en-ink); outline: none; transition: border-color .15s;
}
.en-field textarea { min-height: var(--en-touch); resize: vertical; }
.en-field input:focus, .en-field textarea:focus { border-bottom-color: var(--en-gold); }

/* ---- Summary card ---- */
.en-summary {
    background: var(--en-card-gradient); color: var(--en-beige); border-radius: 1.5rem; padding: 24px; margin-bottom: 28px;
    box-shadow: 0 12px 32px rgba(18,18,18,0.28);
}
.en-summary-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #5f5e5e; }
.en-summary-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.en-summary-label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--en-gold); margin: 0 0 4px; }
.en-summary-value { font-size: 15px; margin: 0; }
.en-summary-total { font-family: 'Bricolage Grotesque', serif; font-size: 24px; color: var(--en-gold); }

/* ---- Confirmación ---- */
.en-confirm-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 24px; }
.en-check-circle { width: 110px; height: 110px; margin-bottom: 32px; }
.en-check-circle circle { opacity: .2; }
.en-check-anim { stroke-dasharray: 100; stroke-dashoffset: 100; animation: en-draw-check 1s cubic-bezier(0.65,0,0.45,1) forwards; animation-delay: .3s; }
@keyframes en-draw-check { to { stroke-dashoffset: 0; } }
.en-fade-up { opacity: 0; transform: translateY(20px); animation: en-fade-up .8s ease-out forwards; }
@keyframes en-fade-up { to { opacity: 1; transform: translateY(0); } }
.en-fade-up.en-delay-1 { animation-delay: .5s; }
.en-fade-up.en-delay-2 { animation-delay: .7s; }
.en-fade-up.en-delay-3 { animation-delay: .9s; }
.en-summary-flat { box-shadow: 4px 4px 0px 0px rgba(229,211,179,1); width: 100%; max-width: 400px; }

@media (prefers-reduced-motion: reduce) {
    .en-check-anim, .en-fade-up { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}

/* Trampa anti-bot (botTrampaCampos()): oculta el campo señuelo "Sitio web"
   sin display:none, para que bots simples que solo miran visibilidad básica
   igual lo llenen — mismo criterio que .bt-hp en assets.css. booking.css es
   una hoja aparte de esa (ver arriba), así que necesita su propia copia. */
.bt-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.en-alert { border: 1px solid var(--en-ink); border-radius: 0.85rem; background: var(--en-beige); padding: 14px; margin-bottom: 20px; font-size: 13px; }
.en-alert-error { border-color: #8A2E2E; color: #8A2E2E; }
.en-link { color: var(--en-ink); font-size: 13px; text-decoration: underline; }


/* ===== Paso 1: atenuado de no elegidos, barra "Continuar" fija y modal de ahorro ===== */
.en-step1{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.en-step1 .en-service-card{transition:opacity .3s ease,filter .3s ease,transform .22s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
.en-step1.has-sel .en-service-card:not(.is-selected){opacity:.4!important;filter:saturate(.65);transition-delay:0s!important}
@media (hover:hover) and (pointer:fine){.en-step1.has-sel .en-service-card:not(.is-selected):hover{opacity:.75!important;filter:saturate(.9)}}
.en-continue-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(250,250,241,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(18,18,18,.08);box-shadow:0 -10px 30px -18px rgba(0,0,0,.35)}
.en-continue-bar[hidden]{display:none}
.en-continue-inner{max-width:560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px}
.en-continue-resumen{font-size:13px;line-height:1.35;color:var(--en-muted,#737373);min-width:0}
.en-continue-bar .en-btn{width:auto;flex:0 0 auto;min-width:150px;padding-left:26px;padding-right:26px}
.en-continue-bar{transform:translateY(110%);opacity:0;transition:transform 300ms cubic-bezier(.23,1,.32,1),opacity 200ms ease-out}
.en-continue-bar.is-in{transform:none;opacity:1}
.en-continue-bar:not(.is-in){transition-duration:200ms,150ms}   /* salida más rápida que la entrada: transición de 200 ms al quitar .is-in */

.en-save-modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;background:rgba(18,18,18,.5);opacity:0;transition:opacity .2s ease;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.en-save-modal[hidden]{display:none}
.en-save-modal.is-open{opacity:1}
.en-save-card{width:min(420px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#fff;color:#252923;border-radius:22px;padding:24px 22px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);transform:translateY(18px) scale(.97);opacity:0;transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .2s ease}
.en-save-modal.is-open .en-save-card{transform:none;opacity:1}
.en-save-card h3{font-size:20px;line-height:1.25;margin:0 0 14px}
.en-save-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.en-save-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;background:#F4F1EA;font-size:14px}
.en-save-list li b{flex:none;color:#2E7D5B;font-size:13px}
.en-save-hint{font-size:13px;color:#737373;margin:0 0 16px}
.en-save-card .en-btn{width:100%}
@media(prefers-reduced-motion:reduce){
  .en-step1 .en-service-card,.en-save-modal,.en-save-card{transition:none}
  .en-continue-bar{transition:opacity 150ms linear;transform:none}
}