/**
 * TrashFlow — Sistema de Monitoreo de Residuos Urbano
 * 
 * Archivo: base.css
 * Descripción: Define las reglas globales de estilo, la tipografía base, reset general,
 *              diseño estético de barras de desplazamiento (scrollbars), clases de utilidad
 *              globales y el layout contenedor de la interfaz de la aplicación.
 * 
 * Dependencias:
 *   - variables.css (Usa variables del sistema de diseño)
 * 
 * Expone:
 *   - Clases de alineación flex y colores de texto comunes.
 *   - Estilos generales para HTML, BODY, A, BUTTON, INPUT y scrollbars.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Reset and box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font-primary);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* Scrollbar styling for high-end professional appearance */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary);
}

/* Typography elements */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
}

p {
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   Escalado Global de Tipografía
   ========================================================================== */
body.font-size-12 {
  font-size: 12px;
  --font-size-base: 12px;
}
body.font-size-12 .topbar-title { font-size: 18px !important; }
body.font-size-12 .topbar-subtitle { font-size: 11px !important; }
body.font-size-12 .card-title, body.font-size-12 h2, body.font-size-12 h3 { font-size: 14px !important; }
body.font-size-12 .card-subtitle, body.font-size-12 p { font-size: 11.5px !important; }
body.font-size-12 .form-label, body.font-size-12 label { font-size: 11.5px !important; }
body.font-size-12 .sidebar-nav-link, body.font-size-12 .nav-text, body.font-size-12 .logout-btn { font-size: 12px !important; }
body.font-size-12 .btn, body.font-size-12 button { font-size: 12px !important; }
body.font-size-12 .form-input, body.font-size-12 .form-select, body.font-size-12 input, body.font-size-12 select, body.font-size-12 textarea, body.font-size-12 .custom-select-trigger, body.font-size-12 .custom-select-option { font-size: 12px !important; }
body.font-size-12 .table th, body.font-size-12 .table td { font-size: 11.5px !important; }
body.font-size-12 .badge, body.font-size-12 .status-badge { font-size: 10px !important; }
body.font-size-12 .kpi-value, body.font-size-12 .stat-value { font-size: 24px !important; }
body.font-size-12 .kpi-label, body.font-size-12 .stat-label { font-size: 11px !important; }
body.font-size-12 .info-label, body.font-size-12 .info-row { font-size: 11.5px !important; }

body.font-size-14 {
  font-size: 14px;
  --font-size-base: 14px;
}

body.font-size-16 {
  font-size: 16px;
  --font-size-base: 16px;
}
body.font-size-16 .topbar-title { font-size: 24px !important; }
body.font-size-16 .topbar-subtitle { font-size: 13.5px !important; }
body.font-size-16 .card-title, body.font-size-16 h2, body.font-size-16 h3 { font-size: 18px !important; }
body.font-size-16 .card-subtitle, body.font-size-16 p { font-size: 14px !important; }
body.font-size-16 .form-label, body.font-size-16 label { font-size: 14px !important; }
body.font-size-16 .sidebar-nav-link, body.font-size-16 .nav-text, body.font-size-16 .logout-btn { font-size: 15.5px !important; }
body.font-size-16 .btn, body.font-size-16 button { font-size: 15px !important; }
body.font-size-16 .form-input, body.font-size-16 .form-select, body.font-size-16 input, body.font-size-16 select, body.font-size-16 textarea, body.font-size-16 .custom-select-trigger, body.font-size-16 .custom-select-option { font-size: 15px !important; }
body.font-size-16 .table th, body.font-size-16 .table td { font-size: 14.5px !important; }
body.font-size-16 .badge, body.font-size-16 .status-badge { font-size: 12px !important; }
body.font-size-16 .kpi-value, body.font-size-16 .stat-value { font-size: 34px !important; }
body.font-size-16 .kpi-label, body.font-size-16 .stat-label { font-size: 13.5px !important; }
body.font-size-16 .info-label, body.font-size-16 .info-row { font-size: 14.5px !important; }

body.font-size-18 {
  font-size: 18px;
  --font-size-base: 18px;
}
body.font-size-18 .topbar-title { font-size: 27px !important; }
body.font-size-18 .topbar-subtitle { font-size: 15.5px !important; }
body.font-size-18 .card-title, body.font-size-18 h2, body.font-size-18 h3 { font-size: 20px !important; }
body.font-size-18 .card-subtitle, body.font-size-18 p { font-size: 15.5px !important; }
body.font-size-18 .form-label, body.font-size-18 label { font-size: 15.5px !important; }
body.font-size-18 .sidebar-nav-link, body.font-size-18 .nav-text, body.font-size-18 .logout-btn { font-size: 17px !important; }
body.font-size-18 .btn, body.font-size-18 button { font-size: 17px !important; }
body.font-size-18 .form-input, body.font-size-18 .form-select, body.font-size-18 input, body.font-size-18 select, body.font-size-18 textarea, body.font-size-18 .custom-select-trigger, body.font-size-18 .custom-select-option { font-size: 17px !important; }
body.font-size-18 .table th, body.font-size-18 .table td { font-size: 16.5px !important; }
body.font-size-18 .badge, body.font-size-18 .status-badge { font-size: 13.5px !important; }
body.font-size-18 .kpi-value, body.font-size-18 .stat-value { font-size: 40px !important; }
body.font-size-18 .kpi-label, body.font-size-18 .stat-label { font-size: 15px !important; }
body.font-size-18 .info-label, body.font-size-18 .info-row { font-size: 16.5px !important; }


/* Global utility classes */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.flex-1 {
  flex: 1;
}

.grid {
  display: grid;
}

.text-center {
  text-align: center;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.hidden {
  display: none !important;
}

/* Text status colors */
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-danger { color: var(--color-danger); }

/* Background status colors */
.bg-success-subtle { background-color: rgba(46, 204, 113, 0.15); color: var(--color-success); }
.bg-warning-subtle { background-color: rgba(245, 166, 35, 0.15); color: var(--color-warning); }
.bg-info-subtle { background-color: rgba(74, 144, 217, 0.15); color: var(--color-info); }
.bg-danger-subtle { background-color: rgba(239, 68, 68, 0.15); color: var(--color-danger); }
.bg-secondary-subtle { background-color: rgba(136, 136, 136, 0.15); color: var(--color-text-secondary); }

/* Main app container layout (for pages with sidebars) */
.app-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-bg);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
  position: relative;
}

.content-body::before {
  content: '';
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 280px;
  height: 280px;
  background-image: url('../assets/isotipo.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}


/* ============================================================
   RESPONSIVE — Base Layout
============================================================ */

/* Tablet (<=1024px) */
@media (max-width: 1024px) {
  .content-body {
    padding: var(--spacing-md);
  }
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
  html, body {
    overflow: auto;
  }
  .app-container {
    height: auto;
    min-height: 100vh;
  }
  .main-content {
    overflow: auto;
    min-width: 0;
  }
  .content-body {
    padding: var(--spacing-sm);
    overflow-y: visible;
  }
  .content-body::before {
    display: none;
  }
}

/* Small mobile (<=480px) */
@media (max-width: 480px) {
  .content-body {
    padding: 4px 8px;
  }
}