/**
 * ============================================
 * SestIA UI Components v1.2.0
 * ============================================
 * Libreria de componentes CSS reutilizables
 * Integrada con el sistema de temas de site-config
 *
 * COMPONENTES DISPONIBLES:
 * - Botones (.sui-btn-*)
 * - Inputs/Forms (.sui-input, .sui-form-group)
 * - Cards (.sui-card-*)
 * - Badges (.sui-badge-*)
 * - Alerts (.sui-alert-*)
 * - Spinners (.sui-spinner-*)
 * - Tables (.sui-table-*)
 * - Tabs (.sui-tab-*)
 * - Skeleton Loading (.sui-skeleton-*)    [NEW v1.2]
 * - Progress Bar (.sui-progress-*)        [NEW v1.2]
 * - Avatars (.sui-avatar-*)               [NEW v1.2]
 * - Empty States (.sui-empty-*)           [NEW v1.2]
 * - Animations (.sui-fade-in-*, etc)      [NEW v1.2]
 * - Tooltips ([data-tooltip])             [NEW v1.2]
 * - Stat Cards (.sui-stat-*)              [NEW v1.2]
 *
 * VARIABLES HEREDADAS DE SITE-CONFIG:
 * - Colores: --brand, --brand-light, --accent, --success, --warning, --danger, --info
 * - Base: --bg, --panel, --panel-2, --text, --muted, --border
 * - UI: --radius-sm, --radius-md, --radius-lg
 *
 * TOKENS CONFIGURABLES DESDE SITE-CONFIG:
 * - Skeleton: --sui-skeleton-speed, --sui-skeleton-radius
 * - Progress: --sui-progress-height, --sui-progress-radius
 * - Avatar: --sui-avatar-size, --sui-avatar-radius
 * - Empty: --sui-empty-icon-size
 * - Stat: --sui-stat-icon-size, --sui-stat-icon-radius
 * - Tooltip: --sui-tooltip-radius
 * - Animation: --sui-animation-speed, --sui-animation-easing
 */

/* ============================================
   TOKENS DE COMPONENTES (Defaults)
   Pueden ser sobrescritos desde site-config
   ============================================ */
:root {
  /* ==========================================
     BOTONES
     ========================================== */
  --sui-btn-radius: var(--radius-md, 0.5rem);
  --sui-btn-padding-sm: 0.375rem 0.75rem;
  --sui-btn-padding-md: 0.625rem 1.25rem;
  --sui-btn-padding-lg: 0.875rem 1.75rem;
  --sui-btn-font-sm: 0.8125rem;
  --sui-btn-font-md: 0.875rem;
  --sui-btn-font-lg: 1rem;
  --sui-btn-font-weight: 500;
  --sui-btn-transition: all 0.2s ease;

  /* ==========================================
     CARDS
     ========================================== */
  --sui-card-radius: var(--radius-md, 0.5rem);
  --sui-card-padding: 1.25rem;
  --sui-card-shadow: none;
  --sui-card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --sui-card-border-width: 1px;

  /* ==========================================
     INPUTS / FORMULARIOS
     ========================================== */
  --sui-input-radius: var(--radius-md, 0.5rem);
  --sui-input-padding: 0.625rem 0.75rem;
  --sui-input-border-width: 1px;
  --sui-input-font-size: 0.875rem;
  --sui-input-focus-ring-width: 3px;
  --sui-input-focus-ring-opacity: 0.15;

  /* ==========================================
     BADGES
     ========================================== */
  --sui-badge-radius: 9999px;
  --sui-badge-padding: 0.25rem 0.625rem;
  --sui-badge-font-size: 0.75rem;
  --sui-badge-font-weight: 500;

  /* ==========================================
     ALERTS
     ========================================== */
  --sui-alert-radius: var(--radius-md, 0.5rem);
  --sui-alert-padding: 1rem;
  --sui-alert-icon-size: 1.25rem;
  --sui-alert-border-width: 1px;

  /* ==========================================
     MODALES (ui-helpers.js)
     ========================================== */
  --sui-modal-radius: 0.5rem;
  --sui-modal-padding: 1.5rem;
  --sui-modal-width-sm: 400px;
  --sui-modal-width-md: 600px;
  --sui-modal-width-lg: 800px;
  --sui-modal-overlay-bg: rgba(0, 0, 0, 0.5);
  --sui-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --sui-modal-header-border: 1px solid var(--border, #e2e8f0);
  --sui-modal-footer-border: 1px solid var(--border, #e2e8f0);

  /* ==========================================
     TOASTS / NOTIFICACIONES (ui-helpers.js)
     ========================================== */
  --sui-toast-radius: 0.5rem;
  --sui-toast-padding: 0.75rem 1rem;
  --sui-toast-min-width: 250px;
  --sui-toast-max-width: 400px;
  --sui-toast-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --sui-toast-font-size: 0.875rem;
  /* Posicion: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center */
  --sui-toast-position: top-right;
  --sui-toast-offset: 1rem;
  --sui-toast-duration: 3000;

  /* ==========================================
     TABLAS
     ========================================== */
  --sui-table-radius: var(--radius-md, 0.5rem);
  --sui-table-cell-padding: 0.75rem 1rem;
  --sui-table-header-bg: var(--panel-2, #f8fafc);
  --sui-table-header-font-weight: 600;
  --sui-table-header-weight: 600;
  --sui-table-header-border: none;
  --sui-table-row-hover-bg: var(--panel-2, #f8fafc);
  --sui-table-striped-bg: transparent;
  --sui-table-border-color: var(--border, #e2e8f0);

  /* ==========================================
     SPINNERS / LOADING
     ========================================== */
  --sui-spinner-size-sm: 1rem;
  --sui-spinner-size-md: 1.25rem;
  --sui-spinner-size-lg: 2rem;
  --sui-spinner-border-width: 2px;
  --sui-spinner-color: var(--brand, #3b82f6);
  --sui-spinner-track-color: var(--border, #e2e8f0);
  --sui-spinner-speed: 0.8s;

  /* ==========================================
     TABS
     ========================================== */
  --sui-tab-padding: 0.75rem 1.25rem;
  --sui-tab-font-size: 0.875rem;
  --sui-tab-font-weight: 500;
  --sui-tab-border-width: 2px;

  /* ==========================================
     DIVIDERS
     ========================================== */
  --sui-divider-color: var(--border, #e2e8f0);
  --sui-divider-thickness: 1px;
  --sui-divider-margin: 1.5rem;

  /* ==========================================
     TRANSICIONES GLOBALES
     ========================================== */
  --sui-transition-fast: 0.15s ease;
  --sui-transition-normal: 0.2s ease;
  --sui-transition-slow: 0.3s ease;

  /* ==========================================
     SKELETON LOADING (Configurable desde site-config)
     ========================================== */
  --sui-skeleton-base: var(--panel-2, #f1f5f9);
  --sui-skeleton-highlight: var(--panel, #ffffff);
  --sui-skeleton-radius: var(--radius-md, 0.5rem);
  --sui-skeleton-speed: 1.5s;

  /* ==========================================
     PROGRESS BAR (Configurable desde site-config)
     ========================================== */
  --sui-progress-height: 8px;
  --sui-progress-radius: 9999px;
  --sui-progress-bg: var(--panel-2, #f1f5f9);
  --sui-progress-color: var(--brand, #3b82f6);

  /* ==========================================
     AVATARS (Configurable desde site-config)
     ========================================== */
  --sui-avatar-size: 40px;
  --sui-avatar-size-sm: 32px;
  --sui-avatar-size-lg: 56px;
  --sui-avatar-size-xl: 80px;
  --sui-avatar-radius: 50%;
  --sui-avatar-bg: var(--panel-2, #f1f5f9);
  --sui-avatar-color: var(--muted, #64748b);
  --sui-avatar-border: 2px solid var(--panel, white);

  /* ==========================================
     EMPTY STATES (Configurable desde site-config)
     ========================================== */
  --sui-empty-icon-size: 80px;
  --sui-empty-icon-bg: var(--panel-2, #f1f5f9);
  --sui-empty-icon-color: var(--muted, #64748b);
  --sui-empty-padding: 3rem 1.5rem;

  /* ==========================================
     STAT CARDS (Configurable desde site-config)
     ========================================== */
  --sui-stat-icon-size: 48px;
  --sui-stat-icon-radius: 12px;

  /* ==========================================
     TOOLTIPS (Configurable desde site-config)
     ========================================== */
  --sui-tooltip-bg: var(--text, #0f172a);
  --sui-tooltip-color: var(--panel, white);
  --sui-tooltip-radius: 4px;
  --sui-tooltip-padding: 0.375rem 0.625rem;
  --sui-tooltip-font-size: 0.75rem;

  /* ==========================================
     ANIMATIONS (Configurable desde site-config)
     ========================================== */
  --sui-animation-speed: 0.3s;
  --sui-animation-easing: ease;
}

/* ============================================
   BOTONES
   ============================================ */

.sui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--sui-btn-padding-md);
  font-size: var(--sui-btn-font-md);
  font-weight: var(--sui-btn-font-weight);
  line-height: 1;
  border: none;
  border-radius: var(--sui-btn-radius);
  cursor: pointer;
  transition: var(--sui-btn-transition);
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
}

.sui-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variantes de botones - Usan colores de site-config */
.sui-btn-primary {
  background: var(--brand, #3b82f6);
  color: white;
}

.sui-btn-primary:hover:not(:disabled) {
  background: var(--brand-light, #60a5fa);
}

.sui-btn-secondary {
  background: var(--panel-2, #f1f5f9);
  color: var(--text, #0f172a);
}

.sui-btn-secondary:hover:not(:disabled) {
  background: var(--border, #e2e8f0);
}

.sui-btn-danger {
  background: var(--danger, #ef4444);
  color: white;
}

.sui-btn-danger:hover:not(:disabled) {
  filter: brightness(0.9);
}

.sui-btn-success {
  background: var(--success, #10b981);
  color: white;
}

.sui-btn-success:hover:not(:disabled) {
  filter: brightness(0.9);
}

.sui-btn-warning {
  background: var(--warning, #f59e0b);
  color: white;
}

.sui-btn-warning:hover:not(:disabled) {
  filter: brightness(0.9);
}

.sui-btn-info {
  background: var(--info, #0ea5e9);
  color: white;
}

.sui-btn-info:hover:not(:disabled) {
  filter: brightness(0.9);
}

.sui-btn-ghost {
  background: transparent;
  color: var(--text, #0f172a);
  border: 1px solid var(--border, #e2e8f0);
}

.sui-btn-ghost:hover:not(:disabled) {
  background: var(--panel-2, #f8fafc);
}

.sui-btn-link {
  background: transparent;
  color: var(--brand, #3b82f6);
  padding: 0;
  border-radius: 0;
}

.sui-btn-link:hover:not(:disabled) {
  text-decoration: underline;
}

/* Tamanos de botones */
.sui-btn-sm {
  padding: var(--sui-btn-padding-sm);
  font-size: var(--sui-btn-font-sm);
}

.sui-btn-lg {
  padding: var(--sui-btn-padding-lg);
  font-size: var(--sui-btn-font-lg);
}

.sui-btn-block {
  width: 100%;
  display: flex;
}

/* Botones con iconos */
.sui-btn-icon {
  padding: 0.5rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
}

.sui-btn-icon.sui-btn-sm {
  padding: 0.375rem;
  min-width: 1.875rem;
  min-height: 1.875rem;
}

.sui-btn-icon.sui-btn-lg {
  padding: 0.625rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
}

/* ============================================
   INPUTS Y FORMULARIOS
   ============================================ */

.sui-input,
.sui-textarea,
.sui-select {
  width: 100%;
  padding: var(--sui-input-padding);
  font-size: var(--sui-input-font-size);
  line-height: 1.5;
  color: var(--text, #0f172a);
  background: var(--panel, white);
  border: var(--sui-input-border-width) solid var(--border, #e2e8f0);
  border-radius: var(--sui-input-radius);
  transition: var(--sui-transition-normal);
  font-family: inherit;
}

.sui-input:focus,
.sui-textarea:focus,
.sui-select:focus {
  outline: none;
  border-color: var(--brand, #3b82f6);
  box-shadow: 0 0 0 var(--sui-input-focus-ring-width) color-mix(in srgb, var(--brand, #3b82f6) calc(var(--sui-input-focus-ring-opacity) * 100%), transparent);
}

.sui-input:disabled,
.sui-textarea:disabled,
.sui-select:disabled {
  background: var(--panel-2, #f8fafc);
  cursor: not-allowed;
  opacity: 0.7;
}

.sui-textarea {
  resize: vertical;
  min-height: 100px;
}

.sui-input-error {
  border-color: var(--danger, #ef4444);
}

.sui-input-error:focus {
  border-color: var(--danger, #ef4444);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #ef4444) 15%, transparent);
}

.sui-input-success {
  border-color: var(--success, #10b981);
}

/* Form groups */
.sui-form-group {
  margin-bottom: 1rem;
}

.sui-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text, #0f172a);
}

.sui-label-required::after {
  content: ' *';
  color: var(--danger, #ef4444);
}

.sui-help-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted, #64748b);
}

.sui-error-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--danger, #ef4444);
}

/* Checkbox y Radio */
.sui-checkbox,
.sui-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text, #0f172a);
}

.sui-checkbox input[type="checkbox"],
.sui-radio input[type="radio"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--brand, #3b82f6);
}

/* Input con icono */
.sui-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.sui-input-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--muted, #64748b);
  pointer-events: none;
}

.sui-input-group .sui-input {
  padding-left: 2.5rem;
}

/* ============================================
   CARDS
   ============================================ */

.sui-card {
  background: var(--panel, white);
  border: var(--sui-card-border-width) solid var(--border, #e2e8f0);
  border-radius: var(--sui-card-radius);
  padding: var(--sui-card-padding);
  box-shadow: var(--sui-card-shadow);
  transition: var(--sui-transition-normal);
}

.sui-card-hover:hover {
  border-color: var(--brand, #3b82f6);
  box-shadow: var(--sui-card-shadow-hover);
  transform: translateY(-2px);
}

.sui-card-elevated {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.sui-card-header {
  margin: calc(var(--sui-card-padding) * -1);
  margin-bottom: 1rem;
  padding: var(--sui-card-padding);
  border-bottom: 1px solid var(--border, #e2e8f0);
  border-radius: var(--sui-card-radius) var(--sui-card-radius) 0 0;
  background: var(--panel-2, #f8fafc);
}

.sui-card-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.sui-card-description {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--muted, #64748b);
}

.sui-card-body {
  color: var(--text, #0f172a);
}

.sui-card-footer {
  margin: 1rem calc(var(--sui-card-padding) * -1) calc(var(--sui-card-padding) * -1);
  padding: var(--sui-card-padding);
  border-top: 1px solid var(--border, #e2e8f0);
  border-radius: 0 0 var(--sui-card-radius) var(--sui-card-radius);
  background: var(--panel-2, #f8fafc);
}

/* ============================================
   BADGES
   ============================================ */

.sui-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sui-badge-padding);
  font-size: var(--sui-badge-font-size);
  font-weight: var(--sui-badge-font-weight);
  line-height: 1;
  border-radius: var(--sui-badge-radius);
}

.sui-badge-primary {
  background: color-mix(in srgb, var(--brand, #3b82f6) 15%, transparent);
  color: var(--brand, #3b82f6);
}

.sui-badge-success {
  background: color-mix(in srgb, var(--success, #10b981) 15%, transparent);
  color: var(--success, #10b981);
}

.sui-badge-warning {
  background: color-mix(in srgb, var(--warning, #f59e0b) 15%, transparent);
  color: var(--warning, #f59e0b);
}

.sui-badge-danger {
  background: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent);
  color: var(--danger, #ef4444);
}

.sui-badge-info {
  background: color-mix(in srgb, var(--info, #0ea5e9) 15%, transparent);
  color: var(--info, #0ea5e9);
}

.sui-badge-gray {
  background: var(--panel-2, #f1f5f9);
  color: var(--muted, #64748b);
}

/* Badge solido */
.sui-badge-solid.sui-badge-primary {
  background: var(--brand, #3b82f6);
  color: white;
}

.sui-badge-solid.sui-badge-success {
  background: var(--success, #10b981);
  color: white;
}

.sui-badge-solid.sui-badge-danger {
  background: var(--danger, #ef4444);
  color: white;
}

/* ============================================
   ALERTS
   ============================================ */

.sui-alert {
  padding: var(--sui-alert-padding);
  border-radius: var(--sui-alert-radius);
  border: var(--sui-alert-border-width) solid;
  display: flex;
  gap: 0.75rem;
}

.sui-alert-icon {
  flex-shrink: 0;
  font-size: var(--sui-alert-icon-size);
}

.sui-alert-content {
  flex: 1;
}

.sui-alert-title {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: 0.875rem;
}

.sui-alert-description {
  margin: 0;
  font-size: 0.875rem;
}

.sui-alert-success {
  background: color-mix(in srgb, var(--success, #10b981) 8%, var(--panel, white));
  border-color: var(--success, #10b981);
  color: var(--text, #0f172a);
}

.sui-alert-success .sui-alert-icon,
.sui-alert-success .sui-alert-title {
  color: var(--success, #10b981);
}

.sui-alert-warning {
  background: color-mix(in srgb, var(--warning, #f59e0b) 8%, var(--panel, white));
  border-color: var(--warning, #f59e0b);
  color: var(--text, #0f172a);
}

.sui-alert-warning .sui-alert-icon,
.sui-alert-warning .sui-alert-title {
  color: var(--warning, #f59e0b);
}

.sui-alert-danger {
  background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--panel, white));
  border-color: var(--danger, #ef4444);
  color: var(--text, #0f172a);
}

.sui-alert-danger .sui-alert-icon,
.sui-alert-danger .sui-alert-title {
  color: var(--danger, #ef4444);
}

.sui-alert-info {
  background: color-mix(in srgb, var(--info, #0ea5e9) 8%, var(--panel, white));
  border-color: var(--info, #0ea5e9);
  color: var(--text, #0f172a);
}

.sui-alert-info .sui-alert-icon,
.sui-alert-info .sui-alert-title {
  color: var(--info, #0ea5e9);
}

/* ============================================
   LOADING / SPINNER
   ============================================ */

.sui-spinner {
  display: inline-block;
  width: var(--sui-spinner-size-md);
  height: var(--sui-spinner-size-md);
  border: var(--sui-spinner-border-width) solid var(--sui-spinner-track-color);
  border-top-color: var(--sui-spinner-color);
  border-radius: 50%;
  animation: sui-spin var(--sui-spinner-speed) linear infinite;
}

.sui-spinner-lg {
  width: var(--sui-spinner-size-lg);
  height: var(--sui-spinner-size-lg);
  border-width: 3px;
}

.sui-spinner-sm {
  width: var(--sui-spinner-size-sm);
  height: var(--sui-spinner-size-sm);
  border-width: 2px;
}

@keyframes sui-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Loading overlay */
.sui-loading-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--panel, white) 80%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* ============================================
   DIVIDER
   ============================================ */

.sui-divider {
  height: var(--sui-divider-thickness);
  background: var(--sui-divider-color);
  border: none;
  margin: var(--sui-divider-margin) 0;
}

.sui-divider-vertical {
  width: var(--sui-divider-thickness);
  height: auto;
  margin: 0 1rem;
}

/* ============================================
   TABLES
   ============================================ */

.sui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.sui-table th,
.sui-table td {
  padding: var(--sui-table-cell-padding);
  text-align: left;
  border-bottom: 1px solid var(--sui-table-border-color);
}

.sui-table th {
  background: var(--sui-table-header-bg);
  font-weight: var(--sui-table-header-weight, var(--sui-table-header-font-weight));
  color: var(--text, #0f172a);
  border-bottom: var(--sui-table-header-border, 1px solid var(--sui-table-border-color));
}

.sui-table tbody tr:hover {
  background: var(--sui-table-row-hover-bg);
}

.sui-table-striped tbody tr:nth-child(even) {
  background: var(--sui-table-striped-bg, var(--sui-table-row-hover-bg));
}

/* ============================================
   TABS
   ============================================ */

.sui-tabs {
  display: flex;
  border-bottom: 1px solid var(--border, #e2e8f0);
  gap: 0;
}

.sui-tab {
  padding: var(--sui-tab-padding);
  background: none;
  border: none;
  border-bottom: var(--sui-tab-border-width) solid transparent;
  color: var(--muted, #64748b);
  font-size: var(--sui-tab-font-size);
  font-weight: var(--sui-tab-font-weight);
  cursor: pointer;
  transition: var(--sui-transition-normal);
}

.sui-tab:hover {
  color: var(--text, #0f172a);
}

.sui-tab.active {
  color: var(--brand, #3b82f6);
  border-bottom-color: var(--brand, #3b82f6);
}

/* ============================================
   UTILITIES
   ============================================ */

.sui-text-center { text-align: center; }
.sui-text-right { text-align: right; }
.sui-text-left { text-align: left; }

.sui-text-muted { color: var(--muted, #64748b); }
.sui-text-error { color: var(--danger, #ef4444); }
.sui-text-success { color: var(--success, #10b981); }
.sui-text-warning { color: var(--warning, #f59e0b); }
.sui-text-info { color: var(--info, #0ea5e9); }
.sui-text-brand { color: var(--brand, #3b82f6); }

.sui-bg-muted { background: var(--panel-2, #f8fafc); }

.sui-flex { display: flex; }
.sui-flex-col { flex-direction: column; }
.sui-flex-wrap { flex-wrap: wrap; }
.sui-items-center { align-items: center; }
.sui-items-start { align-items: flex-start; }
.sui-items-end { align-items: flex-end; }
.sui-justify-center { justify-content: center; }
.sui-justify-between { justify-content: space-between; }
.sui-justify-end { justify-content: flex-end; }

.sui-gap-1 { gap: 0.25rem; }
.sui-gap-2 { gap: 0.5rem; }
.sui-gap-3 { gap: 0.75rem; }
.sui-gap-4 { gap: 1rem; }
.sui-gap-6 { gap: 1.5rem; }

.sui-m-0 { margin: 0; }
.sui-mt-2 { margin-top: 0.5rem; }
.sui-mt-4 { margin-top: 1rem; }
.sui-mb-2 { margin-bottom: 0.5rem; }
.sui-mb-4 { margin-bottom: 1rem; }
.sui-ml-auto { margin-left: auto; }
.sui-mr-auto { margin-right: auto; }

.sui-p-0 { padding: 0; }
.sui-p-2 { padding: 0.5rem; }
.sui-p-4 { padding: 1rem; }
.sui-p-6 { padding: 1.5rem; }

.sui-w-full { width: 100%; }
.sui-h-full { height: 100%; }

.sui-rounded { border-radius: var(--sui-card-radius); }
.sui-rounded-full { border-radius: 9999px; }

.sui-shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.sui-shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.sui-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

.sui-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================
   GRID SYSTEM
   ============================================ */

.sui-grid {
  display: grid;
  gap: 1rem;
}

.sui-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sui-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sui-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.sui-grid-cols-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .sui-grid-cols-2,
  .sui-grid-cols-3,
  .sui-grid-cols-4 {
    grid-template-columns: 1fr;
  }

  .sui-btn:not(.sui-btn-sm):not(.sui-btn-icon) {
    width: 100%;
    justify-content: center;
  }

  .sui-card {
    padding: 1rem;
  }

  .sui-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .sui-hide-desktop {
    display: none !important;
  }
}

/* ============================================
   SKELETON LOADING
   Placeholders animados mientras carga contenido
   ============================================ */

.sui-skeleton {
  background: linear-gradient(
    90deg,
    var(--sui-skeleton-base) 25%,
    var(--sui-skeleton-highlight) 50%,
    var(--sui-skeleton-base) 75%
  );
  background-size: 200% 100%;
  animation: sui-skeleton-shimmer var(--sui-skeleton-speed) ease-in-out infinite;
  border-radius: var(--sui-skeleton-radius);
}

.sui-skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

.sui-skeleton-text:last-child {
  width: 60%;
}

.sui-skeleton-title {
  height: 1.5rem;
  width: 40%;
  margin-bottom: 0.75rem;
  border-radius: 4px;
}

.sui-skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sui-skeleton-avatar-sm {
  width: 32px;
  height: 32px;
}

.sui-skeleton-avatar-lg {
  width: 64px;
  height: 64px;
}

.sui-skeleton-card {
  height: 120px;
  border-radius: var(--sui-card-radius);
}

.sui-skeleton-image {
  height: 160px;
  border-radius: var(--sui-card-radius);
}

.sui-skeleton-btn {
  height: 38px;
  width: 100px;
  border-radius: var(--sui-btn-radius);
}

@keyframes sui-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================
   PROGRESS BAR
   Barras de progreso con variantes de color
   ============================================ */

.sui-progress {
  width: 100%;
  height: var(--sui-progress-height);
  background: var(--sui-progress-bg);
  border-radius: var(--sui-progress-radius);
  overflow: hidden;
  position: relative;
}

.sui-progress-bar {
  height: 100%;
  background: var(--sui-progress-color);
  border-radius: var(--sui-progress-radius);
  transition: width 0.4s var(--sui-animation-easing);
}

.sui-progress-bar-success {
  background: var(--success, #10b981);
}

.sui-progress-bar-warning {
  background: var(--warning, #f59e0b);
}

.sui-progress-bar-danger {
  background: var(--danger, #ef4444);
}

.sui-progress-bar-animated {
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: sui-progress-stripes 1s linear infinite;
}

@keyframes sui-progress-stripes {
  from { background-position: 1rem 0; }
  to { background-position: 0 0; }
}

/* Progress con label */
.sui-progress-wrap {
  position: relative;
}

.sui-progress-label {
  position: absolute;
  right: 0;
  top: -1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.sui-progress-sm {
  height: 4px;
}

.sui-progress-lg {
  height: 12px;
}

/* ============================================
   AVATARS
   Componente de avatar con tamaños y estados
   ============================================ */

.sui-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sui-avatar-size);
  height: var(--sui-avatar-size);
  border-radius: var(--sui-avatar-radius);
  background: var(--sui-avatar-bg);
  color: var(--sui-avatar-color);
  font-weight: 600;
  font-size: 0.875rem;
  overflow: hidden;
  flex-shrink: 0;
}

.sui-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sui-avatar-sm {
  width: var(--sui-avatar-size-sm);
  height: var(--sui-avatar-size-sm);
  font-size: 0.75rem;
}

.sui-avatar-lg {
  width: var(--sui-avatar-size-lg);
  height: var(--sui-avatar-size-lg);
  font-size: 1.125rem;
}

.sui-avatar-xl {
  width: var(--sui-avatar-size-xl);
  height: var(--sui-avatar-size-xl);
  font-size: 1.5rem;
}

.sui-avatar-square {
  border-radius: var(--sui-card-radius);
}

/* Avatar con estado online/offline */
.sui-avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: var(--sui-avatar-border);
}

.sui-avatar-status-online {
  background: var(--success, #10b981);
}

.sui-avatar-status-offline {
  background: var(--muted, #64748b);
}

.sui-avatar-status-busy {
  background: var(--danger, #ef4444);
}

/* Grupo de avatares */
.sui-avatar-group {
  display: flex;
}

.sui-avatar-group .sui-avatar {
  border: var(--sui-avatar-border);
  margin-left: -0.75rem;
}

.sui-avatar-group .sui-avatar:first-child {
  margin-left: 0;
}

/* ============================================
   EMPTY STATE
   Estados vacíos con ilustración y acción
   ============================================ */

.sui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sui-empty-padding);
  text-align: center;
}

.sui-empty-icon {
  width: var(--sui-empty-icon-size);
  height: var(--sui-empty-icon-size);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sui-empty-icon-bg);
  border-radius: 50%;
  font-size: 2rem;
  color: var(--sui-empty-icon-color);
}

.sui-empty-icon-lg {
  width: 120px;
  height: 120px;
  font-size: 3rem;
}

.sui-empty-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.sui-empty-description {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  color: var(--muted, #64748b);
  max-width: 300px;
}

.sui-empty-action {
  margin-top: 0.5rem;
}

/* ============================================
   ANIMATIONS
   Animaciones de entrada y utilidades
   ============================================ */

/* Fade In */
.sui-fade-in {
  animation: sui-fade-in var(--sui-animation-speed) var(--sui-animation-easing) forwards;
}

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

/* Fade In Up */
.sui-fade-in-up {
  animation: sui-fade-in-up var(--sui-animation-speed) var(--sui-animation-easing) forwards;
}

@keyframes sui-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Down */
.sui-fade-in-down {
  animation: sui-fade-in-down var(--sui-animation-speed) var(--sui-animation-easing) forwards;
}

@keyframes sui-fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale In */
.sui-scale-in {
  animation: sui-scale-in calc(var(--sui-animation-speed) * 0.66) var(--sui-animation-easing) forwards;
}

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

/* Slide In Left */
.sui-slide-in-left {
  animation: sui-slide-in-left var(--sui-animation-speed) var(--sui-animation-easing) forwards;
}

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

/* Slide In Right */
.sui-slide-in-right {
  animation: sui-slide-in-right var(--sui-animation-speed) var(--sui-animation-easing) forwards;
}

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

/* Pulse (para llamar atención) */
.sui-pulse {
  animation: sui-pulse 2s ease-in-out infinite;
}

@keyframes sui-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Bounce (notificaciones) */
.sui-bounce {
  animation: sui-bounce 0.5s ease;
}

@keyframes sui-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Animation delays para listas */
.sui-delay-1 { animation-delay: 0.1s; }
.sui-delay-2 { animation-delay: 0.2s; }
.sui-delay-3 { animation-delay: 0.3s; }
.sui-delay-4 { animation-delay: 0.4s; }
.sui-delay-5 { animation-delay: 0.5s; }

/* Stagger children (para listas) */
.sui-stagger-children > * {
  opacity: 0;
  animation: sui-fade-in-up var(--sui-animation-speed) var(--sui-animation-easing) forwards;
}

.sui-stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.sui-stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.sui-stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.sui-stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.sui-stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.sui-stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.sui-stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.sui-stagger-children > *:nth-child(8) { animation-delay: 0.4s; }
.sui-stagger-children > *:nth-child(n+9) { animation-delay: 0.45s; }

/* ============================================
   TOOLTIPS
   Tooltips simples con CSS puro
   ============================================ */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: var(--sui-tooltip-padding);
  background: var(--sui-tooltip-bg);
  color: var(--sui-tooltip-color);
  font-size: var(--sui-tooltip-font-size);
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--sui-tooltip-radius);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sui-transition-fast), visibility var(--sui-transition-fast);
  pointer-events: none;
  z-index: 100;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Tooltip positions */
[data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) translateY(4px);
}

[data-tooltip-pos="left"]::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: 100%;
  transform: translateY(-50%) translateX(-4px);
}

[data-tooltip-pos="right"]::after {
  bottom: auto;
  top: 50%;
  left: 100%;
  transform: translateY(-50%) translateX(4px);
}

/* ============================================
   STAT CARDS
   Tarjetas de estadísticas con icono
   ============================================ */

.sui-stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: var(--sui-card-padding);
  background: var(--panel, white);
  border: var(--sui-card-border-width) solid var(--border, #e2e8f0);
  border-radius: var(--sui-card-radius);
  transition: var(--sui-transition-normal);
}

.sui-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sui-card-shadow-hover);
}

.sui-stat-icon {
  width: var(--sui-stat-icon-size);
  height: var(--sui-stat-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sui-stat-icon-radius);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.sui-stat-icon-primary {
  background: color-mix(in srgb, var(--brand, #3b82f6) 15%, transparent);
  color: var(--brand, #3b82f6);
}

.sui-stat-icon-success {
  background: color-mix(in srgb, var(--success, #10b981) 15%, transparent);
  color: var(--success, #10b981);
}

.sui-stat-icon-warning {
  background: color-mix(in srgb, var(--warning, #f59e0b) 15%, transparent);
  color: var(--warning, #f59e0b);
}

.sui-stat-icon-danger {
  background: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent);
  color: var(--danger, #ef4444);
}

.sui-stat-icon-info {
  background: color-mix(in srgb, var(--info, #0ea5e9) 15%, transparent);
  color: var(--info, #0ea5e9);
}

.sui-stat-content {
  flex: 1;
  min-width: 0;
}

.sui-stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 0.25rem;
}

.sui-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text, #0f172a);
  line-height: 1.2;
}

.sui-stat-change {
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

.sui-stat-change-up {
  color: var(--success, #10b981);
}

.sui-stat-change-down {
  color: var(--danger, #ef4444);
}

/* ============================================
   DARK MODE SUPPORT
   Si site-config aplica tema oscuro, se adapta
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sui-card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  }
}