/* ============================================================
   vestir-cita.css · F8 (26/09/2026, Claude Code en la nube) · RESERVA TU CITA (11385, Amelia 9.8.2, [ameliastepbooking])
   Amelia es una aplicación Vue: no encola ninguna hoja con handle y pone sus colores como variables --am-c-* EN LÍNEA en cada
   bloque (medido: --am-c-primary: #066aab ya viene del panel Customize). Un valor en línea no se pisa sin !important, así que
   aquí no se tocan las variables: se visten las PROPIEDADES de sus clases reales (medidas en la réplica el 26/09: 99 clases
   am-* y el-*) con un selector más. Además, la franja «30 minutos · gratis · videollamada · 3 pasos» (.vl-cita-datos) que mete
   inc/vestir-plugins.php antes del calendario. Sin !important · tokens · móvil primero.
   ============================================================ */

/* ---------- 1 · La franja de datos (la pinta el tema, delante de Amelia) ---------- */
.vl-cita-datos { list-style: none; margin: 0 0 var(--vl-space-lg); padding: var(--vl-space-md) var(--vl-space-lg); display: grid; gap: var(--vl-space-sm); border-radius: var(--vl-radius-xl); background: var(--vl-bg-card); box-shadow: var(--vl-halo); }
/* Medido a 1440 (26/09): la página mete Amelia en la rejilla .vl-reserva (formulario · lateral); la franja es un hijo más de esa
   rejilla y, sin esto, ocupaba la primera celda y empujaba Amelia a la segunda. A todo el ancho, y Amelia vuelve a su columna. */
.vl-reserva > .vl-cita-datos,
.vl-booking-form-row > .vl-cita-datos { grid-column: 1 / -1; }
@media (min-width: 850px) { .vl-cita-datos { grid-template-columns: 1fr 1fr; gap: var(--vl-space-sm) var(--vl-space-lg); } }
@media (min-width: 1200px) { .vl-cita-datos { grid-template-columns: repeat(4, 1fr); } }
.vl-cita-datos__item { display: flex; gap: 10px; align-items: flex-start; min-height: var(--vl-touch); font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }
.vl-cita-datos__item b { color: var(--vl-text); }
.vl-cita-datos__icono { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--vl-radius-md); background: var(--vl-neon-suave); color: var(--vl-primary-dark); box-shadow: 0 0 0 1px rgba(var(--vl-neon-rgb), .35); }
.vl-cita-datos__icono svg { width: 18px; height: 18px; }

/* ---------- 2 · El marco de Amelia: tarjeta con halo, esquinas 24 ---------- */
.vl-vestir .amelia-v2-booking .am-fs__wrapper { border-radius: var(--vl-radius-xl); box-shadow: var(--vl-halo); overflow: hidden; }
.vl-vestir .amelia-v2-booking .am-fs__main { font-family: var(--font-cuerpo); }
.vl-vestir .amelia-v2-booking .am-fs__main-heading-inner-title,
.vl-vestir .amelia-v2-booking .am-fs__main-heading-inner-title h1,
.vl-vestir .amelia-v2-booking .am-fs__main-heading-inner-title h2 { font-family: var(--font-titulos); font-size: var(--vl-font-h3); line-height: var(--vl-lh-h3); font-weight: 700; color: var(--vl-text); }
/* La barra de progreso de la cabecera (--am-step-length en línea): más gruesa y con brillo */
.vl-vestir .amelia-v2-booking .am-fs__main-heading::after,
.vl-vestir .amelia-v2-booking .am-fs__main-heading-progress { box-shadow: 0 0 10px rgba(var(--vl-neon-rgb), .35); }

/* ---------- 3 · La barra lateral de pasos (Selección de servicio · Fecha y hora · Tu información) ---------- */
.vl-vestir .amelia-v2-booking .am-fs-sb { font-family: var(--font-cuerpo); }
.vl-vestir .amelia-v2-booking .am-fs-sb__step-heading { font-size: var(--vl-font-small); font-weight: 600; }
.vl-vestir .amelia-v2-booking .am-fs-sb__step { min-height: var(--vl-touch); border-radius: var(--vl-radius-md); }
.vl-vestir .amelia-v2-booking .am-fs-sb__step-checker-selected { box-shadow: 0 0 0 4px rgba(var(--vl-neon-rgb), .18); }
.vl-vestir .amelia-v2-booking .am-fs-sb__support-heading { font-size: var(--vl-font-small); font-weight: 600; }
.vl-vestir .amelia-v2-booking .am-fs-sb__support a,
.vl-vestir .amelia-v2-booking .am-fs-sb__support-email { min-height: var(--vl-touch); display: inline-flex; align-items: center; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vl-vestir .amelia-v2-booking .am-fs-sb__menu { min-height: var(--vl-touch); }
.vl-vestir .amelia-v2-booking .am-fs-sb__menu-text { font-weight: 600; }

/* ---------- 4 · Etiquetas, desplegables y campos: 48 px, esquinas 12, foco visible ---------- */
.vl-vestir .amelia-v2-booking .am-fs__init-form__label,
.vl-vestir .amelia-v2-booking .el-form-item__label { font-family: var(--font-cuerpo); font-size: var(--vl-font-small); font-weight: 600; color: var(--vl-text); line-height: var(--vl-lh-small); margin-bottom: var(--vl-space-sm); }
.vl-vestir .amelia-v2-booking .el-select__wrapper,
.vl-vestir .amelia-v2-booking .am-select-wrapper .el-select__wrapper,
.vl-vestir .amelia-v2-booking .el-input__wrapper { min-height: var(--vl-touch); border-radius: var(--vl-radius-md); box-shadow: inset 0 0 0 2px var(--vl-border-field); font-size: var(--vl-font-body); }
.vl-vestir .amelia-v2-booking .el-select__wrapper.is-focused,
.vl-vestir .amelia-v2-booking .el-input__wrapper.is-focus,
.vl-vestir .amelia-v2-booking .el-select__wrapper:focus-within,
.vl-vestir .amelia-v2-booking .el-input__wrapper:focus-within { box-shadow: inset 0 0 0 2px var(--vl-secondary); outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 2px; }
.vl-vestir .amelia-v2-booking .el-select__placeholder,
.vl-vestir .amelia-v2-booking .el-select__selected-item { font-size: var(--vl-font-body); color: var(--vl-text); }
.vl-vestir .amelia-v2-booking .el-select__placeholder.is-transparent { color: var(--vl-text-light); }
.vl-vestir .amelia-v2-booking .el-input__inner { font-size: var(--vl-font-body); color: var(--vl-text); }
.vl-vestir .amelia-v2-booking .am-fs__init-form__item,
.vl-vestir .amelia-v2-booking .el-form-item { margin-bottom: var(--vl-space-lg); }
/* Los desplegables abiertos (van fuera del bloque, en el body) */
.el-select-dropdown.am-select-popper,
.el-popper.am-select-popper { border-radius: var(--vl-radius-md); box-shadow: var(--vl-shadow-md); font-family: var(--font-cuerpo); }
.el-select-dropdown.am-select-popper .el-select-dropdown__item,
.el-popper.am-select-popper .el-select-dropdown__item { min-height: var(--vl-touch); display: flex; align-items: center; font-size: var(--vl-font-body); }
.el-select-dropdown.am-select-popper .el-select-dropdown__item.is-hovering,
.el-select-dropdown.am-select-popper .el-select-dropdown__item.is-selected { background: var(--vl-secondary-light); color: var(--vl-secondary-dark); font-weight: 600; }
.el-select-dropdown.am-select-popper .am-select-service-name { font-weight: 600; }

/* ---------- 5 · El calendario y las horas (paso 2) ---------- */
.vl-vestir .amelia-v2-booking .am-calendar,
.vl-vestir .amelia-v2-booking .am-fs__dt-calendar { font-family: var(--font-cuerpo); }
.vl-vestir .amelia-v2-booking .am-calendar__day,
.vl-vestir .amelia-v2-booking .am-fs__dt-calendar .el-picker-panel__content .el-date-table td .el-date-table-cell__text,
.vl-vestir .amelia-v2-booking .am-fs__dt-calendar td .cell { min-width: 40px; min-height: 40px; border-radius: 50%; font-size: var(--vl-font-small); font-weight: 600; }
.vl-vestir .amelia-v2-booking .am-fs__dt-slots .am-fs__dt-slot,
.vl-vestir .amelia-v2-booking .am-slot,
.vl-vestir .amelia-v2-booking .am-fs__dt-slots-item { min-height: var(--vl-touch); border-radius: var(--vl-radius-md); font-size: var(--vl-font-body); font-weight: 600; box-shadow: inset 0 0 0 2px var(--vl-border-field); transition: box-shadow var(--vl-transition-neon), background var(--vl-transition-fast); }
.vl-vestir .amelia-v2-booking .am-fs__dt-slots .am-fs__dt-slot:hover,
.vl-vestir .amelia-v2-booking .am-slot:hover { box-shadow: inset 0 0 0 2px var(--vl-secondary); }
.vl-vestir .amelia-v2-booking .am-fs__dt-slots .am-fs__dt-slot.am-selected,
.vl-vestir .amelia-v2-booking .am-slot.am-selected,
.vl-vestir .amelia-v2-booking .am-fs__dt-slots-item--selected { background: var(--vl-secondary); color: var(--vl-on-color); box-shadow: 0 0 0 4px rgba(var(--vl-neon-rgb), .18); }

/* ---------- 6 · Botones: el principal píldora azul; el secundario con aro neón ---------- */
.vl-vestir .amelia-v2-booking .am-button { min-height: var(--vl-touch); border-radius: var(--vl-radius-pill); font-family: var(--font-cuerpo); font-size: var(--vl-font-boton); font-weight: 600; padding-left: var(--vl-space-lg); padding-right: var(--vl-space-lg); transition: filter var(--vl-transition-fast), box-shadow var(--vl-transition-neon); }
.vl-vestir .amelia-v2-booking .am-button--medium { min-height: var(--vl-touch); }
.vl-vestir .amelia-v2-booking .am-button--filled.am-button--primary:hover { filter: brightness(.92); }
.vl-vestir .amelia-v2-booking .am-button:focus-visible,
.vl-vestir .amelia-v2-booking .am-button:focus { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 3px; }
.vl-vestir .amelia-v2-booking .am-button--plain,
.vl-vestir .amelia-v2-booking .am-button--default:not(.am-button--filled),
.vl-vestir .amelia-v2-booking .am-fs__ps-popup__btn:not(.am-button--filled) { border-radius: var(--vl-radius-aro); box-shadow: var(--vl-aro); color: var(--vl-primary-dark); }
.vl-vestir .amelia-v2-booking .am-fs__main-footer { padding-top: var(--vl-space-md); }
@media (max-width: 599px) {
  .vl-vestir .amelia-v2-booking .am-fs__main-footer .am-button,
  .vl-vestir .amelia-v2-booking .am-button-continue { width: 100%; }
}

/* ---------- 7 · La ventanita de «paquetes» y los avisos: mismo aspecto que .vl-alert ---------- */
.vl-vestir .amelia-v2-booking .am-fs__ps-popup,
.vl-vestir .amelia-v2-booking .am-slide-popup__block { border-radius: var(--vl-radius-xl); box-shadow: var(--vl-halo); font-family: var(--font-cuerpo); }
.vl-vestir .amelia-v2-booking .am-fs__ps-popup__heading { font-family: var(--font-titulos); font-size: var(--vl-font-h4); font-weight: 700; color: var(--vl-text); }
.vl-vestir .amelia-v2-booking .am-fs__ps-popup__or { font-size: var(--vl-font-small); color: var(--vl-text-muted); }
.vl-vestir .amelia-v2-booking .am-fs__popup-x { width: var(--vl-touch); height: var(--vl-touch); display: inline-flex; align-items: center; justify-content: center; }
.vl-vestir .amelia-v2-booking .am-fs__init__package,
.vl-vestir .amelia-v2-booking .am-package-popup { border-radius: var(--vl-radius-lg); }

/* ---------- 8 · Tus datos (paso 3) y la confirmación ---------- */
.vl-vestir .amelia-v2-booking .am-fs__info-form .el-input__wrapper,
.vl-vestir .amelia-v2-booking .am-fs__info .el-input__wrapper,
.vl-vestir .amelia-v2-booking .el-textarea__inner { min-height: var(--vl-touch); border-radius: var(--vl-radius-md); font-size: var(--vl-font-body); }
.vl-vestir .amelia-v2-booking .el-form-item__error,
.vl-vestir .amelia-v2-booking .am-error { display: flex; gap: 8px; align-items: flex-start; padding-top: 4px; font-size: var(--vl-font-small); font-weight: 600; color: var(--vl-danger); }
.vl-vestir .amelia-v2-booking .el-form-item__error::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/svg%3E") no-repeat center / 18px; }
.vl-vestir .amelia-v2-booking .am-fs__cs,
.vl-vestir .amelia-v2-booking .am-fs__congrats,
.vl-vestir .amelia-v2-booking .am-fs__cs-heading { font-family: var(--font-cuerpo); }
.vl-vestir .amelia-v2-booking .am-fs__cs-heading h1,
.vl-vestir .amelia-v2-booking .am-fs__congrats h1 { font-family: var(--font-titulos); font-size: var(--vl-font-h2); color: var(--vl-text); }
.vl-vestir .amelia-v2-booking .am-fs__cs-item,
.vl-vestir .amelia-v2-booking .am-fs__congrats-item { border-radius: var(--vl-radius-md); }

/* ---------- 9 · El envoltorio de la página (plugins/amelia.css ya lo hacía): sin borde doble con el halo ---------- */
.vl-vestir .vl-booking-form-row .amelia-booking,
.vl-vestir .amelia-v2-booking,
.vl-vestir #amelia-app-booking { border: 0; box-shadow: none; padding: 0; background: transparent; }