/* Inter (variable) incluida en el plugin: sin Google Fonts, sin pedidos externos.
   El navegador solo la descarga si el formulario usa esa tipografía. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Valores por defecto. Los valores reales los escribe el plugin en una sola línea de CSS (desde Ajustes → Diseño). */
:root {
    --fca-btn: #3E4D9B;
    --fca-btn-hover: #252E5C;
    --fca-btn-text: #ffffff;
    --fca-label: #6c757d;
    --fca-ok-bg: #d4edda;
    --fca-ok-text: #155724;
    --fca-err-bg: #f8d7da;
    --fca-err-text: #721c24;
    --fca-field-bg: #ffffff;
    --fca-field-text: #212529;
    --fca-border: #ced4da;
    --fca-title-color: #212529;
    --fca-radius: 6px;
    --fca-btn-radius: 8px;
    --fca-gap: 8px;
    --fca-field-h: 56px;
    --fca-textarea-h: 150px;
    --fca-font-size: 15px;
    --fca-label-size: 14px;
    --fca-btn-size: 18px;
    --fca-title-size: 24px;
    --fca-max-w: none;
    --fca-form-margin: 0;
    --fca-title-align: left;
    --fca-btn-align: left;
    --fca-btn-w: 100%;
    --fca-btn-transform: uppercase;
    --fca-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Contenedor y tipografía */
.formulario-estilizado {
    max-width: var(--fca-max-w);
    margin: var(--fca-form-margin);
}
.formulario-estilizado,
.formulario-estilizado input,
.formulario-estilizado select,
.formulario-estilizado textarea,
.formulario-estilizado button {
    font-family: var(--fca-font);
}

/* Con Bootstrap cargado: se usan sus propias variables para respetar los estados de validación */
.formulario-estilizado {
    --bs-border-color: var(--fca-border);
    --bs-border-radius: var(--fca-radius);
    --bs-body-bg: var(--fca-field-bg);
    --bs-body-color: var(--fca-field-text);
}
.formulario-estilizado .row {
    --bs-gutter-x: var(--fca-gap);
    --bs-gutter-y: var(--fca-gap);
}

/* Título y descripción */
.formulario-estilizado .fca-form-head {
    margin-bottom: calc(var(--fca-gap) * 1.5);
    text-align: var(--fca-title-align);
}
.formulario-estilizado .fca-form-title {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--fca-title-size);
    font-weight: 700;
    line-height: 1.25;
    color: var(--fca-title-color);
    text-align: var(--fca-title-align);
}
.formulario-estilizado .fca-form-intro {
    margin: 0.4em 0 0;
    font-size: var(--fca-font-size);
    line-height: 1.5;
    color: var(--fca-label);
    text-align: var(--fca-title-align);
}

/* Campos */
.formulario-estilizado .form-floating input,
.formulario-estilizado .form-floating textarea,
.formulario-estilizado .form-floating select {
    font-size: var(--fca-font-size) !important;
}
.formulario-estilizado .form-floating > .form-control,
.formulario-estilizado .form-floating > .form-select {
    height: var(--fca-field-h);
    min-height: var(--fca-field-h);
}
.formulario-estilizado .form-floating > textarea.form-control {
    height: var(--fca-textarea-h);
    min-height: var(--fca-textarea-h);
}
.formulario-estilizado .form-floating > label {
    color: var(--fca-label);
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, color 0.2s ease-in-out;
}

.fca-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Tamaño y aspecto de las etiquetas: con el ID del formulario y !important, para que un tema no las achique ni las deforme */
#formulario-contacto .form-floating > label.fca-label {
    font-size: var(--fca-label-size) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* CAPTCHA: se reserva el alto para que no "salte" el diseño cuando carga */
.formulario-estilizado .fca-captcha { margin-top: var(--fca-gap); }
.formulario-estilizado .cf-turnstile { min-height: 65px; }

/* Botón */
.formulario-estilizado .fca-actions {
    margin-top: var(--fca-gap);
    text-align: var(--fca-btn-align);
}
.formulario-estilizado .btn-enviar {
    width: var(--fca-btn-w);
    font-size: var(--fca-btn-size);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.9em 1.8em;
    background-color: var(--fca-btn);
    color: var(--fca-btn-text);
    text-transform: var(--fca-btn-transform);
    border: none;
    border-radius: var(--fca-btn-radius);
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.formulario-estilizado .btn-enviar:hover,
.formulario-estilizado .btn-enviar:focus {
    background-color: var(--fca-btn-hover);
    color: var(--fca-btn-text);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.formulario-estilizado .btn-enviar:disabled {
    background-color: var(--fca-btn);
    opacity: 0.6;
}

/* Mensajes de envío (éxito / error): ícono, franja de color y animación suave.
   Los colores salen de Ajustes → Diseño; el ícono toma el color del texto. */
.formulario-estilizado .mensaje {
    position: relative;
    display: none;
    margin-top: var(--fca-gap);
    padding: 12px 16px 12px 46px;
    font-size: var(--fca-font-size);
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--fca-radius);
}
.formulario-estilizado .mensaje::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 15px;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--fca-icon) center / contain no-repeat;
    mask: var(--fca-icon) center / contain no-repeat;
}
.formulario-estilizado .mensaje.is-shown {
    display: block;
    animation: fca-fade 0.25s ease-out;
}
.formulario-estilizado .mensaje.exito {
    --fca-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.6-4.1-4.1 1.4-1.4 2.7 2.7 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E");
    background-color: var(--fca-ok-bg);
    color: var(--fca-ok-text);
    border-color: var(--fca-ok-text);
    border-color: color-mix(in srgb, var(--fca-ok-text) 30%, transparent);
    border-left-color: var(--fca-ok-text);
}
.formulario-estilizado .mensaje.error {
    --fca-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-color: var(--fca-err-bg);
    color: var(--fca-err-text);
    border-color: var(--fca-err-text);
    border-color: color-mix(in srgb, var(--fca-err-text) 30%, transparent);
    border-left-color: var(--fca-err-text);
}

@keyframes fca-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .formulario-estilizado .mensaje.is-shown { animation: none; }
}