@import "adminlte/dist/css/adminlte.css";
@import "font-awesome/css/font-awesome.css";
@import "vue3-toastify/dist/index.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none;
}

/* Cambiar el color de la barra */
#nprogress .bar {
    background: #3498db !important;
}

/* Cambiar el color del spinner */
#nprogress .spinner-icon {
    border-top-color: #3498db !important;
    border-left-color: #3498db !important;
}

.hero-bg {
    background: url('images/seccion1.webp') no-repeat center center/cover;
}
.hero-overlay {
    background: rgba(0, 0, 0, 0.5); /* Semitransparente para mejorar el contraste */
}

.cta-bg {
    background: url('images/seccion4.webp') no-repeat center center/cover;
}
.cta-overlay {
    background: rgba(0, 0, 0, 0.5); /* Semitransparente para mejorar el contraste */
}

/* Estilo para la barra de desplazamiento */
::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de desplazamiento */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color del fondo de la barra de desplazamiento */
}

::-webkit-scrollbar-thumb {
    background: #1f2937; /* Color de la parte deslizante de la barra */
    border-radius: 4px; /* Esquinas redondeadas para el thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color del thumb cuando está en hover */
}