@charset "UTF-8";
#divpreload {
	top: 9.5em;
	left: 45%;
	position: fixed;
	width: 80px;
	height: 80px;
	z-index: 3000;
}
#divpreload .spinner-border {
	width: 4rem;
	height: 4rem;
}
.text-success {
	color: #00c851;
}
.spinner-border {
	display: inline-block;
	vertical-align: text-bottom;
	border: 0.25em solid currentColor;
	border-right-color: currentcolor;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-animation: spinner-border 0.75s linear infinite;
	animation: spinner-border 0.75s linear infinite;
}

.form-check-group {
	display: flex;
}

.form-check {
	margin-right: 20px;
}

.container {
	display: flex;
	justify-content: space-between;
	padding: 10px;
}

.name, .position {
	margin: 5px 0;
}

.title {
	font-weight: bold;
}

.section {
    display: flex;
    flex-direction: column;
}

.info-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.info-label {
    margin-right: 10px;
    min-width: 150px;
}

.form-control {
    flex-grow: 1;
}

.form-container {
	font-size: 14px;
}

.elemento {
	background-image: url('../imagen/header-line2.svg');
	background-size: auto 250;
	background-repeat: no-repeat;
	height: 30px;
	color: white;
  }

#vToastContainer {
    /* Posiciona el contenedor del Toast en toda la pantalla */
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050; /* Asegúrate de que esté sobre otros elementos */
	pointer-events: none;
}

#vToast {
    /* Posiciona el Toast en el centro del contenedor */
    position: relative;
	pointer-events: auto;
    min-width: 300px; /* Establece un ancho mínimo para el Toast */
    max-width: 100%; /* Asegura que el Toast no sea más ancho que la pantalla */
    box-shadow: 0 0 3px #999; /* Opcional: Añade sombra para mejor visibilidad */
}

.vInputResponsive
{
    background: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    width: 80%;
    display: block;
    margin: 0 auto;
}

.centrado {
	text-align: center;
  }

.imagen {
    display: inline-block;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    vertical-align: middle;
}

.espacio{
    margin-right: 60px;
}

.espacio_peq{
    margin-right:10px;
}

.disabled-link {
    pointer-events: none;
    opacity: 0.5; /* Cambia la opacidad para indicar visualmente que está deshabilitado */
}

#BotonFlexible {
    position: fixed;
    top: 10px; /* Ajusta según tu preferencia */
    right: 10px; /* Ajusta según tu preferencia */
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000; /* Asegura que el botón esté sobre otros elementos */
}

#BotonFlexible:hover {
    background-color: #0056b3; /* Cambia el color al pasar el mouse */
}

.btn.boton-aprobar {
    transition: opacity 0.3s ease;
}

.btn.boton-aprobar.hidden {
    display: block !important;
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 999;
}


textarea {
    width: 100%;
    height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
    resize: none;
}

.full-width-div {
    width: 100%;
    color: rgb(0, 0, 0);
    text-align: left;
    padding: 15px 0;
    box-sizing: border-box;
}


.sidebar:hover {
    width: 265px;
    position: fixed;
    height: 100vh;
    top: 0;
}

.sidebar:hover .logo-header {
    width: 265px;
    padding-left: 25px;
    padding-right: 25px;
    text-align: left;
}

.sidebar:hover .logo-header .logo {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    position: relative !important;
}

.sidebar:hover .logo-header .logo img {
    display: inline-block !important;
}

.sidebar:hover .logo-header .nav-toggle {
    right: 18px !important;
    transform: translateX(0%) !important;
    left: unset !important;
}

.sidebar:hover .sidebar-wrapper {
    width: 265px;
}

.sidebar:hover .sidebar-wrapper .user {
    padding-left: 15px;
    padding-right: 15px;
}

.sidebar:hover .sidebar-wrapper .user [class^="avatar-"] {
    float: left !important;
}

.sidebar:hover .sidebar-wrapper .user .info {
    display: block;
}

.sidebar:hover .sidebar-wrapper .user .info span {
    display: flex;
}

.sidebar:hover .sidebar-wrapper .nav-item a i {
    margin-right: 15px;
}

.sidebar:hover .sidebar-wrapper .nav-item a .badge, .sidebar_minimize.sidebar_minimize_hover .sidebar-wrapper .nav-item a span, .sidebar:hover .sidebar-wrapper .nav-item a .caret, .sidebar:hover .sidebar-wrapper .nav-item a p {
    display: block;
}

.sidebar:hover .sidebar-wrapper .nav-item a .sidebar-mini-icon {
    display: block !important;
    margin-right: 15px;
}

.sidebar:hover .sidebar-wrapper .nav-item.submenu .nav-collapse, .sidebar:hover .sidebar-wrapper .nav-item.active .nav-collapse {
    display: block;
}

.sidebar:hover .sidebar-wrapper .nav-section .sidebar-mini-icon {
    display: none;
}

.sidebar:hover .sidebar-wrapper .nav-section .text-section {
    display: block;
}

.sidebar:hover .user-profile .user-name, .sidebar_minimize.sidebar_minimize_hover .user-profile .user-level {
    display: block;
}

.sidebar:hover .user-profile .avatar {
    display: block;
}

.sidebar:hover .user-profile .avatar.avatar-minimize {
    display: none !important;
}

.sidebar:hover .menubars {
    display: flex;
}

/* .nav-item:hover  {
    background-color: #ffffff6c;
} */

.contenedor_tablas{
    overflow-x: scroll;
    overflow-y: none;
    padding: 10px 0px;
}

.contenedor_tablas::-webkit-scrollbar {
    width: 4px;
    height: 8px;
    background-color: transparent;

}

.contenedor_tablas::-webkit-scrollbar-thumb {
    background: #353535;
    border-radius: 8px;
}

.contenedor_tablas1{
    overflow-x: scroll;
    overflow-y: none;
    padding: 10px 50px;
    border-bottom: 3px double #d9d9da;
}


.contenedor_tablas1::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 8px;
}


.imagen{
    height: 20px !important;
    background-size: cover;
}

.paginate_button a{
    font-size: 0.7rem;
}


/* Oculta por defecto los sub-items y colapsa el div */
/* Oculta por defecto los elementos collapse y sub-items */
.nav-item .collapse,
.nav-item .sub-item {
    display: none;
}

/* Muestra el div.collapse y sus sub-items cuando el nav-item recibe focus */
    /* .nav-item:focus-within .collapse {
        display: block;
    }

    .nav-item:focus-within .sub-item {
        display: block !important;
    } */

.lista_punto span::before{
   display: none !important;
}

.lista_punto span{
    margin: 0px !important;
    margin-left: 10px !important;
}

.lista_punto a{
    margin-left: 20px;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.rol{
    border-bottom: 3px double #fff;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.collapse {
    display: none;
}

.collapse.show {
    display: block;
}

.hover_main:hover{
    background-color: #11111127;
}
.btn_nav_unico:hover{
    background-color: #11111127 !important;
}

/* Estilo aplicado cuando el .nav-item tiene el foco y el menú está abierto */

/* ESTADOS FIJOS */
/* .estados_fijos{
    opacity: 0;
    transition: 0.5s ease-in-out;
    overflow: hidden;
    height: 0px;
}

.estados_fijos.show {
    opacity: 1;
    overflow: auto;
    height: auto;
} */


.estados_fijos{
    display: none;
}

.estados_fijos.show {
    display: block;
}


.btn-toggle{
    padding: 10px !important;
}

.topbar-toggler{
    padding: 10px !important;
}

/* BOTO N HISTORY BACK  */
.boton-aprobar{
    background-color: #111111;
    color: #fff;
}

.boton-aprobar:hover{
    background-color: #000000b4;
    color: #fff;
}

.btn_estados,
.boton-aprobar,
.btn_tamaño{
    padding: 8px !important;
    font-size: 0.8rem;
}

textarea{
    margin: 0px;
}

/* Estilos generales para los inputs */
.form-check-input[type=radio],
.form-check-input[type=checkbox] {
    width: 20px;
    height: 20px;
    background-color: #f0f0f0; /* Cambia el color de fondo */
    border: 2px solid #ccc; /* Cambia el color del borde */
    appearance: none; /* Elimina el estilo predeterminado del navegador */
    -webkit-appearance: none; /* Para navegadores WebKit */
    border-radius: 4px; /* Redondear los bordes para checkbox */
}

/* Estilo para los inputs cuando están seleccionados */
.form-check-input[type=checkbox]:checked {
    background-color: #161616; /* Color de fondo cuando está seleccionado */
    border-color: #161616; /* Color del borde cuando está seleccionado */
}

.form-check-input[type=radio]:checked {
    background-color: #161616; /* Color del punto interno cuando está seleccionado */
    border-color: #161616; /* Color del borde */
}

/* Añade un efecto de hover */
.form-check-input[type=radio]:hover,
.form-check-input[type=checkbox]:hover {
    border-color: #000; /* Cambiar el color del borde en hover */
}

input,
textarea,
select{
    border: 1px solid #ccc !important;

}

.vInputResponsive{
    border: none !important;
}

.text_puntos {
    white-space: nowrap;        /* Evita saltos de línea */
    overflow: hidden;           /* Oculta el contenido que exceda el contenedor */
    text-overflow: ellipsis;    /* Muestra puntos suspensivos (...) al final */
    display: block;             /* Se asegura de ocupar todo el ancho */
    cursor: pointer;
}

/* ANIAMCION ENTRADA  */
/* Estilo para ocultar las listas inicialmente */
.lista_anticipos_gastos {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s ease-in-out, opacity 0.6s ease-in-out;
    padding: 0 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}


/* Cuando están visibles */
.mostrar {
    max-height: 500px !important; /* Ajusta según el contenido */
    opacity: 1 !important;
    padding: 15px !important;
}

/* Estilos de los botones */
.btnsga {
    padding: 10px 20px;
    background-color: #535353;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.btnsga:hover {
    background-color: #747474;
}

.disabled-link {
    pointer-events: none; /* Deshabilita el clic en el enlace */
    opacity: 0.5; /* Para que se vea visualmente deshabilitado */
    cursor: not-allowed; /* Cambia el cursor al pasar por encima */
}

button {
    outline: none !important; /* Quita el borde de enfoque */
    border: none !important;  /* Quita el borde general (opcional) */
}

button:focus {
    outline: none !important;
}

.selected-blur .td_principal{
    filter: blur(0.5px);
}

.selected-row td{
    background-color: #e7e5e5 !important;
    color: #000!important;
    font-weight: 800 !important;
    filter: blur(0px) !important;
}

.container_scroll{
    height: 135px;
    overflow-y: scroll;
}

.container_scroll::-webkit-scrollbar {
    width: 4px;
    height: 8px;
    background-color: transparent;

}

.container_scroll::-webkit-scrollbar-thumb {
    background: #353535;
    border-radius: 8px;
}

.btn-hover:hover {
    color: #fff !important;

}

.btn-hover-2 {
    color: gray !important;
}


.btn-hover-gris {
    background-color: gray !important;
    color: #fff !important;
}


.btn-hover-2:hover {
    background-color: gray !important;
    color: #fff !important;
}
.btn-hover-n:hover {
    background-color: #000 !important;
    background: #000 !important;
    color: #fff !important;
}
.btn-hover-s:hover {
    background-color: #F57A81 !important;
    background: #F57A81 !important;
    color: #fff !important;
}
.btn-hover-pur:hover {
    background-color: #847FD8 !important;
    background: #847FD8 !important;
    color: #fff !important;
}
.btn-hover-v:hover {
    background-color: #31CE36 !important;
    background: #31CE36 !important;
    color: #fff !important;
}

/* Estilo para inputs con clase disabled-input */
.disabled-input {
    cursor: not-allowed; /* Cambiar el cursor a no permitido */
    pointer-events: none; /* Desactiva la interacción con el input (no se puede editar) */
}


.table_hermana{
    height: 350px;
}

.table_hermana::-webkit-scrollbar {
    width: 4px;
    height: 8px;
    background-color: transparent;

}

.table_hermana::-webkit-scrollbar-thumb {
    background: #353535;
    border-radius: 8px;
}

/* Rojo pastel suave */
.input-danger {
    background-color: rgba(255, 182, 193, 0.3); /* Rosa pastel suave */
    border: 1px solid rgba(255, 99, 71, 0.4); /* Rojo más suave */
    color: #FF6A6A; /* Color del texto en un tono suave de rojo */
}

/* Verde pastel suave */
.input-success {
    background-color: rgba(144, 238, 144, 0.3); /* Verde pastel suave */
    border: 1px solid rgba(60, 179, 113, 0.4); /* Verde más suave */
    color: #3CB371; /* Color del texto en un tono suave de verde */
}

/* Rojo pastel suave para el foco */
.input-danger:focus {
    outline: none;  /* Elimina el contorno por defecto */
    border: 1px solid rgba(255, 99, 71, 0.7); /* Borde rojo pastel cuando está en foco */
    background-color: rgba(255, 182, 193, 0.5); /* Fondo suave */
}

/* Verde pastel suave para el foco */
.input-success:focus {
    outline: none;  /* Elimina el contorno por defecto */
    border: 1px solid rgba(60, 179, 113, 0.7); /* Borde verde pastel cuando está en foco */
    background-color: rgba(144, 238, 144, 0.5); /* Fondo suave */
}

.accordion-button:not(.collapsed){
    color: #000 !important;
    background-color: #fff !important;
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

#notificationBell {
    position: relative;
    cursor: pointer;
}

#notificationCount {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: rgb(202, 48, 48);
    color: white;
    font-size: 12px;
    border-radius: 50%;
    padding: 2px 5px;
}

#notificationList_ {
    overflow-y: auto;
}

#notificationList_::-webkit-scrollbar {
    width: 5px;
    background-color: var(--blanco);

}

#notificationList_::-webkit-scrollbar-thumb {
    background: gray;

}

#notificationList_::-webkit-scrollbar:hover {
    background-color: var(--blanco);
}

#graficoTortaCanvas {
    width: 100%;
    height: 100%;
}

.grafico-container {
    width: 50%; /* Ajusta el ancho según lo que necesites */
    max-width: 1200px; /* Limita el tamaño máximo */
    margin: auto; /* Centra el gráfico */
    padding: 50px;
}

canvas {
    width: 100% !important; /* Hace que el canvas ocupe todo el div */
    height: auto !important;
}

#vEgresoPorMes {
    max-width: 1500px;  /* Ancho máximo */
    max-height: 900px; /* Alto máximo */
    margin: auto;      /* Centrado */
}

.fixed-span {
    display: inline-block;
    width: 100px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}

.custom-outline {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 2px solid;
    background-color: transparent;
}

.imagen-red {background-color: #dc0202;}
.imagen-green {background-color: #28a745;}
.imagen-blue {background-color: #71B1F5;}
.imagen-orange {background-color: #FFBD00;}
.imagen-purple {background-color: #9502e4;}
.imagen-gray {background-color: #999999;}
.imagen-azul-marina {background-color: #02c2d8;}
.imagen-blue-osc {background-color: #2c6dfc;}
.imagen-verde-ocu {background-color: #036b3a;}
.imagen-yellow {background-color: #c46a03;}
.imagen-facturado {background-color: #900C3F;}

.boton-imagen-red { background-image: url('../imagen/dc0202.png'); }
.boton-imagen-blue { background-image: url('../imagen/71B1F5.png'); }
.boton-imagen-green { background-image: url('../imagen/28a745.png'); }
.boton-imagen-orange { background-image: url('../imagen/FFBD00.png'); }
.boton-imagen-purple { background-image: url('../imagen/9502e4.png'); }
.boton-imagen-gray { background-image: url('../imagen/999999.png'); }
.boton-imagen-azul-marina { background-image: url('../imagen/02c2d8.png'); }
.boton-imagen-blue-osc { background-image: url('../imagen/0342cc.png'); }
.boton-imagen-verde-ocu { background-image: url('../imagen/036b3a.png'); }
.boton-imagen-yellow { background-image: url('../imagen/c46a03.png'); }

.badgeColor {
    display: inline-block;
    padding: .25em .5em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    width: 65px;
}

/*********************************************** CSS Primer Grafico Cotizaciones ******************************************************/
.dashboard {
    height: 90vh; /* Ocupa toda la pantalla */
    display: grid;
    grid-template-rows: 50% 50%; /* Dos filas del mismo tamaño */
    gap: 10px;
    padding: 10px;
}

/* Parte superior (2 columnas de 6 cada una) */
.dashboard .top {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 6 y 6 columnas */
    gap: 10px;
}

/* Parte inferior (3 columnas de 4 cada una) */
.dashboard .bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4, 4 y 4 columnas */
    gap: 10px;
}

/* Estilos generales de los cuadros */
.dashboard .box {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: black;
    border-radius: 8px;
    padding: 20px;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .dashboard {
        display: flex;
        flex-direction: column;
    }

    .dashboard .top,
    .dashboard .bottom {
        display: flex;
        flex-direction: column;
    }

    .dashboard .box {
        height: 15vh; /* Ajusta la altura en móviles */
    }
}

.box.grafico4 {
    display: flex;
    flex-direction: column;
    height: 300px;
    border: 1px solid #ccc;
    font-family: sans-serif;
    text-align: center;
    overflow: hidden;
    justify-content: center; /* centra verticalmente */
}

.fila-superior {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-color: #f2f2f2; */
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

.fila-inferior {
    flex: 1;
    display: flex;
    flex-direction: row;
}

.fila-inferior > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-color: #fafafa; */
    border-right: 1px solid #ddd;
    padding: 10px;
}

.fila-inferior > div:last-child {
    border-right: none;
}
/***********************************************Fin CSS Primer Grafico Cotizaciones ******************************************************/

/*********************************************** CSS Primer Grafico Ingresos Facturas ******************************************************/
    /* Contenedor general del header */
.header-container {
    width: 100%;
    height: 50vh; /* Ocupa todo el viewport */
    display: flex;
    flex-direction: column;
}

/* Primer bloque */
.top-section {
    display: flex;
    height: 65vh; /* Ocupa 35% del contenedor */
    /* background-color: #f4f4f4; */
}

.top-section .col-3 {
    flex: 0 0 25%;
    padding: 20px;
    text-align: center;
}

.top-section .col-9 {
    flex: 0 0 75%;
    padding: 20px;
    text-align: center;
}

/* Segundo bloque */
    .bottom-section {
    display: flex;
    height: 40vh; /* Ocupa 65% del contenedor */
}

.bottom-section .col-4 {
    flex: 0 0 33.33%;
    padding: 20px;
    text-align: center;
}

    /* Responsive */
    @media (max-width: 768px) {
        .top-section, .bottom-section {
            flex-direction: column;
    }

    .top-section .col-3,
    .top-section .col-9,
    .bottom-section .col-4 {
        flex: 0 0 auto;
        width: 100%;
    }
}

.contenedor-barra {
    width: 100%;
    height: 40px;
    background: linear-gradient(
        to right,
        rgb(91, 249, 70) var(--porcentaje),
        #c8e6c9 var(--porcentaje)
    );
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    transition: background 1s ease-in-out;
}

.barra-texto {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
    font-weight: bold;
}

.etiqueta-total {
    margin-top: 5px;
    font-weight: bold;
}

thead.table-light {
    background-color: #f8f9fa; /* Color claro tipo Bootstrap */
}

.seccion-borde-div {
    border: 2px solid #000;
    border-radius: 6px;
    padding: 1rem;
    position: relative;
    margin-bottom: 1rem;
}

.titulo-seccion {
    position: absolute;
    top: -12px;
    left: 15px;
    background: #f5f7fd;
    padding: 0 8px;
    font-weight: bold;
}

.titulo-seccion-centrado {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #f5f7fd;
    padding: 0 8px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    font-size: 1.5rem;
}

#tablaGastosViaje {
    background-color: transparent !important;
}

.vOcultarDivGv {
    display: none !important;
}

.badge-hover-fix {
    pointer-events: none;
}

.custom-toast {
    background-color: rgba(33, 37, 41, 0.596) !important; /* Gris oscuro translúcido */
    color: #fff !important;
    font-weight: 500;
    backdrop-filter: blur(6px);
    border-radius: 0.5rem;
}

.custom-toast strong {
    font-size: 1rem;
}

.custom-toast span {
    font-size: 0.95rem;
}

#vTiqueteInternacional {
    min-width: 1200px;
}

#vTiqueteInternacional input.form-control {
    min-width: 180px;
}

.table-responsive {
    overflow-x: auto !important;
}

.modal-alerta {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    font-family: sans-serif;
}

.modal-content-alert{
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    font-family: sans-serif;
}

.modal-content-alert button {
    margin-top: 15px;
    padding: 8px 15px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.modal-content-alert button:hover {
    background-color: #0056b3;
}

.custom-bubble {
    position: absolute;
    top: -10px;
    right: -15px;
    background: #dc3545; /* rojo Bootstrap danger */
    color: #fff;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    white-space: nowrap;
}

/* La puntica del globito */
.custom-bubble::after {
    content: "";
    position: absolute;
    bottom: -6px;  /* debajo del globito */
    left: 15%;
    border-width: 6px;
    border-style: solid;
    border-color: #dc3545 transparent transparent transparent;
}

.list-group {
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    width: 15%;
}

.list-group-item {
  cursor: pointer;
}

.list-group-item:hover {
  background-color: #f0f0f0;
}

/*********************************************** Boton de comentarios y/o ayudas ****************************************************/
.help-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    font-family: Arial, sans-serif;
}

.help-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 18px;
    cursor: pointer;
    text-align: center;
    line-height: 28px;
    transition: background-color 0.3s;
}

.help-button:hover {
    background-color: #0056b3;
}

.help-popup {
    display: none;
    position: absolute;
    bottom: 40px;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
    width: 700px;
    z-index: 10;
    padding: 15px 20px;
    animation: fadeIn 0.3s ease;
}

.help-popup::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 20px;
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.help-content {
    display: grid;
    grid-template-columns: 1fr 1fr 2.5fr;
    gap: 15px;
    font-size: 14px;
    color: #333;
    text-align: justify;
    line-height: 1.5;
    margin-bottom: 10px;
}

.help-content div:nth-child(3) {
    word-wrap: break-word;
    white-space: normal;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
/*********************************************** Fin Boton de comentarios y/o ayudas ****************************************************/

/************************************************** Datos de notificaciones **************************************************/
/* Panel lateral */
#notificationSidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 25%;
    height: 100vh;
    background: #ffffff;
    border-left: 2px solid #ddd;
    box-shadow: -2px 0 5px rgba(0,0,0,0.15);
    z-index: 3000;
    display: flex;
    flex-direction: column;

    transform: translateX(100%);
    transition: transform 0.35s ease-in-out, opacity 0.2s ease;
    opacity: 0;
    visibility: hidden;
}

#notificationSidebar.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.notification-header {
    padding: 18px;
    border-bottom: 1px solid #ddd;
    background: #3077fa;
    color: white;
}

.notification-body {
    padding: 12px;
    overflow-y: auto;
    height: calc(100vh - 60px);
}

.notification-card {
    background: #fafafa;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 12px;
}

.notification-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.chat-bubble {
    background: #0084ff;          /* Azul tipo Messenger */
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px 12px 12px 0;  /* Esquinas estilo chat */
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}