:root {
    --sidebar-width: 210px; /* Variable para el ancho de la barra lateral */
    --topbar-height: 60px; /* Variable para el alto de la topbar */
    --title-height: 70px; /* Variable para el alto del title */
}


/* Estilos Generales para Enlaces */
a {
    text-decoration: none; /* Eliminar el subrayado de los enlaces */
    color: inherit; /* Mantener el color heredado del elemento padre */
}

/* Topbar */
.app-topbar {
    background-color: #f8fbff; /* Color de fondo amarillo */
    color: #333; /* Color del texto en la barra */
    width: 100%; /* Ocupa todo el ancho disponible */
    position: fixed; /* Fija la barra en la parte superior de la página */
    top: 0; /* Posiciona la barra en la parte superior de la ventana */
    z-index: 1030; /* Asegura que la barra esté por encima de otros elementos */
    height: var(--topbar-height); /* Altura de la barra */
    padding: 1rem; /* Espaciado interno de 1 rem */
    display: flex; /* Flexbox para alinear los elementos dentro de la barra */
    align-items: center; /* Centra los elementos verticalmente dentro de la barra */
    border-bottom: 1px solid #1a1a1a;
}

/* Sidebar para pantallas grandes */
.app-sidebar {
    background-color: #f8fbff; /* Color de fondo gris oscuro */
    color: #000000; /* Color del texto blanco */
    width: var(--sidebar-width); /* Usar la variable para definir el ancho */
    padding: 1rem; /* Espaciado interno de 1 rem */
    overflow-y: auto; /* Permite el desplazamiento vertical si el contenido es demasiado largo */
    position: fixed; /* Fija la barra lateral en su posición */
    top: var(--topbar-height); /* Posiciona la barra lateral debajo de la barra superior (topbar) */
    bottom: 0; /* Se extiende hasta la parte inferior de la ventana */
    z-index: 1020; /* Se coloca debajo de la topbar en el z-index */
    border: none; /* Elimina cualquier borde por defecto */
}

/* Estilos compartidos entre sidebar y offcanvas */
.app-sidebar,
.offcanvas.sidebar {
    background-color: #f8fbff; /* Color de fondo */
    color: #000000; /* Color del texto blanco */
}

/* Estilos para el contenido del offcanvas */
.offcanvas-body {
    overflow-y: auto; /* Permite desplazamiento vertical */
    padding: 1rem; /* Espaciado interno de 1 rem */
}

/* Estilos para Enlaces de la Sidebar */
.app-sidebar-content .nav-link {
    color: #1a1a1a; /* Color del texto blanco */
    padding: 0.5rem 0 0.5rem 0.8rem ; /* Espaciado interno de 0.5 rem */
    display: flex; /* Flexbox para alinear elementos dentro del enlace */
    align-items: center; /* Centra los elementos verticalmente */
    transition: background-color 0.3s ease; /* Transición suave al cambiar el color de fondo */
    border-radius: 20px;
}

.app-sidebar-content .nav-link img {
    width: 16px;
    height: 16px;
}

.app-sidebar-content .nav-link:hover {
    background-color: #f1f1f1;
}

.app-sidebar-content .nav-link.disabled {
    opacity: 0.6; /* Reduce la opacidad para enlaces deshabilitados */
    cursor: not-allowed; /* Cambia el cursor para indicar que el enlace está deshabilitado */
}

.app-sidebar-content .badge {
    margin-left: auto; /* Alinea el badge a la derecha */
    background-color: #ffc107; /* Color de fondo amarillo */
    color: #333; /* Color del texto gris oscuro */
    font-weight: bold; /* Texto en negrita */
    border-radius: 12px; /* Bordes redondeados */
    padding: 0.2rem 0.5rem; /* Espaciado interno del badge */
}

/* Título de Sección en la Sidebar */
.app-sidebar-content .sidebar-section-title {
    color: #000000; /* Color del texto gris claro */
    font-weight: bold; /* Negrita */
    font-size: 0.9rem; /* Tamaño de fuente pequeño */
    margin-top: 1rem; /* Margen superior */
    margin-bottom: 0.5rem; /* Margen inferior */
    display: block; /* Mostrar como bloque */
    letter-spacing: 0.05em; /* Espaciado entre letras */
}
.app-sidebar-content .sidebar-section-title.disabled {
    opacity: 0.6;
}

/* Estilo para el título del offcanvas */
.offcanvas-header {
    border-bottom: 1px solid #444; /* Línea de separación debajo del título */
}

/* Título */
.app-title {
    background-color: #f8fbff; /* Color de fondo gris */
    color: #1a1a1a; /* Color del texto blanco */
    padding: 1rem; /* Espaciado interno de 1 rem */
    margin-top: var(--topbar-height); /* Margen superior para posicionarlo debajo de la topbar */
    margin-left: var(--sidebar-width); /* Margen izquierdo para dejar espacio a la sidebar */
    height: var(--title-height); /* Altura del título */
    display: flex; /* Flexbox para alinear el contenido */
    align-items: center; /* Centra el contenido verticalmente */
    z-index: 1010; /* Posiciona el título debajo de la topbar pero por encima del contenido */
    width: calc(100% - var(--sidebar-width)); /* Ajusta el ancho para ocupar el espacio restante */
    position: fixed; /* Fija el título en su posición */
    top: 0; /* Posiciona el título en la parte superior de la ventana */
}

/* Contenido */
.app-content {
    background-color: #f8fbff; /* Color de fondo negro */
    color: #000000; /* Color del texto blanco */
    padding: 1rem; /* Espaciado interno de 1 rem */
    padding-top: 0px;
    margin-top: calc(var(--topbar-height) + var(--title-height)); /* Margen superior para dejar espacio a la topbar y el título */
    margin-left: var(--sidebar-width); /* Margen izquierdo para dejar espacio a la sidebar */
    flex-grow: 1; /* Permite que el contenido crezca para llenar el espacio disponible */
    min-height: calc(100vh - (var(--topbar-height) + var(--title-height))); /* Asegura que el contenido ocupe al menos la altura de la ventana menos la topbar y el título */
}
.app-content.no-title {
    margin-top: var(--topbar-height); /* Margen superior para dejar espacio a la topbar */
}

.app-footer {
    background-color: #ffffff;
    color: #1a1a1a;
    bottom: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem;
    font-size: 14px;
    margin-left: var(--sidebar-width); /* Margen izquierdo para dejar espacio a la sidebar */
}

.app-footer .links > div a:hover {
    color: #909090;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 991.98px) {
    .app-sidebar {
        display: none; /* Oculta la sidebar en pantallas pequeñas */
    }

    .app-title {
        margin-left: 0; /* Elimina el margen izquierdo del título */
        width: 100%; /* Hace que el título ocupe todo el ancho */
    }

    .app-content {
        margin-left: 0; /* Elimina el margen izquierdo del contenido */
        margin-top: calc(var(--topbar-height) + var(--title-height)); /* Mantiene el margen superior para topbar y título */
        min-height: calc(100vh - (var(--topbar-height) + var(--title-height))); /* Asegura la altura mínima del contenido */
    }

    .offcanvas {
        width: 100%; /* El offcanvas ocupa todo el ancho en pantallas pequeñas */
    }
}

body,
.app-content {
    min-width: 375px; /* Asegura que el contenido tenga al menos 375px de ancho */
}

html,
body,
.app-content {
    overflow-x: auto; /* Habilita el desplazamiento horizontal si es necesario */
}

.title-string {
    font-size: 2vw; /* Ajusta el tamaño de la fuente proporcionalmente al ancho de la ventana */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow: hidden; /* Oculta cualquier texto que se desborde */
    text-overflow: ellipsis; /* Añade "..." al final si el texto es demasiado largo */
}

@media (min-width: 768px) {
    .title-string {
        font-size: 1.5vw; /* Tamaño de fuente más pequeño para pantallas medianas y grandes */
    }
}

@media (min-width: 1200px) {
    .title-string {
        font-size: 1.2vw; /* Tamaño de fuente más pequeño para pantallas grandes */
    }
}

@media (max-width: 576px) {
    .title-string {
        font-size: 3vw; /* Tamaño de fuente más grande para pantallas pequeñas */
    }
}

h1 {
    font-weight: 300; /* Fuente ligera para el título H1 */
}

h2 {
    font-weight: 300; /* Fuente ligera para el título H2 */
}

h3 {
    font-weight: 300; /* Fuente ligera para el título H3 */
}

h4 {
    font-weight: 300; /* Fuente ligera para el título H4 */
}

h5 {
    font-weight: 300; /* Fuente ligera para el título H5 */
}

h6 {
    font-weight: 300; /* Fuente ligera para el título H6 */
}

@media (max-width: 576px) {
    /* Truncar el nombre del usuario si es demasiado largo */
    .user-name {
        white-space: nowrap; /* Evita que el nombre del usuario se divida en varias líneas */
        overflow: hidden; /* Oculta cualquier texto que se desborde */
        text-overflow: ellipsis; /* Añade "..." al final si el texto es demasiado largo */
        max-width: 150px; /* Ancho máximo del nombre del usuario */
        display: inline-block; /* Muestra el nombre en línea, pero como bloque */
        vertical-align: middle; /* Alinea el nombre verticalmente en el medio */
    }

    /* Asegura que la altura de la navbar no cambie en pantallas pequeñas */
    .app-topbar {
        height: var(--topbar-height); /* Fija la altura de la navbar */
    }
}

.card.action {
    cursor: pointer;
}
.sidebar-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc( 100vh - var(--topbar-height) - 2rem);
}