/* Unified system components for the whole ecosystem */

html, body {
  background:
    radial-gradient(1100px 620px at -8% -8%, rgba(56, 189, 248, 0.14), transparent 56%),
    radial-gradient(900px 540px at 108% -10%, rgba(37, 99, 235, 0.14), transparent 54%),
    linear-gradient(165deg, var(--th-bg-2), var(--th-bg-1) 46%, var(--th-bg-0)) !important;
  color: var(--th-text) !important;
  font-family: var(--th-font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.topbar-title,
.section-title,
.page-header h2,
.navbar-brand,
.sidebar-brand h1 {
  font-family: var(--th-font-head) !important;
}

/* Shell and container polish */
.page-content,
.page,
.panel {
  max-width: 1280px;
}

/* Unified bars */
.navbar,
.topbar {
  background: rgba(11, 22, 40, 0.88) !important;
  border-bottom: 1px solid var(--th-border-strong) !important;
  backdrop-filter: blur(12px);
}

/* Unified cards */
.card,
.section-card,
.contexto-card,
.stat-card,
.plan-card,
.rubrica-card,
.seccion-panel,
.modal-box,
.login-card,
.auth-card,
.insight-card,
.insights {
  border: 1px solid var(--th-border-soft) !important;
  border-radius: var(--th-radius-lg) !important;
  background: linear-gradient(165deg, rgba(24, 43, 72, 0.76), rgba(12, 23, 42, 0.9)) !important;
  box-shadow: var(--th-shadow-md) !important;
  color: var(--th-text) !important;
}

.card::before,
.section-card::before,
.contexto-card::before,
.modal-box::before {
  background: linear-gradient(90deg, transparent, var(--th-accent), var(--th-accent-2), transparent) !important;
  opacity: 0.65;
}

/* Unified buttons */
.btn {
  font-family: var(--th-font-head) !important;
  font-weight: 700 !important;
  border-radius: var(--th-radius-sm) !important;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.btn-primary,
.btn-generar,
.btn-auth {
  background: linear-gradient(135deg, var(--th-accent), #1d4ed8) !important;
  color: #fff !important;
  border-color: rgba(144, 196, 255, 0.28) !important;
}

.btn-primary:hover:not(:disabled),
.btn-generar:hover:not(:disabled),
.btn-auth:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.32) !important;
}

.btn-secondary,
.btn-outline {
  background: rgba(20, 36, 62, 0.86) !important;
  color: var(--th-text) !important;
  border-color: var(--th-border-soft) !important;
}

.btn-secondary:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
  color: #cae7ff !important;
  border-color: var(--th-accent-2) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--th-text-muted) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
}

.btn-ghost:hover:not(:disabled) {
  color: var(--th-text) !important;
  border-color: var(--th-border-strong) !important;
}

.btn-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #fecaca !important;
  border-color: rgba(239, 68, 68, 0.34) !important;
}

/* Unified forms */
.form-control,
.search-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  background: rgba(8, 17, 32, 0.75) !important;
  color: var(--th-text) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: var(--th-radius-sm) !important;
  font-family: var(--th-font-body) !important;
}

.form-control:focus,
.search-input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(56, 189, 248, 0.56) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}

.form-group label,
label {
  color: var(--th-text-muted) !important;
  font-family: var(--th-font-body) !important;
  letter-spacing: 0.08em;
}

/* Unified pills / badges */
.badge,
.tag,
.token-pill,
.module-state,
.soon-badge {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}

.badge-cyan,
.badge-green,
.tag-campo,
.token-pill {
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: rgba(56, 189, 248, 0.34) !important;
  color: #bfe4ff !important;
}

.badge-orange,
.tag-tipo,
.soon-badge {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.32) !important;
  color: #ffd18a !important;
}

.badge-red {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.32) !important;
  color: #fcb0b0 !important;
}

.badge-muted {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  color: var(--th-text-muted) !important;
}

/* Unified table style */
table thead th {
  background: rgba(20, 36, 62, 0.95) !important;
  color: var(--th-text-muted) !important;
  border-bottom: 1px solid var(--th-border-strong) !important;
}

table tbody td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
}

table tbody tr:hover td {
  background: rgba(56, 189, 248, 0.06) !important;
}

/* Unified tabs */
.tab-btn,
.btn-tab {
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  color: var(--th-text-muted) !important;
}

.tab-btn.active,
.btn-tab-active {
  color: #d8edff !important;
  border-color: rgba(56, 189, 248, 0.48) !important;
  background: rgba(56, 189, 248, 0.15) !important;
}

/* Unified modals and toasts */
.modal-overlay {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(6px);
}

.toast {
  border-radius: 10px !important;
  border: 1px solid var(--th-border-soft) !important;
  box-shadow: var(--th-shadow-sm) !important;
  backdrop-filter: blur(10px);
}

.toast-success {
  background: rgba(37, 99, 235, 0.14) !important;
  color: #bfe4ff !important;
}

.toast-error {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #fecaca !important;
}

.toast-info {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #c8e9ff !important;
}

/* Unified empty/loading */
.empty-state,
.loading,
.ctx-preview {
  border-radius: var(--th-radius-md) !important;
}

.empty-state {
  border: 1px dashed rgba(148, 163, 184, 0.25) !important;
  background: rgba(12, 23, 42, 0.44) !important;
  color: var(--th-text-muted) !important;
}

.spinner {
  border-top-color: var(--th-accent-2) !important;
}

/* Unified icon rhythm (override inline icon sizes) */
i[data-lucide] {
  stroke-width: 1.9;
}

.btn i[data-lucide],
.nav-item i[data-lucide],
.nav-link i[data-lucide],
.section-header h3 i[data-lucide],
.stat-label i[data-lucide],
.topbar-right i[data-lucide] {
  width: 15px !important;
  height: 15px !important;
}

.badge i[data-lucide] {
  width: 11px !important;
  height: 11px !important;
}

.navbar-brand i[data-lucide],
.sidebar-brand i[data-lucide] {
  width: 18px !important;
  height: 18px !important;
}

.logo-icon i[data-lucide],
.splash-icon i[data-lucide] {
  width: 34px !important;
  height: 34px !important;
  color: var(--th-accent-2) !important;
}

.modal-icon i[data-lucide] {
  width: 20px !important;
  height: 20px !important;
}

/* Utility icon sizes for markup cleanup */
.i-13 { width: 13px !important; height: 13px !important; }
.i-14 { width: 14px !important; height: 14px !important; }
.i-16 { width: 16px !important; height: 16px !important; }
.i-20 { width: 20px !important; height: 20px !important; }
.i-38 { width: 38px !important; height: 38px !important; }

/* Utility icon accents */
.ico-cyan { color: var(--th-accent-2) !important; }
.ico-danger { color: var(--th-danger) !important; }