body {
    display: grid;
    grid-template-columns: auto 1fr;
}

#user {
    background-color: lightgrey;
}

.login-background {
    background-image: url("/images/background.jpg");
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(5px) brightness(70%);
}

.btn:hover {
    background-color: #E1D48C;
}
.swal-text {
    color: black;
    font-size: 15px;
}
#sidebar {
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    background: #343a40;
    background-color: #fff;
    transition: all 0.3s;
    overflow-y: auto;
    z-index: 1050;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9999;
    width: 100px;
    height: 100px;
}

html[data-bs-theme="light"] .table tr:hover {
    background-color: #f3e597 !important;
}

td > a {
    color: #080b17 !important;
}

/* Estado colapsado para pantallas grandes */
#sidebar.collapsed {
    margin-left: -250px;
}

.nav .btn:hover {
    background-color: #31A0EC;
}


.nav-link {
    color: #080b17 !important;
}

.nav-link.active {
    background-color: #31A0EC !important;
    color: #fff !important;
}

    .nav-link:hover {
        background-color: #31A0EC !important;
        color: #fff !important;
    }

div h1 {
    color: #FFF;
}

#table_id_info {
    display: none;
}

.dt-info {
    display: none;
}

nav .active {
    color: #fff !important;
    background-color: #31a0ec !important;
}

.nav-pills .nav-link:hover {
    color: #fff !important;
    background-color: #31a0ec !important;
}

.nav-pills .nav-link:active {
    color: #fff !important;
    background-color: #31a0ec !important;
}

.dropdown-item:active {
    background-color: #ffd800;
}

main:has(> .with-background) {
    background-image: url("/images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.with-background {
    backdrop-filter: blur(3px) brightness(70%);
}

.nav-pills .nav-link {
    background-color: #424649 !important;
    color: #fff !important;
    border: 0;
    border-radius: var(--bs-nav-pills-border-radius);
    margin-block: 5px;
}


#navbar {
    background: #31a0ec !important;
}
#btnSubir {
    color: white;
}
.position-relative .bi-folder {
    color: #080b17;
}

.position-relative .fs-4 {
    color: #080b17;
}


/* Contenedor principal */
#content {
    transition: margin-left 0.3s;
    padding: 20px;
    margin-left: 250px;
}

    /* Contenedor expandido cuando el sidebar est� oculto (pantallas grandes) */
#content.full-width {
    margin-left: 0;
}

/* Bot�n ubicado siempre al lado del sidebar (parte inferior) */
#sidebarToggle {
    position: fixed;
    bottom: 25px;
    left: 260px;
    z-index: 2;
    transition: left 0.3s, opacity 0.3s;
}

/* Mover bot�n en pantallas grandes */
#sidebar.collapsed ~ #sidebarToggle {
    left: 10px;
}

hr {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
}

.bg-primary {
    background-color: #31a0ec !important;
}

.btn-primary {
    background-color: #31a0ec !important;
    color: #fff;
    border-color: #31A0EC !important;
}

thead {
    background-color: #cacaca !important;
    color: #3d3a3a;
}

th {
    min-width: 150px;
}
#greenHint {
    color: green;
    background-color: lightblue;
}


/* Cambios de color cuando se aplica el modo oscuro */

html[data-bs-theme="dark"] #greenHint { /* Para la documentación del cliente*/
    color: green;
    background-color: #C7BCA4;
}

html[data-bs-theme="dark"] .logo {
    content: url("/images/logo-dark.png");
    background-color: #080b17 !important;
}

html[data-bs-theme="dark"] .swal-icon--success::before,
html[data-bs-theme="dark"] .swal-icon--success::after,
html[data-bs-theme="dark"] .swal-icon--success__hide-corners {
    background-color: #080b17
}

html[data-bs-theme="dark"] .swal-content__input {
    color:black
}

html[data-bs-theme="dark"] .swal-button {
    background-color: #C7BCA4;
    color:black
    
}

html[data-bs-theme="dark"] .swal-button:hover {
    background-color: #834e7c;
    color: #C7BCA4;
}

html[data-bs-theme="dark"] .swal-button--danger {
    background-color: red;
    color: black
}

.modal-backdrop {
    z-index: -1;
}

.btn-secondary {
    --bs-btn-active-bg: #6c757d !important;
}


html[data-bs-theme="dark"] #user {
    background-color: #343a40;
}

html[data-bs-theme="dark"] #sidebar {
    background-color: #080b17 !important;
}

html[data-bs-theme="dark"] thead {
    background-color: #333333 !important;
    color: #C7BCA4;
}

html[data-bs-theme="dark"] .bg-primary {
    background-color: #080b17 !important;
    color: #C7BCA4;
}

html[data-bs-theme="dark"] .btn-primary {
    background-color: #454545 !important;
    color: #C7BCA4;
}

html[data-bs-theme="dark"] .btn-secondary {
    background-color: #34363c !important;
    color: #C7BCA4;
}

html[data-bs-theme="dark"] .btn:hover {
    background-color: #232323 !important;
    color: #fff;
}

html[data-bs-theme="dark"] nav .active {
    background-color: #C7BCA4 !important;
    color: #3d3a3a;
}

html[data-bs-theme="dark"] #excel:hover {
    background-color: #e8e8e8 !important;
    color: #3d3a3a;
}

html[data-bs-theme="dark"] #excel {
    background-color: #284503 !important;
    color: #C7BCA4;
}

html[data-bs-theme="dark"] .nav-pills .nav-link:hover {
    background-color: #e8e8e8 !important;
    color: #3d3a3a;
}

html[data-bs-theme="dark"] .nav-pills .nav-link:active {
    background-color: #e8e8e8 !important;
    color: #3d3a3a;
}

html[data-bs-theme="dark"] .dropdown-item:active {
    background-color: #834e7c;
}
html[data-bs-theme="dark"] #navbar {
    background-color: #080b17 !important;
    color: #C7BCA4;
}

html[data-bs-theme="dark"] .table-striped tr:hover {
    background-color: #34363c;
}


html[data-bs-theme="dark"] td > a {
    color: #b3d0c8 !important;
}

html[data-bs-theme="dark"] nav .btn {
    background-color: #080B17 !important;
    color: #C7BCA4 !important;
}

html[data-bs-theme="dark"] nav .btn.bg-danger {
    background-color: red !important;
}

html[data-bs-theme="dark"] nav .btn.bg-danger:hover {
     background-color: #3d3a3a !important;
}

html[data-bs-theme="dark"] nav .btn:hover .bi-person-plus {
     color: #31A0EC !important;
}

html[data-bs-theme="dark"] h1 {
    color: #C7BCA4 !important;
}

html[data-bs-theme="dark"] .swal-modal {
    background-color: #080b17;
}

html[data-bs-theme="dark"] .swal-title {
    color: #C7BCA4;
}

html[data-bs-theme="dark"] .ql-snow .ql-stroke, .ql-picker-label:before, .ql-fill {
    stroke: #C7BCA4;
    color: #C7BCA4;
}

html[data-bs-theme="dark"] .fc-list-day-cushion,
html[data-bs-theme="dark"] .fc-cell-shaded {
    background-color: #080b17;
}

html[data-bs-theme="dark"] .fc-list-event-time {
    color: #C7BCA4;
}

html[data-bs-theme="dark"] .fc-list-event:hover td {
    background-color: #E1D48C;
    color: black;
}

html[data-bs-theme="dark"] .fc-theme-standard .fc-list {
    border: 1px solid var(--fc-border-color, #b9b9b9);
}

html[data-bs-theme="dark"] .fc-list-event-title {
    color: #C7BCA4;
}

html[data-bs-theme="dark"] .fc-scroller .fc-scroller-liquid {
    background-color: #080b17;
}

html[data-bs-theme="dark"] .fc-list-day-text,
html[data-bs-theme="dark"] .fc-col-header-cell-cushion,
html[data-bs-theme="dark"] .fc-daygrid-day-number {
    color: #C7BCA4;
}

/* Modo claro */
html[data-bs-theme="light"] .fc-scroller .fc-scroller-liquid,
html[data-bs-theme="light"] .fc-dom-89 {
    background-color: white;
    color: black;
}

html[data-bs-theme="light"] .fc-list-day-text,
html[data-bs-theme="light"] .fc-col-header-cell-cushion,
html[data-bs-theme="light"] .fc-daygrid-day-number {
    color: #080b17;
}

html[data-bs-theme="dark"] .nav-link {
    color: #C7BCA4 !important;
}

    html[data-bs-theme="dark"] .nav-link.active {
        background-color: #000000 !important;
        color: #C7BCA4 !important;
    }

    html[data-bs-theme="dark"] .nav-link:hover {
        background-color: #000000 !important;
        color: #C7BCA4 !important;
    }

html[data-bs-theme="dark"] main {
    background-color: #2f2f31 !important;
}

html[data-bs-theme="dark"] .position-relative > .bi-folder {
    color: #C7BCA4;
}

html[data-bs-theme="dark"] .position-relative > .fs-4 {
    color: #C7BCA4;
    text-decoration: underline;
}

html[data-bs-theme="dark"] .bg-info {
    color: #C7BCA4 !important;
    background-color: #834e7c !important;
}

html[data-bs-theme="dark"] #botonAtras {
    background-color: #C7BCA4 !important;
    color: #080b17 !important;
}

html[data-bs-theme="dark"] #botonAtras:hover {
    background-color: #212529 !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .swal-text {
    color:antiquewhite;
    font-size: 15px;
}

/* Overlay para m�vil */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1040;
    display: none;
    transition: opacity 0.3s;
}

/* Cuando el sidebar est� activo en m�vil, mostramos el overlay */
#sidebar.active ~ #overlay {
    display: block;
}

/* Estilos y comportamientos para dispositivos m�viles */
@media (max-width: 768px) {
    body {
        display: grid;
        grid-template-columns: 1fr;
    }
    /* Por defecto, en m�viles se oculta el sidebar (margin-left negativo) */
    #sidebar {
        margin-left: -250px;
        position: fixed !important;
        top: 0;
        left: 0;
    }
        /* Sidebar visible cuando tenga clase "active" */
        #sidebar.active {
            margin-left: 0;
        }

    /* El contenido ocupa todo el ancho en m�viles */
    #content {
        margin-left: 0;
    }

    /* Posici�n del bot�n: visible cuando el sidebar no est� activo */
    #sidebarToggle {
        left: 10px;
        opacity: 1;
    }

    /* Cuando el sidebar est� activo, se oculta el bot�n */
    #sidebar.active ~ #sidebarToggle {
        opacity: 0;
        pointer-events: none;
    }
}

/*.tab-pane:not(.show) {
    height: 0;
    overflow: hidden;
}*/

table.dataTable tbody tr {
    background-color: transparent !important;
}

table.dataTable tbody td {
    background-color: transparent !important;
}

html[data-bs-theme="light"] button.page-link {
    color: black;
}


#editor { /* Se emplea para redimensionar el campo de "Observaciones" en "FichaCliente" */
    resize: vertical;
    overflow: auto;
    min-height: 150px;
}

#IsPersistent:checked {
    background-color: #31a0ec;
}