/* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════════════╗
*  ‖ Desarrollador: Mario Gabriel Núñez Alcázar de Velasco                                                        ‖
*  ‖ Empresa/Marca Comercial: M4G IPSUM                                                                           ‖
*  ‖ Fecha: 01 de diciembre del 2025                                                                              ‖
*  ‖                                                                                                              ‖
*  ‖ https://m4g.es                                                                                               ‖
*  ‖ mariogabriel@m4g.es                                                                                          ‖
*  ‖ +34 610 28 28 49                                                                                             ‖
*  ╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════╝
*
* @file main.css
* @description
*   Estilos y diseños generales - se aplican en toda la aplicación.
*/

.sidebar .card-body, .main-col, .card-body.form-scroll { padding: 1rem; }
.card-body.form-scroll { overflow-y: auto; }
.filter-actions .btn { flex: 1 1 auto; }
.sidebar .card { min-height: 85vh; }

body {    
  min-height: 100vh;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa !important;
}

/* Hacer que el contenido del sidebar sea scrollable si hace falta */
.sidebar .sidebar-scroll {
  overflow-y: auto;
  padding-right: .25rem;
}

/* Main area: dos paneles apilados con gap */
.panel-stack { 
  display: flex; 
  flex-direction: column; 
  gap: 1rem; 
}

/* Cada panel ocupa la mitad del alto disponible */
.panel { 
  flex: 1 1 0; 
  display: flex; 
  flex-direction: column; 
  min-height: 85vh;
}

/* Tabla: hacer responsive y thead sticky */
.table-responsive thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  /* un pequeño borde para separar del contenido al hacer scroll */
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
/* Forzar tabla a ajuste y evitar que crezca demasiado */
.table-fixed { 
  table-layout: fixed; 
  width: 100%; 
}

/* Arranque rápido: botones pegados en una fila móvil */
.filter-actions { 
  display: flex; 
  gap: .5rem; 
  flex-wrap: wrap; 
}

@media (min-width: 992px) {
  /* en pantallas grandes, que el sidebar respete col-lg-3 original */
  .sidebar { max-width: none; }
}