/* ==========================================================================
   FORM CONSENT - Bloque de consentimiento legal RGPD (.form-consent)
   Texto de "letra pequeña legal" comun a todos los formularios:
   contacto, kit-digital, newsletter (home), ebooks, ia-hero, ia-newsletter.
   Scope: SIEMPRE .form-consent para no afectar a otros .form-check del sitio.
   Reutiliza tokens --bs-* existentes (gray-dark, black, gray-600) y el patron
   de enlace legal ya usado en modules/legal-text.css.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Base (Mobile First) — <992px
   ----------------------------------------------------------------------------
   Reemplazamos el layout flotante de Bootstrap (.form-check usa float + padding)
   por un grid de 2 columnas: checkbox (auto) + texto (1fr). align-items:start
   alinea el checkbox con la PRIMERA linea del texto multi-linea, no con el
   centro vertical del parrafo. */
.form-consent.form-check {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 0.625rem;
    min-height: 0;
    padding-left: 0;
    margin-bottom: 0;
}

/* Checkbox: tamaño fijo, no se deforma, y un pequeño desplazamiento vertical
   para que su centro coincida con la altura-x de la primera linea del texto.
   Anulamos el float/margenes negativos que Bootstrap aplica al .form-check-input. */
.form-consent .form-check-input {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.1em 0 0;
    float: none;
    cursor: pointer;
}

/* Texto legal: tamaño "letra pequeña", color secundario discreto (gris de marca
   #333) y line-height comodo para lectura. font-weight normal: no compite con
   los labels/campos del formulario. */
.form-consent .form-check-label {
    font-size: 0.7225rem;
    line-height: 1.55;
    font-weight: 400;
    color: var(--bs-gray-dark);
    text-align: left;
    cursor: pointer;
}

/* Enlace a la politica: mismo lenguaje visual que los enlaces legales del
   sitio (negro + subrayado fino con offset). Sutil pero claramente clicable. */
.form-consent .form-check-label a {
    color: var(--bs-black);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    font-weight: 600;
    transition: color 0.25s ease;
}

.form-consent .form-check-label a:hover {
    color: var(--bs-gray-600);
}

/* ----------------------------------------------------------------------------
   Newsletter (home + ia-newsletter)
   ----------------------------------------------------------------------------
   En estos dos formularios el consent va "suelto" entre dos .input-wrapper
   (email arriba, boton de envio abajo), sin el .form-group con utilidades de
   margen que envuelve al consent en el resto de formularios. Le damos la misma
   separacion vertical que el gap interno del .input-wrapper (1.25rem) para
   mantener el ritmo con el input de arriba y el boton de abajo. */
.newsletter-form .form-consent.form-check {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

/* ----------------------------------------------------------------------------
   Estado "marcado" (checked) — contraste accesible
   ----------------------------------------------------------------------------
   El base usa el amarillo de marca (--bs-primary, #edff00) como fondo con el
   check en blanco: blanco sobre amarillo no cumple contraste. Mantenemos el
   fondo amarillo primario pero pintamos el icono del check en NEGRO (el SVG
   base lo trae blanco), que sobre el amarillo claro si cumple contraste.
   Aplica a todos los formularios (newsletter, contacto, etc.). */
.form-consent .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-consent .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   Contacto: fondo del checkbox sin marcar
   ----------------------------------------------------------------------------
   En el formulario de contacto el checkbox vacio (fondo blanco) pasa muy
   desapercibido sobre la tarjeta blanca. Le damos un fondo beige de marca
   sobreescribiendo el token --bs-form-check-bg (solo afecta al estado sin
   marcar; el estado :checked define su propio background amarillo). */
.contact-form .form-consent .form-check-input {
    --bs-form-check-bg: var(--bs-beige);
}

/* ----------------------------------------------------------------------------
   Desktop (992px - 1920px)
   ----------------------------------------------------------------------------
   El bloque dispone de mas ancho horizontal; se permite un cuerpo de letra
   ligeramente mayor manteniendo la jerarquia de "letra pequeña". */
@media (min-width: 992px) {
    .form-consent .form-check-label {
        font-size: 0.72375rem;
        line-height: 1.6;
    }
}

/* ----------------------------------------------------------------------------
   Desktop Grande (>1920px)
   ---------------------------------------------------------------------------- */
@media (min-width: 1921px) {
    .form-consent .form-check-label {
        font-size: 0.72375rem;
        line-height: 1.65;
    }

    .form-consent .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ----------------------------------------------------------------------------
   Accesibilidad: respetar prefers-reduced-motion en la transicion del enlace
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .form-consent .form-check-label a {
        transition: none;
    }
}