/*
  arma-tu-evento.css — MADIS
  Versión: 1.1
  Uso: page-arma-tu-evento.php únicamente (enqueue condicional).
  Depende de: main.css (variables --black/--graphite/--red/--red-accent/
  --white/--gray/--line/--ease/--max, y de las clases .wrap/.eyebrow/
  .field/.btn/.btn-primary/.btn-ghost, que ya existen globalmente — NO
  se redefinen acá para no arrastrar dos fuentes de verdad del mismo
  estilo).
  v1.1: fix de 2 regresiones que el log de la sesión anterior daba por
  resueltas mientras el código de v1.0 nunca las tuvo: .wrap creciendo
  en el calendario (width:100% acotado) y spinner nativo visible en el
  input de invitados (appearance:none).
  Autor: fcastillo@madis.cl
*/

/* ═══ HERO + PASO 1 (contacto) fusionado ═══ */
.abe-hero{
  position:relative; min-height:96vh; display:flex; align-items:center; padding:150px 0 90px; overflow:hidden;
  background-size:cover; background-position:center;
}
/* Velo oscuro sobre la imagen destacada del hero (madis_abe_hero_bg vía
   featured image) — si no hay imagen, este gradiente solo ya funciona
   como fondo. */
.abe-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.25) 100%);
}
/* Fix regresión (bug documentado en su momento, no estaba en este
   archivo): .wrap global no tiene width:100%, su ancho lo define el
   hijo más ancho que contenga. Al calendario le crecía todo el bloque
   al seleccionar un día porque la fila de jornada es más ancha que la
   grilla. Acotado solo acá, no se toca el .wrap global. */
.abe-hero .wrap, .abe-step .wrap{width:100%}
.abe-hero .wrap{position:relative; z-index:1}
.abe-hero-card{background:rgba(0,0,0,.55); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:2px; padding:40px 44px; max-width:560px}
.abe-hero-card h1{font-size:clamp(2.1rem,4vw,2.8rem); color:#fff; margin:16px 0 18px; font-family:'Montserrat',sans-serif; font-weight:600; letter-spacing:-.02em; line-height:1.1}
.abe-hero-card h1 .accent{color:var(--red-accent)}
.abe-hero-card p.lead{color:#c9c9c9; font-size:.98rem; margin:0 0 30px}
.abe-hero-card .field{max-width:420px}
/* El hero siempre vive sobre una foto oscura, sin importar el modo del
   sitio — fix real de un bug ya documentado en su momento (P68 #10)
   que nunca llegó a este archivo. Especificidad extra a propósito para
   ganarle a la regla global body.light .field input{background:#fff}. */
body.light .abe-hero-card .field input,
.abe-hero-card .field input{
  background:#1a1a1a; border-color:var(--line); color:#fff;
}
.abe-hero-card .field input::placeholder{color:#888}
.abe-lookup-msg{display:none; padding:12px 18px; border-radius:2px; font-size:.85rem; margin-top:4px; max-width:420px}
.abe-lookup-msg.show{display:block}
.abe-lookup-msg.ok{background:#1E816F; color:#F9F9F9}
.abe-lookup-msg.new{background:transparent; border:1px solid var(--line); color:var(--gray)}
.abe-lookup-msg.warn{background:transparent; border:1px solid var(--red-accent); color:var(--white)}
.abe-contacto-nuevo{display:flex; gap:14px; max-width:420px; margin-top:4px}
.abe-contacto-nuevo .field{flex:1; margin:0}
.abe-contacto-nuevo label{font-family:'Montserrat',sans-serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); display:block; margin-bottom:6px}
.abe-req{color:var(--red-accent)}

/* ═══ DOTS DE PROGRESO — con nombre de paso ═══ */
.abe-dots-rail{position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.abe-rail-label{font-family:'Montserrat',sans-serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--white); margin-bottom:6px; white-space:nowrap; width:120px; text-align:right}
.abe-dot{width:8px; height:8px; border-radius:50%; background:var(--gray); opacity:.35; border:none; padding:0; cursor:not-allowed; transition:opacity .25s, transform .25s, background .25s}
.abe-dot.done{opacity:.75; cursor:pointer}
.abe-dot.current{background:#fff; opacity:1; transform:scale(1.6); cursor:pointer}
body.light .abe-dot.current{background:#161616}
/* Excepción: mientras el paso visible es el hero (paso 1), el fondo
   siempre es la foto oscura, sin importar el modo del sitio — el punto
   debe seguir viéndose como en modo oscuro. La clase la pone/saca JS
   según el paso actual (actualizarDots), no CSS puro, porque depende
   de scroll, no de body.light. */
body.light .abe-dots-rail.abe-sobre-hero .abe-dot.current{background:#fff}
@media(max-width:900px){.abe-dots-rail{display:none}}

/* ═══ SECCIONES DEL WIZARD (scroll-lock) ═══ */
main.abe-main{position:relative}
.abe-step{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:120px 0; border-top:1px solid var(--line); transition:opacity .5s var(--ease)}
.abe-step.abe-locked{opacity:.25; filter:blur(1px); pointer-events:none}
.abe-step .abe-num{font-family:'Montserrat',sans-serif; font-size:12px; letter-spacing:.14em; color:var(--gray); text-transform:uppercase; margin-bottom:10px}
.abe-step h2{font-size:1.9rem; margin:0 0 8px}
.abe-step p.abe-lead{color:var(--gray); max-width:60ch; margin:0 0 36px; font-size:1rem}

/* ═══ Tarjetas de selección (tipo de evento / venue / distribución) ═══ */
.abe-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.abe-card{position:relative; background:var(--graphite); border:1px solid var(--line); border-radius:2px; padding:26px 22px; cursor:pointer; overflow:hidden; transition:background .25s var(--ease), border-color .25s var(--ease)}
.abe-card::before{content:""; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--red-accent); transition:width .45s var(--ease)}
.abe-card:hover{background:var(--graphite-2)}
.abe-card:hover::before{width:100%}
.abe-card.selected{border-color:var(--red-accent); background:var(--graphite-2)}
.abe-card.selected::before{width:100%}
.abe-card h3{font-size:1.05rem; margin:0}
.abe-card p{color:var(--gray); font-size:.85rem; margin:6px 0 0}
.abe-card .abe-tag{font-family:'Montserrat',sans-serif; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--red-accent); display:block; margin-bottom:10px}
.abe-card .abe-cap{color:var(--gray); font-size:.78rem; margin-top:8px; display:block}
.abe-card .abe-icon{width:32px; height:32px; margin-bottom:14px; stroke:var(--gray); fill:none; stroke-width:1.6}
.abe-card:hover .abe-icon,.abe-card.selected .abe-icon{stroke:var(--red-accent)}

/* Tarjeta con foto (subservicio de madis-corp para tipo de evento, o
   imagen destacada propia para distribución) — el texto siempre queda
   claro encima de la foto, independiente de si el sitio está en modo
   claro u oscuro, porque el fondo real es una imagen, no --graphite. */
.abe-card.abe-card--photo{background-size:cover; background-position:center}
.abe-card.abe-card--photo h3{color:#fff}
/* Paso 2 específicamente (no afecta paso 5, que también usa
   abe-card--photo): tarjeta más alta, título corrido hacia abajo, no
   pegado al borde. Aproximación sin el CSS real de "noticia
   relacionada"/"noticia destacada" (no están en este proyecto) —
   ajustar valores exactos si no calzan con el resto del sitio. */
[data-step="2"] .abe-card--photo{
  min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:56px;
}
[data-step="2"] .abe-card--photo h3{font-size:1.2rem}
.abe-card.abe-card--photo p{color:#e5e5e5}
.abe-card.abe-card--photo .abe-tag{color:#ff8a8a}
.abe-card-other-input{display:none; margin-top:14px}
.abe-card.selected .abe-card-other-input{display:block}
.abe-card-other-input input{width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--white); padding:8px 0; font-size:14px}
.abe-card-other-input input:focus{outline:none; border-bottom-color:var(--red-accent)}

/* ═══ Servicios — catálogo alfabético, incluido/precargado/bloqueado ═══ */
.abe-checklist{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; max-width:980px}
.abe-check{
  position:relative; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; border:1px solid var(--line); border-radius:2px; padding:14px 10px;
  cursor:pointer; transition:border-color .2s, background .2s;
}
.abe-check:hover{border-color:var(--gray)}
.abe-check.selected{border-color:var(--red-accent); background:rgba(233,33,34,.06)}
.abe-check.locked{cursor:not-allowed}
.abe-check.locked:hover{border-color:var(--red-accent)}
.abe-check .abe-icon{width:22px; height:22px; stroke:var(--gray); fill:none; stroke-width:1.8; transition:stroke .2s}
.abe-check.selected .abe-icon{stroke:var(--red-accent)}
.abe-check .abe-check-name{font-size:.8rem; line-height:1.25}
/* La etiqueta vive abajo del nombre y siempre reserva el mismo espacio,
   exista o no, para que todas las cajas queden del mismo tamaño.
   "Incluido" (respuestas de este formulario o venue) siempre gana sobre
   "Precargado" (conversación previa en el CRM) si un ítem calificara
   para ambos. */
.abe-check .abe-origen{min-height:14px; font-family:'Montserrat',sans-serif; font-size:7px; letter-spacing:.06em; text-transform:uppercase; border-radius:100px; padding:2px 8px}
.abe-check .abe-origen.incluido{color:var(--red-accent); border:1px solid var(--red-accent)}
.abe-check .abe-origen.precargado{color:var(--gray); border:1px solid var(--line)}
.abe-check input{position:absolute; opacity:0; pointer-events:none}

.abe-actions{display:flex; gap:12px; margin-top:36px}

/* Input de invitados — el .field default del sitio es una línea muy
   discreta (pensada para formularios de texto corrido); acá compite
   visualmente con tarjetas grandes, así que necesita más presencia. */
.abe-step[data-step="5"] .field{max-width:280px; margin-bottom:28px}
.abe-step[data-step="5"] .field input{
  background:var(--graphite); border:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:2px; padding:14px 16px; font-size:1.4rem; font-family:'Montserrat',sans-serif; font-weight:600;
}
.abe-step[data-step="5"] .field input:focus{border-color:var(--red-accent)}
/* Fix regresión: flechas de incremento nativas del input number, sin
   esto quedan visibles compitiendo con el estilo de la tarjeta. */
.abe-step[data-step="5"] .field input::-webkit-outer-spin-button,
.abe-step[data-step="5"] .field input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.abe-step[data-step="5"] .field input[type="number"]{-moz-appearance:textfield}

/* ═══ Calendario del paso 3 ═══ */
.abe-calendar{max-width:620px; background:var(--graphite); border:1px solid var(--line); border-radius:2px; padding:28px 30px}
.abe-calendar-nav{display:flex; gap:12px; justify-content:center; margin-bottom:20px}
.abe-calendar-select select{
  background:var(--graphite-2); border:1px solid var(--line); border-radius:2px; color:var(--white);
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:.9rem; padding:8px 30px 8px 14px; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.abe-calendar-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:8px}
.abe-calendar-weekdays span{text-align:center; font-family:'Montserrat',sans-serif; font-size:11px; letter-spacing:.08em; color:var(--gray)}
.abe-calendar-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px}
.abe-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--graphite-2);
  border:1px solid var(--line); border-radius:6px; color:var(--white); font-size:.9rem; cursor:pointer;
  transition:background .2s, border-color .2s; outline:none;
}
.abe-day:focus-visible{box-shadow:0 0 0 2px var(--red-accent) inset}
.abe-day:hover{border-color:var(--gray)}
.abe-day.selected{background:#4a1418; border-color:var(--red-accent); color:#fff}
.abe-day.empty{visibility:hidden; cursor:default}
.abe-calendar-count{text-align:center; color:var(--gray); font-size:.85rem; margin:18px 0 0; display:flex; align-items:center; justify-content:center; gap:14px}
.abe-vaciar-link{background:transparent; border:none; color:var(--gray); font-size:.8rem; text-decoration:underline; cursor:pointer; padding:0; font-family:inherit}
.abe-vaciar-link:hover{color:var(--red-accent)}
.abe-dias-list{max-width:620px; margin-top:16px; display:flex; flex-direction:column; gap:8px}
.abe-dia-row{display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid var(--line); border-radius:2px; padding:10px 16px}
.abe-dia-row .abe-dia-fecha{font-family:'Montserrat',sans-serif; font-size:.85rem}
.abe-dia-row select{
  background:var(--graphite-2); border:1px solid var(--line); border-radius:2px; color:var(--white);
  font-family:'Montserrat',sans-serif; font-size:.8rem; padding:6px 26px 6px 10px; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.abe-dia-row select:focus{outline:none; border-color:var(--red-accent)}
.abe-dia-row .abe-dia-nota{color:var(--gray); font-size:.75rem}

/* ═══ Resumen (paso 7) ═══ */
.abe-resumen{max-width:760px; border:1px solid var(--line); border-radius:2px; overflow:hidden}
.abe-resumen-row{display:flex; justify-content:space-between; gap:24px; padding:16px 22px; border-bottom:1px solid var(--line)}
.abe-resumen-row:last-child{border-bottom:none}
.abe-resumen-row .k{font-family:'Montserrat',sans-serif; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); flex-shrink:0}
.abe-resumen-row .v{text-align:right; font-size:.95rem}
.abe-resumen-servicios-row{align-items:flex-start; flex-direction:column; gap:10px}
.abe-resumen-servicios{width:100%; display:flex; flex-direction:column; gap:6px}
.abe-resumen-servicio-row{display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:2px; padding:8px 12px; font-size:.88rem}
.abe-resumen-servicio-vacio{color:var(--gray); font-size:.85rem}
.abe-quitar{background:transparent; border:1px solid var(--line); color:var(--gray); border-radius:50%; width:22px; height:22px; cursor:pointer; font-size:14px; line-height:1; transition:border-color .2s, color .2s}
.abe-quitar:hover{border-color:var(--red-accent); color:var(--red-accent)}
.abe-lock{font-size:12px; opacity:.7}
.abe-dia-jornada-resumen{color:var(--gray); font-size:.85rem}