/*
 * forms.css — Fluent Forms con el lenguaje visual de IPG
 * Depende de variables.css
 *
 * Fluent Forms trae su propia hoja de estilos, que no sabe nada del tema:
 * campos angostos, etiquetas grises, bordes finos y un botón azul genérico.
 * Acá se reescribe usando las mismas variables que el resto del sitio, para
 * que un formulario no se vea como una pieza pegada de otro lado.
 *
 * Se carga después de components.css (ver ipg_enqueue_assets en
 * functions.php), así estas reglas ganan por orden y no hace falta ensuciar
 * el archivo con !important salvo donde Fluent Forms lo usa primero.
 *
 * Selectores de Fluent Forms que se tocan:
 *   .fluentform                 envoltorio
 *   .ff-el-group                cada campo
 *   .ff-el-input--label         etiqueta
 *   .ff-el-form-control         input / textarea / select
 *   .ff-el-help-message         texto de ayuda
 *   .ff-el-form-check           radio y checkbox
 *   .ff-el-section-break        separador con título
 *   .ff-btn-submit              botón de envío
 *   .ff-message-success         mensaje de confirmación
 *   .error, .ff-el-is-error     estados de error
 */

/* ── Envoltorio ───────────────────────────────────────────────────────────
   Ancho de lectura cómodo: un campo de 1200px de ancho es incómodo de
   rellenar y se ve descuidado. El formulario se queda en 640px aunque la
   columna que lo contiene sea más ancha. */
.fluentform {
    max-width: 640px;
}
.fluentform .ff-el-group {
    margin-bottom: var(--ipg-space-6);
}
.fluentform .ff-el-group:last-of-type {
    margin-bottom: 0;
}

/* ── Etiquetas ────────────────────────────────────────────────────────── */
.fluentform .ff-el-input--label label {
    display: block;
    margin-bottom: var(--ipg-space-2);
    font-size: var(--ipg-text-sm);
    font-weight: var(--ipg-weight-semibold);
    line-height: 1.4;
    color: var(--ipg-color-text);
}
/* El asterisco de obligatorio en naranjo: rojo se lee como error antes de
   que la persona haya hecho nada mal. */
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before {
    color: var(--ipg-color-accent);
    font-weight: 700;
}

/* ── Campos ───────────────────────────────────────────────────────────── */
.fluentform .ff-el-form-control {
    width: 100%;
    padding: var(--ipg-space-3) var(--ipg-space-4);
    font-family: inherit;
    font-size: var(--ipg-text-base);
    line-height: 1.5;
    color: var(--ipg-color-text);
    background-color: var(--ipg-color-background);
    border: 1px solid var(--ipg-color-border);
    border-radius: var(--ipg-radius);
    box-shadow: none;
    transition: border-color var(--ipg-transition-fast),
                box-shadow var(--ipg-transition-fast);
}
.fluentform .ff-el-form-control::placeholder {
    color: var(--ipg-color-text-subtle);
}
.fluentform .ff-el-form-control:hover {
    border-color: var(--ipg-color-border-dark);
}
/* Anillo de foco visible: quien navega con teclado tiene que saber en qué
   campo está parado. */
.fluentform .ff-el-form-control:focus {
    outline: none;
    border-color: var(--ipg-color-primary);
    box-shadow: 0 0 0 3px rgba(34, 84, 245, 0.18);
}
.fluentform textarea.ff-el-form-control {
    min-height: 8rem;
    resize: vertical;
}
/* Flecha propia para los desplegables, en vez de la del sistema. */
.fluentform select.ff-el-form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--ipg-space-10);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23555555%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ipg-space-4) center;
    background-size: 18px;
}

/* ── Texto de ayuda ───────────────────────────────────────────────────── */
.fluentform .ff-el-help-message {
    margin-top: var(--ipg-space-2);
    margin-bottom: 0;
    font-size: var(--ipg-text-sm);
    line-height: 1.5;
    color: var(--ipg-color-text-muted);
}

/* ── Radios y casillas ────────────────────────────────────────────────────
   Fluent Forms las pone en línea y con el texto pegado. Acá cada opción es
   una tarjeta clicable completa: el área de toque pasa de 16px a toda la
   fila, que en celular es la diferencia entre poder marcarla y no. */
.fluentform .ff-el-group.ff_list_inline .ff-el-form-check,
.fluentform .ff-el-form-check {
    display: block;
    margin: 0 0 var(--ipg-space-2);
    padding: 0;
}
.fluentform .ff-el-form-check-label {
    display: flex;
    align-items: flex-start;
    gap: var(--ipg-space-3);
    padding: var(--ipg-space-3) var(--ipg-space-4);
    font-size: var(--ipg-text-sm);
    line-height: 1.45;
    color: var(--ipg-color-text);
    background-color: var(--ipg-color-background);
    border: 1px solid var(--ipg-color-border);
    border-radius: var(--ipg-radius);
    cursor: pointer;
    transition: border-color var(--ipg-transition-fast),
                background-color var(--ipg-transition-fast);
}
.fluentform .ff-el-form-check-label:hover {
    border-color: var(--ipg-color-primary);
    background-color: var(--ipg-color-info-bg);
}
.fluentform .ff-el-form-check input[type="radio"],
.fluentform .ff-el-form-check input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--ipg-color-primary);
    cursor: pointer;
}
.fluentform .ff-el-form-check-label:focus-within {
    border-color: var(--ipg-color-primary);
    box-shadow: 0 0 0 3px rgba(34, 84, 245, 0.18);
}

/* ── Separador de sección ─────────────────────────────────────────────────
   El "Section Break" viene como un título suelto. Acá se convierte en un
   corte real: línea arriba, aire generoso y el título en azul. */
.fluentform .ff-el-section-break {
    margin: var(--ipg-space-10) 0 var(--ipg-space-6);
    padding-top: var(--ipg-space-8);
    border-top: 1px solid var(--ipg-color-border);
}
.fluentform .ff-el-section-break .ff-el-section-title {
    margin: 0 0 var(--ipg-space-2);
    font-size: var(--ipg-text-lg);
    font-weight: var(--ipg-weight-bold);
    color: var(--ipg-color-primary);
}
.fluentform .ff-el-section-break .ff-section_break_desk {
    margin: 0;
    font-size: var(--ipg-text-sm);
    line-height: 1.6;
    color: var(--ipg-color-text-muted);
}

/* ── Columnas (los campos de Nombre vienen en dos) ────────────────────── */
.fluentform .ff-t-container {
    gap: var(--ipg-space-4);
}
@media (max-width: 560px) {
    .fluentform .ff-t-container {
        display: block;
    }
    .fluentform .ff-t-cell {
        width: 100%;
        margin-bottom: var(--ipg-space-4);
    }
}

/* ── Botón de envío ───────────────────────────────────────────────────────
   Mismo aspecto que los botones del resto del sitio. Fluent Forms aplica
   estilos en línea desde el panel del formulario, de ahí los !important. */
.fluentform .ff-btn-submit,
.fluentform .ff_submit_btn_wrapper button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ipg-space-2);
    min-height: 48px;
    padding: var(--ipg-space-3) var(--ipg-space-8) !important;
    font-family: inherit;
    font-size: var(--ipg-text-base) !important;
    font-weight: var(--ipg-weight-semibold);
    line-height: 1.2;
    color: var(--ipg-color-text-inverted) !important;
    background-color: var(--ipg-color-primary) !important;
    border: none !important;
    border-radius: var(--ipg-radius-full) !important;
    cursor: pointer;
    transition: background-color var(--ipg-transition-fast),
                transform var(--ipg-transition-fast);
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff_submit_btn_wrapper button:hover {
    background-color: var(--ipg-color-primary-dark) !important;
    transform: translateY(-1px);
}
.fluentform .ff-btn-submit:focus-visible {
    outline: 3px solid var(--ipg-color-accent);
    outline-offset: 3px;
}
.fluentform .ff_submit_btn_wrapper {
    margin-top: var(--ipg-space-8);
}

/* ── Errores ──────────────────────────────────────────────────────────────
   El mensaje va debajo del campo y el borde se tiñe: dos señales, no solo
   el color, para quien no distingue rojo de gris. */
.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-form-control.error {
    border-color: var(--ipg-color-error);
    background-color: var(--ipg-color-error-bg);
}
.fluentform .error.text-danger,
.fluentform .ff-el-is-error .error {
    margin-top: var(--ipg-space-2);
    font-size: var(--ipg-text-sm);
    font-weight: var(--ipg-weight-semibold);
    color: var(--ipg-color-error);
}

/* ── Mensaje de confirmación ──────────────────────────────────────────────
   Es la pantalla donde aparece el número de seguimiento, así que tiene que
   destacar de verdad: quien denuncia anónimo depende de leerlo y anotarlo. */
.fluentform .ff-message-success,
.ff-message-success {
    padding: var(--ipg-space-8);
    background-color: var(--ipg-color-success-bg);
    border: 1px solid var(--ipg-color-secondary);
    border-left-width: 4px;
    border-radius: var(--ipg-radius-lg);
    color: var(--ipg-color-text);
    font-size: var(--ipg-text-base);
    line-height: 1.6;
}
.ff-message-success strong {
    color: var(--ipg-color-secondary);
}

/* El CSS del Personalizador le pone 60px arriba y abajo a todo grupo de
   bloques; el formulario vive dentro de uno y quedaba descolgado. */
:root .fluentform .ff-el-group { padding-block: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARIO FLOTANTE — tarjeta translúcida sobre un fondo de color o foto.

   Se aplica escribiendo "ipg-form-flotante" en Ajustes → Avanzado → Clase
   CSS adicional del grupo que contiene el formulario. El fondo (color, o
   una imagen si usas un bloque Portada) se elige aparte desde el editor,
   así el mismo estilo sirve con cualquier fondo.

   Sobre la transparencia: 92% de blanco, no 60%. Una tarjeta muy translúcida
   se ve bien en una maqueta con foto elegida a mano, pero deja de leerse en
   cuanto alguien sube una foto con mucho contraste. El desenfoque de fondo
   aporta la sensación de vidrio; la opacidad alta protege la lectura.
   ═══════════════════════════════════════════════════════════════════════ */

.ipg-form-flotante {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--ipg-radius-xl);
    box-shadow: 0 24px 64px -16px rgba(17, 23, 41, 0.35);
    padding: var(--ipg-space-10);
}

/* Solo donde el navegador puede desenfocar el fondo se baja la opacidad:
   sin desenfoque, ese mismo valor dejaría el texto sobre la foto cruda. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ipg-form-flotante {
        background-color: rgba(255, 255, 255, 0.82);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        backdrop-filter: blur(18px) saturate(140%);
    }
}

/* Los campos van sólidos aunque la tarjeta sea translúcida: un input
   semitransparente sobre una foto es donde la legibilidad se rompe primero,
   y es justo donde la persona tiene que leer lo que escribe. */
.ipg-form-flotante .fluentform .ff-el-form-control,
.ipg-form-flotante .fluentform .ff-el-form-check-label {
    background-color: var(--ipg-color-background);
}

/* Quien configuró el sistema para reducir transparencias pidió justamente
   eso: se le entrega la tarjeta opaca, sin desenfoque. */
@media (prefers-reduced-transparency: reduce) {
    .ipg-form-flotante {
        background-color: var(--ipg-color-background);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (max-width: 600px) {
    .ipg-form-flotante { padding: var(--ipg-space-6); }
}

/* Variante oscura, para fondos claros. */
.ipg-form-flotante.is-oscura {
    background-color: rgba(17, 23, 41, 0.82);
    border-color: rgba(255, 255, 255, 0.18);
}
.ipg-form-flotante.is-oscura .fluentform .ff-el-input--label label,
.ipg-form-flotante.is-oscura .fluentform .ff-el-section-break .ff-el-section-title {
    color: var(--ipg-color-text-inverted);
}
.ipg-form-flotante.is-oscura .fluentform .ff-el-help-message,
.ipg-form-flotante.is-oscura .fluentform .ff-el-section-break .ff-section_break_desk {
    color: rgba(255, 255, 255, 0.8);
}
.ipg-form-flotante.is-oscura .fluentform .ff-el-section-break {
    border-top-color: rgba(255, 255, 255, 0.25);
}

/* ── Aceptación de términos: sin tarjeta ──────────────────────────────────
   El resto de radios y casillas van en tarjeta porque son opciones entre
   las que hay que elegir, y conviene que el área de toque sea grande. La
   aceptación de términos no es eso: es una confirmación legal al cierre.
   Encerrarla en una tarjeta blanca la hace parecer una alternativa más y le
   da un peso visual que compite con el botón de envío.

   Fluent Forms la marca con .ff-el-tc (contenedor) y .ff_tc_label
   (etiqueta). La clase .ipg-check-simple queda disponible para aplicar lo
   mismo a otra casilla desde Ajustes del campo → Advanced → Element Class. */
.fluentform .ff-el-tc .ff-el-form-check-label,
.fluentform .ff_tc_label,
.fluentform .ipg-check-simple .ff-el-form-check-label {
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    align-items: flex-start;
    font-size: var(--ipg-text-sm);
    color: var(--ipg-color-text-muted);
}
.fluentform .ff-el-tc .ff-el-form-check-label:hover,
.fluentform .ff_tc_label:hover,
.fluentform .ipg-check-simple .ff-el-form-check-label:hover {
    background-color: transparent;
    border-color: transparent;
}
/* El foco deja de dibujarse alrededor de la tarjeta (ya no hay), así que
   pasa al recuadro de la casilla: quien navega con teclado tiene que seguir
   viendo dónde está parado. */
.fluentform .ff-el-tc .ff-el-form-check-label:focus-within,
.fluentform .ff_tc_label:focus-within,
.fluentform .ipg-check-simple .ff-el-form-check-label:focus-within {
    box-shadow: none;
}
.fluentform .ff-el-tc input[type="checkbox"]:focus-visible,
.fluentform .ipg-check-simple input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--ipg-color-primary);
    outline-offset: 2px;
}
/* Los enlaces dentro del texto legal sí se ven como enlaces. */
.fluentform .ff-el-tc a,
.fluentform .ff_tc_label a {
    color: var(--ipg-color-primary);
    text-decoration: underline;
}

/* ── Formulario por pasos ─────────────────────────────────────────────────
   Fluent Forms gratuito no trae formularios de varios pasos ("Form Step" es
   de la version de pago), asi que lo arma el tema: ver el bloque
   "Formularios de Fluent Forms por pasos" en assets/js/main.js.

   Los pasos salen de los separadores de seccion del formulario, de modo que
   se editan desde el panel de Fluent Forms sin tocar codigo. Sin JS el
   formulario se ve completo y de corrido, que es exactamente como estaba
   antes: nada queda inaccesible. */

/* Un solo mecanismo para esconder: !important porque la logica condicional
   de Fluent Forms escribe `display` en el atributo style de los campos, y
   sin esto un campo condicional visible se colaria en un paso que no toca.
   Al revés funciona igual de bien: al mostrar el paso se quita la clase y
   vuelve a mandar lo que decidio el plugin. */
.ipg-paso-oculto { display: none !important; }

.ipg-form-pasos__indicador {
    margin-bottom: var(--ipg-space-8);
}
.ipg-form-pasos__rotulo {
    margin: 0 0 var(--ipg-space-2);
    font-size: var(--ipg-text-sm);
    font-weight: var(--ipg-weight-semibold);
    color: var(--ipg-color-text-muted);
}
.ipg-form-pasos__barra {
    height: 4px;
    border-radius: var(--ipg-radius-full);
    background-color: var(--ipg-color-border);
    overflow: hidden;
}
.ipg-form-pasos__barra span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--ipg-color-primary);
    transition: width var(--ipg-transition-base, 250ms) ease;
}

/* El separador que encabeza un paso pierde la linea y el aire de arriba:
   ahi ya no separa nada, es el titulo del paso. */
.fluentform .ff-el-section-break.ipg-paso-titulo {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* "Atras" y "Enviar" en la misma fila. El boton de envio se mueve aca desde
   el JS, por eso hay que anularle el margen que trae de su sitio original. */
.ipg-form-pasos__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ipg-space-4);
    margin-top: var(--ipg-space-8);
}
.ipg-form-pasos__nav .ff_submit_btn_wrapper {
    margin-top: 0;
}
.ipg-form-pasos__nav [hidden] { display: none; }

@media (max-width: 560px) {
    /* En el telefono los botones van a lo ancho y "Atras" debajo del que
       hace avanzar: el orden visual sigue al de importancia, no al del DOM. */
    .ipg-form-pasos__nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .ipg-form-pasos__nav .btn,
    .ipg-form-pasos__nav .ff_submit_btn_wrapper,
    .ipg-form-pasos__nav .ff-btn-submit {
        width: 100%;
        justify-content: center;
    }
}