/* ============================================================
   1. VARIABLES
   ============================================================ */

:root {
    /* Colores principales */
    --fm-acento: #3c8dbc;
    --fm-acento-hover: #327da8;
    --fm-acento-suave: rgba(60, 141, 188, 0.16);
    /* Texto */
    --fm-tinta: #333333;
    --fm-tinta-tenue: #667780;
    --fm-placeholder: #81909a;
    /* Superficies */
    --fm-fondo: #ffffff;
    --fm-fondo-disabled: #f0f3f5;
    /* Bordes */
    --fm-borde: #d9e2e7;
    --fm-borde-hover: #bccbd3;
    --fm-linea: #e6edf1;
    /* Dimensiones */
    --fm-altura: 38px;
    --fm-radius: 7px;
    /* Tipografía */
    --fm-font-size: 12px;
    --fm-label-size: 12px;
    /* Sombras */
    --fm-sombra: 1px 2px 4px rgba(31, 48, 58, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    --fm-sombra-focus: 0 0 0 3px var(--fm-acento-suave), 0 2px 5px rgba(31, 48, 58, 0.07);
}


/* ============================================================
   2. ETIQUETAS
   ============================================================ */

.form-group > label {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--fm-tinta-tenue);
    font-size: var(--fm-label-size);
    font-weight: 600;
    line-height: 1.3;
}


/* ============================================================
   3. CONTROL BASE
   ============================================================ */

.form-control {
    box-sizing: border-box;
    width: 100%;
    height: var(--fm-altura);
    padding: 7px 11px;
    border: 1px solid var(--fm-borde);
    border-radius: var(--fm-radius);
    background-color: var(--fm-fondo);
    color: var(--fm-tinta);
    font-size: var(--fm-font-size);
    font-weight: 400;
    line-height: 1.4;
    box-shadow: var(--fm-sombra);
    outline: none;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}


    /* ============================================================
   4. ESTADOS DEL CONTROL
   ============================================================ */

    .form-control:hover:not(:disabled):not([readonly]) {
        border-color: var(--fm-borde-hover);
    }


    .form-control:focus {
        border-color: var(--fm-acento);
        background-color: #ffffff;
        box-shadow: var(--fm-sombra-focus);
        outline: none;
    }


    /* ============================================================
   5. PLACEHOLDER
   ============================================================ */

    .form-control::placeholder {
        color: var(--fm-placeholder);
        font-size: var(--fm-font-size);
        opacity: 1;
    }


    /* Compatibilidad con navegadores antiguos */

    .form-control::-webkit-input-placeholder {
        color: var(--fm-placeholder);
    }

    .form-control::-moz-placeholder {
        color: var(--fm-placeholder);
        opacity: 1;
    }

    .form-control:-ms-input-placeholder {
        color: var(--fm-placeholder);
    }


    /* ============================================================
   6. DESHABILITADOS Y SOLO LECTURA
   ============================================================ */

    .form-control:disabled,
    .form-control[readonly],
    fieldset[disabled] .form-control {
        border-color: var(--fm-linea);
        background-color: var(--fm-fondo-disabled);
        color: var(--fm-tinta-tenue);
        box-shadow: none;
        cursor: not-allowed;
    }


        /*
   readonly puede necesitar selección de texto, por eso
   conservamos el cursor normal si no está disabled.
*/

        .form-control[readonly]:not(:disabled) {
            cursor: default;
        }


/* ============================================================
   7. TEXTAREA
   ============================================================ */

textarea.form-control {
    height: auto;
    min-height: 70px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.5;
    resize: vertical;
}


/* ============================================================
   7b. ARCHIVO
   El boton que dibuja el navegador no cabe en la altura fija.
   ============================================================ */

input[type="file"].form-control {
    height: auto;
    min-height: var(--fm-altura);
    padding: 8px 11px;
    line-height: 1.4;
    cursor: pointer;
}


/* ============================================================
   8. CONTROLES PEQUEÑOS DE BOOTSTRAP
   ============================================================ */

.input-sm,
.form-group-sm .form-control,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon {
    height: 32px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 12px;
}


/* ============================================================
   9. INPUT GROUP
   calendario, prefijos, botones, etc.
   ============================================================ */

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn {
    border-top-left-radius: var(--fm-radius);
    border-bottom-left-radius: var(--fm-radius);
}


.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn {
    border-top-right-radius: var(--fm-radius);
    border-bottom-right-radius: var(--fm-radius);
}


/* ============================================================
   10. ADDONS
   ============================================================ */

.input-group-addon {
    padding: 0 11px;
    border: 1px solid var(--fm-borde);
    background-color: #f8fafb;
    color: #83959f;
    font-size: var(--fm-font-size);
    box-shadow: var(--fm-sombra);
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}


    /* Evita doble borde entre input y addon */

    .input-group-addon + .form-control,
    .input-group .form-control + .input-group-addon {
        border-left: 0;
    }


/* ============================================================
   11. ESTADOS DEL INPUT GROUP
   ============================================================ */

.input-group:hover .input-group-addon {
    border-color: var(--fm-borde-hover);
}


.input-group:focus-within {
    border-radius: var(--fm-radius);
    box-shadow: var(--fm-sombra-focus);
}


    .input-group:focus-within .form-control,
    .input-group:focus-within .input-group-addon {
        border-color: var(--fm-acento);
    }


    .input-group:focus-within .input-group-addon {
        background-color: #ffffff;
        color: var(--fm-acento);
    }


    .input-group:focus-within .form-control {
        box-shadow: none;
    }


/* ============================================================
   12. DEVEXPRESS - COMBOS / BUTTON EDIT
   ============================================================ */

/*
   Solo afecta controles DevExpress que además tengan
   CssClass="form-control".
*/

table[class*="dxeButtonEdit"].form-control {
    border-collapse: separate;
    border-spacing: 0;
    padding: 0;
    overflow: hidden;
}


/* Input interno generado por DevExpress */

.form-control [class*="dxeEditArea"] {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--fm-tinta);
    font-family: inherit;
    font-size: var(--fm-font-size);
    font-weight: 400;
    outline: none;
}


    /* DevExpress no debe dibujar un segundo foco */

    .form-control [class*="dxeEditArea"]:focus {
        outline: none;
        box-shadow: none;
    }


/*
   Solo los editores con boton (combos y fechas) quedan con el texto
   pegado arriba de la celda. Los ASPxTextBox no llevan este empujon
   porque ahi si centra bien y se subirian.
*/

table[class*="dxeButtonEdit"].form-control [class*="dxeEditArea"] {
    padding-top: 5px;
}


/* ============================================================
   13. BOTÓN DEL COMBO DEVEXPRESS
   ============================================================ */

.form-control td[class*="dxeButtonEditButton"] {
    width: 32px;
    padding: 0 7px;
    border: 0 !important;
    border-left: 1px solid transparent !important;
    background: transparent !important;
    opacity: 0.6;
    transition: opacity 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}


table[class*="dxeButtonEdit"].form-control:hover
td[class*="dxeButtonEditButton"] {
    opacity: 0.85;
}


table[class*="dxeButtonEdit"].form-control:focus-within
td[class*="dxeButtonEditButton"] {
    border-left-color: var(--fm-linea) !important;
    background-color: #f8fafb !important;
    opacity: 1;
}


/* ============================================================
   13b. DEVEXPRESS DESHABILITADO
   ============================================================ */

/* :disabled no aplica a la tabla que dibuja DevExpress. */
.form-control[class*="dxeDisabled"] {
    border-color: var(--fm-linea);
    background-color: var(--fm-fondo-disabled);
    box-shadow: none;
}

    .form-control[class*="dxeDisabled"] [class*="dxeEditArea"] {
        color: var(--fm-tinta-tenue);
    }

    .form-control[class*="dxeDisabled"] td[class*="dxeButtonEditButton"] {
        opacity: 0.35;
    }


/* ============================================================
   14. FOCO DEVEXPRESS
   ============================================================ */

table[class*="dxeButtonEdit"].form-control:focus-within,
.form-control[class*="dxeFocused"] {
    border-color: var(--fm-acento);
    background-color: #ffffff;
    box-shadow: var(--fm-sombra-focus);
}


/* ============================================================
   15. SUBTÍTULO DE SECCIÓN
   ============================================================ */

.subtitulo-seccion {
    margin: 5px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--fm-linea);
    color: var(--fm-tinta-tenue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


.row + .row .subtitulo-seccion {
    margin-top: 18px;
}


/* ============================================================
   16. TELÉFONOS
   ============================================================ */

@media (max-width: 767px) {

    /*
       Los controles aumentan de tamaño físico para que sean
       más cómodos de tocar, pero conservamos el estilo.
    */

    .form-control {
        height: 42px;
        padding-right: 11px;
        padding-left: 11px;
        font-size: 16px;
    }


        /*
       DevExpress también debe utilizar 16px en móvil.
    */

        .form-control [class*="dxeEditArea"] {
            font-size: 16px;
        }


    .input-sm,
    .form-group-sm .form-control,
    .input-group-sm > .form-control,
    .input-group-sm > .input-group-addon {
        height: 38px;
        font-size: 15px;
    }


    textarea.form-control {
        height: auto;
        min-height: 80px;
    }
}


/* ============================================================
   17. REDUCIR ANIMACIONES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .form-control,
    .input-group-addon,
    .form-control td[class*="dxeButtonEditButton"] {
        transition: none;
    }
}