/*
 * Estilos del formulario de leads.
 *
 * Un solo archivo para los tres sitios. Todo el color, la tipografia y las formas salen
 * de variables CSS que define el "tema" de cada sitio en config/sitios.php, asi que el
 * mismo markup se integra en Astara (Enfold), JMC y Mitsubishi (Bootstrap 4) sin tocar
 * el CSS de nadie y sin que ninguno de los tres imponga su estilo a los otros.
 *
 * Todas las clases van prefijadas lf- para no colisionar.
 *
 * Los tokens que un tema puede definir (todos opcionales salvo los dos primeros):
 *
 *   --lf-primario        color de marca: foco, enlaces, acentos
 *   --lf-primario-alt    su variante oscura
 *   --lf-texto           color del texto
 *   --lf-radio           radio de los campos
 *   --lf-fuente          familia tipografica
 *   --lf-req             color del asterisco de obligatorio
 *   --lf-borde           borde de los campos
 *   --lf-btn-bg          fondo del boton      (por defecto: --lf-primario)
 *   --lf-btn-bg-hover    fondo al pasar encima
 *   --lf-btn-texto       texto del boton      (por defecto: blanco)
 *   --lf-btn-radio       radio del boton      (por defecto: --lf-radio)
 *   --lf-btn-mayus       "uppercase" o "none"
 *   --lf-btn-espaciado   letter-spacing del boton
 */

.lf-wrap {
    /* Valores por defecto: sobrios y neutros. El tema del sitio los pisa. */
    --lf-primario: #111111;
    --lf-primario-alt: #000000;
    --lf-texto: #1d1d1b;
    --lf-radio: 4px;
    --lf-fuente: inherit;

    --lf-borde: #e0e0e0;
    --lf-borde-fuerte: #c9c9c9;
    --lf-req: #d93025;
    --lf-gris: #6b6b6b;
    --lf-fondo: #ffffff;
    --lf-fondo-suave: #f7f7f9;

    --lf-btn-bg: var(--lf-primario);
    --lf-btn-bg-hover: var(--lf-primario-alt);
    --lf-btn-texto: #ffffff;
    --lf-btn-radio: var(--lf-radio);
    --lf-btn-mayus: none;
    --lf-btn-espaciado: 0;

    --lf-ok: #1e7a45;
    --lf-ok-bg: #e8f6ee;
    --lf-ok-borde: #b9e2ca;
    --lf-error: #c0392b;
    --lf-error-bg: #fdeceb;
    --lf-error-borde: #f3c8c3;

    --lf-trans: 150ms cubic-bezier(.4, 0, .2, 1);

    box-sizing: border-box;
    font-family: var(--lf-fuente);
    color: var(--lf-texto);
    max-width: 760px;
    /* Aisla el tamano de fuente del contexto: dentro de Enfold o Bootstrap el rem del
       sitio puede ser cualquier cosa, y el formulario debe verse igual en los tres. */
    font-size: 16px;
    line-height: 1.5;
}

.lf-wrap *,
.lf-wrap *::before,
.lf-wrap *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ contenedor */

.lf-form {
    background: var(--lf-fondo);
    padding: 24px 24px 22px;
    border-radius: calc(var(--lf-radio) * 2);
    border: 1px solid var(--lf-borde);
}

.lf-titulo {
    margin: 0 0 18px;
    font-family: inherit;
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--lf-texto);
}

/* ---------------------------------------------------------------------- campos */

.lf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.lf-ancho {
    grid-column: 1 / -1;
}

/*
 * COLUMNAS EN CONTENEDORES ESTRECHOS.
 *
 * En Astara el formulario vive dentro de media columna de Enfold (unos 465 px). Poner
 * todo a una sola columna lo volvia larguisimo, pero forzar dos columnas cortaria el
 * texto de los desplegables ("Seleccione una marca" no entra en 220 px).
 *
 * El reparto: los campos de texto cortos van de a dos, y solo los selects de opciones
 * largas ocupan el ancho completo. Se pasa de ~11 filas a ~7 sin sacrificar legibilidad.
 */
.lf-compacto .lf-campo:has(select[name="codMarca"]),
.lf-compacto .lf-campo:has(select[name="codModelo"]),
.lf-compacto .lf-campo:has(select[name="codSubTipo"]),
.lf-compacto .lf-campo:has(select[name="ciudad"]),
.lf-compacto .lf-campo:has(select[name="codOficina"]) {
    grid-column: 1 / -1;
}

/* Navegadores sin :has() (Firefox viejo): el compacto vuelve a una sola columna, que
   es feo pero nunca ilegible. */
@supports not selector(:has(select)) {
    .lf-compacto .lf-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lf-campo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* El display:flex de arriba gana por especificidad al display:none que el navegador
   aplica a [hidden], asi que los campos que se muestran solo cuando corresponde
   (version, concesionario) quedarian siempre visibles. Hay que reponerlo. */
.lf-wrap [hidden] {
    display: none !important;
}

.lf-wrap .lf-campo > label {
    display: block;
    font-family: inherit !important;
    font-size: 0.78125rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.01em;
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: var(--lf-texto) !important;
}

.lf-req {
    color: var(--lf-req);
    font-weight: 700;
}

/*
 * POR QUE HAY !important AQUI.
 *
 * Enfold declara sus campos con selectores anclados en #top ("#top .container_wrap
 * input[type=text]"). Un ID pesa mas que cualquier cantidad de clases, asi que sin
 * !important nuestros inputs heredan el fondo gris y la flecha nativa del tema y el
 * formulario se ve ajeno al resto de la pagina. El propio tema hijo resuelve lo mismo
 * de la misma forma en shortcodes/_cotizar-form.scss.
 *
 * Se limita a las propiedades que los temas suelen pisar; el resto queda sin forzar.
 */
.lf-wrap .lf-campo input[type="text"],
.lf-wrap .lf-campo input[type="tel"],
.lf-wrap .lf-campo input[type="email"],
.lf-wrap .lf-campo select,
.lf-wrap .lf-campo textarea {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--lf-texto) !important;
    background-color: var(--lf-fondo) !important;
    border: 1px solid var(--lf-borde) !important;
    border-radius: var(--lf-radio) !important;
    box-shadow: none !important;
    text-transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    transition: border-color var(--lf-trans), box-shadow var(--lf-trans), background-color var(--lf-trans);
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.lf-campo input::placeholder,
.lf-campo textarea::placeholder {
    color: var(--lf-gris);
    opacity: 1;
}

.lf-wrap .lf-campo select {
    /* Se repone la flecha que quita appearance:none, dibujada con gradientes para no
       depender de ninguna imagen ni de una fuente de iconos del sitio. */
    /* Enfold declara "background: #fff" en forma abreviada sobre #top select, y esa
       abreviatura pone background-image en none. Hay que forzar la flecha. */
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position: calc(100% - 19px) 53%, calc(100% - 14px) 53% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 38px !important;
    cursor: pointer;
}

/* Cuando aun no se eligio nada, el texto va en gris como un placeholder.
   Lleva !important porque la regla de arriba, que si lo necesita para ganarle al tema,
   fija el color del texto y si no se refuerza aqui todos los selects se verian como si
   ya tuvieran algo elegido. */
.lf-wrap .lf-campo select:has(option[value=""]:checked) {
    color: var(--lf-gris) !important;
}

.lf-campo textarea {
    resize: vertical;
    min-height: 72px;
}

.lf-campo input:hover:not(:focus),
.lf-campo select:hover:not(:focus),
.lf-campo textarea:hover:not(:focus) {
    border-color: var(--lf-borde-fuerte);
}

.lf-wrap .lf-campo input:focus,
.lf-wrap .lf-campo select:focus,
.lf-wrap .lf-campo textarea:focus {
    outline: none !important;
    border-color: var(--lf-primario) !important;
    /* color-mix da el halo del color de marca sin que el tema tenga que declararlo. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lf-primario) 18%, transparent) !important;
}

/* Navegadores sin color-mix: halo neutro, igual de visible. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .lf-campo input:focus,
    .lf-campo select:focus,
    .lf-campo textarea:focus {
        box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
    }
}

/* --------------------------------------------------------------------- errores */

.lf-wrap .lf-campo.lf-invalido input,
.lf-wrap .lf-campo.lf-invalido select,
.lf-wrap .lf-campo.lf-invalido textarea {
    border-color: var(--lf-error) !important;
    background-color: var(--lf-error-bg) !important;
}

.lf-campo.lf-invalido input:focus,
.lf-campo.lf-invalido select:focus,
.lf-campo.lf-invalido textarea:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lf-error) 16%, transparent);
}

.lf-error {
    display: none;
    margin-top: 5px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--lf-error);
}

.lf-campo.lf-invalido .lf-error {
    display: block;
}

/* ------------------------------------------------------------------- checkbox */

.lf-check {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--lf-borde);
}

.lf-check > label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--lf-gris);
    cursor: pointer;
}

.lf-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--lf-primario);
    cursor: pointer;
}

.lf-check.lf-invalido > label {
    color: var(--lf-error);
}

/* Trampa antibot: fuera de la vista pero presente en el DOM y rellenable por scripts.
   No se usa display:none porque hay bots que lo detectan y saltan el campo. */
.lf-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------- acciones */

.lf-acciones {
    margin-top: 20px;
}

.lf-wrap .lf-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 13px 34px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--lf-btn-espaciado);
    text-transform: var(--lf-btn-mayus);
    color: var(--lf-btn-texto) !important;
    background-color: var(--lf-btn-bg) !important;
    border: 0 !important;
    border-radius: var(--lf-btn-radio) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color var(--lf-trans), transform var(--lf-trans), box-shadow var(--lf-trans), opacity var(--lf-trans);
}

.lf-boton:hover:not(:disabled) {
    background-color: var(--lf-btn-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--lf-btn-bg) 85%, black);
}

.lf-boton:active:not(:disabled) {
    transform: scale(.98);
}

.lf-boton:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lf-primario) 35%, transparent);
}

.lf-boton:disabled {
    opacity: .6;
    cursor: progress;
    transform: none;
}

/* --------------------------------------------------------------------- avisos */

.lf-aviso {
    display: none;
    margin-top: 18px;
    padding: 13px 15px;
    font-size: 0.8125rem;
    line-height: 1.5;
    border-radius: var(--lf-radio);
    border: 1px solid transparent;
}

.lf-aviso.lf-ok {
    display: block;
    color: var(--lf-ok);
    background: var(--lf-ok-bg);
    border-color: var(--lf-ok-borde);
}

.lf-aviso.lf-ko {
    display: block;
    color: var(--lf-error);
    background: var(--lf-error-bg);
    border-color: var(--lf-error-borde);
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 640px) {
    .lf-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .lf-form {
        padding: 20px 18px;
    }

    .lf-boton {
        width: 100%;
    }
}

/* El formulario puede quedar en una columna estrecha (en Astara vive en media
   columna de Enfold): ahi tambien va a una sola columna, sin depender del viewport. */
@container (max-width: 420px) {
    .lf-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@supports (container-type: inline-size) {
    .lf-wrap {
        container-type: inline-size;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lf-wrap * {
        transition: none !important;
    }

    .lf-boton:hover:not(:disabled) {
        transform: none;
    }
}