/* Asegurarse de que el header ocupe el 100% del ancho de la pantalla */
header.menu_sistema {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #000; /* Asegurarse que el color del fondo ocupe todo el ancho */
}

/* Ajustes para la clase container */
.container {
    max-width: 100%; /* Ocupa todo el ancho de la pantalla */
    padding-left: 15px;
    padding-right: 15px;
}

/* Asegurarse que los elementos del header (dentro de .menu_sistema) se ajusten correctamente */
.menu_sistema .d-flex {
    justify-content: space-between; /* Separar el contenido del header */
    align-items: center; /* Alineación vertical */
}

/* Ajuste para los contenedores de los grupos */
.grupos-container table {
    border-spacing: 20px; /* Espacio entre las celdas */
    width: 100%; /* Asegurar que la tabla tome todo el ancho disponible */
}

.grupos-container td {
    vertical-align: top; /* Alinear el contenido de las celdas al inicio */
}

.grupos-container .card {
    width: 280px;
    display: inline-block;
    box-shadow: 4px 9px 8px 5px rgb(0 0 0 / 41%);
    background: black;
}
.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #000000;
}
.card h5 {
    margin: 0;
    background-color: #ffc107;
    text-align: center;
    color: #000000;
    padding: .7rem .5rem;
    font-size: 1rem;
    border-radius: 5px 5px 0 0;
    border-bottom: solid 10px #000;
}
/* estilos de botones estatus*/

/* Cambiar el borde superior según el estatus */
.estatus-pendiente {
    border-top: 2px solid #7c1500; /* Amarillo para pendientes */
}
.estatus-en-proceso {
    border-top: 2px solid #007bff; /* Azul para en proceso */
}
.estatus-completada {
    border-top: 2px solid #28a745; /* Verde para completadas */
}
.estatus-no-asignado {
    border-top: 2px solid #6c757d; /* Gris para no asignado */
}
.badge-avance {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.9rem;
    background-color: #007bff; /* Puedes cambiar este color según lo que desees */
}
.badge {
    margin-left: -15px; /* Ajusta según sea necesario */
    margin-top: -10px;
}

/* Título "Grupos Asignados" oculto globalmente */
h2.mb-4 {
    display: none !important;
}

@media (max-width: 768px) {
    /* Header: ocultar logo y badge, centrar nav */
    .menu_sistema a.fw-bold,
    .menu_sistema .badge {
        display: none !important;
    }

    .menu_sistema .d-flex {
        justify-content: center !important;
    }

    .menu_sistema .nav {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    #listaGrupos {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    #listaGrupos table {
        width: max-content;
    }

    #listaGrupos tr {
        display: flex;
        flex-wrap: nowrap;
    }

    #listaGrupos td {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        padding: 10px !important;
        box-sizing: border-box;
        scroll-snap-align: start;
    }

    #listaGrupos .card {
        width: 100%;
        box-sizing: border-box;
    }

    .chat-container {
        width: 100%;
    }

    .chat-messages {
        height: 300px !important;
    }

    .chat-container img,
    .chat-container audio {
        max-width: 100%;
    }
}