/* =======================================================
   DIDEMEX - Formularios de Forminator
   =======================================================

   Etiquetas flotantes y acabado visual, tomando el mismo
   mecanismo, las mismas medidas y la MISMA SEMANTICA DE
   COLOR que el checkout
   (css/woocommerce/checkout/dmx-checkout.css).

   LA REGLA DE COLOR, QUE NO ES DECORATIVA

     azul   #2563eb   con foco / activo
     verde  #16a34a   respuesta valida
     rojo   #dc2626   invalida o requerida

   La primera version de este fichero pintaba de rojo la
   opcion SELECCIONADA, usando el rojo de marca. Se veia
   como si el usuario se hubiera equivocado. El rojo aqui
   significa error y nada mas; una respuesta elegida es
   valida, y va en verde.

   El rojo de marca (#d31829) queda solo para el boton de
   enviar, que es identidad y no estado.

   COMO FUNCIONA LA ETIQUETA FLOTANTE

   Es CSS puro, sin JavaScript. La etiqueta se posiciona
   encima del input y sube cuando el campo tiene foco o
   tiene contenido. El "tiene contenido" se detecta con
   :placeholder-shown, que exige que el input lleve un
   placeholder — Forminator los deja vacios, asi que se
   inyecta un espacio desde PHP. Ver
   includes/plugins/forminator-forms.php.

   EL SELECTOR, QUE ES LA PIEZA DELICADA

   En un campo de texto la pregunta es un <label>, pero en
   un grupo de radios o checkboxes es un <span> con la MISMA
   clase .forminator-label. Aplicar el flotante a esa clase
   a secas descolocaria los grupos de opciones.

   Por eso se usa :has(> input.forminator-input): solo
   entran los .forminator-field que contienen directamente
   un input de texto. Los grupos de opciones no lo tienen
   —sus inputs son type=radio dentro de otro label— asi que
   quedan fuera solos, sin enumerar tipos de campo. Los
   compuestos (Nombre, Direccion) renderizan cada sub-campo
   con su propio .forminator-field y su propio <label>, asi
   que entran sin escribir una regla mas.
======================================================= */

.forminator-ui.forminator-custom-form {
    --dmx-azul: #2563eb;
    --dmx-verde: #16a34a;
    --dmx-rojo: #dc2626;

    --dmx-marca: #d31829;
    --dmx-negro: #181818;
    --dmx-borde: #d9dde3;
    --dmx-borde-fuerte: #bababa;
    --dmx-texto: #2b3440;
    --dmx-tenue: #6b7280;
    --dmx-fondo-suave: #f7f8fa;
    --dmx-radio: 10px;
}


/* =======================================================
   ESTRUCTURA - Aire y alineacion
======================================================= */

.forminator-ui.forminator-custom-form .forminator-row {
    margin-bottom: 18px;
}

.forminator-ui.forminator-custom-form .forminator-row:last-child {
    margin-bottom: 0;
}

/* Campos compuestos: Nombre/Apellido, Ciudad/Estado/CP.
   Forminator los agrupa en una fila con data-multiple y los
   dejaba pegados. El hueco es de 12px, a proposito MENOR que
   los 18px que separan campos distintos: asi respiran, pero
   se siguen leyendo como una sola cosa.

   El flex-basis de 240px conserva el comportamiento que ya
   tenian —lado a lado cuando hay sitio, apilados cuando no—
   sin depender del breakpoint interno de Forminator. */
.forminator-ui.forminator-custom-form .forminator-row[data-multiple="true"] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.forminator-ui.forminator-custom-form .forminator-row[data-multiple="true"] > .forminator-col {
    flex: 1 1 240px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.forminator-ui.forminator-custom-form .forminator-row[data-multiple="true"] > .forminator-col-12 {
    flex: 1 1 100%;
}

/* La pagina centra su texto; el formulario no debe heredarlo.
   Un formulario se lee y se rellena de arriba abajo por el
   borde izquierdo, y centrar las preguntas rompe esa columna. */
.forminator-ui.forminator-custom-form,
.forminator-ui.forminator-custom-form .forminator-field,
.forminator-ui.forminator-custom-form .forminator-label,
.forminator-ui.forminator-custom-form .forminator-description,
.forminator-ui.forminator-custom-form .forminator-error-message {
    text-align: left;
}


/* =======================================================
   CAMPOS DE TEXTO - Base
======================================================= */

.forminator-ui.forminator-custom-form .forminator-field:has(> input.forminator-input),
.forminator-ui.forminator-custom-form .forminator-field:has(> textarea.forminator-textarea) {
    position: relative;
}

.forminator-ui.forminator-custom-form input.forminator-input,
.forminator-ui.forminator-custom-form textarea.forminator-textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 58px;
    padding: 24px 16px 8px;
    border: 1px solid var(--dmx-borde);
    border-radius: var(--dmx-radio);
    background: #fff;
    color: var(--dmx-texto);
    font-size: 16px;
    line-height: 1.3;
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.forminator-ui.forminator-custom-form textarea.forminator-textarea {
    min-height: 110px;
    padding-top: 26px;
    resize: vertical;
}

.forminator-ui.forminator-custom-form input.forminator-input:hover,
.forminator-ui.forminator-custom-form textarea.forminator-textarea:hover {
    border-color: var(--dmx-borde-fuerte);
}

/* AZUL: con foco */
.forminator-ui.forminator-custom-form input.forminator-input:focus,
.forminator-ui.forminator-custom-form textarea.forminator-textarea:focus {
    outline: none;
    border-color: var(--dmx-azul);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* El placeholder solo se ve al enfocar. Asi la pista util
   —«Sin espacios» en el WhatsApp— aparece justo cuando hace
   falta, y mientras tanto no compite con la etiqueta. */
.forminator-ui.forminator-custom-form input.forminator-input::placeholder,
.forminator-ui.forminator-custom-form textarea.forminator-textarea::placeholder {
    color: transparent;
    transition: color .18s ease;
}

.forminator-ui.forminator-custom-form input.forminator-input:focus::placeholder,
.forminator-ui.forminator-custom-form textarea.forminator-textarea:focus::placeholder {
    color: #b3b3b3;
}


/* =======================================================
   CAMPOS DE TEXTO - Etiqueta flotante
======================================================= */

.forminator-ui.forminator-custom-form .forminator-field:has(> input.forminator-input) > .forminator-label,
.forminator-ui.forminator-custom-form .forminator-field:has(> textarea.forminator-textarea) > .forminator-label {
    position: absolute;
    top: 19px;
    left: 16px;
    z-index: 2;
    max-width: calc(100% - 32px);
    margin: 0;
    /* El padding inferior no es decorativo: con line-height 1 el
       descendente de la g, la j o la p cae POR DEBAJO de la caja,
       y el overflow:hidden —que esta aqui para cortar con puntos
       suspensivos las preguntas largas— se lo comia. Ampliar la
       caja hacia abajo les da sitio sin mover el texto ni un pixel,
       porque el padding inferior no desplaza el contenido. */
    padding: 0 0 4px;
    overflow: hidden;
    color: var(--dmx-tenue);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    transition:
        top .18s ease,
        font-size .18s ease,
        color .18s ease;
}

/* Sube: el campo tiene foco o tiene contenido */
.forminator-ui.forminator-custom-form .forminator-field:has(> input.forminator-input:focus) > .forminator-label,
.forminator-ui.forminator-custom-form .forminator-field:has(> input.forminator-input:not(:placeholder-shown)) > .forminator-label,
.forminator-ui.forminator-custom-form .forminator-field:has(> textarea.forminator-textarea:focus) > .forminator-label,
.forminator-ui.forminator-custom-form .forminator-field:has(> textarea.forminator-textarea:not(:placeholder-shown)) > .forminator-label {
    top: 8px;
    font-size: 11px;
    letter-spacing: .02em;
}

/* AZUL: la etiqueta acompaña al foco */
.forminator-ui.forminator-custom-form .forminator-field:has(> input.forminator-input:focus) > .forminator-label,
.forminator-ui.forminator-custom-form .forminator-field:has(> textarea.forminator-textarea:focus) > .forminator-label {
    color: var(--dmx-azul);
}

/* El asterisco de requerido NO se oculta: en este formulario
   hay campos opcionales de verdad —Nombre, Direccion, la duda
   final— y quitar la marca dejaria al usuario adivinando. */
.forminator-ui.forminator-custom-form .forminator-required {
    color: var(--dmx-rojo);
    font-weight: 600;
}


/* =======================================================
   OPCIONES - Radios y checkboxes como tarjetas
======================================================= */

/* La pregunta del grupo. Aqui .forminator-label es un <span>
   y se queda donde esta: es un encabezado, no una etiqueta
   flotante. */
.forminator-ui.forminator-custom-form .forminator-field-radio > .forminator-field > .forminator-label,
.forminator-ui.forminator-custom-form .forminator-field-checkbox > .forminator-field > .forminator-label {
    flex: 0 0 100%;
    display: block;
    margin-bottom: 10px;
    color: var(--dmx-negro);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}

.forminator-ui.forminator-custom-form .forminator-field-radio > .forminator-field,
.forminator-ui.forminator-custom-form .forminator-field-checkbox > .forminator-field {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.forminator-ui.forminator-custom-form label.forminator-radio,
.forminator-ui.forminator-custom-form label.forminator-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 11px 15px;
    border: 1px solid var(--dmx-borde);
    border-radius: var(--dmx-radio);
    background: #fff;
    color: var(--dmx-texto);
    font-size: 14.5px;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition:
        border-color .16s ease,
        background-color .16s ease,
        color .16s ease;
}

.forminator-ui.forminator-custom-form label.forminator-radio:hover,
.forminator-ui.forminator-custom-form label.forminator-checkbox:hover {
    border-color: var(--dmx-borde-fuerte);
    background: var(--dmx-fondo-suave);
}

/* VERDE: elegida. Es una respuesta valida, no un error. */
.forminator-ui.forminator-custom-form label.forminator-radio:has(input:checked),
.forminator-ui.forminator-custom-form label.forminator-checkbox:has(input:checked) {
    border-color: var(--dmx-verde);
    background: rgba(22, 163, 74, .06);
    color: var(--dmx-negro);
    font-weight: 500;
}

.forminator-ui.forminator-custom-form label.forminator-radio:has(input:checked) .forminator-radio-bullet,
.forminator-ui.forminator-custom-form label.forminator-checkbox:has(input:checked) .forminator-checkbox-box {
    border-color: var(--dmx-verde);
    background-color: var(--dmx-verde);
}

/* AZUL: navegando con teclado */
.forminator-ui.forminator-custom-form label.forminator-radio:has(input:focus-visible),
.forminator-ui.forminator-custom-form label.forminator-checkbox:has(input:focus-visible) {
    border-color: var(--dmx-azul);
    outline: 2px solid var(--dmx-azul);
    outline-offset: 2px;
}

/* -------------------------------------------------------
   El campo libre de la opcion «Otra»

   Forminator lo mete como hermano de las pastillas, dentro
   del mismo contenedor. Al volverlo flex se convertia en un
   item mas y se encogia a su contenido: salia una cajita
   estrecha al lado de «Otra». Ocupa su propia fila.

   Ademas NO tiene etiqueta: su unico texto es el
   placeholder. Por eso aqui —y solo aqui— el placeholder se
   ve siempre: ocultarlo hasta el foco, que es lo correcto
   cuando hay etiqueta flotante, dejaba una caja muda que no
   dice para que sirve.

   Y como no hay etiqueta que alojar, tampoco necesita los
   24px de reserva arriba: el texto va centrado.
------------------------------------------------------- */

.forminator-ui.forminator-custom-form .forminator-field.forminator-custom-input {
    flex: 1 1 100%;
    margin-top: 2px;
}

.forminator-ui.forminator-custom-form .forminator-custom-input input.forminator-input {
    padding: 16px;
}

.forminator-ui.forminator-custom-form .forminator-custom-input input.forminator-input::placeholder {
    color: var(--dmx-tenue);
}

/* ROJO: el grupo requerido quedo sin responder */
.forminator-ui.forminator-custom-form .forminator-has_error label.forminator-radio,
.forminator-ui.forminator-custom-form .forminator-has_error label.forminator-checkbox {
    border-color: var(--dmx-rojo);
}

.forminator-ui.forminator-custom-form .forminator-radio-bullet,
.forminator-ui.forminator-custom-form .forminator-checkbox-box {
    flex: 0 0 auto;
    border-color: var(--dmx-borde-fuerte);
}


/* =======================================================
   ESTADOS DE VALIDACION - Campos de texto
======================================================= */

/* VERDE: respondido y valido, EN VIVO.
   Forminator solo pone su clase forminator-success al validar
   en el envio, asi que esperar a ella dejaba los campos sin
   verde mientras se rellenan — que es justo cuando sirve.
   Se resuelve con el propio navegador: 6 inputs llevan el
   atributo `required` y el correo lleva type="email", asi que
   :valid comprueba de verdad, no solo que haya texto.

   Las tres condiciones juntas importan:
     :not(:focus)             el azul del foco manda mientras escribes
     :not(:placeholder-shown) vacio no es valido, es vacio
     :valid                   cumple required y formato */
.forminator-ui.forminator-custom-form input.forminator-input:not(:focus):not(:placeholder-shown):valid,
.forminator-ui.forminator-custom-form textarea.forminator-textarea:not(:focus):not(:placeholder-shown):valid,
.forminator-ui.forminator-custom-form .forminator-success input.forminator-input,
.forminator-ui.forminator-custom-form .forminator-success textarea.forminator-textarea,
.forminator-ui.forminator-custom-form input.forminator-input.forminator-success,
.forminator-ui.forminator-custom-form textarea.forminator-textarea.forminator-success {
    border-color: var(--dmx-verde);
}

/* ROJO en vivo: hay contenido pero no cumple —un correo a
   medias, por ejemplo—. Un campo vacio NO se pinta de rojo:
   no has fallado todavia, simplemente no has llegado. */
.forminator-ui.forminator-custom-form input.forminator-input:not(:focus):not(:placeholder-shown):invalid,
.forminator-ui.forminator-custom-form textarea.forminator-textarea:not(:focus):not(:placeholder-shown):invalid {
    border-color: var(--dmx-rojo);
}

/* ROJO: invalido */
.forminator-ui.forminator-custom-form .forminator-has_error input.forminator-input,
.forminator-ui.forminator-custom-form .forminator-has_error textarea.forminator-textarea,
.forminator-ui.forminator-custom-form input.forminator-input.forminator-has_error,
.forminator-ui.forminator-custom-form textarea.forminator-textarea.forminator-has_error {
    border-color: var(--dmx-rojo);
}

.forminator-ui.forminator-custom-form .forminator-has_error > .forminator-label {
    color: var(--dmx-rojo);
}

.forminator-ui.forminator-custom-form .forminator-error-message {
    margin-top: 6px;
    color: var(--dmx-rojo);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}


/* =======================================================
   SECCION
======================================================= */

.forminator-ui.forminator-custom-form .forminator-field-section {
    margin-top: 12px;
    padding-top: 22px;
    border-top: 1px solid var(--dmx-borde);
}

.forminator-ui.forminator-custom-form .forminator-section-title {
    margin: 0 0 4px;
    color: var(--dmx-negro);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}


/* =======================================================
   BOTON - Identidad, no estado
======================================================= */

.forminator-ui.forminator-custom-form button.forminator-button-submit {
    min-height: 54px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--dmx-radio);
    background: var(--dmx-marca);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition:
        background-color .16s ease,
        transform .12s ease;
}

.forminator-ui.forminator-custom-form button.forminator-button-submit:hover {
    background: #b41323;
}

.forminator-ui.forminator-custom-form button.forminator-button-submit:active {
    transform: translateY(1px);
}

.forminator-ui.forminator-custom-form button.forminator-button-submit:focus-visible {
    outline: 2px solid var(--dmx-azul);
    outline-offset: 3px;
}


/* =======================================================
   MOVIL
======================================================= */

@media (max-width: 600px) {

    .forminator-ui.forminator-custom-form input.forminator-input,
    .forminator-ui.forminator-custom-form textarea.forminator-textarea {
        /* Menos de 16px hace que iOS haga zoom al enfocar. */
        font-size: 16px;
    }

    .forminator-ui.forminator-custom-form label.forminator-radio,
    .forminator-ui.forminator-custom-form label.forminator-checkbox {
        flex: 1 1 100%;
    }
}


/* =======================================================
   ACCESIBILIDAD
======================================================= */

@media (prefers-reduced-motion: reduce) {

    .forminator-ui.forminator-custom-form .forminator-label,
    .forminator-ui.forminator-custom-form input.forminator-input,
    .forminator-ui.forminator-custom-form textarea.forminator-textarea,
    .forminator-ui.forminator-custom-form label.forminator-radio,
    .forminator-ui.forminator-custom-form label.forminator-checkbox,
    .forminator-ui.forminator-custom-form button.forminator-button-submit {
        transition: none;
    }
}