/* ─── Páginas con formulario en tarjeta — FUNJOSE ───────────────────────────
   Aplicar a una beca (760), Donar (764) y Voluntario (739): tarjeta del
   formulario + acordeón de preguntas frecuentes. Antes eran 2 archivos
   (2026-10-16). El estilo de los mensajes de error y de envío de Forminator
   está en base.css porque el form de contacto del footer va en todas.
   ────────────────────────────────────────────────────────────────────────── */


/* ══════════ forminator-card ══════════ */

/* ─── 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;
    /* Mismo ancho que el FAQ (.fj-faq, 700px) para que la tarjeta y el FAQ
       compartan orilla izquierda en escritorio (2026-09-28). */
    max-width: 700px;
    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. También el título «Datos
   familiares» de la página 6. */
.fj-form-card .forminator-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    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:700px) 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;
        align-items: center;
    }
}

/* ─── Botones de formularios en tablet/celular (≤1024px) ─────────────────────
   Misma regla que los botones del hero y "Limpiar filtros" (2026-09-28):
   en pantallas chicas los botones NO van a todo el ancho (se ven como botón
   de app nativa) — ancho natural, mínimo 220px, centrados. Forminator los
   estira al 100% por su cuenta cuando el form es angosto, con selectores de
   ID; de ahí los !important. Aplica a Enviar/Siguiente/Anterior de los forms
   en .fj-form-card (761, 763, 738). "Enviar Mensaje" del footer (676) lleva la
   misma regla en base.css (sección «contacto-footer»).
   min(220px, 100%): en celulares de ≤360px el form mide menos de 220px por
   dentro y el botón se salía de la tarjeta (2026-10-17); ahí queda al ancho
   del form. (Un max-width no sirve: min-width le gana.)
   ────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
    .fj-form-card .forminator-button-submit {
        display: block !important;
        width: fit-content !important;
        min-width: min(220px, 100%) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .fj-form-card .forminator-pagination-footer {
        justify-content: center !important;
    }
    .fj-form-card .forminator-pagination-footer .forminator-button {
        flex: 0 0 auto;
        width: auto !important;
        min-width: min(220px, 100%) !important;
        margin: 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;
}

/* ─── Mensaje de convocatoria cerrada (shortcode fj_beca_form) ── */
.fj-form-card--cerrado {
    text-align: center;
    padding: 48px 40px;
}

.fj-convocatoria-cerrada {
    font-size: 1.1rem;
    color: #4a4f6a;
    line-height: 1.7;
    margin: 0;
}


/* ══════════ faq-accordion ══════════ */

/* ─── Acordeón de preguntas frecuentes ───────────────────────────────────────
   Usado en las páginas de aplicar a beca, donar y voluntariado, justo antes
   del formulario correspondiente. Contenido en inc/faq-data.php, renderizado
   vía el shortcode [fj_faq] (inc/faq-render.php).

   A diferencia del formulario, esto NO es una tarjeta: fondo transparente
   (se ve el fondo de la página detrás) y mismo ancho que el título/texto de
   la sección de arriba (bloque Kadence con maxWidth 700).
   ────────────────────────────────────────────────────────────────────────── */

.fj-faq {
    max-width: 700px;
    margin: 0 auto 40px;
    font-family: var(--global-body-font-family, 'Manrope', sans-serif);
}

/* El título funciona como un acordeón de un solo elemento: al hacer clic
   se muestra/oculta toda la lista de preguntas — están hay muchas y por
   defecto conviene mantenerlas colapsadas. */
.fj-faq__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 8px 0 20px;
    margin: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.fj-faq__title:hover,
.fj-faq__title:focus,
.fj-faq__title:focus-visible {
    background: none;
    box-shadow: none;
    border-radius: 0;
    outline: none;
}

.fj-faq__title:focus-visible {
    outline: 2px solid #d8dbe8;
    outline-offset: -2px;
}

.fj-faq__title:hover .fj-faq__icon,
.fj-faq__title:focus-visible .fj-faq__icon {
    background: #dde1ee;
}

.fj-faq__title-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Eyebrow: ahora que el texto grande es distinto por página (ej. "Todo lo
   que debes de saber antes de aplicar"), esta etiqueta pequeña arriba deja
   claro que la sección sigue siendo el acordeón de FAQ. */
.fj-faq__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--global-palette2, #0077b6);
    line-height: 1.3;
}

.fj-faq__title-text {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1A1860;
    line-height: 1.3;
    text-transform: none;
}

/* Subtítulo: el texto que antes era el título de este acordeón (ej. "Aquí
   todo lo que debes de saber antes de dar el siguiente paso"), ahora en
   texto normal debajo de "Preguntas Frecuentes". */
.fj-faq__title-subtext {
    font-size: 0.95rem;
    font-weight: 400;
    color: #4a4f6a;
    line-height: 1.4;
    text-transform: none;
}

.fj-faq__list {
    max-height: 0;
    overflow: hidden;
}

.fj-faq.is-expanded .fj-faq__list {
    max-height: none;
    overflow: visible;
}

.fj-faq.is-expanded .fj-faq__icon--title::before {
    transform: translate(-50%, -30%) rotate(-135deg);
}

.fj-faq__item {
    border-bottom: 1px solid #e4e7ee;
}

.fj-faq__item:last-child {
    border-bottom: none;
}

.fj-faq__question {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

/* El botón entero no debe reaccionar al hover — solo el ícono (ver
   .fj-faq__icon más abajo). Se anula explícitamente porque el tema trae un
   estilo de hover por defecto en <button> (fondo + sombra + esquinas
   redondeadas, como una tarjeta que "flota"), que aquí no queremos. */
.fj-faq__question:hover,
.fj-faq__question:focus,
.fj-faq__question:focus-visible {
    background: none;
    box-shadow: none;
    border-radius: 0;
    outline: none;
}

/* Accesibilidad: indicador de foco por teclado, recto (sin curvas). */
.fj-faq__question:focus-visible {
    outline: 2px solid #d8dbe8;
    outline-offset: -2px;
}

/* Mismo hover del ícono que el botón-título (.fj-faq__title). */
.fj-faq__question:hover .fj-faq__icon,
.fj-faq__question:focus-visible .fj-faq__icon {
    background: #dde1ee;
}

.fj-faq__number {
    flex-shrink: 0;
    min-width: 24px;
    color: var(--global-palette1, #fea900);
    font-size: 0.8rem;
    font-weight: 700;
}

.fj-faq__question-text {
    flex: 1 1 auto;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1A1860;
    line-height: 1.4;
    text-transform: none;
}

/* Ícono: chevron dentro de un círculo gris claro permanente (2026-10-05,
   antes +/−). El círculo se puso en sept. porque el ícono solo, sin fondo,
   no se detectaba como clicable; el hover solo oscurece un poco el círculo.
   Cerrado = chevron hacia abajo, abierto = gira hacia arriba. El botón de
   "subir" de Kadence usa a propósito otra forma (flecha con palito en
   círculo azul marino) para que no se confundan. */
.fj-faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #eef0f7;
    border: 1px solid #d8dbe8;
    transition: background-color 0.15s ease;
}

/* El chevron es un cuadrado con solo 2 bordes, girado 45°; se corre un poco
   arriba/abajo para que se vea centrado ópticamente en el círculo. */
.fj-faq__icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-right: 2.5px solid #1A1860;
    border-bottom: 2.5px solid #1A1860;
    border-radius: 1px;
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform 0.2s ease;
}

.fj-faq__item.is-open .fj-faq__icon::before {
    transform: translate(-50%, -30%) rotate(-135deg);
}

.fj-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    padding: 0 0 0 40px;
}

.fj-faq__item.is-open .fj-faq__answer {
    /* separación clara respecto a la pregunta (arriba) y a la línea
       divisoria del siguiente renglón (abajo) */
    padding-top: 6px;
    padding-bottom: 28px;
}

.fj-faq__answer p,
.fj-faq__answer ul {
    margin: 0 0 14px;
    color: #4a4f6a;
    font-size: 0.95rem;
    line-height: 1.6;
}

.fj-faq__answer ul {
    padding-left: 20px;
}

.fj-faq__answer li {
    margin-bottom: 8px;
}

.fj-faq__answer p:last-child,
.fj-faq__answer ul:last-child {
    margin-bottom: 0;
}

.fj-faq__answer a {
    color: var(--global-palette1, #fea900);
    font-weight: 600;
}

@media screen and (max-width: 719px) {
    .fj-faq__answer {
        padding-left: 24px;
    }
}

/* Encabezado suelto (no es un acordeón, no tiene ícono) que precede al
   formulario en /aplicar-a-una-beca/ — misma tipografía/énfasis que
   .fj-faq__title-text para que se sienta parte de la misma familia visual. */
.fj-form-heading,
.single-content .fj-form-heading { /* gana a los márgenes de h2 de Kadence */
    max-width: 700px;
    margin: 0 auto 32px; /* 32px = lo que de verdad medía cuando era <p> (Kadence le ganaba al 20px) */
    font-family: var(--global-body-font-family, 'Manrope', sans-serif);
    font-size: 1.4rem;
    font-weight: 800;
    color: #1A1860;
    line-height: 1.3;
    text-transform: none;
}

/* Envoltorio semántico <h2>/<h3> de los botones del acordeón: neutraliza los
   estilos globales de encabezado de Kadence para que no cambie nada visual. */
.fj-faq .fj-faq__heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: inherit;
    font-family: var(--global-body-font-family, 'Manrope', sans-serif);
}