/* Padrão de carregamento do sistema.
   O esqueleto espelha a forma do conteúdo real e o emblema central dá o mesmo
   peso visual do módulo de Demandas de Marketing, sem depender das variáveis
   --mk-* (que são escopadas naquele board). */

.fl-shell {position:relative;min-height:320px;overflow:hidden;border-radius:16px}
.fl-shape {display:grid;gap:24px}
.fl-note {margin:16px 0 0;font-size:11px;color:var(--muted);text-align:center}
.fl-module {display:block}
.fl-section {display:block}
.fl-panel {min-height:320px}

/* ── Esqueleto ─────────────────────────────────────────────── */
.fl-sk {position:relative;display:block;overflow:hidden;background:#e7ede7;border-radius:4px;height:8px}
.fl-sk::after {content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffffa6,transparent);transform:translateX(-100%);animation:fl-shimmer 2.2s ease-in-out infinite}
.fl-sk-label {width:44%;height:8px}
.fl-sk-value {width:68%;height:20px;margin-top:8px}
.fl-sk-title {width:76%;height:16px}
.fl-sk-line {width:100%;height:8px}
.fl-sk-line.short {width:60%}
.fl-sk-cell {width:100%;height:12px}
.fl-sk-control {width:160px;height:32px;border-radius:8px}
.fl-sk-avatar {width:32px;height:32px;border-radius:50%;flex:none}
.fl-sk-column {width:60%;height:12px;margin-bottom:8px}
.fl-sk-input {width:100%;height:44px;border-radius:8px}

.fl-stats {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.fl-stats>div {display:grid;padding:16px;border:1px solid var(--line,#e1e8e2);background:var(--card,#fff);border-radius:12px}
/* Insights: tira horizontal de blocos sem card, como o kanban-insights real. */
.fl-insights {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;padding:16px;border:1px solid var(--line,#e1e8e2);border-radius:12px;background:var(--card,#fff)}
.fl-insights>div {display:grid;gap:8px;align-content:start}
.fl-toolbar {display:flex;flex-wrap:wrap;gap:12px}
.fl-table {display:grid;gap:8px;padding:16px;border:1px solid var(--line,#e1e8e2);background:var(--card,#fff);border-radius:12px}
.fl-table-head {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line,#e1e8e2)}
.fl-table-row {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:center;padding:8px 0}
.fl-cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.fl-card {display:grid;gap:12px;padding:16px;border:1px solid #e1e8e2;border-radius:12px;background:var(--card,#fff);box-shadow:0 4px 12px #24332d05}
.fl-columns {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
/* Board com largura fixa e rolagem horizontal, como o kanban real
   (min-width 1440px em 6 colunas): aqui as colunas não reescolhem. */
.fl-columns-fixed {display:grid;grid-template-columns:repeat(6,minmax(232px,1fr));gap:12px;min-width:1440px}
.fl-board-viewport {overflow-x:auto;padding-bottom:8px}
.fl-column {display:grid;align-content:start;gap:16px;padding:16px;background:var(--canvas,#f4f7f4);border:1px solid var(--line,#e1e8e2);border-radius:16px}
.fl-list {display:grid;gap:8px;padding:16px;border:1px solid var(--line,#e1e8e2);background:var(--card,#fff);border-radius:12px}
.fl-list-row {display:flex;align-items:center;gap:12px;padding:8px 0}
.fl-list-row>div {display:grid;gap:8px;flex:1}
.fl-form {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:16px;border:1px solid var(--line,#e1e8e2);background:var(--card,#fff);border-radius:12px}
.fl-field {display:grid;gap:8px}

/* ── Emblema ───────────────────────────────────────────────── */
.fl-emblem {position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:grid;place-items:center;width:88px;height:88px;border:1px solid #fff;border-radius:24px;background:#ffffffed;box-shadow:0 12px 32px #24332d14;backdrop-filter:blur(8px)}
.fl-spinner {appearance:none;display:inline-block;flex:none;width:16px;height:16px;border:2px solid #dce5de;border-top-color:#355e49;border-right-color:#7f9b87;border-radius:50%;background:transparent;animation:fl-spin .9s linear infinite;vertical-align:middle}
.fl-spinner::-webkit-progress-bar {display:none;background:none}
.fl-spinner::-webkit-progress-value {display:none}
.fl-spinner::-moz-progress-bar {background:transparent}
.fl-spinner-large {width:40px;height:40px;border-width:3px}

@keyframes fl-spin {to{transform:rotate(360deg)}}
@keyframes fl-shimmer {to{transform:translateX(100%)}}

@media(max-width:680px) {
  .fl-shell {min-height:260px}
  .fl-toolbar .fl-sk-control {width:120px}
  .fl-table-head, .fl-table-row {grid-template-columns:repeat(3,minmax(0,1fr))}
  .fl-table-head .fl-sk-cell:nth-child(n+4), .fl-table-row .fl-sk-cell:nth-child(n+4) {display:none}
}
@media(prefers-reduced-motion:reduce) {
  .fl-spinner {animation:fl-spin 6s linear infinite!important}
  .fl-sk::after {animation:none;display:none}
}