/* Reglas globales adicionales para asegurar responsive en móviles */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Clases para elementos que deben ocupar todo el ancho */
.full-width {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Animación de pulso para el indicador de desplazamiento */
@keyframes pulse {
    0% {
        background-color: rgba(0, 123, 255, 0.1);
    }
    50% {
        background-color: rgba(0, 123, 255, 0.2);
    }
    100% {
        background-color: rgba(0, 123, 255, 0.1);
    }
}

/* Estilos para el header y footer */
header.bg-orange,
footer.bg-orange {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    position: static !important; /* Cambiado de relative a static para permitir desplazamiento */
}

/* Ajustar secciones del footer en móvil */
@media (max-width: 767.98px) {
    footer .row {
        padding: 0 10px;
    }
    
    footer .footer-section {
        margin-bottom: 15px;
    }
    
    footer .copyright {
        text-align: center;
        font-size: 0.8rem;
        padding: 10px 5px;
    }
}

/* Ajustes para tablas responsivas */
.table-cell-content {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mostrar texto completo en hover para celdas truncadas */
.table-cell-content:hover {
    -webkit-line-clamp: unset;
    overflow: visible;
    z-index: 100;
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 5px;
    border-radius: 3px;
}

/* Clase para indicar contenido desbordado */
.has-overflow {
    position: relative;
}

.has-overflow:after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: inherit;
    padding-left: 3px;
}

.has-overflow:hover:after {
    display: none;
}