@import url("https://fonts.googleapis.com/css2?family=Encode+Sans+Semi+Condensed:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap");

/* ========================================
   RESET CSS BÁSICO
   Estilos base compartidos por todas las páginas
   Usa variables CSS del sistema de diseño
   ======================================== */

/* Reset universal */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Forzar scrollbar solo cuando sea necesario */
html {
  overflow-y: auto; /* ✅ CAMBIADO: solo mostrar scroll cuando sea necesario */
  scrollbar-width: thin;
  scrollbar-color: #8d8d8d #e3e6e8;
}

/* Prevenir overflow horizontal en mobile */
@media (max-width: 768px) {
  *,
  *::before,
  *::after {
    max-width: 100%;
  }

  html {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* Body base */
body {
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background-color: var(--page-background);
  color: var(--foreground);
  padding: 5px; /* ✅ CANON: 5px arriba y laterales; el espacio inferior especial se maneja aparte en mobile */
  min-height: 100vh; /* ✅ SIEMPRE 100vh */
  margin: 0;
  line-height: 1.5;
  overflow-x: hidden;
  display: flex; /* ✅ FLEX para que el contenido crezca */
  flex-direction: column; /* ✅ Columna vertical */
  box-sizing: border-box; /* ✅ Incluir padding en el cálculo de altura */
}

* {
  scrollbar-width: thin;
  scrollbar-color: #8d8d8d #e3e6e8;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #e3e6e8;
}

*::-webkit-scrollbar-thumb {
  background: #8d8d8d;
  border-radius: 999px;
  border: 2px solid #e3e6e8;
}

/* Responsive: Menos padding en mobile */
@media (max-width: 767px) {
  body {
    padding: 5px 5px 100px 5px;
    overflow-x: hidden;
  }
}

/* ========================================
   CONTENEDOR PRINCIPAL (para columnas/grids)
   Crece para llenar el espacio disponible
   ======================================== */
.main-content,
.columns-container,
.columns-container-inventario,
.columns-container-rma,
.columns-container-factura {
  flex: 1; /* ✅ Crece para llenar el espacio disponible */
  display: flex;
  flex-direction: column;
  width: auto;
  /*width: 100%;*/
  gap: 5px; /* ✅ CANON v265: Espaciado entre bloques */
  /* ✅ CRÍTICO: Usar TODO el viewport - padding (25px total: 5px top + 20px bottom) */
  min-height: calc(100vh - 25px);
}

/* ✅ CRÍTICO: Cards CON tabla crecen EQUITATIVAMENTE */
.columns-container > .card.card-full-height,
.columns-container-rma > .card.card-full-height,
.columns-container-factura > .card.card-full-height {
  flex: 1 1 0; /* Base 0 para distribución equitativa */
  min-height: 0;
}

/* Cards SIN card-full-height NO crecen */
.columns-container > .card:not(.card-full-height),
.columns-container-rma > .card:not(.card-full-height),
.columns-container-factura > .card:not(.card-full-height) {
  flex: 0 0 auto;
  height: auto;
}