:root {
    /*paleta de colores calculada*/
    --color-advertencia: #fdb81e;
    --color-seleccion: #02bfe7;
    --color-embarque: #205493;
    --color-entrega: #2e8540;
    --color-no-entrega: #e31c3d;

    --shadow-color: 0deg 0% 0%;
    --shadow-elevation-low:
        0.5px 0.5px 0.8px hsl(var(--shadow-color) / 0.1),
        0.9px 0.7px 1.3px -1.2px hsl(var(--shadow-color) / 0.1),
        2.1px 1.8px 3.1px -2.5px hsl(var(--shadow-color) / 0.1);
    --shadow-elevation-medium:
        0.5px 0.5px 0.8px hsl(var(--shadow-color) / 0.11),
        1.8px 1.5px 2.6px -0.8px hsl(var(--shadow-color) / 0.11),
        4.4px 3.7px 6.5px -1.7px hsl(var(--shadow-color) / 0.11),
        10.7px 9px 15.7px -2.5px hsl(var(--shadow-color) / 0.11);
    --shadow-elevation-high:
        0.5px 0.5px 0.8px hsl(var(--shadow-color) / 0.11),
        3.5px 3px 5.2px -0.4px hsl(var(--shadow-color) / 0.11),
        6.9px 5.8px 10.1px -0.8px hsl(var(--shadow-color) / 0.11),
        12.1px 10.2px 17.8px -1.2px hsl(var(--shadow-color) / 0.11),
        20.7px 17.5px 30.5px -1.7px hsl(var(--shadow-color) / 0.11),
        34px 28.7px 50.1px -2.1px hsl(var(--shadow-color) / 0.11),
        53.6px 45.2px 78.9px -2.5px hsl(var(--shadow-color) / 0.11);
}
 
@font-face {
    font-family: 'Roboto';
    src: url('../../commons/webfonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;

}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../../commons/webfonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
}
/*----------------- Loader ---------------------*/
.loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #0000001b;
    z-index: 999999999;
}

.loader-hidden{
    opacity: 0;
    visibility: hidden;
}

.loader::after{
    content: "";
    position: fixed;
    width: 100px;
    height: 100px;
    border: 12px solid var(--color-principal);
    border-top-color: var(--color-secundario);
    border-radius: 50%;
    animation: loading 0.75s ease infinite;
    transition: opacity 0.75s, visibility 0.75s;
}

@keyframes loading {
    form{
        transform: rotate(0turn);
    }
    to{
        transform: rotate(1turn);
    }
}
/*----------------- Botones ---------------------*/
.btn-primary {
    background-color: var(--color-principal) !important;
    border-color: var(--color-principal) !important;
    color: var(--color-btn-text) !important;
}

.btn-primary:hover {
    background-color: var(--color-principal-hover) !important;
    border-color: var(--color-principal-hover) !important;
    color: var(--color-btn-text) !important;
}

.btn-primary:focus {
    background: var(--color-principal-focus);
}

.btn-secundario {
    background-color: var(--color-secundario) !important;
    border-color: var(--color-secundario) !important;
    color: var(--color-btn-text) !important;
}

.btn-secundario:hover {
    background-color: var(--color-secundario-hover) !important;
    border-color: var(--color-secundario-hover) !important;
    color: var(--color-btn-text) !important;
}

.btn-secundario:focus {
    background: var(--color-secundario-focus);
}

/*----------------- General ---------------------*/
body {
    margin: 0px;
    padding: 0px;
    background-color: var(--background-color);
    /*background-color: white ;*/
    color: var(--color-text-general);
    font-family: 'Roboto', sans-serif;
}

li {
    box-shadow: var(--shadow-elevation-low);
}

ul {
    width: 100%;
}

.li-guia {
    box-shadow: var(--shadow-elevation-low);
}

.h1 {
    font-weight: 700;
    font-family: 'Roboto-Bold', sans-serif;
    filter: drop-shadow(var(--shadow-elevation-low));
}

.form-control {
    border: 1px solid var(--color-principal);
    box-shadow: var(--shadow-elevation-low);
}

.form-control:focus {
    border: 2px solid var(--color-principal);
}

#divinp_guia {
    max-width: 800px;
}
#sel_paqueteria{
    max-width: 170px;
    border: 1px solid var(--color-principal);
}
#sel_paqueteria:focus{
    border: 2px solid var(--color-principal);
}

#img_firma {
    max-width: 100%;
    margin: auto;
}
button {
    box-shadow: var(--shadow-elevation-low);
}

svg {
    filter: drop-shadow(var(--shadow-elevation-low));
}
/*----------------- Utilidades ---------------------*/

.color-principal {
    color: var(--color-principal);
}

.color-secundario {
    color: var(--color-secundario);
}

.color-entregado {
    color: var(--color-entregado);
}