/* ============================================================
   vestir-triaje.css · F8 (26/09/2026, Claude Code en la nube) · EL TRIAJE DE 4 PÁGINAS (WPForms 10646), ORIENTACIÓN (10578),
   CONTACTO (10837), PROFESIONALES (10862), CONSULTA (10674) y el formulario de contacto de Everest Forms (11615, sin página hoy).
   inc/vestir-plugins.php quita wpforms-modern-full y wpforms-pro-modern-full (el aspecto) y deja wpforms-base + wpforms-pro-base
   (solo la estructura del motor «modern»: columnas, listas, dropzone, cámara). Aquí va TODO el aspecto, con tokens, sin !important.
   Las páginas 2-4 del triaje van ocultas EN LÍNEA (display:none) y las cambia el JS del plugin: no se tocan. La barra
   «Paso 1 de 4» la pinta assets/js/vl.js (.vl-steps, componentes.css); el indicador del plugin se esconde.
   Clases medidas en la réplica el 26/09 (103 en el triaje). Móvil primero.
   ============================================================ */

/* ---------- 1 · El marco ---------- */
.vl-vestir .wpforms-container,
.vl-vestir .wpforms-container-full { margin: 0; padding: 0; max-width: none; }
.vl-vestir .wpforms-container .wpforms-form { font-family: var(--font-cuerpo); font-size: var(--vl-font-body); color: var(--vl-text); }
.vl-vestir .wpforms-container .wpforms-page { padding: var(--vl-space-sm) 0; }
.vl-vestir .wpforms-container .wpforms-field-container { display: grid; gap: 0; }
.vl-vestir .wpforms-container .wpforms-field { padding: var(--vl-space-sm) 0 var(--vl-space-md); margin: 0; clear: both; }
.vl-vestir .wpforms-container .wpforms-field-row { display: flex; flex-wrap: wrap; gap: var(--vl-space-md); }
.vl-vestir .wpforms-container .wpforms-field-row-block,
.vl-vestir .wpforms-container .wpforms-one-half { flex: 1 1 100%; min-width: 0; }
@media (min-width: 600px) { .vl-vestir .wpforms-container .wpforms-one-half { flex: 1 1 calc(50% - var(--vl-space-md)); } }
.vl-vestir .wpforms-container .wpforms-field-medium { max-width: 100%; }

/* ---------- 2 · Pregunta (etiqueta), ayuda, obligatorio ---------- */
.vl-vestir .wpforms-container .wpforms-field-label { display: block; margin: 0 0 var(--vl-space-sm); font-family: var(--font-titulos); font-size: var(--vl-font-h4); line-height: var(--vl-lh-h4); font-weight: 600; color: var(--vl-text); }
.vl-vestir .wpforms-container .wpforms-field-label-inline { font-family: var(--font-cuerpo); font-size: var(--vl-font-body); font-weight: 500; }
.vl-vestir .wpforms-container .wpforms-field-sublabel { display: block; margin: var(--vl-space-xs) 0 0; font-size: var(--vl-font-small); color: var(--vl-text-muted); }
.vl-vestir .wpforms-container .wpforms-field-sublabel.wpforms-sublabel-hide,
.vl-vestir .wpforms-container .wpforms-page-indicator { display: none; }
.vl-vestir .wpforms-container .wpforms-field-description { margin: var(--vl-space-xs) 0 0; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }
.vl-vestir .wpforms-container .wpforms-required-label { color: var(--vl-danger); }
.vl-vestir .wpforms-container .wpforms-field-html { font-size: var(--vl-font-body); line-height: var(--vl-lh-body); color: var(--vl-text-muted); }
.vl-vestir .wpforms-container .wpforms-field-html .vl-alert { margin: 0; }

/* ---------- 3 · Campos: 48 px, borde 3:1, foco visible ---------- */
.vl-vestir .wpforms-container .wpforms-field input[type="text"],
.vl-vestir .wpforms-container .wpforms-field input[type="email"],
.vl-vestir .wpforms-container .wpforms-field input[type="tel"],
.vl-vestir .wpforms-container .wpforms-field input[type="number"],
.vl-vestir .wpforms-container .wpforms-field input[type="url"],
.vl-vestir .wpforms-container .wpforms-field input[type="date"],
.vl-vestir .wpforms-container .wpforms-field select,
.vl-vestir .wpforms-container .wpforms-field textarea { display: block; width: 100%; box-sizing: border-box; min-height: var(--vl-touch); margin: 0; padding: 11px var(--vl-space-md); border: 2px solid var(--vl-border-field); border-radius: var(--vl-radius-md); background: var(--vl-bg); font-family: var(--font-cuerpo); font-size: var(--vl-font-body); line-height: 1.4; color: var(--vl-text); box-shadow: none; transition: border-color var(--vl-transition-fast); }
.vl-vestir .wpforms-container .wpforms-field textarea { min-height: 140px; resize: vertical; }
.vl-vestir .wpforms-container .wpforms-field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
.vl-vestir .wpforms-container .wpforms-field input:focus,
.vl-vestir .wpforms-container .wpforms-field select:focus,
.vl-vestir .wpforms-container .wpforms-field textarea:focus { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 2px; border-color: var(--vl-secondary); }
.vl-vestir .wpforms-container .wpforms-field input::placeholder,
.vl-vestir .wpforms-container .wpforms-field textarea::placeholder { color: var(--vl-text-light); opacity: 1; }
.vl-vestir .wpforms-container .wpforms-field input.wpforms-error,
.vl-vestir .wpforms-container .wpforms-field textarea.wpforms-error,
.vl-vestir .wpforms-container .wpforms-field select.wpforms-error { border-color: var(--vl-danger); }

/* ---------- 4 · Opciones (radio y casillas) como tarjetas grandes ---------- */
.vl-vestir .wpforms-container .wpforms-field-radio ul,
.vl-vestir .wpforms-container .wpforms-field-checkbox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vl-space-sm); }
.vl-vestir .wpforms-container .wpforms-list-2-columns ul { grid-template-columns: 1fr; }
@media (min-width: 600px) { .vl-vestir .wpforms-container .wpforms-list-2-columns ul { grid-template-columns: 1fr 1fr; } }
.vl-vestir .wpforms-container .wpforms-field-radio ul li,
.vl-vestir .wpforms-container .wpforms-field-checkbox ul li { margin: 0; padding: 0; width: auto; }
.vl-vestir .wpforms-container .wpforms-field-radio ul li label,
.vl-vestir .wpforms-container .wpforms-field-checkbox ul li label { display: flex; gap: var(--vl-space-md); align-items: center; min-height: 56px; margin: 0; padding: 12px var(--vl-space-md); border: 2px solid var(--vl-border-field); border-radius: var(--vl-radius-md); background: var(--vl-bg); font-size: var(--vl-font-body); font-weight: 500; line-height: 1.4; color: var(--vl-text); cursor: pointer; transition: border-color var(--vl-transition-fast), background var(--vl-transition-fast), box-shadow var(--vl-transition-neon); }
.vl-vestir .wpforms-container .wpforms-field-radio ul li label:hover,
.vl-vestir .wpforms-container .wpforms-field-checkbox ul li label:hover { border-color: var(--vl-secondary); }
.vl-vestir .wpforms-container .wpforms-field-radio ul li:has(input:checked) label,
.vl-vestir .wpforms-container .wpforms-field-checkbox ul li:has(input:checked) label { border-color: var(--vl-secondary); background: var(--vl-secondary-light); }
.vl-vestir .wpforms-container .wpforms-field-radio ul li:has(input:focus-visible) label,
.vl-vestir .wpforms-container .wpforms-field-checkbox ul li:has(input:focus-visible) label { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 2px; }
.vl-vestir .wpforms-container .wpforms-field-radio input,
.vl-vestir .wpforms-container .wpforms-field-checkbox input { width: 22px; height: 22px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: var(--vl-secondary); }
/* Las tres casillas del final (datos de salud, consentimiento, RGPD): en azul claro y con el texto alineado arriba */
.vl-vestir .wpforms-container .wpforms-page-4 .wpforms-field-checkbox ul li label,
.vl-vestir .wpforms-container .wpforms-field-gdpr-checkbox ul li label { align-items: flex-start; background: var(--vl-secondary-light); border-color: var(--vl-secondary-light); }
.vl-vestir .wpforms-container .wpforms-page-4 .wpforms-field-checkbox ul li:has(input:checked) label { border-color: var(--vl-secondary); }
.vl-vestir .wpforms-container .wpforms-field-checkbox label a { color: var(--vl-secondary); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 5 · Subir una foto (dropzone) y la cámara ---------- */
.vl-vestir .wpforms-container .wpforms-uploader,
.vl-vestir .wpforms-container .wpforms-field-file-upload .wpforms-uploader { padding: var(--vl-space-lg); border: 2px dashed var(--vl-border-field); border-radius: var(--vl-radius-lg); background: var(--vl-bg-soft); text-align: center; color: var(--vl-text-muted); transition: border-color var(--vl-transition-fast), box-shadow var(--vl-transition-neon); }
.vl-vestir .wpforms-container .wpforms-uploader:hover,
.vl-vestir .wpforms-container .wpforms-uploader.dz-drag-hover { border-color: var(--vl-secondary); box-shadow: var(--vl-aro); }
.vl-vestir .wpforms-container .wpforms-uploader .dz-message { margin: 0; font-size: var(--vl-font-body); color: var(--vl-text); }
.vl-vestir .wpforms-container .wpforms-uploader .modern-title { display: block; font-weight: 600; margin-bottom: 4px; }
.vl-vestir .wpforms-container .wpforms-uploader .modern-hint { display: block; font-size: var(--vl-font-small); color: var(--vl-text-muted); }
.vl-vestir .wpforms-container .wpforms-uploader .dz-preview,
.vl-vestir .wpforms-container .wpforms-uploader .file { margin-top: var(--vl-space-md); text-align: left; }
.vl-vestir .wpforms-container .wpforms-camera-button,
.vl-vestir .wpforms-container .wpforms-btn-secondary,
.vl-vestir .wpforms-container .wpforms-camera-modal-buttons button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--vl-touch); padding: 10px var(--vl-space-lg); border: 0; border-radius: var(--vl-radius-aro); background: var(--vl-bg); color: var(--vl-primary-dark); box-shadow: var(--vl-aro); font-family: var(--font-cuerpo); font-size: var(--vl-font-boton); font-weight: 600; cursor: pointer; }
.vl-vestir .wpforms-container .wpforms-camera-button:hover { background: var(--vl-neon-suave); box-shadow: var(--vl-aro-fuerte); }
.vl-vestir .wpforms-container .wpforms-camera-preview img,
.vl-vestir .wpforms-container .wpforms-camera-selected-file img { max-width: 100%; height: auto; border-radius: var(--vl-radius-md); }
.vl-vestir .wpforms-camera-modal-content { border-radius: var(--vl-radius-xl); box-shadow: var(--vl-halo); font-family: var(--font-cuerpo); }
.vl-vestir .wpforms-camera-modal-title { font-family: var(--font-titulos); font-size: var(--vl-font-h3); color: var(--vl-text); }
.vl-vestir .wpforms-camera-remove-file { color: var(--vl-danger); font-weight: 600; min-height: var(--vl-touch); display: inline-flex; align-items: center; }

/* ---------- 6 · Errores: icono + palabra (el texto del plugin ya dice qué pasa), nunca solo color ---------- */
.vl-vestir .wpforms-container .wpforms-error,
.vl-vestir .wpforms-container em.wpforms-error,
.vl-vestir .wpforms-container label.wpforms-error { display: flex; gap: 8px; align-items: flex-start; margin: var(--vl-space-sm) 0 0; padding: 0; border: 0; background: transparent; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); font-style: normal; font-weight: 600; color: var(--vl-danger); }
.vl-vestir .wpforms-container em.wpforms-error::before,
.vl-vestir .wpforms-container label.wpforms-error::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; 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 / 20px; }
.vl-vestir .wpforms-container .wpforms-error-container,
.vl-vestir .wpforms-container .wpforms-error-alert { display: flex; gap: var(--vl-space-md); margin: 0 0 var(--vl-space-lg); padding: var(--vl-space-md) var(--vl-space-lg); border-radius: var(--vl-radius-lg); border: 1px solid #fca5a5; background: var(--vl-danger-bg); color: var(--vl-danger); font-size: var(--vl-font-body); font-weight: 500; }
.vl-vestir .wpforms-container .wpforms-error-noscript { padding: var(--vl-space-md); border-radius: var(--vl-radius-md); background: var(--vl-warning-bg); color: var(--vl-warning); }

/* ---------- 7 · Botones: Siguiente (azul), Anterior (aro), Enviar (azul, ancho completo en móvil) ---------- */
.vl-vestir .wpforms-container .wpforms-pagebreak-left,
.vl-vestir .wpforms-container .wpforms-page-button-group { display: flex; flex-direction: column-reverse; gap: var(--vl-space-sm); margin-top: var(--vl-space-lg); }
@media (min-width: 600px) { .vl-vestir .wpforms-container .wpforms-pagebreak-left, .vl-vestir .wpforms-container .wpforms-page-button-group { flex-direction: row; justify-content: space-between; align-items: center; } }
.vl-vestir .wpforms-container .wpforms-field-pagebreak { padding-bottom: 0; }
.vl-vestir .wpforms-container .wpforms-page-button,
.vl-vestir .wpforms-container .wpforms-submit,
.vl-vestir .wpforms-container button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--vl-touch); margin: 0; padding: 12px var(--vl-space-lg); border: 2px solid var(--vl-secondary); border-radius: var(--vl-radius-pill); background: var(--vl-secondary); color: var(--vl-on-color); font-family: var(--font-cuerpo); font-size: var(--vl-font-boton); font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; cursor: pointer; box-shadow: none; transition: background var(--vl-transition-fast), border-color var(--vl-transition-fast), box-shadow var(--vl-transition-neon); }
@media (min-width: 600px) { .vl-vestir .wpforms-container .wpforms-page-button, .vl-vestir .wpforms-container .wpforms-submit { width: auto; min-width: 200px; } }
.vl-vestir .wpforms-container .wpforms-page-button:hover,
.vl-vestir .wpforms-container .wpforms-submit:hover { background: var(--vl-secondary-dark); border-color: var(--vl-secondary-dark); color: var(--vl-on-color); }
.vl-vestir .wpforms-container .wpforms-page-button:focus-visible,
.vl-vestir .wpforms-container .wpforms-submit:focus-visible { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 3px; }
.vl-vestir .wpforms-container .wpforms-page-prev { background: var(--vl-bg); border-color: transparent; color: var(--vl-primary-dark); border-radius: var(--vl-radius-aro); box-shadow: var(--vl-aro); }
.vl-vestir .wpforms-container .wpforms-page-prev:hover { background: var(--vl-neon-suave); border-color: transparent; color: var(--vl-primary-dark); box-shadow: var(--vl-aro-fuerte); }
.vl-vestir .wpforms-container .wpforms-submit-container { margin-top: var(--vl-space-lg); }
.vl-vestir .wpforms-container .wpforms-submit[disabled],
.vl-vestir .wpforms-container .wpforms-disabled { opacity: .5; cursor: not-allowed; }
.vl-vestir .wpforms-container .wpforms-submit-spinner,
.vl-vestir .wpforms-container .wpforms-page-button-spinner { width: 20px; height: 20px; margin: 0; }

/* ---------- 8 · Confirmación de envío (por si el mensaje no es el HTML del tema) ---------- */
.vl-vestir .wpforms-confirmation-container-full,
.vl-vestir .wpforms-confirmation-container { padding: var(--vl-space-lg); border: 0; border-radius: var(--vl-radius-xl); background: var(--vl-success-bg); color: var(--vl-success); font-size: var(--vl-font-body); box-shadow: var(--vl-halo); }
.vl-vestir .wpforms-confirmation-container-full .vl-confirmacion,
.vl-vestir .wpforms-confirmation-container-full .vl-container { color: var(--vl-text); }
.vl-vestir .wpforms-confirmation-container-full:has(.vl-confirmacion) { padding: 0; background: transparent; box-shadow: none; }

/* ---------- 9 · La barra de pasos del tema (vl.js): un poco de neón en el relleno ---------- */
.vl-vestir .wpforms-container .vl-steps { margin-bottom: var(--vl-space-lg); }
.vl-vestir .wpforms-container .vl-steps__fill { box-shadow: 0 0 12px rgba(var(--vl-neon-rgb), .35); }
.vl-vestir .wpforms-container .vl-steps__counter { font-size: var(--vl-font-small); font-weight: 600; color: var(--vl-text-muted); }
.vl-vestir .wpforms-container .vl-steps__texto { color: var(--vl-text); }

/* ---------- 10 · Everest Forms (formulario de contacto 11615, hoy sin página): mismas reglas por si se coloca ---------- */
.vl-vestir .everest-forms .evf-field-label,
.vl-vestir .everest-forms label { font-size: var(--vl-font-small); font-weight: 600; color: var(--vl-text); }
.vl-vestir .everest-forms input[type="text"],
.vl-vestir .everest-forms input[type="email"],
.vl-vestir .everest-forms input[type="tel"],
.vl-vestir .everest-forms select,
.vl-vestir .everest-forms textarea { width: 100%; min-height: var(--vl-touch); padding: 11px var(--vl-space-md); border: 2px solid var(--vl-border-field); border-radius: var(--vl-radius-md); font-size: var(--vl-font-body); color: var(--vl-text); }
.vl-vestir .everest-forms button[type="submit"],
.vl-vestir .everest-forms .evf-submit { min-height: var(--vl-touch); padding: 12px var(--vl-space-lg); border: 0; border-radius: var(--vl-radius-pill); background: var(--vl-secondary); color: var(--vl-on-color); font-size: var(--vl-font-boton); font-weight: 600; }
.vl-vestir .everest-forms .evf-error { color: var(--vl-danger); font-size: var(--vl-font-small); font-weight: 600; }