/* Estilos para el contenedor de las tarjetas */
.totales-produccion-container {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Estilos de las tarjetas */
.totales-produccion-container .card {
  background-color: #ffffff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.totales-produccion-container .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Patrón para los títulos y valores */
.totales-produccion-container .card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.totales-produccion-container .card-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #333333;
  margin-bottom: 0.25rem;
}

.totales-produccion-container .card-subtitle {
  font-size: 0.8rem;
  color: #999999;
  margin-bottom: 1rem;
}

/* Estilos para la barra de progreso */
.totales-produccion-container .progress-container {
  width: 100%;
  height: 8px;
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.totales-produccion-container .progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease-in-out;
}

.totales-produccion-container .progress-bar.material-bg-success {
  background-color: #4caf50;
}

.totales-produccion-container .progress-bar.material-bg-info {
  background-color: #03a9f4;
}

#totales-wrapper {
  margin-bottom: 2rem;
}


/* Contenedor principal para el scroll */
.table-responsive-custom {
  max-height: 590px; 
  overflow-y: auto;  
  overflow-x: auto;  
  position: relative; 
}

/* Encabezado fijo de la tabla */
#produccionTable thead {
  position: sticky; 
  top: 0;         
  z-index: 1;      
}

/* Estilo para las celdas del encabezado para asegurar un fondo sólido */
#produccionTable thead th {
  background-color: #007bff; /* Color de fondo del encabezado */
  color: white; /* Color del texto del encabezado */
}

.modal.nested {
    z-index: 1050 !important; /* modal debajo del padre */
}

.modal.nested ~ .modal-backdrop {
    z-index: 1049 !important; /* backdrop detrás del modal */
}

.modal.nested2 {
    z-index: 1048 !important; /* modal debajo del padre */
}

.modal.nested2 ~ .modal-backdrop {
    z-index: 1047 !important; /* backdrop detrás del modal */
}
/* Contenedor de tabs */
.nav-tabs {
    border-bottom: none; /* Quitar línea de Bootstrap */
}

/* Tabs inactivos */
.nav-tabs .nav-link {
    color: #495057; /* gris oscuro tipo Material */
    background-color: #f5f5f5; /* gris claro */
    border: none;
    border-radius: 8px 8px 0 0; /* esquinas redondeadas */
    margin-right: 8px;
    padding: 0.6rem 1.2rem;
    transition: all 0.3s ease;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Hover tabs inactivos */
.nav-tabs .nav-link:hover {
    background-color: #e0e0e0; /* gris un poco más oscuro */
    color: #212529;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* Tab activo */
.nav-tabs .nav-link.active {
    color: #ffffff; /* texto blanco */
    background-color: #0d6efd; /* azul tipo primary */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border-radius: 8px 8px 0 0;
    transform: translateY(-1px);
}

/* Tab content con borde y sombra ligera */
.tab-content {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 0 8px 8px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


.text-compact,
.text-compact table,
.text-compact th,
.text-compact td {
  font-size: 0.8rem; /* Puedes ajustar este valor a tu gusto */
}