/* You can add global styles to this file, and also import other style files */

$gutter: 1rem; //for primeflex grid system
@import "assets/layout/styles/layout/layout.scss";

/* PrimeNG */
@import "../node_modules/primeng/resources/primeng.min.css";
@import "../node_modules/primeflex/primeflex.scss";
@import "../node_modules/primeicons/primeicons.css";

/* Demos */
@import "assets/demo/styles/flags/flags.css";
@import "assets/demo/styles/badges.scss";
@import "assets/demo/styles/code.scss";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}

.custom-file-upload {
    width: 100%;
    background-color: #f2f2f2;
    /* Color de fondo gris */
    border: 1px solid #ccc;
    /* Borde gris */
    padding: 10px;
    /* Ajusta el relleno según sea necesario */
    box-sizing: border-box;
    /* Incluye el relleno y el borde en el tamaño total */
}

.p-datatable-wrapper::-webkit-scrollbar {
    width: 4px;
    height: 10px;
}

.p-datatable-wrapper::-webkit-scrollbar-track {
    background: #f9fafb;
}

.p-datatable-wrapper::-webkit-scrollbar-thumb {
    background-color: #BFBFBF;
    border-radius: 10px;
    border: 1px solid #f2f2f2;
}

.p-datatable-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #B5BFB4;
}

.p-dialog-content::-webkit-scrollbar {
    width: 4px;
    height: 10px;
}

.p-dialog-content::-webkit-scrollbar-track {
    background: #f9fafb;
}

.p-dialog-content::-webkit-scrollbar-thumb {
    background-color: #BFBFBF;
    border-radius: 10px;
    border: 1px solid #f2f2f2;
}

.p-dialog-content::-webkit-scrollbar-thumb:hover {
    background-color: #B5BFB4;
}

///----------------------------------------------------------------

.layout-sidebar::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

.layout-sidebar::-webkit-scrollbar-track {
    background: #f9fafb;
}

.layout-sidebar::-webkit-scrollbar-thumb {
    background-color: #BFBFBF;
    border-radius: 10px;
    border: 1px solid #f2f2f2;
}

.layout-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #B5BFB4;
}

.container {
    padding: 4%;
    margin-top: 6rem;
}

.container-footer {
    padding: 2%;
    margin-top: 2rem;
    background-color: #0c71c3;
}

/* CSS para un borde bonito en una imagen */
.image-border {
    border: 5px solid #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-hover {
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 50%;
    padding: 0.5rem;
}

.icon-hover:hover {
    color: white !important;
    background-color: #fcb900;
    /* Fondo azul transparente */
}