/* =========================================================
   YGFACTURAS 3.0 - ESTILOS GLOBALES
   ========================================================= */


/* =========================================================
   DOCUMENTO
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f5f6f8;
    color: #202731;
}


/* Blazor ocupa toda la ventana */

body {
    min-height: 100vh;
}


/* =========================================================
   ELEMENTOS GENERALES
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


a {
    color: inherit;
}


button,
input,
select,
textarea {
    font-family: inherit;
}


    /* =========================================================
   FOCUS
   ========================================================= */

    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
    }


/* =========================================================
   PÁGINA DE ERROR BLAZOR
   ========================================================= */

#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    left: 0;
    display: none;
    position: fixed;
    width: 100%;
    z-index: 10000;
    padding: 10px 20px;
    color: #664d03;
    border-top: 1px solid #ffecb5;
}


    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 15px;
        top: 8px;
    }


/* =========================================================
   ERROR DE BLAZOR
   ========================================================= */

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}


    .blazor-error-boundary::after {
        content: "Se ha producido un error.";
    }


/* =========================================================
   VALIDACIÓN
   ========================================================= */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}


.invalid {
    outline: 1px solid #e53935;
}


.validation-message {
    color: #d32f2f;
    font-size: 12px;
}