@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

:root {
    --color-primary: rgb(177, 29, 35);
    --color-seconday: rgb(78, 78, 80);
    --font-base: "Orbitron";
}

body {
    /* background: linear-gradient(to right, var(--color-primary), var(--color-seconday)); */
    /* background-color: rgba(255, 255, 255, 0.329); */
    font-family: var(--font-base);
    /* overflow-x: hidden !important; */
}

/* .container {
    overflow-x: hidden !important;
} */

.bar {
    rx: 10px !important;
    ry: 10px !important;
}

.tacna-color {
    background-color: var(--color-primary);
}

.tacna-color-secondary {
    background-color: rgb(199, 49, 49);
}

.texto-tacna {
    color: var(--color-primary);
}

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

.fondo-color-secundario {
    background-color: rgb(164, 167, 155);
}

.warning-primary {
    background-color: rgb(255, 208, 0);
}

.warning-secondary {
    background-color: rgb(255, 217, 0);
}

.primary-secondary {
    background-color: cornflowerblue;
}

.success-secondary {
    background-color: rgb(87, 174, 0);
}


/* .navbar {
    border-bottom: 5px solid #000;
} */

.nav-link:hover {
    color: var(--color-primary);
}

.img-opacity {
    opacity: 80%;
}

.carousel-item img {
    height: 262px;
    object-fit: cover;
}

.oficina-img {
    height: 200px;
    width: 200px;
    object-fit: cover;
}

@media (max-width: 450px) {
    .oficina-img {
        width: 150px;     /* ocupa todo el ancho disponible */
        height: 150px;    /* mantiene la proporción */
        object-fit: cover;
        border-radius: 8px;
    }
}

.oficina-tarjeta {
    transform: all 0.3s;
}

.oficina-tarjeta:hover {
    box-shadow: 10px;
    transform: scale(1.15);
    z-index: 1;
}

.modal-dialog {
    max-width: 80%;
    margin: 1.75rem auto;
}

.guest {
    background-color: rgba(0, 255, 255, 0.400) !important;
}

.supervisor {
    background-color: rgba(192, 192, 192, 0.400) !important;
}

.admin {
    background-color: rgba(255, 217, 0, 0.400) !important;
}

.itadmin {
    background-color: rgba(250, 128, 114, 0.400) !important;
}

.usuarioInactivo {
    background-color: rgba(93, 93, 93, 0.173) !important;
    color: grey !important;
}