/* ─── Formulario en tarjeta (Forminator) ─────────────────────────────────────
   Estilo reutilizable para formularios de Forminator: se activa poniendo la
   clase "fj-form-card" en Ajustes del formulario → Diseño → Clase CSS
   personalizada. No se aplica por defecto a ningún formulario (ej. Contacto
   se queda con su estilo actual).

   Los íconos por campo se ponen según el TIPO de campo (email, teléfono,
   fecha, número), no según su etiqueta: Forminator marca todos los campos de
   texto simple con la misma clase sin importar si son "Nombre", "Dirección"
   o "Profesión", así que no hay forma de adivinar por CSS cuál merece un
   ícono de persona y cuál no. Por eso los campos de texto simple se dejan
   sin ícono — solo los tipos con significado inequívoco lo llevan.
   ────────────────────────────────────────────────────────────────────────── */

.fj-form-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(8, 2, 95, 0.1);
    padding: 40px;
    box-sizing: border-box;
    max-width: 560px;
    margin: 0 auto;
    font-family: var(--global-body-font-family, 'Manrope', sans-serif);
}

.fj-form-card *:not([class*="forminator-icon"]) {
    font-family: inherit;
}

.fj-form-card .forminator-label {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1A1860;
    margin-bottom: 8px;
    display: inline-block;
}

.fj-form-card .forminator-required {
    color: #e0245e;
}

/* Mensaje de "no cumples los requisitos" (campo tipo Section, se renderiza
   como <h2>): el CSS auto-generado de Forminator (style-{id}.css) fija esto
   en 45px con un selector que incluye el ID del form
   (.forminator-ui#forminator-module-761...), que gana por especificidad a
   cualquier regla de clase sin !important. */
.fj-form-card .forminator-title {
    font-size: 1.15rem !important;
    font-weight: 700;
    line-height: 1.4;
}

.fj-form-card .forminator-row {
    margin-bottom: 20px;
}

.fj-form-card .forminator-input,
.fj-form-card .forminator-textarea,
.fj-form-card .forminator-select,
.fj-form-card .forminator-date {
    box-sizing: border-box;
    width: 100%;
    border: 2px solid #e4e7ee;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 1.1rem;
    color: #1A1860;
    background: #fff;
    transition: border-color 0.15s ease;
}

.fj-form-card .forminator-input::placeholder,
.fj-form-card .forminator-textarea::placeholder {
    color: #9aa0b4;
}

.fj-form-card .forminator-input:focus,
.fj-form-card .forminator-textarea:focus,
.fj-form-card .forminator-select:focus {
    outline: none;
    border-color: var(--global-palette1, #fea900);
}

.fj-form-card .forminator-textarea {
    resize: vertical;
}

/* Íconos: solo en campos de una línea cuyo tipo tiene un significado
   inequívoco (email, teléfono, fecha, número). */
.fj-form-card .forminator-field-email .forminator-input,
.fj-form-card .forminator-field-phone .forminator-input,
.fj-form-card .forminator-field-date .forminator-input,
.fj-form-card .forminator-field-number .forminator-input {
    padding-left: 46px;
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 18px 18px;
}

.fj-form-card .forminator-field-email .forminator-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M4 6l8 7 8-7'/%3E%3C/svg%3E");
}

.fj-form-card .forminator-field-phone .forminator-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.81.35 1.6.68 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.25a2 2 0 0 1 2.11-.45c.74.33 1.53.56 2.34.68A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.fj-form-card .forminator-field-date .forminator-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

.fj-form-card .forminator-field-number .forminator-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='9' x2='19' y2='9'/%3E%3Cline x1='5' y1='15' x2='19' y2='15'/%3E%3Cline x1='9' y1='4' x2='7' y2='20'/%3E%3Cline x1='17' y1='4' x2='15' y2='20'/%3E%3C/svg%3E");
}

/* Checkboxes */
.fj-form-card .forminator-checkbox-box {
    border: 2px solid #e4e7ee;
    border-radius: 6px;
}

.fj-form-card input:checked ~ .forminator-checkbox-box {
    background: #1A1860;
    border-color: #1A1860;
}

/* Botón */
.fj-form-card .forminator-button-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #1A1860;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.fj-form-card .forminator-button-submit:hover {
    background: #252b7a;
}

.fj-form-card .forminator-button-submit::after {
    content: '';
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media screen and (max-width: 719px) {
    .fj-form-card {
        padding: 28px 20px;
    }
}

/* ─── Paginación (formularios multi-página) ──────────────────────────────────
   Forminator marca el formulario como "pequeño" cuando su contenedor es
   angosto (como .fj-form-card, max-width:560px) y en ese caso apila los
   botones Anterior/Siguiente/Enviar a ancho completo, sin separación entre
   ellos — se ven "pegados". Se reemplaza por un layout en fila con
   separación, a tono con el botón de enviar ya existente arriba.
   ────────────────────────────────────────────────────────────────────────── */

.fj-form-card .forminator-pagination-footer {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px !important;
}

.fj-form-card .forminator-pagination-footer .forminator-button {
    width: auto !important;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    margin: 0 !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fj-form-card .forminator-button-back {
    order: 1;
    background: #fff;
    color: #1A1860;
    border: 2px solid #e4e7ee !important;
}

.fj-form-card .forminator-button-back:hover {
    border-color: #1A1860 !important;
}

.fj-form-card .forminator-pagination-footer .forminator-button-next,
.fj-form-card .forminator-pagination-footer .forminator-button-submit {
    order: 2;
    margin-left: auto !important;
    background: #1A1860;
    color: #fff;
    border: none;
}

.fj-form-card .forminator-pagination-footer .forminator-button-next:hover,
.fj-form-card .forminator-pagination-footer .forminator-button-submit:hover {
    background: #252b7a;
}

@media screen and (max-width: 719px) {
    .fj-form-card .forminator-pagination-footer {
        flex-direction: column-reverse;
    }
    .fj-form-card .forminator-pagination-footer .forminator-button {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ─── Popup del datepicker (jQuery UI) ───────────────────────────────────────
   Forminator solo carga el CSS de jQuery UI cuando el "diseño" del
   formulario es "none" o "basic"; con el diseño "default" (el que usan
   nuestros formularios) ese CSS nunca se enqueada, pero el popup del
   calendario lo sigue generando el widget de jQuery UI igual — por eso
   sale sin fondo ni bordes y se transparenta con el texto de atrás. Se
   repone aquí el estilo mínimo, a tono con el resto del sitio, en vez de
   forzar a que cargue toda la hoja de estilos vieja de jQuery UI. No va
   dentro de .fj-form-card porque el popup se inserta directo en <body>,
   no dentro del formulario.
   ────────────────────────────────────────────────────────────────────────── */

/* !important porque el tema tiene resets que, a juzgar por el mismo problema
   que ya hubo con el botón de Contacto (.forminator-contact-home), ganan por
   especificidad sobre un CSS externo normal. Sin esto, el fondo del propio
   .ui-datepicker no se sostiene y el header parece resuelto solo porque a
   .ui-datepicker-header le puse su propio fondo, pero el resto del popup
   (el padding y la tabla) seguía transparentándose. */
.ui-datepicker {
    background: #fff !important;
    border: 2px solid #e4e7ee !important;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(8, 2, 95, 0.15);
    padding: 12px;
    box-sizing: border-box;
    width: 260px;
    font-family: inherit;
}

.ui-datepicker-header {
    background: #1A1860;
    color: #fff;
    border-radius: 10px;
    padding: 8px 0;
    margin-bottom: 8px;
}

.ui-datepicker-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    top: 6px;
    cursor: pointer;
    color: #fff;
}

.ui-datepicker-prev.ui-state-hover,
.ui-datepicker-next.ui-state-hover {
    opacity: 0.7;
}

.ui-datepicker-calendar,
.ui-datepicker-calendar tbody,
.ui-datepicker-calendar tr,
.ui-datepicker-calendar td {
    background: #fff !important;
}

.ui-datepicker-calendar {
    width: 100%;
    border-collapse: collapse;
}

.ui-datepicker-calendar th {
    color: #9aa0b4;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 6px 0;
}

.ui-datepicker-calendar td {
    padding: 2px;
    text-align: center;
}

.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
    display: block;
    padding: 6px;
    border-radius: 8px;
    color: #1A1860;
    text-decoration: none;
}

.ui-datepicker-calendar td a:hover {
    background: #f5f6ff;
}

.ui-datepicker-calendar td.ui-datepicker-today a {
    border: 1px solid var(--global-palette1, #fea900);
}

.ui-datepicker-calendar td a.ui-state-active {
    background: #1A1860;
    color: #fff;
}

.ui-datepicker-calendar td.ui-datepicker-unselectable span {
    color: #c9cbd6;
}