@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

:root {
    --theme-primary: #482F26;
    --theme-primary-accion: #3e2921;
    --theme-primary-rgb: 72, 47, 38;
    --theme-secondary: #212529;
    --theme-secondary-accion: #141618;
    --theme-secondary-rgb: 33, 37, 41;
    --theme-text-light: #E8E8E8;
    --theme-text-dark: #0F0D0C;
    --theme-background-light: #D8DCD7;
    --theme-background-dark: #0F0D0C;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--theme-background-light) !important;
    color: var(--theme-background-dark) !important;
    margin: 0%;
    min-width: 300px !important;
}

h1,
h2,
h3 {
    color: var(--theme-primary) !important;
    font-family: 'Roboto', sans-serif;
}

.btn i {
    font-size: var(--bs-btn-font-size);
    margin-right: .375rem !important;
    vertical-align: initial;
}

textarea {
    resize: none !important;
}

.nav-link i {
    vertical-align: text-bottom;
}

.text-theme {
    color: var(--theme-text-light) !important;
}

.btn-theme {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--theme-background-light) !important;
    --bs-btn-bg: var(--theme-primary) !important;
    --bs-btn-border-color: var(--theme-primary) !important;
    --bs-btn-hover-color: var(--theme-background-light) !important;
    --bs-btn-hover-bg: var(--theme-primary-accion) !important;
    --bs-btn-hover-border-color: var(--theme-primary-accion) !important;
    --bs-btn-active-color: var(--theme-background-light) !important;
    --bs-btn-active-bg: rgba(var(--theme-primary-rgb), .8) !important;
    --bs-btn-active-border-color: rgba(var(--theme-primary-rgb), .8) !important;
}

.btn-outline-theme {
    --bs-btn-color: var(--theme-primary) !important;
    --bs-btn-border-color: var(--theme-primary) !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--theme-primary);
    --bs-btn-hover-border-color: var(--theme-primary) !important;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--theme-primary) !important;
    --bs-btn-active-border-color: var(--theme-primary) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--theme-primary) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--theme-primary) !important;
    --bs-gradient: none;
}
.btn-theme-dark {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--theme-background-light) !important;
    --bs-btn-bg: var(--theme-secondary) !important;
    --bs-btn-border-color: var(--theme-secondary) !important;
    --bs-btn-hover-color: var(--theme-background-light) !important;
    --bs-btn-hover-bg: var(--theme-secondary-accion) !important;
    --bs-btn-hover-border-color: var(--theme-secondary-accion) !important;
    --bs-btn-active-color: var(--theme-background-light) !important;
    --bs-btn-active-bg: rgba(var(--theme-secondary-rgb), .8) !important;
    --bs-btn-active-border-color: rgba(var(--theme-secondary-rgb), .8) !important;
}
.btn-outline-themelight {
    --bs-btn-color: var(--theme-secondary) !important;
    --bs-btn-border-color: var(--theme-secondary) !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--theme-secondary);
    --bs-btn-hover-border-color: var(--theme-secondary) !important;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--theme-secondary) !important;
    --bs-btn-active-border-color: var(--theme-secondary) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--theme-secondary) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--theme-secondary) !important;
    --bs-gradient: none;
}

/* Iconos */
.material-symbols-rounded {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48
}

/* Toast */
#snackbar {
    --toast-opacity: .92;
    background-color: rgba(var(--bs-tertiary-color-rgb), var(--toast-opacity));
    border-radius: .375rem;
    bottom: 30px;
    color: #000;
    font-size: 17px;
    font-weight: 400;
    left: calc(95vw - 125px);
    margin-left: -125px;
    max-width: 250px;
    min-width: 250px;
    padding: 16px;
    position: fixed;
    text-align: center;
    visibility: hidden;
    z-index: 1050;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 3.6s;
    animation: fadein 0.5s, fadeout 0.5s 3.6s;
}

#snackbar.ok {
    background-color: rgba(var(--bs-success-rgb), var(--toast-opacity)) !important;
    color: #fff !important;

}

#snackbar.error {
    background-color: rgba(var(--bs-danger-rgb), var(--toast-opacity)) !important;
    color: #fff !important;

}

#snackbar.alert {
    background-color: rgba(var(--bs-warning-rgb), var(--toast-opacity)) !important;
    color: #000 !important;

}

#snackbar.error {
    background-color: rgba(var(--bs-danger-rgb), var(--toast-opacity)) !important;
    color: #fff !important;

}

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}