.page {
    position: relative !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    padding: 30px 10px 0px 10px;
    background-color: #ffffff;
}

main {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.item-link {
    text-decoration: none; /* Elimina el subrayado */
    color: black; /* Establece el color del texto */
    /* Agrega aqu� m�s estilos seg�n sea necesario */
}

.sticky-header { /* Para compatibilidad con algunos navegadores */
    position: sticky;
    top: 0; /* Fija la cabecera en la parte superior */
    background-color: #ffffff; /* Color de fondo para la cabecera */
    z-index: 100; /* Asegura que est� por encima del resto del contenido */
    /* Agrega otros estilos seg�n tus preferencias */
}

/*================== Estilos de Menu ==================*/
#open-notification-button {
    background-color: transparent;
    position: absolute;
    right: 0;
    padding-right: 45px;
}

.resize-bar {
    top: 0;
    width: 5px; /* o el ancho deseado */
    height: 100%; /* O el alto deseado */
    cursor: ew-resize;
    background-color: #f0ecec;
    z-index: 100; /* Asegura que est� por encima de otros elementos en .sidebar */
    position: absolute;
    right: 0;
}

.dropdown-menu {
    right: 0px;
}

.margen_derecho_panel {
    margin-left: 310px;
}

.menu_sidebar {
    width: 300px; /* Ancho del sidebar */
    height: calc(100% - 51px); /* Altura del sidebar */
    position: fixed; /* Fija el sidebar en la pantalla */
    top: 50px; /* Ajusta la posici�n superior */
    left: 0px; /* Ajusta la posici�n izquierda */
    background-color: #faf8f7; /* Fondo s�lido para evitar transparencia */
    z-index: 9999;
    /*padding-top: 20px;*/ /* Ajusta el relleno superior */
    overflow: auto;
}

.sidebar.collapsed {
    width: 50px; /* Ancho cuando est� contra�da */
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0; /* Aseg�rate de que el men� est� inicialmente visible */
    width: 300px; /* Ancho inicial del men� */
    height: 100%;
    background-color: #faf8f7; /* Fondo gris muy claro */
    -webkit-transition: left 0.3s ease-in-out;
    transition: left 0.3s ease-in-out;
    padding-top: 15px;
    z-index: 10000; /* Aumentar z-index para estar por encima del contenido */
    overflow: auto;
    min-width: 280px; /* Tama�o m�nimo */
    max-width: 400px; /* Tama�o m�ximo */
}

/* Icono que oculta el men� */
.menu_oculto {
    right: -500px;
}

/* Estilos para el bot�n de cierre del men� */
.close-menu-button {
    display: none; /* El bot�n de cierre estar� oculto inicialmente */
}

/* Estilo de la lista favoritos */
.item_menu {
    list-style-type: none;
    text-decoration: none;
    color: rgb(32, 32, 32);
    font-size: 14px; /* Tama�o del texto para A�adir tarea */
    padding: .3rem 0.1rem; /*Tama�o del menu a�adir tareas le da espaciado a los botones y lo alinea con el icono de Avatar*/
    border-radius: 10px;
}

.item_menu2 {
    list-style-type: none;
}

/*.nav-link:hover {
    background-color: #fee6e3;
}*/

.item_menu:hover {
    background-color: #f6efee;
}

.item_menu:active {
    background-color: #fee6e3;
}

.nav-link:active {
    background-color: #fee6e3;
}

/*mantener activos los botones y los NavLinks*/
.item_menu.active {
    background-color: #fee6e3;
}

/*==== Estilo de la lista de mis proyectos ====*/
.item_menu_pro {
    list-style-type: none;
    text-decoration: none;
    color: rgb(32, 32, 32);
    font-size: 14px; /* Tama�o del texto para A�adir tarea */
    padding-top: 2px;
}

.item_menu_pro2 {
    list-style-type: none;
    text-decoration: none;
    color: rgb(32, 32, 32);
    font-size: 14px; /* Tama�o del texto para A�adir tarea */
}

ol, ul {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/*CONTAINER FLUID*/
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --tblr-gutter-x: none !important;
    --tblr-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--tblr-gutter-x) * .5);
    padding-left: calc(var(--tblr-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}
/*-----------------------------*/
.item_nav_menu {
    text-decoration: none;
}

.nav-item {
    font-size: 0.5rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item ::deep a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        line-height: 3rem;
    }

        .nav-item ::deep a.active {
            background-color: rgba(255,255,255,0.37);
            color: white;
        }

        .nav-item ::deep a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

/*
.nav-link {
    display: list-item !important;
    text-decoration: none;
    font-size: 14px;
}*/

.contenedor-padre {
    position: absolute;
    right: 0;
    padding: 0px 40px 0px 50px;
    -ms-flex-line-pack: end;
    align-content: end;
}

.boton {
    position: relative;
    background-color: transparent;
    border: none;
}

/*.hRQZFMhX5N2W_D53QQAgHGqMJtAEbRXE {
    color: #666666; }*/

/*==== Estilos Div que contiene Favoritos y Mis proyectos ====*/
.box_navleft {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/*==== Estilos texto de Mis proyectos ====*/
.vertical-menu-truncate-text {
    white-space: nowrap; /* Evita el salto de l�nea */
    overflow: hidden; /* Oculta el contenido que no cabe en el ancho */
    text-overflow: ellipsis; /* Muestra "..." al final del texto truncado */
    color: dimgray;
    padding: .3rem 0.4rem;
    font-size: 14px; /* Tama�o del texto */
}

/*==== Estilos texto de lista Favoritos ====*/
.vertical-menu-truncate-text2 {
    white-space: nowrap; /* Evita el salto de l�nea */
    overflow: hidden; /* Oculta el contenido que no cabe en el ancho */
    text-overflow: ellipsis; /* Muestra "..." al final del texto truncado */
    padding: .1rem .3rem;
}

/*==== Estilos texto de A�adir tarea ====*/
.vertical-menu-truncate-text3 {
    white-space: nowrap; /* Evita el salto de l�nea */
    overflow: hidden; /* Oculta el contenido que no cabe en el ancho */
    text-overflow: ellipsis; /* Muestra "..." al final del texto truncado */
    padding: .1rem .4rem .2rem;
}

/*==== Estilos para la Flecha Expandir/Contraer de Favoritos y Mis proyectos ====*/

/* Modifica estlos de las Flechas Expandir/Contraer */
.push_navleft {
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* o inline-flex */
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: end !important;
    font-size: 12px; /* Modifica el tama�o de las flechas */
    color: #666666; /* color texto npumeros */
    border: none;
    -ms-flex-line-pack: end;
    align-content: end;
    margin-top: 4px;
    position: absolute;
    right: 0;
    padding-right: 15px;
}

/* Modifica estlos de la lista Mis proyectos */
.push_navleft2 {
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* o inline-flex */
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: end !important;
    font-size: 12px; /* Modifica el tama�o de las flechas */
    color: #666666; /* color texto npumeros */
    border: none;
    -ms-flex-line-pack: end;
    align-content: end;
    position: absolute;
    right: 0;
    padding-right: 25px;
}

/* Modifica estlos de las Flechas Expandir/Contraer Favoritos */
.push_navleft3 {
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* o inline-flex */
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: end !important;
    font-size: 12px; /* Modifica el tama�o de las flechas */
    color: #666666; /* color texto npumeros */
    border: none;
    -ms-flex-line-pack: end;
    align-content: end;
    position: absolute;
    right: 0;
    padding-right: 15px;
}

button, input, optgroup, select, textarea {
    border: none;
}

/*==== Estilos de Media Query para pantallas peque�as ====*/

@media screen and (max-width: 768px) {
    .sidebar {
        left: -500px; /* Oculta el men� en pantallas m�s peque�as */
    }

    .close-menu-button {
        display: block; /* Muestra el bot�n de cierre del men� */
    }
}

@media screen and (min-width: 769px) {
    .content {
        margin-left: 280px; /* Desplaza el contenido del cuerpo hacia la derecha */
        opacity: revert;
    }

    /* Si estamos en la página de login, eliminamos el margen */
    .login-page .content {
        margin-left: 0 !important;
    }
}

/* ------------------------------------------------------------------------ */
        @media screen and (max-width: 768px) { /* Cambia el tama�o seg�n tus necesidades */
            .menu_sidebar {
                position: fixed;
                margin-top: 21px;
                background-color: #faf8f7; /* Asegurar fondo s�lido en m�vil */
                z-index: 10001; /* Z-index a�n m�s alto para m�vil */
                width: 100%; /* Ocupar todo el ancho en m�vil */
            }
        }

        @media (max-width: 641px) {
            .menu_sidebar {
                top: 0;
                background-color: #faf8f7; /* Asegurar fondo s�lido */
                z-index: 10001; /* Mantener z-index alto */
            }
        }
        /* ------------------------------------------------------------------------ */
        .nav-item {
    background-color: #faf8f7;
}

.navbar-collapse {
    background-color: #faf8f7;
}

.navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item {
    min-width: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    color: inherit;
    padding-left: calc(calc(calc(var(--tblr-page-padding) * 2)/ 2) + 1.25rem);
    background-color: #faf8f7;
}

.dropdown-item {
    background-color: #faf8f7;
}

.navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-item {
    padding-left: calc(calc(calc(var(--tblr-page-padding) * 2)/ 2) + 1.75rem);
    background-color: #faf8f7;
}

.navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-menu .dropdown-item {
    padding-left: calc(calc(calc(var(--tblr-page-padding) * 2)/ 2) + 1.25rem);
    background-color: #faf8f7;
}

.navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item {
    min-width: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    padding-left: calc(calc(calc(var(--tblr-page-padding) * 2)/ 2) + 1rem);
    color: inherit;
    background-color: #faf8f7;
}

.navbar-vertical.navbar-expand-md {
    position: absolute;
    background-color: #faf8f7;
}

.navbar-vertical.navbar-expand-sd {
    position: absolute;
    background-color: #faf8f7;
}

.navbar-vertical.navbar-expand-sd {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: absolute;
    height: 100%;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #faf8f7;
    z-index: 1;
    width: 300px;
}

.navbar-expand-sm + .container {
    /*margin-top: 56px;*/
    /* Ajusta el espacio entre el navbar y el contenedor */
}

.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-lg,
.navbar > .container-md,
.navbar > .container-sm,
.navbar > .container-xl,
.navbar > .container-xxl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: inherit;
    flex-wrap: inherit;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    height: 100%;
    max-width: 300px;
    background-color: #faf8f7;
    margin-top: 4px;
}

.navbar-toggler {
    border: 0;
    width: 2rem;
    height: 2rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #de4c4a;
    padding: .1rem 1rem;
}

    .navbar-toggler:hover {
        background-color: #de4c4a;
    }

.page-wrapper {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.submenus {
    height: 100%;
    /* Altura deseada del contenedor */
    overflow: auto;
    /* Mostrar barras de desplazamiento si es necesario */
    white-space: nowrap;
    /* Evitar que el texto se divida en l�neas */
    display: block;
}

/*.nav-link-title {
    width: 100%;
    background-color: #faf8f7;
}

.nav-link {
    background-color: #faf8f7;
}*/

.navbar-nav {
    background-color: #faf8f7;
    /*    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);*/
    padding: 0px;
    height: 100%;
    z-index: 99999;
    width: 300px;
    -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;
}

.active {
    /*background-color:aquamarine;*/
}

.margen_menu_activo {
    margin-left: 300px;
}

.nav-link-active {
    background-color: lightpink;
}

.contador_menu {
    background-color: #faf8f7;
}

/*Estilos de Comentarios*/
.add-comment__container {
    position: relative;
    z-index: 0;
    display: block;
    margin-top: 3px;
    padding: 10px; /* Espacio entre el borde y el contenido */
    width: 100%;
    box-sizing: border-box;
}

    .add-comment__container .e-richtexteditor {
        z-index: 1;
        width: 100%;
        box-sizing: border-box;
    }

        .add-comment__container .e-richtexteditor .e-toolbar-popup {
            z-index: 1001;
        }

.set-new-comment__schedule {
    padding: 2px;
    font-size: small;
    width: auto;
    display: inline;
    background-color: transparent;
}

/* .comment-image img {
    max-width: 100%;
} */

/* Estilos del contenedor de comentarios */
.contenedorComment {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 2px solid rgba(0, 0, 0, .12);
    border-radius: 0%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .04);
    box-sizing: border-box;
    cursor: pointer;
    margin: 0 0 10px;
    padding: 5px;
    position: relative;
    transition-duration: .3s;
    transition-property: border-color, box-shadow, background-color;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
}

/* Estilos específicos para el dropdown del menú de comentarios */
.contenedorComment {
    position: relative;
    overflow: visible;
}

.contenedorComment .dropdown {
    position: relative;
}

.contenedorComment .dropdown-menu-card {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1050 !important;
    min-width: 180px;
    max-width: 250px;
    margin-top: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background-color: white;
    transform: none !important;
}

.contenedorComment .dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.contenedorComment .dropdown-item:hover {
    background-color: #f8f9fa;
}

.contenedorComment .dropdown-item-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #495057;
}

.contenedorComment .dropdown-divider {
    height: 1px;
    background-color: #e9ecef;
    margin: 4px 0;
}

/* Media queries específicas para el dropdown en móviles */
@media screen and (max-width: 768px) {
    .contenedorComment .dropdown-menu-card {
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        z-index: 1060 !important;
        min-width: 200px;
        max-width: 280px;
        margin: 0;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }
}

.fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
}

.con-linea {
    background-color: white;
    /* Línea separadora en la parte inferior de la segunda fila */
}

.izquierda {
    flex: 1;
    min-width: 0; /* Permite que el contenido se contraiga */
}

.derecha {
    display: flex;
    gap: 10px;
    flex-shrink: 0; /* Evita que se contraiga */
    justify-content: flex-end; /* Alinea los elementos a la derecha */
    margin-left: auto; /* Empuja el contenido hacia la derecha */
}

.col {
    background-color: white;
}

.item-container {
    display: flex;
    align-items: flex-start;
    /* Alinea los elementos al inicio de la columna */
    width: 100%;
}

.checkbox-column {
    flex: 0 0 auto;
    /* No crece, no se encoge, y basa su tamaño en el contenido */
    padding-right: 10px;
    /* Espacio entre el checkbox y el contenido */
}

.content-column {
    display: flex;
    /* Usar flexbox */
    justify-content: space-between;
    /* Distribuir los elementos horizontalmente */
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

.userinline {
    font-weight: bold;
    padding-right: 10px;
}

.dateinline {
    display: inline-block;
    /* Espaciado interno */
}

.titlecomment {
    display: flex;
    /* Usar flexbox */
    align-items: center;
    /* Centrar verticalmente los elementos */
    flex-wrap: wrap;
}

.button_task {
    border: none;
    background-color: white;
    /* Espacio entre los botones */
}

.cabeceraItemTask {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    /* Espaciado interno de la cabecera */
}

.titulo {
    /* Estilos para el título a la izquierda, puedes personalizar según tus necesidades */
}

.opcionesItemTask {
    /* Estilos para los botones u opciones a la derecha, puedes personalizar según tus necesidades */
}

/* Media queries para pantallas móviles */
@media screen and (max-width: 768px) {
    .add-comment__container {
        padding: 5px;
        margin: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

        .add-comment__container .e-richtexteditor {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }

    .contenedorComment {
        margin: 0 0 5px;
        padding: 8px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .fila {
        padding: 2px;
        flex-wrap: wrap;
    }

    .content-column {
        flex-direction: column;
        align-items: flex-start;
    }

    .titlecomment {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .userinline {
        padding-right: 5px;
        margin-bottom: 2px;
    }

    .derecha {
        gap: 5px;
        margin-top: 5px;
        justify-content: flex-end; /* Mantiene la alineación a la derecha en dispositivos móviles */
        margin-left: auto; /* Mantiene el empuje hacia la derecha */
    }

    .add-task__actions {
        flex-direction: column;
        gap: 10px;
    }

    .elementos-derecha {
        flex-direction: column;
        gap: 5px;
        width: 100%;
    }

    .elementos-izquierda {
        width: 100%;
        margin-bottom: 10px;
    }
}

/*Estilos de Tareas*/
.add-task__input-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 10px; /* Ajusta seg�n sea necesario */
}

.add-task__input {
    border: none;
    outline: none;
}

.add-task__container {
    display: block;
    margin-top: 3px;
    border: 1px solid #e6e6e6; /* Borde de 1px de grosor y color negro (#000) */
    border-radius: 5px; /* Esquinas redondeadas */
    padding: 10px; /* Espacio entre el borde y el contenido */
}

.add-task__attributes {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
}

.add-task__input {
}

.add-task__actions {
    /*  border-top: 1px solid #e6e6e6;*/
    padding: 5px;
}

.task_cabecera {
    font-weight: 600;
}

.elementos-izquierda {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.elementos-derecha {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.set-new-task__schedule {
    border-radius: 3px; /* Esto define el redondeo de las esquinas */
    padding: 2px;
    border: 1px solid #e6e6e6;
    font-size: small;
    width: auto;
    display: inline;
    background-color: transparent;
}

.add-task__actions {
    margin-top: 5px;
    border-radius: 10px; /* Esto define el redondeo de las esquinas */
    padding: 3px;
    border: 1px solid #e6e6e6;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.texto_recortado {
    white-space: nowrap; /* Evita saltos de l�nea */
    overflow: hidden; /* Oculta el texto que excede el contenedor */
    text-overflow: ellipsis; /* Muestra puntos suspensivos para texto cortado */
    font-size: small;
}

/* Estilo base del bot�n */
.task_cabecera_opciones {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 3px;
}

.mi-boton {
    background-color: #dc3545; /* Color de fondo estilo Danger de Bootstrap */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

/* Estilo para pantallas peque�as */
@media screen and (max-width: 768px) {
    .mi-boton {
        padding: 10px;
        text-indent: -9999px; /* Oculta el texto */
        background-image: url('ruta-de-la-imagen.jpg'); /* Reemplaza 'ruta-de-la-imagen.jpg' por la ruta de tu imagen */
        background-size: cover;
        background-repeat: no-repeat;
        fill-rule: evenodd;
    }
}

/* secciones Lista */

.board_section__title {
    margin: 0 4px 0 0;
    padding-right: 4px;
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

.board_section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin-right: 8px;
    background-color: var(--product-library-background-base-primary);
    border: 1px solid transparent;
    border-radius: var(--reactist-border-radius-large);
}

.board_section__header:hover {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 44px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 44px;
    flex: 0 0 44px;
    width: 288px;
    padding-right: 16px;
    padding-left: 8px;
    border-bottom: 1px solid transparent;
    -webkit-transition: border-bottom-color .3s;
    transition: border-bottom-color .3s;
}

.board_section__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 44px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 44px;
    flex: 0 0 44px;
    width: 288px;
    padding-right: 16px;
    padding-left: 8px;
    border-bottom: 1px solid transparent;
    -webkit-transition: border-bottom-color .3s;
    transition: border-bottom-color .3s;
}

.section-name {
    color: inherit;
    font-family: SegoeUI, Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 600;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.cabeceraSeccion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* width: 100%; */
    /* padding: 10px; */
    /* Espaciado interno de la cabecera */
}

.titulo {
    /* Estilos para el t�tulo a la izquierda, puedes personalizar seg�n tus necesidades */
}

.opcionesSeccion {
    /* flex: 1;*/
    /* gap: 10px; */
    margin-left: auto;
    margin-right: 10px;
}

/* item details */

.item_details_derecha {
    background-color: rgb(248,248,248);
    margin-top: 0;
    padding-top: 0;
}

.vinieta_titulo {
    width: 15px;
    height: 15px;
    background-color: gray;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: 3px;
}

.titulo_tarea {
    font-size: 12px;
    font-weight: bold;
}

.titulo_tarea_item {
    margin-top: 3px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.descripcion_tarea_item {
    margin-top: 1px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-left: 15px;
    font-size: 10px;
}

.user_titulo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
    border: 1px solid gray; /* Combinar la definici�n del borde en una sola l�nea */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* Alinear el contenido en el centro */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; /* Alinear horizontalmente en el centro */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; /* Alinear verticalmente en el centro */
    font-weight: bold; /* Hacer el texto m�s visible */
}

.button_task {
    border: none;
    background-color: white;
}

.lista_comentarios {
    margin-top: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.subtitulo {
    margin-top: 2px;
    font-size: 10px;
}

.texto_comentario {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: 29px;
    font-weight: 400;
}

.pie_item_component_datetime {
    padding-left: 10px;
    font-size: small;
    width: auto;
    color: red;
}

.pie_item_component_project {
    padding: 2px;
    font-size: small;
    width: auto;
}

.cabeceraSeccion-panel {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.cabeceraSeccion {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: 10px;
    /* Espaciado interno de la cabecera */
}

@media (max-width: 768px) {
    .cabeceraSeccion-panel {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row; /* Cambiar la direcci�n a columna */
    }
}

.boton-redondo {
    width: 15px;
    height: 15px;
    border-radius: 50%; /* Hacer el bot�n redondo */
    background-color: #ffcccc; /* Color de fondo rosa */
    border: 2px solid #ff99cc; /* Borde exterior m�s fuerte */
    cursor: pointer; /* Cambiar el cursor al pasar el rat�n */
    padding-top: 5px;
}

.sangria-3 {
    margin-left: 3px;
}

.sangria-4 {
    margin-left: 4px;
}

.sangria-5 {
    margin-left: 0px;
    max-width: 150px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 5px;
}

.task-list__wrapper {
    margin: 0 auto;
    max-width: 1000px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    overscroll-behavior-x: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
}

.board_view__sections {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: #ffffff;
    /*    overflow-x: auto;
    overscroll-behavior-x: none;*/
    width: 100%;
    padding-left: 30px;
    height: 100%;
    overflow: hidden;
}

/*====== Encabezado page HOY ======*/
.box_projectHead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.push_projectHead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    gap: 10px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.project__name {
    color: inherit;
    font-family: SegoeUI, Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: 700;
    -ms-flex-line-pack: start;
    align-content: start;
    -webkit-box-pack: initial;
    -ms-flex-pack: initial;
    justify-content: initial;
}

.project__wrapper {
    left: inherit;
    margin: 0 auto;
    max-width: 1920px;
    padding-left: 60px;
    padding-right: 60px;
    background-color: white;
}

@media screen and (max-width: 768px) {
    .project__wrapper {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }
}

.task-panel__wrapper {
    margin: 0 auto;
    padding-left: 55px;
    padding-right: 60px;
    background-color: white;
}

.project__pannel_wrapper {
    margin: 0 auto;
    padding-left: 55px;
    padding-right: 140px;
    background-color: white;
}

.flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* Media query para mejorar legibilidad y usabilidad en móviles */
@media (max-width: 768px) {
    .flex-container {
    }
    
    /* Mejoras globales de legibilidad para móviles */
    body {
        font-size: 16px !important; /* Tamaño base mínimo para móviles */
        line-height: 1.5 !important;
    }
    
    /* Mejorar tamaños de fuente para elementos de texto */
    .task_description,
    .task_description p {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    .cronometer {
        font-size: 16px !important; /* Aumentado desde 14px */
    }
    
    /* Mejorar legibilidad de elementos de pie de tarea */
    .pie_item_component_datetime,
    .pie_item_component_project {
        font-size: 14px !important; /* Aumentado desde small */
        min-height: 44px !important; /* Área táctil mínima */
        padding: 8px !important;
    }
    
    /* Mejorar elementos de menú para móviles */
    .item_menu,
    .item_menu_pro {
        font-size: 16px !important; /* Aumentado para mejor legibilidad */
        min-height: 44px !important; /* Área táctil mínima recomendada */
        padding: 12px 8px !important; /* Mayor área táctil */
    }
    
    /* Mejorar botones para móviles */
    .boton_addcancel {
        font-size: 16px !important; /* Aumentado desde 13px */
        min-height: 44px !important; /* Área táctil mínima */
        padding: 12px 16px !important;
    }
    
    /* Mejorar elementos de navegación */
    .nav-item {
        font-size: 16px !important; /* Aumentado desde .5rem */
        min-height: 44px !important;
        padding: 12px 8px !important;
    }
    
    .nav-item ::deep a {
        min-height: 44px !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    /* Mejorar títulos y texto de tareas */
    .titulo_tarea {
        font-size: 16px !important; /* Aumentado desde 12px */
        line-height: 1.4 !important;
    }
    
    .descripcion_tarea_item {
        font-size: 14px !important; /* Aumentado desde 10px */
        line-height: 1.4 !important;
        padding-left: 20px !important; /* Mayor espaciado */
    }
    
    /* Mejorar elementos de texto pequeño */
    .subtitulo {
        font-size: 14px !important; /* Aumentado desde 10px */
    }
    
    .texto_recortado {
        font-size: 14px !important; /* Aumentado desde small */
    }
    
    /* Mejorar elementos de sección */
    .board_section__title {
        font-size: 16px !important; /* Aumentado desde 14px */
        line-height: 1.4 !important;
    }
    
    .section-name {
        font-size: 18px !important; /* Aumentado desde 16px */
        line-height: 1.4 !important;
    }
    
    /* Mejorar elementos de proyecto */
    .project__name {
        font-size: 22px !important; /* Aumentado desde 20px */
        line-height: 1.3 !important;
    }
    
    /* Mejorar espaciado general para móviles */
    .task-list__wrapper,
    .project__wrapper,
    .task-panel__wrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Mejorar elementos táctiles pequeños */
    .boton-redondo {
        width: 44px !important; /* Aumentado desde 15px */
        height: 44px !important; /* Aumentado desde 15px */
        padding: 12px !important;
    }
    
    /* Mejorar avatares para mejor visibilidad */
    .avatar {
        width: 40px !important; /* Aumentado desde 30px */
        height: 40px !important; /* Aumentado desde 30px */
    }
    
    .user_titulo {
        width: 32px !important; /* Aumentado desde 20px */
        height: 32px !important; /* Aumentado desde 20px */
        font-size: 14px !important;
    }

    /* SOLUCIÓN ESPECÍFICA PARA ELEMENTOS DEL PIE DE TAREA QUE SE AMONTONAN */
    /* Mejorar distribución de elementos en el pie de las tareas */
    .fila.con-linea {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 4px 2px !important;
        align-items: flex-start !important;
    }

    /* Elementos izquierda del pie de tarea - permitir wrap y optimizar espacio */
    .fila.con-linea .izquierda {
        flex: 0 1 auto !important; /* Cambiar de flex: 1 a auto para mejor distribución */
        min-width: fit-content !important;
        max-width: calc(50% - 4px) !important; /* Máximo 50% del ancho menos gap */
        padding: 2px 4px !important;
        margin: 1px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Elementos derecha del pie de tarea */
    .fila.con-linea .derecha {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        gap: 2px !important;
    }

    /* Optimizar elementos específicos del pie de tarea */
    .pie_item_component_datetime {
        font-size: 11px !important;
        padding: 2px 4px !important;
        min-height: auto !important; /* Remover altura mínima para ahorrar espacio */
    }

    /* Iconos y texto en elementos del pie */
    .fila.con-linea .izquierda svg,
    .fila.con-linea .izquierda .icon {
        flex-shrink: 0 !important;
        margin-right: 2px !important;
    }

    .fila.con-linea .izquierda span {
        font-size: 11px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Mejorar visualización de etiquetas/labels */
    .fila.con-linea .izquierda span[style*="color: grey"] {
        max-width: 80px !important; /* Limitar ancho de etiquetas */
    }

    /* Optimizar notas/comentarios icon */
    .notes_icon {
        flex-shrink: 0 !important;
        margin-right: 2px !important;
    }

    /* Asegurar que los elementos no se superpongan */
    .fila.con-linea > * {
        z-index: 1 !important;
    }
}

.boton_addcancel {
    font-size: 13px;
    height: 32px;
    border-radius: 5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.boton_cancelar {
    background-color: #e5e5e5;
    color: #444;
}

.boton_add {
    background-color: #dc4c3e;
    color: white;
}

    .boton_add:disabled {
        background-color: #eda59e;
    }

.ubicacion_derecha {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.avatar {
    width: 30px !important;
    height: 30px !important;
}

.avatar-head {
    border-radius: 50% !important; /* Usa !important para asegurarte de que esta regla tenga prioridad */
    /* Otras reglas de tu clase .avatar-head */
}

.avatar-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* Activa Flexbox */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; /* Alinea los elementos verticalmente en el centro */
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start; /* Alinea los elementos horizontalmente al inicio */
}

/*---------------------LOGIN----------------------------*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 50px !important;
}

.loginTitle {
    font-size: 1rem;
    font-weight: bold;
}

body {
    background-color: #ffffff !important;
}

.paneldetail {
    background-color: #ffffff !important;
    padding-top: 10px;
}
/*# sourceMappingURL=/Repositorio/TasksBOT_SVN/src/TasksBOT/Client/wwwroot/css */