/* =========================================================
   TRUALL · NINJA FORMS
   Estilos reutilizables
   ========================================================= */


/* =========================================================
   1. CONFIGURACIÓN DEL SITIO
   MODIFICAR PRINCIPALMENTE ESTA SECCIÓN
   ========================================================= */

:root {

    /* Colores */
    --tr-nf-primary: #1686e8;
    --tr-nf-primary-hover: #1173c8;

    --tr-nf-text: #444444;
    --tr-nf-placeholder: #a9a9a9;

    --tr-nf-background: #f7f8f9;
    --tr-nf-background-focus: #ffffff;

    --tr-nf-border: #d9dee3;
    --tr-nf-border-focus: #1686e8;

    --tr-nf-error: #e53935;
    --tr-nf-error-background: #fff8f8;

    --tr-nf-message-background: #f3f8fd;
    --tr-nf-message-text: #34495e;

    /* Dimensiones */
    --tr-nf-radius: 5px;
    --tr-nf-field-height: 48px;
    --tr-nf-textarea-height: 110px;

    /* Tipografía */
    --tr-nf-font-size: 15px;
    --tr-nf-button-font-size: 15px;

    /* Espaciado */
    --tr-nf-field-gap: 9px;
}


/* =========================================================
   2. CONTENEDOR
   ========================================================= */

.tr_form .nf-form-content {
    padding: 0 !important;
    max-width: 100% !important;
}

.tr_form .nf-field-container {
    margin-bottom: var(--tr-nf-field-gap) !important;
}


/* =========================================================
   3. CAMPOS
   ========================================================= */

.tr_form .nf-form-content input:not([type="button"]):not([type="submit"]),
.tr_form .nf-form-content textarea,
.tr_form .nf-form-content select {

    width: 100% !important;
    min-height: var(--tr-nf-field-height) !important;

    padding: 10px 13px !important;

    border: 1px solid var(--tr-nf-border) !important;
    border-radius: var(--tr-nf-radius) !important;

    background: var(--tr-nf-background) !important;
    color: var(--tr-nf-text) !important;

    font-family: inherit !important;
    font-size: var(--tr-nf-font-size) !important;
    line-height: 1.35 !important;

    box-shadow: none !important;
    box-sizing: border-box !important;
}


/* =========================================================
   4. PLACEHOLDERS
   ========================================================= */

.tr_form input::placeholder,
.tr_form textarea::placeholder {
    color: var(--tr-nf-placeholder) !important;
    opacity: 1;
}


/* =========================================================
   5. TEXTAREA
   ========================================================= */

.tr_form .nf-form-content textarea {
    min-height: var(--tr-nf-textarea-height) !important;
    height: var(--tr-nf-textarea-height) !important;
    resize: vertical;
}


/* =========================================================
   6. FOCUS
   ========================================================= */

.tr_form .nf-form-content input:not([type="button"]):not([type="submit"]):focus,
.tr_form .nf-form-content textarea:focus,
.tr_form .nf-form-content select:focus {

    border-color: var(--tr-nf-border-focus) !important;
    background: var(--tr-nf-background-focus) !important;

    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   7. SELECT
   Safari / iOS fix + flecha propia
   ========================================================= */

.tr_form select.nf-element {

    -webkit-appearance: none !important;
    appearance: none !important;

    width: 100% !important;

    height: var(--tr-nf-field-height) !important;
    min-height: var(--tr-nf-field-height) !important;

    padding: 0 42px 0 14px !important;

    line-height: var(--tr-nf-field-height) !important;

    cursor: pointer;
}

.tr_form .listselect-wrap .nf-field-element {
    position: relative;
}

.tr_form .listselect-wrap .nf-field-element::after {

    content: "";

    position: absolute;

    right: 16px;
    top: 50%;

    width: 8px;
    height: 8px;

    border-right: 2px solid #66788a;
    border-bottom: 2px solid #66788a;

    transform: translateY(-70%) rotate(45deg);

    pointer-events: none;
}


/* =========================================================
   8. BOTÓN
   ========================================================= */

.tr_form .submit-container {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

.tr_form .nf-form-content input[type="submit"],
.tr_form .nf-form-content input[type="button"] {

    width: 100% !important;

    min-height: 48px !important;

    padding: 10px 20px !important;

    border: 0 !important;
    border-radius: var(--tr-nf-radius) !important;

    background: var(--tr-nf-primary) !important;
    color: #ffffff !important;

    font-family: inherit !important;
    font-size: var(--tr-nf-button-font-size) !important;
    font-weight: 600 !important;

    cursor: pointer;

    transition:
        background .2s ease,
        opacity .2s ease,
        transform .2s ease;
}

.tr_form .nf-form-content input[type="submit"]:hover,
.tr_form .nf-form-content input[type="button"]:hover {
    background: var(--tr-nf-primary-hover) !important;
}


/* =========================================================
   9. ERRORES
   Diseño compacto
   ========================================================= */

/* Ocultar aviso "Los campos marcados..." */
.tr_form .nf-form-fields-required {
    display: none !important;
}

/* Ocultar mensajes individuales de Ninja Forms */
.tr_form .nf-error-msg {
    display: none !important;
}

/* Ocultar resumen general */
.tr_form .nf-error .nf-error-msg,
.tr_form .nf-form-errors {
    display: none !important;
}

/* Error cuando Ninja Forms agrega .nf-error al contenedor */
.tr_form .nf-error .nf-field-element input,
.tr_form .nf-error .nf-field-element textarea,
.tr_form .nf-error .nf-field-element select {
    border-color: var(--tr-nf-error) !important;
    background: var(--tr-nf-error-background) !important;
}

/* Error mediante aria-invalid */
.tr_form .nf-form-content input.nf-element[aria-invalid="true"]:not([type="button"]):not([type="submit"]),
.tr_form .nf-form-content textarea.nf-element[aria-invalid="true"],
.tr_form .nf-form-content select.nf-element[aria-invalid="true"] {
    border-color: var(--tr-nf-error) !important;
    background: var(--tr-nf-error-background) !important;
}

/* Sin iconos automáticos de Ninja */
.tr_form .nf-error.field-wrap .nf-field-element::after {
    display: none !important;
}


/* =========================================================
   10. MENSAJE DE RESPUESTA
   ========================================================= */

.tr_form .nf-response-msg {

    padding: 12px 14px;

    border-radius: var(--tr-nf-radius);

    background: var(--tr-nf-message-background);
    color: var(--tr-nf-message-text);
}


/* =========================================================
   11. BLOQUE INFORMATIVO
   ========================================================= */

.tr_form .tr_form_note {

    margin: 2px 0 5px;

    padding: 9px 11px;

    border-radius: var(--tr-nf-radius);

    background: var(--tr-nf-message-background);
    color: #5a6570;

    font-size: 13px;
    line-height: 1.45;
}


/* =========================================================
   12. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .tr_form .nf-field-container {
        margin-bottom: 8px !important;
    }

    /* Evita zoom automático en Safari/iPhone */
    .tr_form .nf-form-content input:not([type="button"]):not([type="submit"]),
    .tr_form .nf-form-content textarea,
    .tr_form .nf-form-content select {
        font-size: 16px !important;
    }
}