/**
 * ============================================
 * SestIA UI Components v1.1.0
 * ============================================
 * Libreria de componentes CSS reutilizables
 * Integrada con el sistema de temas de site-config
 *
 * 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
 *
 * VARIABLES PROPIAS (configurables):
 * - --sui-btn-padding-sm, --sui-btn-padding-md, --sui-btn-padding-lg
 * - --sui-btn-font-sm, --sui-btn-font-md, --sui-btn-font-lg
 * - --sui-card-padding, --sui-input-padding
 */

/* ============================================
   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;
}

/* ============================================
   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;
  }
}

/* ============================================
   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);
  }
}