/* Estilos responsivos para tablas en Clara IA */

/* Estilo base para todas las tablas */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.table th,
.table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(2, 6, 23, 0.1);
}

.table th {
  background-color: #f8fafc;
  font-weight: 700;
  color: var(--primary);
}

/* Estilos responsivos para dispositivos pequeños */
@media (max-width: 768px) {
  /* Contenedor con scroll horizontal para tablas */
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Ajuste para los botones de exportar */
  .export-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .export-buttons .btn-outline {
    margin-bottom: 8px;
  }
  
  /* Ajustes para todas las pestañas (principales y de finanzas) */
  .tabs {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .tabs .tab-btn {
    margin-bottom: 8px;
    flex: 0 0 auto;
    min-width: calc(50% - 8px);
    text-align: center;
  }
  
  /* Ajustes específicos para las pestañas principales */
  #tabsNav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  
  #tabsNav .tab-btn {
    margin-bottom: 8px;
    flex: 1 1 auto;
    min-width: calc(50% - 8px);
    max-width: calc(50% - 8px);
    text-align: center;
  }
  
  /* Ajuste para el selector de mes */
  .month-picker {
    width: 100%;
    max-width: 230px;
  }
  
  /* Ajuste para la grid de estadísticas */
  .grid-3 {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* Ajustes para los encabezados con botones de acción */
@media (max-width: 576px) {
  h3, h2 {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  
  h3 .btn-primary, h2 .btn-primary {
    width: 100%;
    margin-top: 5px;
  }
}

/* Para dispositivos muy pequeños, transformamos la tabla */
@media (max-width: 576px) {
  .table-mobile-stack thead {
    display: none; /* Ocultamos el encabezado */
  }
  
  .table-mobile-stack tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid rgba(2, 6, 23, 0.1);
    border-radius: 8px;
    padding: 0.5rem;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .table-mobile-stack td {
    display: flex;
    justify-content: space-between;
    text-align: right;
    padding: 0.5rem;
    border-bottom: 1px solid rgba(2, 6, 23, 0.05);
  }
  
  .table-mobile-stack td:last-child {
    border-bottom: none;
  }
  
  /* Agregamos etiquetas para cada celda */
  .table-mobile-stack td::before {
    content: attr(data-label);
    font-weight: 700;
    text-align: left;
    color: var(--primary);
  }
  
  /* Ajustes específicos para botones en modo móvil */
  .table-mobile-stack td:last-child {
    justify-content: center;
  }
  
  .table-mobile-stack td:last-child::before {
    display: none;
  }
}