/**
 * IUSLEAD — Componentes reutilizables (skeleton, empty, badges, alerts, módulos)
 */

.skeleton-row {
  height: 36px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.skeleton-card {
  height: 80px;
  border-radius: 8px;
}

.skeleton-chart {
  height: 200px;
  margin-top: 12px;
}

.empty-state--compact {
  padding: 28px 16px;
}

.empty-state--pad-md {
  padding: 24px;
  text-align: center;
}

.empty-state--pad-lg {
  padding: 32px;
}

.empty-state--center {
  text-align: center;
}

.empty-state--compact .empty-state-icon {
  margin-bottom: 10px;
}

.empty-state--compact .empty-state-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sec);
  margin-bottom: 4px;
}

.empty-state--compact .empty-state-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  max-width: 240px;
  line-height: 1.5;
  margin: 0 auto;
}

.badge--sm { font-size: 10px; }
.badge--xs { font-size: 9px; padding: 0 4px; }
.badge--tk { font-size: 9.5px; }
.badge--shrink { flex-shrink: 0; }
.badge--dot-kan {
  width: 5px;
  height: 5px;
  padding: 0;
  border-radius: 50%;
}
.badge--change {
  font-size: 13px;
  padding: 6px 12px;
}

.text-muted-inline { color: var(--text-muted); }

.dash-error-wrap {
  grid-column: 1 / -1;
  padding: 16px;
}

.dash-error-wrap .empty-state { text-align: left; }
.dash-error-wrap .btn { margin-top: 12px; }

.db-alert-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.025);
}

.db-alert-row .badge { font-size: 10px; }

.db-alert-msg {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: var(--text-sec);
}

.db-alert-empty {
  padding: 12px;
  color: var(--text-muted);
  font-size: 12px;
}

.pattern-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.025);
}

.pattern-text {
  font-size: 11px;
  color: var(--text-sec);
}

.an-metric-sub {
  color: var(--text-muted);
  font-weight: 400;
}

.ob-actions .btn {
  font-size: 12px;
  padding: 6px 16px;
}

.app-tooltip {
  position: fixed;
  z-index: 250;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(20, 22, 30, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  max-width: 220px;
}

.app-tooltip.visible { opacity: 1; }

.cv-ctx-actions-row {
  display: flex;
  gap: 4px;
}

.tk-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.tk-detail-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}

.tk-detail-msg {
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.5;
}

.tk-kan-meta {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
}

.tk-kan-empty {
  padding: 10px;
  text-align: center;
  font-size: 10.5px;
  color: var(--text-muted);
}

.map-loading {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}

.status-dot--spaced { margin-right: 4px; }
.status-dot--dim { margin-right: 4px; opacity: 0.5; }

.db-setup-banner {
  border-color: rgba(212, 160, 84, 0.35);
}

.db-setup-body {
  padding: 14px 16px;
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.5;
}

.db-setup-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.db-week-card { margin-top: 14px; }

.db-week-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 8px 4px 12px;
}

.sec-kpi-value--lg { font-size: 22px; }

.kpi-grid--mb { margin-bottom: 16px; }

.card--shimmer { padding: 16px; }

.health-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.025);
}

.health-name {
  font-size: 11px;
  color: var(--text);
}

.health-time {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
}

.tbl-cell-strong { font-weight: 550; }
.tbl-cell-num { font-weight: 600; }

.stg-mini-kpi-value--md { font-size: 14px; }
.stg-mini-kpi-value--ok { font-size: 14px; color: var(--green); }
.stg-mini-kpi-value--warn { font-size: 14px; color: var(--orange); }

.btn--xs {
  padding: 3px 10px;
  font-size: 11px;
}

.btn--sm-block {
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
}

.stg-section { margin-top: 14px; }

.stg-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sec);
  margin-bottom: 8px;
}

.stg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.stg-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
}

.stg-card--pad {
  padding: 12px 14px;
}

.stg-export-icon-lg { font-size: 20px; }

.stg-export-note {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

.stg-export-dl {
  padding: 5px 12px;
  font-size: 11px;
  flex-shrink: 0;
}