/* ==========================================================================
   SapyMX - Sistema de Gestión ERP
   Archivo CSS principal que complementa Bootstrap 5
   ========================================================================== */

/* Variables CSS personalizadas para toda la aplicación */
:root {
  /* Colores del tema - Paleta moderna Slate */
  --sapy-primary: #334155;
  --sapy-primary-dark: #1e293b;
  --sapy-primary-light: #64748b;
  --sapy-secondary: #6c757d;
  --sapy-success: #059669;
  --sapy-info: #0ea5e9;
  --sapy-warning: #d97706;
  --sapy-danger: #dc2626;
  
  /* Colores de fondo */
  --sapy-bg-light: #f8f9fa;
  --sapy-bg-white: #ffffff;
  --sapy-bg-dark: #212529;
  
  /* Bordes y sombras */
  --sapy-border-color: #dee2e6;
  --sapy-border-radius: 0.375rem;
  --sapy-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --sapy-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  
  /* Tipografía */
  --sapy-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sapy-font-size-xs: 0.75rem;
  --sapy-font-size-sm: 0.875rem;
  --sapy-font-size-base: 1rem;
  --sapy-font-size-lg: 1.125rem;
  --sapy-font-size-xl: 1.25rem;
  
  /* Espaciado */
  --sapy-spacing-xs: 0.25rem;
  --sapy-spacing-sm: 0.5rem;
  --sapy-spacing-md: 1rem;
  --sapy-spacing-lg: 1.5rem;
  --sapy-spacing-xl: 3rem;
  
  /* Transiciones */
  --sapy-transition: all 0.15s ease-in-out;
  --sapy-transition-fast: all 0.1s ease-in-out;
}

/* ==========================================================================
   Componentes globales de la aplicación
   ========================================================================== */

/* Encabezados de página */
.sapy-page-header {
  background: var(--sapy-bg-white);
  border-bottom: 1px solid var(--sapy-border-color);
  padding: var(--sapy-spacing-lg) 0;
  margin-bottom: var(--sapy-spacing-lg);
}

.sapy-page-title {
  font-size: var(--sapy-font-size-xl);
  font-weight: 600;
  color: var(--sapy-primary);
  margin-bottom: 0;
}

.sapy-page-subtitle {
  color: var(--sapy-secondary);
  font-size: var(--sapy-font-size-sm);
  margin-top: var(--sapy-spacing-xs);
  margin-bottom: 0;
}

/* ==========================================================================
   Componentes de tablas UI estandarizados
   ========================================================================== */

/* Contenedor principal de tabla */
.sapy-table-container {
  background: var(--sapy-bg-white);
  border-radius: var(--sapy-border-radius);
  box-shadow: var(--sapy-box-shadow);
  overflow: hidden;
}

/* Encabezado de tabla */
.sapy-table-header {
  background: linear-gradient(135deg, var(--sapy-primary-dark) 0%, var(--sapy-primary) 100%);
  color: white;
  padding: var(--sapy-spacing-md) var(--sapy-spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sapy-spacing-sm);
  border-bottom: 3px solid var(--sapy-info);
}

.sapy-table-header h4 {
  margin: 0;
  font-size: var(--sapy-font-size-lg);
  font-weight: 600;
}

.sapy-table-header .sapy-table-actions {
  display: flex;
  gap: var(--sapy-spacing-sm);
  flex-wrap: wrap;
}

/* Tabla responsive */
.sapy-table {
  margin-bottom: 0;
}

.sapy-table thead th {
  background-color: var(--sapy-primary);
  color: white;
  border-bottom: 2px solid var(--sapy-primary-dark);
  font-weight: 600;
  font-size: var(--sapy-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  padding: var(--sapy-spacing-md);
  vertical-align: middle;
}

.sapy-table tbody td {
  padding: var(--sapy-spacing-md);
  vertical-align: middle;
  border-top: 1px solid var(--sapy-border-color);
}

.sapy-table tbody tr:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Estados de filas */
.sapy-table tbody tr.sapy-row-active {
  background-color: rgba(var(--bs-success-rgb), 0.1);
}

.sapy-table tbody tr.sapy-row-inactive {
  background-color: rgba(var(--bs-secondary-rgb), 0.1);
  opacity: 0.7;
}

/* Columnas específicas */
.sapy-table .sapy-col-code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--sapy-font-size-xs);
  background-color: var(--sapy-bg-light);
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
}

.sapy-table .sapy-col-actions {
  width: 180px;
  min-width: 180px;
  white-space: nowrap;
  text-align: end;
}

.sapy-table .sapy-col-status {
  width: 10%;
  text-align: center;
}

.sapy-table .sapy-col-numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Badges personalizados */
.sapy-badge {
  font-size: var(--sapy-font-size-xs);
  font-weight: 500;
  padding: 0.375em 0.75em;
  border-radius: var(--sapy-border-radius);
}

.sapy-badge-status-active {
  background-color: rgba(5, 150, 105, 0.1);
  color: var(--sapy-success);
  border: 1px solid rgba(5, 150, 105, 0.3);
}

.sapy-badge-status-inactive {
  background-color: rgba(100, 116, 139, 0.1);
  color: var(--sapy-primary-light);
  border: 1px solid rgba(100, 116, 139, 0.3);
}

.sapy-badge-type {
  background-color: var(--sapy-info);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* ==========================================================================
   Componentes de tarjetas móviles
   ========================================================================== */

.sapy-mobile-card {
  background: var(--sapy-bg-white);
  border: 1px solid var(--sapy-border-color);
  border-radius: var(--sapy-border-radius);
  margin-bottom: var(--sapy-spacing-md);
  box-shadow: var(--sapy-box-shadow);
  transition: var(--sapy-transition);
}

.sapy-mobile-card:hover {
  box-shadow: var(--sapy-box-shadow-lg);
  transform: translateY(-1px);
}

.sapy-mobile-card-header {
  padding: var(--sapy-spacing-md);
  border-bottom: 1px solid var(--sapy-border-color);
  background: var(--sapy-bg-light);
}

.sapy-mobile-card-body {
  padding: var(--sapy-spacing-md);
}

.sapy-mobile-card-title {
  font-size: var(--sapy-font-size-base);
  font-weight: 600;
  margin-bottom: var(--sapy-spacing-xs);
}

.sapy-mobile-card-subtitle {
  font-size: var(--sapy-font-size-sm);
  color: var(--sapy-secondary);
  margin-bottom: 0;
}

.sapy-mobile-card-actions {
  padding: var(--sapy-spacing-md);
  border-top: 1px solid var(--sapy-border-color);
  background: var(--sapy-bg-light);
  display: flex;
  gap: var(--sapy-spacing-sm);
  flex-wrap: wrap;
}

/* ==========================================================================
   Botones y controles de acción
   ========================================================================== */

.sapy-btn-group {
  display: flex;
  gap: var(--sapy-spacing-xs);
  flex-wrap: wrap;
}

.sapy-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--sapy-spacing-xs);
}

/* Botones de estado toggle */
.sapy-toggle-btn {
  border: none;
  padding: 0.25rem 0.75rem;
  border-radius: var(--sapy-border-radius);
  font-size: var(--sapy-font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: var(--sapy-transition);
}

.sapy-toggle-btn.active {
  background-color: var(--sapy-success);
  color: white;
}

.sapy-toggle-btn.inactive {
  background-color: var(--sapy-secondary);
  color: white;
}

.sapy-toggle-btn:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

/* ==========================================================================
   Estados de datos vacíos
   ========================================================================== */

.sapy-empty-state {
  text-align: center;
  padding: var(--sapy-spacing-xl) var(--sapy-spacing-lg);
  color: var(--sapy-secondary);
}

.sapy-empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--sapy-spacing-md);
  opacity: 0.5;
}

.sapy-empty-state-title {
  font-size: var(--sapy-font-size-lg);
  font-weight: 600;
  margin-bottom: var(--sapy-spacing-sm);
}

.sapy-empty-state-text {
  margin-bottom: var(--sapy-spacing-md);
}

/* ==========================================================================
   Filtros y búsqueda
   ========================================================================== */

.sapy-filter-container {
  background: var(--sapy-bg-white);
  border: 1px solid var(--sapy-border-color);
  border-radius: var(--sapy-border-radius);
  padding: var(--sapy-spacing-lg);
  margin-bottom: var(--sapy-spacing-lg);
}

.sapy-filter-actions {
  display: flex;
  gap: var(--sapy-spacing-sm);
  align-items: end;
}

/* ==========================================================================
   Navegación y breadcrumbs
   ========================================================================== */

.sapy-breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: var(--sapy-spacing-md);
}

.sapy-breadcrumb-item {
  color: var(--sapy-secondary);
}

.sapy-breadcrumb-item.active {
  color: var(--sapy-primary);
  font-weight: 500;
}

/* ==========================================================================
   Utilidades específicas de la aplicación
   ========================================================================== */

/* Espaciado */
.sapy-mb-xs { margin-bottom: var(--sapy-spacing-xs) !important; }
.sapy-mb-sm { margin-bottom: var(--sapy-spacing-sm) !important; }
.sapy-mb-md { margin-bottom: var(--sapy-spacing-md) !important; }
.sapy-mb-lg { margin-bottom: var(--sapy-spacing-lg) !important; }
.sapy-mb-xl { margin-bottom: var(--sapy-spacing-xl) !important; }

.sapy-mt-xs { margin-top: var(--sapy-spacing-xs) !important; }
.sapy-mt-sm { margin-top: var(--sapy-spacing-sm) !important; }
.sapy-mt-md { margin-top: var(--sapy-spacing-md) !important; }
.sapy-mt-lg { margin-top: var(--sapy-spacing-lg) !important; }
.sapy-mt-xl { margin-top: var(--sapy-spacing-xl) !important; }

/* Texto */
.sapy-text-code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--sapy-font-size-sm);
  color: var(--sapy-secondary);
  font-weight: 500;
}

.sapy-text-muted {
  color: var(--sapy-secondary) !important;
}

.sapy-text-primary {
  color: var(--sapy-primary) !important;
}

/* ==========================================================================
   Responsive - Mobile First
   ========================================================================== */

/* Vista móvil por defecto */
.sapy-mobile-view {
  display: block;
}

.sapy-desktop-view {
  display: none;
}

/* Desktop: ocultar móvil, mostrar desktop */
@media (min-width: 768px) {
  .sapy-mobile-view {
    display: none !important;
  }
  
  .sapy-desktop-view {
    display: block !important;
  }
  
  .sapy-show-desktop {
    display: block !important;
  }
  
  .sapy-hide-desktop {
    display: none !important;
  }
}

/* Móvil: ajustes específicos */
@media (max-width: 767.98px) {
  .sapy-hide-mobile {
    display: none !important;
  }
  
  .sapy-show-mobile {
    display: block !important;
  }
  
  .sapy-table-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sapy-spacing-md);
  }
  
  .sapy-table-actions {
    justify-content: center;
  }
}

/* ==========================================================================
   Loading y estados de carga
   ========================================================================== */

.sapy-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--sapy-spacing-sm);
  color: var(--sapy-secondary);
}

.sapy-loading::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--sapy-border-color);
  border-top-color: var(--sapy-primary);
  border-radius: 50%;
  animation: sapy-spin 1s linear infinite;
}

@keyframes sapy-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Estados disabled */
.sapy-disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed !important;
}

/* ==========================================================================
   Modo oscuro (preparado para futuras implementaciones)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --sapy-bg-light: #343a40;
    --sapy-bg-white: #212529;
    --sapy-bg-dark: #000000;
    --sapy-border-color: #495057;
  }
}