/* ═══════════════════════════════════════════════════════════
   GLOBAL VARIABLES & BASE STYLES
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 🎨 COLORES FRAPPE STYLE */
  --primary-color: #3b82f6; /* Azul principal */
  --secondary-color: #6b7280; /* Gris medio */
  
  /* 🎨 BACKGROUNDS */
  --bg-sidebar: #f8f8f8; /* Gris muy claro para sidebar */
  --bg-content: #ffffff; /* Blanco puro para contenido */
  --bg-page: #f3f4f6; /* Gris claro para fondo general */
  --bg-card: #ffffff; /* Blanco para tarjetas/modales */
  
  /* 🎨 BORDERS */
  --border-light: #e5e7eb; /* Bordes sutiles */
  --border-medium: #d1d5db; /* Bordes más visibles */
  --border-dark: #9ca3af; /* Bordes oscuros */
  
  /* 🎨 TEXT COLORS */
  --text-primary: #1f2937; /* Texto principal */
  --text-secondary: #6b7280; /* Texto secundario */
  --text-muted: #9ca3af; /* Texto suave */
  --text-white: #ffffff; /* Texto blanco */
  
  /* 🎨 STATES */
  --success: #10b981; /* Verde */
  --warning: #f59e0b; /* Amarillo/naranja */
  --danger: #ef4444; /* Rojo */
  --info: #3b82f6; /* Azul */
  
  /* 📏 MEDIDAS */
  --sidebar-width: 220px;
  --sidebar-width-collapsed: 60px;
  --sidebar-transition: 0.3s ease;
  --navbar-height: 56px;
  --app-header-height: 48px;
  
  /* 🔄 TRANSICIONES */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* 🌫️ SHADOWS */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL LAYOUT - Flexbox sin Bootstrap grid
   ═══════════════════════════════════════════════════════════ */
/* 🔥 FORZAR CONTENCIÓN DE OVERFLOW */
html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
  height: 100%;
  margin: 0; /* 🔥 IMPORTANTE: Sin márgenes */
  padding: 0; /* 🔥 IMPORTANTE: Sin padding */
  background-color: var(--bg-page); /* 🔥 USAR VARIABLE */
  color: var(--text-primary); /* 🔥 USAR VARIABLE */
}

/* 🔥 FORZAR CONTENCIÓN DE OVERFLOW */
html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
  height: 100%; /* 🔥 AGREGAR: altura 100% */
}

/* ═══════════════════════════════════════════════════════════
   ✅ LAYOUTS ESPECÍFICOS
   ═══════════════════════════════════════════════════════════ */

/* 🏠 LAYOUT CON SIDEBAR - SIMPLIFICADO DRÁSTICAMENTE */
.main-wrapper {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden; /* Forzar contención */
  max-width: 100%;    /* Limitar ancho máximo */
  margin-bottom: 0;
  /* 🔥 AGREGAR: Asegurar que no haya espacios */
  margin: 0;
  padding: 0;
  height: 100vh; /* 🔥 CAMBIAR: Usar height en lugar de min-height */
  background-color: var(--bg-page); /* 🔥 USAR VARIABLE */
}

.content-wrapper {
  padding: calc(var(--app-header-height) + 2rem) 2rem 2rem 2rem; /* top right bottom left */
  background-color: var(--bg-content); /* 🔥 CAMBIAR: Blanco puro */
  min-height: 100vh;
  height: 100%;
  overflow-y: auto; /* 🔥 AGREGAR: Permitir scroll solo vertical */
  overflow-x: hidden;
  box-sizing: border-box;
}

/* 🔥 SIMPLIFICAR AL MÁXIMO - USANDO VARIABLES */
body.has-sidebar .main-wrapper {
  margin-left: var(--sidebar-width); /* Usar variable */
  transition: margin-left var(--sidebar-transition); /* Usar variable */
}

body.has-sidebar.sidebar-collapsed .main-wrapper {
  margin-left: var(--sidebar-width-collapsed); /* Usar variable */
}

/* 🔥 FORZAR CONTENCIÓN EN ELEMENTOS INTERNOS */
table, .table-responsive {
  max-width: 100%;
  overflow-x: auto;
}

/* Evitar que cualquier elemento cause overflow */
* {
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */
.py-section { padding: 4rem 0; }
.mb-section { margin-bottom: 3rem; }
.shadow-soft { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }


/* ═══════════════════════════════════════════════════════════
   CÓDIGO DE DEBUG - ELIMINAR DESPUÉS
   ═══════════════════════════════════════════════════════════ 
* {
  outline: 1px solid rgba(255, 0, 0, 0.1);
}

body {
  background: yellow;
}

.main-wrapper {
  background: lightblue;
}

.content-wrapper {
  background: lightgreen;
}*/

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .content-wrapper {
    padding: 1rem;
  }
  
  /* Mobile: sidebar overlay, no margin */
  body.has-sidebar .main-wrapper {
    margin-left: 0;
  }
}

@media (max-width: 576px) {
  .content-wrapper {
    padding: 0.75rem;
  }
}