html, body {
    min-height: 100vh; /* Permite que se extienda si hay más contenido */
    height: auto;     /* Asegura que la altura se ajuste al contenido */
    overflow-y: auto; /* Permite el scroll vertical si el contenido excede la altura */
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en iOS, útil a veces en Android */
}
.combo-container {
    display: flex;
    align-items: center;
    justify-content: center; 
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px;
    background-color: #ffffff; 
    width: 150px; 
    margin-left: auto; 
   
}
.combo-container select {
    border: none;
    font-size: 14px;
    padding: 3px 10px;
    flex: 1; 
}

.icon-date {
    color: #333333; 
    font-size: 20px;
    margin-right: 8px;
}
.responsive-image {
    width: 9%;
    height: auto;
}
.navbar {
    z-index: 1050; /* Asegúrate de que la barra superior esté por encima de la barra lateral */
}

/* Estilo para la barra lateral */
#sidebar {
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding-top: 56px;
    background-color: #141414;
    width: 250px;
    height: 100vh;
    z-index: 999;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    overflow: auto;
    transform: translateX(-250px); /* Iniciar con la barra oculta */
}

/* Cuando el sidebar tiene la clase 'collapsed', será visible */
#sidebar.collapsed {
    transform: translateX(0); /* Aparece cuando está colapsado */
    width: 250px; /* Recupera el ancho */
}

/* Estilo para el contenido principal */
#content {
    margin-left: 0; /* Sin margen cuando la barra está oculta */
    padding: 20px;
    padding-top: 76px;
    transition: margin-left 0.3s ease-in-out;
    
    font-size: 80%;
}

#content.shifted {
    margin-left: 250px; /* Ajustar el margen cuando la barra lateral está visible */
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    /* Barra lateral en dispositivos móviles */
    #sidebar {
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        padding-top: 56px;
        background-color: #141414;
        width: 250px;
        height: 100vh;
        z-index: 999;
        transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
        overflow: auto;
        transform: translateX(-250px); /* Iniciar con la barra oculta */
    }

    /* Barra lateral visible */
    #sidebar.collapsed {
        transform: translateX(0); /* La barra lateral aparece */
    }

    /* El contenido se oculta cuando la barra lateral está activa */
    #content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        display: none;
        transition: transform 0.3s ease, display 0.3s ease;
        
    }

    /* Mostrar el contenido solo cuando la barra lateral está oculta */
    #content:not(.shifted) {
        display: block; /* Muestra el contenido cuando la barra lateral está oculta */
    }

    /* Botón para mostrar la barra lateral */
    .toggle-sidebar-btn {
        position: fixed; /* Posicionamos el botón en la parte inferior de la pantalla */
        top: 10px;
        left: 10px;
        z-index: 1100; /* Aseguramos que el botón esté encima de la barra lateral */
        background-color: #333;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
   /* .modal, .modal-backdrop {
        z-index: 1051 !important; 
        
    } */

    .custom-swal-mobile {
        font-size: 14px; 
        max-width: 95%; 
    }

    .swal2-popup {
        border-radius: 10px; 
    }
    
}

.nav-link span.material-icons {
    margin-right: 12px;
    font-size: 1.5rem;
}

/* SELECCIÓN DE LA PÁGINA ACTUAL */
.nav-link {
    display: flex;
    align-items: center;
}

.nav-link.active {
    color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.1);
}

/* Submenú */
#submenu .nav-link {
    padding: 0.5rem 1rem;
    color: #adb5bd;
}

#submenu .nav-link:hover {
    color: #0d6efd;
}

/* Estilo para el separador */
.dropdown-divider {
    border-top: 1px solid #343a40;
    margin: 0.5rem 0;
}

.swal2-popup {
    border-radius: 10px;
}







.table-hover tbody tr:hover {
    background-color: #b7c5d4; 
    cursor: pointer;
}

.table-hover tbody tr:hover td {
    color: #ffffff !important;
    cursor: pointer;
}

.table-hoverP tbody tr:hover {
    cursor: pointer;
}


.button-group {
    display: flex;
    gap: 5px; 
}

.button-group .btn {
    margin: 0; 
}

/* Ocultar una columna de la tabla */
.hidden-column {
    display: none;
}

.nav-link .toggle-arrow {
    transition: transform 0.3s; /* Añade una transición suave */
}

#infoButton {
    font-size: 30px; /* Tamaño del ícono */
    color: #007bff; /* Color inicial del ícono */
    cursor: pointer; /* Apunta a que es interactivo */
    transition: color 0.3s; /* Efecto de transición suave al cambiar el color */
}

#infoButton:hover {
    color: #5bc0de; /* Color más claro cuando el ratón pasa sobre el ícono */
}
.mi-sobretodo {
    z-index: 2000; /* Valor superior al z-index por defecto de Bootstrap */
}

#mas_detalle {
    text-transform: uppercase;
}

 h6 {
    font-size: 0.8rem;
}
h4 {
    font-size: 1.2rem;
}
h5 {
    font-size: 1.0rem;
}
p {
    font-size: 0.9rem;
}


select {
    width: 100%;
    appearance: none;          /* estándar */
    -webkit-appearance: none;  /* WebKit: Chrome, Safari, Android WebView */
    -moz-appearance: none;     /* opcional: Firefox */
}


thead th {
    position: sticky;
    top: 0;
    z-index: 10; /* Prioridad para que quede encima */
}

/*
thead th {
    background: linear-gradient(135deg, #1976d2, #42a5f5);
    color: white;
}

*/
.registro-icon {
  cursor: pointer;
  display: inline-block;
  font-size: 1.2rem;
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.registro-icon:hover {
  transform: scale(1.3);
  color: #0d6efd;
}


.ver-imagen-icon {
  cursor: pointer;
  display: inline-block;
  font-size: 1.2rem;
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.ver-imagen-icon:hover {
  transform: scale(1.3);
  color: #d62912;
}

.productos-icon {
  cursor: pointer;
  display: inline-block;
  font-size: 1.2rem;
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
  color: #009688;
}

.productos-icon:hover {
  transform: scale(1.3);
  color: #0d6efd;
}


.lg-backdrop,
.lg-outer {
  z-index: 11000 !important;
}


/* Solo afecta a la tabla de inventario de bobinas */
#tablaInventarioBobinas thead {
    background-color: #6c757d; /* Gris */
    color: #ffffff;             /* Texto blanco */
}