/**
 * ============================================================================
 * AMAFJUBA - Mejoras al formulario de adhesión (Ultimate Member, form_id 977)
 * ============================================================================
 *
 * Estilos completos para el formulario de adhesión de socios.
 * Trabaja en conjunto con el archivo amaf-um-adhesion.js para producir
 * la experiencia multi-step, la validación visual y la adaptación
 * responsive del formulario UM.
 *
 * Tabla de contenidos:
 *   0. Variables CSS (paleta, tipografía, transiciones, etc.)
 *   1. Componentes atómicos (inputs, textareas, placeholders, fechas, selects)
 *   2. Campos específicos (inputs numéricos)
 *   3. Arquitectura multi-step (indicador, navegación, secciones)
 *   4. Estados de control (errores en caliente, mensaje de respuesta)
 *   5. Responsive mobile (max-width: 600px)
 *   6. Responsive tablet estrecha (max-width: 1024px)
 *
 * Importante sobre SVG inline (data URIs):
 *   Los SVG inline NO pueden usar var() dentro del string. Si la paleta cambia,
 *   actualizar manualmente los colores en:
 *     - .um-register .um-postmessage::before  → stroke %23D3B589 (dorado)
 *     - .um-form .um-field-date .um-field-area::after  → stroke %23114846 (verde más oscuro)
 *
 * @package AMAFJUBA Theme
 * @version 1.0.0
 * @author  Emanuel Di Santi
 * ============================================================================
 */

/* ==========================================================================
   0. VARIABLES CSS - PALETA Y CONSTANTES DEL PROYECTO AMAFJUBA
   ========================================================================== */

:root {
    /* ── Paleta institucional ── */
    --amaf-verde-oscuro: #0C504E;
    --amaf-verde-mas-oscuro: #114846;
    --amaf-verde-mas-oscuro-65: rgba(17, 72, 70, 0.65);
    --amaf-dorado: #D3B589;
    --amaf-beige: #FBF2E2;
    --amaf-gris-input: #E2E5E8;

    /* ── Estados de error ── */
    --amaf-rojo-error: rgb(199, 74, 74);
    --amaf-rojo-error-bg: #fff5f5;

    /* ── Tipografía ── */
    --amaf-fuente: 'Open Sans', sans-serif;
    --amaf-peso-semibold: 600;
    --amaf-peso-bold: 700;
    --amaf-tamano-xs: 14px;
    --amaf-tamano-xl: 22px;   /* ← nuevo: destacado del checkbox ACEPTO */
    --amaf-tamano-base: 16px;
    --amaf-tamano-md: 18px;
    --amaf-tamano-lg: 20px;

    /* ── Bordes y radios ── */
    --amaf-radio-base: 4px;

    /* ── Transiciones ── */
    --amaf-transicion-rapida: 0.2s;
    --amaf-transicion-lenta: 0.3s ease;
}

/* ==========================================================================
   1. COMPONENTES ATÓMICOS Y TEXTOS GLOBALES (INPUTS, TEXTAREAS Y PLACEHOLDERS)
   ========================================================================== */

/* ── Fondo y texto escrito de campos ── */
.um-form input.um-form-field,
.um-form textarea.um-form-field {
    background-color: var(--amaf-gris-input) !important;
    border-color: var(--amaf-gris-input) !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-base) !important;
    color: var(--amaf-verde-mas-oscuro) !important;
}

/* ── Textarea sin resize ── */
.um-form textarea[name="ultimo_cargo_field"][style] {
    height: 70px !important;
    min-height: unset !important;
    resize: none;
}

/* ── Encabezados de sección (um-row-heading) ── */
.um-form .um-row-heading {
    color: var(--amaf-verde-mas-oscuro) !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-lg) !important;
}

/* ── Texto del bloque de autorización ── */
.um-form .um-field-type_block {
    color: var(--amaf-verde-mas-oscuro) !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-base) !important;
}

/* ── Checkbox: ícono y texto ── */
.um-form .um-field-checkbox .um-field-checkbox-option {
    color: var(--amaf-verde-mas-oscuro) !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-base) !important;
}

/* ── Checkbox de autorización: destacar el "ACEPTO" ── */
/* UM posiciona el .um-field-checkbox-state en absolute con top/left,
   lo que lo saca del flujo y rompe cualquier layout flex del label.
   Lo devolvemos al flujo para poder alinearlo con el texto. */
.um-form .um-field[data-key="autorizacion_acepto"] .um-field-checkbox {
    display: flex !important;
    align-items: center !important;
}

.um-form .um-field[data-key="autorizacion_acepto"] .um-field-checkbox-state {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.um-form .um-field[data-key="autorizacion_acepto"] .um-field-checkbox-state i {
    font-size: 30px !important;
    line-height: 30px !important;
}

.um-form .um-field[data-key="autorizacion_acepto"] .um-field-checkbox-option {
    font-weight: var(--amaf-peso-bold) !important;
    font-size: var(--amaf-tamano-md) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Fin Checkbox de autorización ── */

.um-form .um-field-checkbox input[type="checkbox"]:checked + .um-field-checkbox-state i {
    color: var(--amaf-verde-mas-oscuro) !important;
}

.um-form .um-field-checkbox-state i {
    color: var(--amaf-verde-mas-oscuro) !important;
}

/* ── Placeholder ── */
.um-form input.um-form-field::placeholder,
.um-form textarea.um-form-field::placeholder {
    color: var(--amaf-verde-mas-oscuro-65) !important;
    opacity: 1 !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-base) !important;
}

.um-form input.um-form-field::-webkit-input-placeholder,
.um-form textarea.um-form-field::-webkit-input-placeholder {
    color: var(--amaf-verde-mas-oscuro-65) !important;
    opacity: 1 !important;
}

.um-form input.um-form-field::-moz-placeholder,
.um-form textarea.um-form-field::-moz-placeholder {
    color: var(--amaf-verde-mas-oscuro-65) !important;
    opacity: 1 !important;
}

/* ── Campos de fecha nativos: etiqueta sobre el input ── */
/* UM 2.13 deprecó pickadate y usa <input type="date">, que ignora el
   atributo placeholder. Superponemos el texto con un ::before y lo
   ocultamos cuando el campo tiene foco o valor (clase puesta por JS). */
.um-form .um-field-date .um-field-area {
    position: relative;
}

.um-form .um-field-date .um-field-area::before {
    content: attr(data-placeholder);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 38px;
    display: flex;
    align-items: center;
    padding-left: 12px;
    background-color: var(--amaf-gris-input);
    color: var(--amaf-verde-mas-oscuro-65);
    font-family: var(--amaf-fuente);
    font-weight: var(--amaf-peso-semibold);
    font-size: var(--amaf-tamano-base);
    border-radius: var(--amaf-radio-base);
    pointer-events: none;
}

.um-form .um-field-date .um-field-area.amaf-fecha-activa::before {
    display: none;
}

/* ── Segmentos internos del input date (día/mes/año) ── */
/* Safari los pinta con su color propio e ignora el color del input. */
.um-form input[type="date"].um-form-field::-webkit-datetime-edit,
.um-form input[type="date"].um-form-field::-webkit-datetime-edit-fields-wrapper,
.um-form input[type="date"].um-form-field::-webkit-datetime-edit-text,
.um-form input[type="date"].um-form-field::-webkit-datetime-edit-day-field,
.um-form input[type="date"].um-form-field::-webkit-datetime-edit-month-field,
.um-form input[type="date"].um-form-field::-webkit-datetime-edit-year-field {
    color: var(--amaf-verde-mas-oscuro);
    font-family: var(--amaf-fuente);
    font-weight: var(--amaf-peso-semibold);
    font-size: var(--amaf-tamano-base);
}

.um-form input[type="date"].um-form-field::-webkit-datetime-edit-day-field:focus,
.um-form input[type="date"].um-form-field::-webkit-datetime-edit-month-field:focus,
.um-form input[type="date"].um-form-field::-webkit-datetime-edit-year-field:focus {
    background-color: var(--amaf-verde-oscuro);
    color: var(--amaf-dorado);
    border-radius: 2px;
    outline: none;
}

/* ── Icono de calendario del input date ── */
/* Safari no renderiza ::-webkit-calendar-picker-indicator, así que
   ocultamos el nativo (donde existe) y dibujamos el nuestro sobre el
   wrapper. El nativo queda invisible pero clickeable en Chrome/Edge. */
.um-form input[type="date"].um-form-field::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 22px;
    height: 22px;
    margin: 0 4px 0 0;
    padding: 0;
    cursor: pointer;
}

.um-form .um-field-date .um-field-area::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23114846' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

/* ── Campos select (select2) ── */
/* UM renderiza los dropdown con select2, que oculta el <select> real y dibuja
   una estructura de <span>. Por eso no toman las reglas de .um-form-field.
   Acá solo se igualan los colores y la tipografía al resto de los campos:
   NO se toca alto, padding ni posicionamiento, que ya funcionan bien.

   Dos cosas a tener en cuenta si se agregan reglas nuevas:

   1) Los selectores llevan `.um .um-form .um-field` adelante a propósito.
      um-styles.min.css define estas propiedades con !important y se carga
      DESPUÉS que este archivo, así que con menos clases nuestras reglas
      pierden el desempate y aparecen tachadas en el inspector.

   2) Se usa la shorthand `background` y no `background-color`, porque UM
      declara `background: #fff !important` y una longhand no la pisa.

   El panel desplegable se monta al final del <body>, fuera del formulario,
   así que esos selectores no pueden colgar de .um. Como este archivo solo se
   encola en esta página, no afecta otros select2 del sitio. */

/* Caja cerrada */
.um .um-form .um-field .select2-container .select2-selection {
    background: var(--amaf-gris-input) !important;
    border: none !important;
    border-radius: var(--amaf-radio-base) !important;
    color: var(--amaf-verde-mas-oscuro) !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-base) !important;
}

/* Texto de la opción elegida */
.um .um-form .um-field .select2-container .select2-selection .select2-selection__rendered {
    color: var(--amaf-verde-mas-oscuro) !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-base) !important;
}

/* Placeholder (cuando todavía no se eligió nada) */
.um .um-form .um-field .select2-container .select2-selection .select2-selection__placeholder {
    color: var(--amaf-verde-mas-oscuro-65) !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-base) !important;
}

/* Panel desplegable (montado fuera del formulario) */
.select2-container--default .select2-dropdown {
    background-color: var(--amaf-gris-input) !important;
    border: none !important;
}

.select2-container--default .select2-results__option {
    color: var(--amaf-verde-mas-oscuro) !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-base) !important;
}

/* Opción bajo el cursor o navegada con el teclado */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #fff !important;
}

/* Opción ya elegida */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--amaf-verde-mas-oscuro) !important;
    color: var(--amaf-dorado) !important;
}

/* Buscador interno del panel */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--amaf-gris-input) !important;
    border: none !important;
    border-radius: var(--amaf-radio-base) !important;
    color: var(--amaf-verde-mas-oscuro) !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-base) !important;
    outline: none !important;
}

/* ==========================================================================
   2. TRATAMIENTO DE CAMPOS ESPECÍFICOS (INPUTS NUMÉRICOS)
   ========================================================================== */

.um-form input[type="number"].um-form-field {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 40px !important;
    padding: 0 12px !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.um-form input[type="number"].um-form-field::-webkit-outer-spin-button,
.um-form input[type="number"].um-form-field::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ==========================================================================
   3. ARQUITECTURA MULTI-STEP (ESTRUCTURA Y NAVEGACIÓN)
   ========================================================================== */

.um-form [data-step].um-step-hidden {
    display: none !important;
}

.um-step-indicator {
    margin-bottom: 40px;
    text-align: center;
    font-family: var(--amaf-fuente);
}

.um-step-circles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 15px;
}

.um-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--amaf-gris-input);
    color: var(--amaf-verde-mas-oscuro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--amaf-peso-bold);
    font-size: var(--amaf-tamano-base);
    transition: all var(--amaf-transicion-lenta);
    flex-shrink: 0;
}

.um-step-circle.activo {
    background-color: var(--amaf-verde-oscuro);
    color: var(--amaf-dorado);
    transform: scale(1.1);
}

.um-step-circle.completado {
    background-color: var(--amaf-verde-mas-oscuro);
    color: var(--amaf-dorado);
}

.um-step-line {
    width: 60px;
    height: 2px;
    background-color: var(--amaf-gris-input);
}

.um-step-title {
    color: var(--amaf-verde-mas-oscuro);
    font-weight: var(--amaf-peso-semibold);
    font-size: var(--amaf-tamano-md);
    margin-top: 10px;
}

/* ── Botones Anterior / Siguiente ── */
.um-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0 20px 0;
    gap: 15px;
}

.um-step-btn,
.um-step-btn:focus,
.um-step-btn:active,
.um-form .um-step-btn,
.um-form .um-step-btn:focus,
.um-form .um-step-btn:active {
    background-color: var(--amaf-verde-oscuro) !important;
    color: var(--amaf-dorado) !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-base) !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: var(--amaf-radio-base) !important;
    cursor: pointer !important;
    outline: none !important;
    text-decoration: none !important;
    transition: background-color var(--amaf-transicion-rapida), color var(--amaf-transicion-rapida) !important;
}

.um-step-btn:hover,
.um-form .um-step-btn:hover {
    background-color: var(--amaf-beige) !important;
    color: var(--amaf-verde-oscuro) !important;
}

.um-step-prev {
    margin-right: auto;
}

.um-step-next {
    margin-left: auto;
}

/* ── Botón Final Register (Submit nativo) ── */
.um-form #um-submit-btn {
    background-color: var(--amaf-verde-oscuro) !important;
    color: var(--amaf-dorado) !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-base) !important;
    border: none !important;
    transition: background-color var(--amaf-transicion-rapida), color var(--amaf-transicion-rapida);
}

.um-form #um-submit-btn:hover {
    background-color: var(--amaf-beige) !important;
    color: var(--amaf-verde-oscuro) !important;
}

/* ==========================================================================
   4. ESTADOS DE CONTROL DE FLUJO (ERRORES EN CALIENTE Y RESPUESTAS DEL SERVER)
   ========================================================================== */

.um-form input.um-error-input,
.um-form textarea.um-error-input {
    border: 2px solid var(--amaf-rojo-error) !important;
    background-color: var(--amaf-rojo-error-bg) !important;
}

/* ── Error en campos select ── */
/* UM renderiza los dropdown con select2, que oculta el <select> real y dibuja
   una estructura de <span> en su lugar. Por eso no se le puede aplicar
   .um-error-input al elemento: el JS marca el wrapper .um-field con
   .amaf-campo-error y desde acá pintamos la caja visible.
   Sirve para cualquier select del formulario, actual o futuro. */
.um .um-form .um-field.amaf-campo-error .select2-container--default .select2-selection--single,
.um .um-form .um-field.amaf-campo-error .select2-container--default .select2-selection--multiple {
    border: 2px solid var(--amaf-rojo-error) !important;
    background: var(--amaf-rojo-error-bg) !important;
}

.um-register .um-postmessage {
    background-color: var(--amaf-beige) !important;
    padding: 28px 32px !important;
    color: var(--amaf-verde-mas-oscuro) !important;
    font-family: var(--amaf-fuente) !important;
    font-weight: var(--amaf-peso-semibold) !important;
    font-size: var(--amaf-tamano-base) !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

.um-register .um-postmessage::before {
    content: '' !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 50% !important;
    background-color: var(--amaf-verde-oscuro) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D3B589' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 26px 26px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* ── Excluir el ícono del cartel de error del hover-gris de UM ── */
/* UM aplica color #666 al <i> dentro de .um-field-checkbox:hover,
   pero queremos que la flecha del cartel rojo mantenga su color blanco
   incluso cuando el mouse está sobre el checkbox. */
.um-form .um-field-checkbox:hover .um-field-error-custom .um-field-arrow i,
.um-form .um-field-checkbox:hover .um-field-error .um-field-arrow i {
    color: var(--amaf-rojo-error) !important;
}

/* ==========================================================================
   5. RESPONSIVE DISPOSITIVOS MÓVILES (MAX-WIDTH: 600PX)
   ========================================================================== */
@media (max-width: 600px) {
    .um-step-line {
        width: 30px;
    }

    .um-step-circle {
        width: 35px;
        height: 35px;
        font-size: var(--amaf-tamano-xs);
    }

    .um-step-title {
        font-size: var(--amaf-tamano-lg) !important;
    }

    .um-step-btn,
    .um-step-btn:focus,
    .um-step-btn:active,
    .um-form .um-step-btn,
    .um-form .um-step-btn:focus,
    .um-form .um-step-btn:active,
    .um-form #um-submit-btn {
        padding: 12px 24px !important;
        font-size: var(--amaf-tamano-lg) !important;
        line-height: 1.3 !important;
    }

    .um .um-form input.um-form-field,
    .um .um-form input[type="text"].um-form-field,
    .um .um-form input[type="number"].um-form-field,
    .um .um-form input[type="email"].um-form-field,
    .um .um-form input[type="tel"].um-form-field,
    .um .um-form textarea.um-form-field,
    .um .um-form .um-field-type_block,
    .um .um-form .um-field-checkbox .um-field-checkbox-option {
        font-size: var(--amaf-tamano-lg) !important;
        line-height: 1.35 !important;
    }

    .um .um-form input.um-form-field {
        height: 46px !important;
    }

    .um-form textarea[name="ultimo_cargo_field"][style] {
        height: 95px !important;
        min-height: 95px !important;
    }

    .um-form input.um-form-field::placeholder,
    .um-form textarea.um-form-field::placeholder {
        font-size: var(--amaf-tamano-lg) !important;
    }

    .um-form input.um-form-field::-webkit-input-placeholder,
    .um-form textarea.um-form-field::-webkit-input-placeholder {
        font-size: var(--amaf-tamano-lg) !important;
    }

    .um-form input.um-form-field::-moz-placeholder,
    .um-form textarea.um-form-field::-moz-placeholder {
        font-size: var(--amaf-tamano-lg) !important;
    }

    .um-register .um-postmessage {
        padding: 24px 22px !important;
        flex-direction: column !important;
        text-align: center !important;
        font-size: var(--amaf-tamano-lg) !important;
        line-height: 1.45 !important;
        gap: 14px !important;
    }
    
    /* ── Checkbox de autorización: destacar el "ACEPTO" ── */
    
    .um .um-form .um-field[data-key="autorizacion_acepto"] .um-field-checkbox-option {
        font-size: var(--amaf-tamano-xl) !important;
        font-weight: var(--amaf-peso-bold) !important;
    }

    .um .um-form .um-field[data-key="autorizacion_acepto"] .um-field-checkbox-state,
    .um .um-form .um-field[data-key="autorizacion_acepto"] .um-field-checkbox-state i {
        width: 34px !important;
        height: 34px !important;
        font-size: 34px !important;
        line-height: 34px !important;
    }

    .um .um-form .um-field-date .um-field-area::before {
        font-size: var(--amaf-tamano-lg) !important;
    }
    
    /* ── Campos select (select2) ── */

    .um .um-form .um-field .select2-container .select2-selection,
    .um .um-form .um-field .select2-container .select2-selection .select2-selection__rendered,
    .um .um-form .um-field .select2-container .select2-selection .select2-selection__placeholder {
        font-size: var(--amaf-tamano-lg) !important;
    }

    .select2-container--default .select2-results__option {
        font-size: var(--amaf-tamano-lg) !important;
    }
}

/* ==========================================================================
   6. RESPONSIVE TABLET ESTRECHA (MAX-WIDTH: 1024PX)
   ========================================================================== */
@media (max-width: 1024px) {
    .um-form .um-col-121,
    .um-form .um-col-122 {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    .um-form .um-col-122 {
        margin-top: 0 !important;
    }
}