/* --- PROPERTY OF ZABALA SOLUTIONS INC. - https://zabala.solutions --- */
/* --- PROPIEDAD DE ZABALA SOLUTIONS INC. - https://zabala.solutions --- */

/* ========================================
   BASE SYSTEM - Sistema de Estilos Base
   ========================================
   Este archivo importa todos los estilos base del sistema
   que pueden ser utilizados en múltiples aplicaciones
   
   Para usar este sistema, incluir solo este archivo CSS
   ======================================== */

/* Importar estilos base del sistema */
@import url('./nav-base.css');
@import url('./sidebar-base.css');
@import url('./layout-base.css');
@import url('./responsive-base.css');
@import url('./homepage-layout.css');
@import url('./loading-spinners.css');

/* ========================================
   VARIABLES GLOBALES DEL SISTEMA
   ======================================== */

:root {
  /* Sistema de colores base */
  --base-primary: #321fdb;
  --base-primary-hover: #2a1a9a;
  --base-secondary: #6c757d;
  --base-success: #2eb85c;
  --base-info: #39f;
  --base-warning: #f9b115;
  --base-danger: #e55353;
  --base-light: #f8f9fa;
  --base-dark: #212529;
  
  /* Sistema de sombras */
  --base-shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --base-shadow-md: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  --base-shadow-lg: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  
  /* Sistema de bordes */
  --base-border-radius: 0.375rem;
  --base-border-radius-lg: 0.5rem;
  --base-border-radius-xl: 0.75rem;
  
  /* Sistema de transiciones */
  --base-transition-fast: all 0.15s ease;
  --base-transition-normal: all 0.3s ease;
  --base-transition-slow: all 0.5s ease;
  
  /* Sistema de espaciado */
  --base-spacing-unit: 0.25rem;
  --base-spacing-xs: var(--base-spacing-unit);
  --base-spacing-sm: calc(var(--base-spacing-unit) * 2);
  --base-spacing-md: calc(var(--base-spacing-unit) * 4);
  --base-spacing-lg: calc(var(--base-spacing-unit) * 6);
  --base-spacing-xl: calc(var(--base-spacing-unit) * 8);
  
  /* Sistema de tipografía */
  --base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --base-font-size-base: 1rem;
  --base-line-height-base: 1.5;
  --base-font-weight-light: 300;
  --base-font-weight-normal: 400;
  --base-font-weight-medium: 500;
  --base-font-weight-semibold: 600;
  --base-font-weight-bold: 700;
}

/* ========================================
   UTILIDADES GLOBALES DEL SISTEMA
   ======================================== */

/* Utilidades de espaciado */
.base-p-xs { padding: var(--base-spacing-xs) !important; }
.base-p-sm { padding: var(--base-spacing-sm) !important; }
.base-p-md { padding: var(--base-spacing-md) !important; }
.base-p-lg { padding: var(--base-spacing-lg) !important; }
.base-p-xl { padding: var(--base-spacing-xl) !important; }

.base-m-xs { margin: var(--base-spacing-xs) !important; }
.base-m-sm { margin: var(--base-spacing-sm) !important; }
.base-m-md { margin: var(--base-spacing-md) !important; }
.base-m-lg { margin: var(--base-spacing-lg) !important; }
.base-m-xl { margin: var(--base-spacing-xl) !important; }

/* Utilidades de sombras */
.base-shadow-sm { box-shadow: var(--base-shadow-sm) !important; }
.base-shadow-md { box-shadow: var(--base-shadow-md) !important; }
.base-shadow-lg { box-shadow: var(--base-shadow-lg) !important; }

/* Utilidades de bordes */
.base-rounded { border-radius: var(--base-border-radius) !important; }
.base-rounded-lg { border-radius: var(--base-border-radius-lg) !important; }
.base-rounded-xl { border-radius: var(--base-border-radius-xl) !important; }

/* Utilidades de transiciones */
.base-transition-fast { transition: var(--base-transition-fast) !important; }
.base-transition-normal { transition: var(--base-transition-normal) !important; }
.base-transition-slow { transition: var(--base-transition-slow) !important; }

/* Utilidades de colores */
.base-text-primary { color: var(--base-primary) !important; }
.base-text-secondary { color: var(--base-secondary) !important; }
.base-text-success { color: var(--base-success) !important; }
.base-text-info { color: var(--base-info) !important; }
.base-text-warning { color: var(--base-warning) !important; }
.base-text-danger { color: var(--base-danger) !important; }

.base-bg-primary { background-color: var(--base-primary) !important; }
.base-bg-secondary { background-color: var(--base-secondary) !important; }
.base-bg-success { background-color: var(--base-success) !important; }
.base-bg-info { background-color: var(--base-info) !important; }
.base-bg-warning { background-color: var(--base-warning) !important; }
.base-bg-danger { background-color: var(--base-danger) !important; }

/* Utilidades de flexbox */
.base-flex { display: flex !important; }
.base-flex-column { flex-direction: column !important; }
.base-flex-row { flex-direction: row !important; }
.base-flex-wrap { flex-wrap: wrap !important; }
.base-flex-nowrap { flex-wrap: nowrap !important; }

.base-justify-start { justify-content: flex-start !important; }
.base-justify-end { justify-content: flex-end !important; }
.base-justify-center { justify-content: center !important; }
.base-justify-between { justify-content: space-between !important; }
.base-justify-around { justify-content: space-around !important; }
.base-justify-evenly { justify-content: space-evenly !important; }

.base-align-start { align-items: flex-start !important; }
.base-align-end { align-items: flex-end !important; }
.base-align-center { align-items: center !important; }
.base-align-stretch { align-items: stretch !important; }
.base-align-baseline { align-items: baseline !important; }

/* Utilidades de grid */
.base-grid { display: grid !important; }
.base-grid-1 { grid-template-columns: 1fr !important; }
.base-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.base-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.base-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
.base-grid-6 { grid-template-columns: repeat(6, 1fr) !important; }

/* Utilidades de texto */
.base-text-center { text-align: center !important; }
.base-text-left { text-align: left !important; }
.base-text-right { text-align: right !important; }
.base-text-justify { text-align: justify !important; }

.base-text-uppercase { text-transform: uppercase !important; }
.base-text-lowercase { text-transform: lowercase !important; }
.base-text-capitalize { text-transform: capitalize !important; }

.base-font-light { font-weight: var(--base-font-weight-light) !important; }
.base-font-normal { font-weight: var(--base-font-weight-normal) !important; }
.base-font-medium { font-weight: var(--base-font-weight-medium) !important; }
.base-font-semibold { font-weight: var(--base-font-weight-semibold) !important; }
.base-font-bold { font-weight: var(--base-font-weight-bold) !important; }

/* Utilidades de posición */
.base-relative { position: relative !important; }
.base-absolute { position: absolute !important; }
.base-fixed { position: fixed !important; }
.base-sticky { position: sticky !important; }

.base-top-0 { top: 0 !important; }
.base-right-0 { right: 0 !important; }
.base-bottom-0 { bottom: 0 !important; }
.base-left-0 { left: 0 !important; }

/* Utilidades de overflow */
.base-overflow-hidden { overflow: hidden !important; }
.base-overflow-auto { overflow: auto !important; }
.base-overflow-scroll { overflow: scroll !important; }
.base-overflow-x-auto { overflow-x: auto !important; }
.base-overflow-y-auto { overflow-y: auto !important; }

/* Utilidades de cursor */
.base-cursor-pointer { cursor: pointer !important; }
.base-cursor-default { cursor: default !important; }
.base-cursor-not-allowed { cursor: not-allowed !important; }
.base-cursor-help { cursor: help !important; }

/* Utilidades de visibilidad */
.base-visible { visibility: visible !important; }
.base-invisible { visibility: hidden !important; }
.base-opacity-0 { opacity: 0 !important; }
.base-opacity-25 { opacity: 0.25 !important; }
.base-opacity-50 { opacity: 0.5 !important; }
.base-opacity-75 { opacity: 0.75 !important; }
.base-opacity-100 { opacity: 1 !important; }

/* ========================================
   COMPONENTES BASE DEL SISTEMA
   ======================================== */

/* Botón base */
.base-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: var(--base-font-size-base);
  font-weight: var(--base-font-weight-medium);
  line-height: var(--base-line-height-base);
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--base-border-radius);
  cursor: pointer;
  transition: var(--base-transition-normal);
  user-select: none;
}

.base-btn:hover {
  text-decoration: none;
}

.base-btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25);
}

.base-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Variantes de botón */
.base-btn-primary {
  color: white;
  background-color: var(--base-primary);
  border-color: var(--base-primary);
}

.base-btn-primary:hover {
  background-color: var(--base-primary-hover);
  border-color: var(--base-primary-hover);
}

.base-btn-secondary {
  color: white;
  background-color: var(--base-secondary);
  border-color: var(--base-secondary);
}

.base-btn-secondary:hover {
  background-color: #5a6268;
  border-color: #5a6268;
}

/* Tarjeta base */
.base-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: white;
  background-clip: border-box;
  border: 1px solid var(--base-border-color, #dee2e6);
  border-radius: var(--base-border-radius);
  box-shadow: var(--base-shadow-sm);
  transition: var(--base-transition-normal);
}

.base-card:hover {
  box-shadow: var(--base-shadow-md);
}

.base-card-header {
  padding: 0.75rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--base-border-color, #dee2e6);
}

.base-card-body {
  flex: 1 1 auto;
  padding: 1rem;
}

.base-card-footer {
  padding: 0.75rem 1rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid var(--base-border-color, #dee2e6);
}

/* Alert base */
.base-alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--base-border-radius);
}

.base-alert-primary {
  color: #004085;
  background-color: #cce7ff;
  border-color: #b8daff;
}

.base-alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}

.base-alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.base-alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.base-alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeaa7;
}

.base-alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

/* ========================================
   ANIMACIONES BASE DEL SISTEMA
   ======================================== */

@keyframes base-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes base-slide-in-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes base-slide-in-down {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes base-slide-in-left {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes base-slide-in-right {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes base-scale-in {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Clases de animación */
.base-animate-fade-in { animation: base-fade-in 0.3s ease-out; }
.base-animate-slide-up { animation: base-slide-in-up 0.3s ease-out; }
.base-animate-slide-down { animation: base-slide-in-down 0.3s ease-out; }
.base-animate-slide-left { animation: base-slide-in-left 0.3s ease-out; }
.base-animate-slide-right { animation: base-slide-in-right 0.3s ease-out; }
.base-animate-scale-in { animation: base-scale-in 0.3s ease-out; }

/* ========================================
   IMPRESIÓN Y ACCESIBILIDAD
   ======================================== */

@media print {
  .base-no-print { display: none !important; }
  .base-print-only { display: block !important; }
}

/* Utilidades de accesibilidad */
.base-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.base-focus-visible:focus {
  outline: 2px solid var(--base-primary);
  outline-offset: 2px;
}