/* ═══════════════════════════════════════════════════════
   FASHION CENTERS · GLOBAL DESIGN SYSTEM
   Arquivo compartilhado — usado por hub e todos os módulos
   Versão standalone (sem Tailwind, puro CSS)
   ═══════════════════════════════════════════════════════ */

/* ── Fontes ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Outfit:wght@400;500;600;700;800&family=Barlow+Condensed:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

/* ── Variáveis (--fc-*) ─────────────────────────────────── */
:root {
  /* Background — Onda T-A.V (2026-05-16): subiu tons pra menos opressivo */
  --fc-bg:       #0c1430;
  --fc-bg-2:     #131c3e;
  --fc-bg-3:     #1a2552;
  --fc-surface:  rgba(14, 24, 54, 0.92);
  --fc-glass:    rgba(255, 255, 255, 0.03);

  /* Borders */
  --fc-border:   rgba(74, 158, 255, 0.12);
  --fc-border-2: rgba(74, 158, 255, 0.28);

  /* Text — calibrados para contraste WCAG 4.5:1 sobre --fc-surface */
  --fc-text:     #eef3ff;
  --fc-sub:      #7d9fd0;   /* era #6b88bb — bumped pra passar 4.5:1 em superfícies */
  --fc-dim:      #4a6190;   /* era #344466 — era escuro demais para placeholder */

  /* Legibilidade dark mode */
  --fc-line-height:      1.6;
  --fc-letter-spacing:   0.012em;

  /* Accent colors */
  --fc-blue:    #4a9eff;
  --fc-cyan:    #00d4ff;
  --fc-green:   #00e5a0;
  --fc-amber:   #ffb320;
  --fc-orange:  #ff7730;
  --fc-pink:    #ff3da6;
  --fc-purple:  #9d6aff;
  --fc-red:     #ff4b55;
  --fc-teal:    #2dd4bf;

  /* Shadows */
  --fc-shadow:  0 8px 32px rgba(0, 0, 0, 0.6);
  --fc-glow:    0 0 40px rgba(74, 158, 255, 0.15);

  /* Motion */
  --fc-ease:           cubic-bezier(0.34, 1.56, 0.64, 1);
  --fc-motion-stage:   0.32s cubic-bezier(0.34, 1.1, 0.64, 1);
  --fc-motion-emphasis:0.45s cubic-bezier(0.22, 1, 0.36, 1);

  /* Radius */
  --fc-radius-sm: 8px;
  --fc-radius:    12px;
  --fc-radius-lg: 16px;
  --fc-radius-xl: 20px;

  /* Alertas — cores semânticas por tipo */
  --fc-alert-color-task:       var(--fc-amber);
  --fc-alert-color-message:    var(--fc-blue);
  --fc-alert-color-urgent:     var(--fc-red);
  --fc-alert-color-automation: var(--fc-orange);

  /* Card padding — escala suavemente com o viewport */
  --fc-card-pad:    clamp(12px, 1.5vw, 20px);
  --fc-card-pad-sm: clamp(8px, 1vw, 14px);

  /* Elevação — camadas de superfície para hierarquia visual dark mode */
  --fc-elev-0: var(--fc-bg);                        /* fundo da página */
  --fc-elev-1: var(--fc-bg-2);                      /* cards de 1º nível */
  --fc-elev-2: var(--fc-bg-3);                      /* cards dentro de cards */
  --fc-elev-3: rgba(20, 35, 72, 0.96);              /* modais / overlays */

  /* ── Aliases de compatibilidade para módulos EJS ── */
  --bg:           var(--fc-bg);
  --bg-deep:      var(--fc-bg);
  --panel:        var(--fc-surface);
  --card:         linear-gradient(155deg, rgba(14,24,54,0.96), rgba(8,15,36,0.94));
  --border:       var(--fc-border-2);
  --border-soft:  var(--fc-border);
  --text:         var(--fc-text);
  --muted:        var(--fc-sub);
  --dim:          var(--fc-dim);
  --blue:         var(--fc-blue);
  --cyan:         var(--fc-cyan);
  --green:        var(--fc-green);
  --amber:        var(--fc-amber);
  --orange:       var(--fc-orange);
  --pink:         var(--fc-pink);
  --purple:       var(--fc-purple);
  --red:          var(--fc-red);
  --teal:         var(--fc-teal);
  --shadow:       var(--fc-shadow);
  --accent:       var(--fc-purple);

  /* Texto sobre cards (default branco em dark). Sobrescrito por tema claro/clean. */
  --fc-on-card: #ffffff;

  /* Gradients usados em React inline (Hub.jsx, FloatingSidebar.jsx).
     Overridados por tema [data-theme=X] mais abaixo. */
  --fc-card-grad: linear-gradient(160deg, rgba(36,52,90,0.85) 0%, rgba(24,36,70,0.85) 55%, rgba(18,28,54,0.88) 100%);
  --fc-sidebar-grad: linear-gradient(180deg, rgba(20,8,52,0.98) 0%, rgba(12,4,34,0.99) 55%, rgba(6,2,20,1) 100%);
  --fc-sidebar-grad-closed: linear-gradient(180deg, rgba(16,6,40,0.97) 0%, rgba(8,3,22,0.99) 100%);
  --fc-modal-grad: linear-gradient(135deg, rgba(20,30,60,0.96) 0%, rgba(10,15,35,0.99) 100%);
  --accent-2:     var(--fc-blue);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Fix B (2026-05-21): font-size ancorado no html — rem blindado contra overrides body em builds */
html { height: 100%; font-size: 13px; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--fc-bg);
  color: var(--fc-text);
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  min-height: 100vh;
  line-height: var(--fc-line-height, 1.6);
  letter-spacing: var(--fc-letter-spacing, 0.012em);
}
/* Fix B guard — força descendentes do tema herdarem font-size de <html> */
body[data-fc-theme] { font-size: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* Placeholder — contraste mínimo WCAG para dark mode */
::placeholder { color: var(--fc-dim); opacity: 1; }

/* ── Background gradient estiloso (Onda T-A.V 2026-05-16) ───────────
   Degrade diagonal + 2 manchas suaves nos cantos superiores.
   Custo zero adicional vs gradient anterior (mesmo nº de paints, 0 animação). */
body {
  background:
    radial-gradient(ellipse at 12% 0%,  rgba(157,106,255,0.14), transparent 45%),
    radial-gradient(ellipse at 88% 0%,  rgba(74,158,255,0.12),  transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(0,212,255,0.05),  transparent 55%),
    linear-gradient(160deg, #131c3e 0%, #0c1430 45%, #0a1028 100%);
  background-attachment: fixed;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fc-border-2); border-radius: 2px; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes fcFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes fcPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
@keyframes fcRotate {
  to { transform: rotate(360deg); }
}
@keyframes fcSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fcSlideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fcFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fcGrid {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}
@keyframes fcOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.08); }
  66%  { transform: translate(-15px, 15px) scale(0.94); }
}
@keyframes fcScan {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100vh); }
}
@keyframes fcShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes fcGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(157,106,255,0.3); }
  50%       { box-shadow: 0 0 28px rgba(157,106,255,0.6); }
}
@keyframes fcSpin {
  to { transform: rotate(360deg); }
}

/* ── Fundo grid ──────────────────────────────────────────── */
.fc-bg-grid {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(74,158,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,158,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: fcGrid 8s linear infinite;
}
.fc-orb {
  position: fixed; border-radius: 50%;
  filter: blur(80px); pointer-events: none; z-index: 0;
  animation: fcOrb 12s ease-in-out infinite;
}
.fc-scan {
  position: fixed; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(157,106,255,0.3), transparent);
  pointer-events: none; z-index: 1;
  animation: fcScan 6s linear infinite;
  animation-delay: -2s;
}

/* ── Card ────────────────────────────────────────────────── */
/*
  min-width: 0       — previne overflow horizontal em contextos flex/grid em
                       qualquer nível de zoom (omitir causa o bug "card
                       empurra o container pai" em zoom >= 110%).
  overflow: hidden   — necessário para ::before gradient e shimmer interno.
  @supports          — backdrop-filter só ativado quando o browser suporta,
                       evitando repintura cara em zoom alto sem fallback.
*/
.fc-card {
  position: relative;
  min-width: 0;
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
@supports (backdrop-filter: blur(1px)) {
  .fc-card { backdrop-filter: blur(20px); }
}
.fc-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none; border-radius: inherit;
}
.fc-card:hover { border-color: rgba(157,106,255,0.22); }

/* Variante compacta — listas densas, painéis operacionais */
.fc-card--compact {
  border-radius: var(--fc-radius);
}
.fc-card--compact::before { display: none; }
@supports (backdrop-filter: blur(1px)) {
  .fc-card--compact { backdrop-filter: blur(12px); }
}

/* Variante flat — sem blur (cards dentro de painéis, zoom extremo seguro) */
.fc-card--flat {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(14, 24, 54, 0.98);
}
.fc-card--flat::before { display: none; }

/* Variante interativa — para cards clicáveis */
.fc-card--interactive {
  cursor: pointer;
  user-select: none;
}
.fc-card--interactive:hover {
  border-color: rgba(157,106,255,0.35);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(157,106,255,0.1);
  transform: translateY(-1px);
}
.fc-card--interactive:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Grid de cards — responsivo, dobra conforme zoom */
.fc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--fc-card-pad);
  align-items: start;
}
.fc-card-grid--tight {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--fc-card-pad-sm);
}

/* ── Glass ───────────────────────────────────────────────── */
.fc-glass {
  min-width: 0;
  background: rgba(10, 18, 40, 0.85);
  border: 1px solid var(--fc-border-2);
  border-radius: var(--fc-radius-xl);
  box-shadow: var(--fc-shadow), var(--fc-glow);
}
@supports (backdrop-filter: blur(1px)) {
  .fc-glass { backdrop-filter: blur(30px); }
}

/* ── Panel (módulos EJS) ─────────────────────────────────── */
.fc-panel {
  min-width: 0;
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
}
@supports (backdrop-filter: blur(1px)) {
  .fc-panel { backdrop-filter: blur(16px); }
}
.fc-panel-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--fc-border);
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fc-sub);
}

/* ── Input ───────────────────────────────────────────────── */
.fc-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--fc-border-2);
  border-radius: var(--fc-radius-sm);
  color: var(--fc-text);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.fc-input:focus {
  border-color: var(--fc-purple);
  background: rgba(157,106,255,0.06);
  box-shadow: 0 0 0 3px rgba(157,106,255,0.12);
}
.fc-input::placeholder { color: var(--fc-dim); }

/* ── Input operacional (autofocus / leitura de código) ──────
   Usado em campos de SKU, código de barras, NF, número.
   JS deve chamar .focus() no mount e após cada submit.
   Padrão obrigatório em toda tela de leitura rápida.       */

@keyframes fcReadyPulse {
  0%   { box-shadow: 0 0 0 0   rgba(0,229,160,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(0,229,160,0); }
  100% { box-shadow: 0 0 0 0   rgba(0,229,160,0); }
}

.fc-input--live {
  border-color: rgba(0,229,160,0.35);
  background: rgba(0,229,160,0.04);
  caret-color: var(--fc-green);
  letter-spacing: 0.06em;
  font-size: 1.05rem;
}
.fc-input--live:focus {
  border-color: var(--fc-green);
  background: rgba(0,229,160,0.08);
  box-shadow: 0 0 0 3px rgba(0,229,160,0.15);
  animation: fcReadyPulse 1.8s ease-in-out infinite;
}
.fc-input--live::placeholder {
  color: rgba(0,229,160,0.30);
  letter-spacing: 0.02em;
  font-size: 0.88rem;
}

/* ── Select ──────────────────────────────────────────────── */
.fc-select {
  width: 100%;
  padding: 0.65rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--fc-border-2);
  border-radius: var(--fc-radius-sm);
  color: var(--fc-text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
}
.fc-select:focus { border-color: var(--fc-purple); }

/* ── Button ──────────────────────────────────────────────── */
.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1.4rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--fc-radius-sm);
  cursor: pointer;
  transition: all 0.2s var(--fc-ease);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.fc-btn-primary {
  background: linear-gradient(135deg, #9d6aff 0%, #c084fc 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(157,106,255,0.30);
}
.fc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(157,106,255,0.50);
}
.fc-btn-primary:active { transform: translateY(-1px); }

.fc-btn-secondary {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--fc-border-2);
  color: var(--fc-text);
}
.fc-btn-secondary:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(157,106,255,0.3);
}

.fc-btn-danger {
  background: rgba(255,75,85,0.12);
  border: 1px solid rgba(255,75,85,0.25);
  color: var(--fc-red);
}
.fc-btn-danger:hover {
  background: rgba(255,75,85,0.22);
  box-shadow: 0 4px 16px rgba(255,75,85,0.20);
}

.fc-btn-sm {
  padding: 0.4rem 0.85rem;
  font-size: 0.75rem;
}

/* ── Badge ───────────────────────────────────────────────── */
.fc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 99px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Outfit', sans-serif;
}
.fc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  animation: fcPulse 2s ease-in-out infinite;
}
.fc-online {
  background: rgba(0,229,160,0.12);
  color: var(--fc-green);
  border: 1px solid rgba(0,229,160,0.25);
}
.fc-tag {
  background: rgba(157,106,255,0.12);
  color: var(--fc-purple);
  border: 1px solid rgba(157,106,255,0.25);
}

/* ── Table ───────────────────────────────────────────────── */
.fc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.fc-table th {
  padding: 8px 12px;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-sub);
  border-bottom: 1px solid var(--fc-border);
  white-space: nowrap;
}
.fc-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(74,158,255,0.05);
  color: var(--fc-text);
  vertical-align: middle;
}
.fc-table tr:hover td { background: rgba(157,106,255,0.04); }
.fc-table tr:last-child td { border-bottom: none; }

/* ── Typography helpers ──────────────────────────────────── */
.fc-display {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fc-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-sub);
}
.fc-mono {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}
.fc-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── Gradient text ───────────────────────────────────────── */
.fc-glow-text {
  background: linear-gradient(135deg, #9d6aff 0%, #c084fc 40%, #4a9eff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fcShimmer 4s linear infinite;
}

/* ── Loader ──────────────────────────────────────────────── */
.fc-spinner {
  width: 32px; height: 32px;
  border: 2px solid rgba(157,106,255,0.2);
  border-top-color: var(--fc-purple);
  border-radius: 50%;
  animation: fcSpin 0.8s linear infinite;
}

/* ── Utility ─────────────────────────────────────────────── */
.fc-text-sub  { color: var(--fc-sub); }
.fc-text-dim  { color: var(--fc-dim); }
.fc-float     { animation: fcFloat  4s ease-in-out infinite; }
.fc-pulse     { animation: fcPulse  2s ease-in-out infinite; }
.fc-slide-up  { animation: fcSlideUp 0.45s ease-out both; }
.fc-slide-in  { animation: fcSlideIn 0.35s ease-out both; }
.fc-fade-in   { animation: fcFadeIn  0.3s ease-out both; }

/* ── Divider ─────────────────────────────────────────────── */
.fc-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fc-border-2), transparent);
  margin: 12px 0;
}

/* ── Módulo wrapper (iframe host) ────────────────────────── */
.fc-module {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ── Shell padrão (módulos EJS) ──────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: 70px 1fr;
  min-height: 100vh;
}

/* ── Sidebar padrão dos módulos ──────────────────────────── */
.sb {
  width: 70px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(20,8,52,0.97) 0%, rgba(8,3,22,0.99) 100%);
  border-right: 1px solid rgba(157,106,255,0.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 50;
}
.sb-logo {
  width: 48px; height: 48px;
  margin: 0 auto 4px;
  border-radius: var(--fc-radius);
  background: linear-gradient(135deg, #9d6aff, #c084fc);
  display: grid;
  place-items: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(192,132,252,0.4), 0 8px 20px rgba(157,106,255,0.35);
  transition: all .15s ease;
}
.sb-logo:hover { transform: translateY(-2px); }
.sb-row {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--fc-dim);
  font-size: 20px;
  transition: all .15s ease;
  border: 1px solid transparent;
  position: relative;
}
.sb-row:hover, .sb-row.active {
  background: rgba(157,106,255,0.12);
  border-color: rgba(157,106,255,0.25);
  color: var(--fc-purple);
}
.sb-row.active {
  box-shadow: 0 0 14px rgba(157,106,255,0.25);
}
.sb-tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(14,24,54,0.96);
  border: 1px solid var(--fc-border-2);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--fc-text);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
}
.sb-row:hover .sb-tip { opacity: 1; }

/* ── Main content area ───────────────────────────────────── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(8,15,36,0.90);
  border-bottom: 1px solid var(--fc-border);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.page {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scroll-behavior: smooth;
}

/* ── Login page ──────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: rgba(10,18,42,0.88);
  border: 1px solid rgba(157,106,255,0.22);
  border-radius: var(--fc-radius-xl);
  padding: 36px 32px;
  backdrop-filter: blur(30px);
  box-shadow: var(--fc-shadow), 0 0 40px rgba(157,106,255,0.10);
}

/* ── Status indicators ───────────────────────────────────── */
.status-ok   { color: var(--fc-green);  }
.status-warn { color: var(--fc-amber);  }
.status-err  { color: var(--fc-red);    }
.status-info { color: var(--fc-purple); }

/* ── Modal ───────────────────────────────────────────────── */
.fc-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 200;
  padding: 20px;
}
.fc-modal {
  background: var(--fc-bg-2, #080f24);
  border: 1px solid rgba(157,106,255,0.22);
  border-radius: var(--fc-radius-xl);
  padding: 28px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--fc-shadow), 0 0 40px rgba(157,106,255,0.12);
}
.fc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fc-border);
}

/* ═══════════════════════════════════════════════════════
   DEFENSIVE LAYOUT — blindagem global
   Garante que nenhum texto, card ou elemento saia da tela
   ou quebre o layout, em qualquer zoom ou resolução.
   ═══════════════════════════════════════════════════════ */

html { overflow-x: hidden; max-width: 100vw; }

/* Todo texto quebrável sem estourar caixa */
*, *::before, *::after { box-sizing: border-box; }
p, span, h1, h2, h3, h4, h5, h6, label, li, td, th, a, button {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* Containers flex e grid nunca estouram */
.flex, [style*="display:flex"], [style*="display: flex"] { min-width: 0; }
.flex > *, [class*="flex-"] { min-width: 0; }

/* Mídia escala com o container */
img, svg, video, iframe, canvas, object {
  max-width: 100%;
  height: auto;
}

/* Cards não excedem a viewport */
.fc-card, .fc-stage-card, .fc-panel, .fc-glass, .fc-modal {
  max-width: 100%;
  overflow: hidden;
}

/* Textos longos em células de tabela não quebram layout */
.fc-table td, .fc-table th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;       /* força a coluna a respeitar o width da tabela */
}
/* Exceção: última coluna de ação não trunca */
.fc-table td:last-child, .fc-table th:last-child {
  white-space: normal;
  overflow: visible;
  max-width: none;
}

/* Wrapper de tabela com scroll horizontal — nunca estoura */
.fc-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--fc-radius-lg);
  border: 1px solid var(--fc-border);
}
.fc-table-wrap .fc-table {
  border: none;
  border-radius: 0;
}

/* Scroll interno de listas/painéis nunca vaza */
.fc-data-list, .fc-stage-card__body--scroll, .fc-rail {
  overflow: hidden;
}
.fc-data-list, .fc-stage-card__body--scroll { overflow-y: auto; }

/* Tela operacional: conteúdo centralizado com largura máxima estável */
.fc-op-frame {
  width: 100%;
  max-width: min(900px, 100%);
  margin: 0 auto;
  padding: 16px;
}

/* ── Ghost button ────────────────────────────────────── */
.fc-btn-ghost {
  background: transparent;
  border: 1px solid var(--fc-border-2);
  color: var(--fc-sub);
}
.fc-btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--fc-text);
}

/* ── Button disabled + loading states ───────────────── */
.fc-btn:disabled,
.fc-btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}
.fc-btn--loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.fc-btn--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fcSpin 0.7s linear infinite;
}

/* ── Focus visible ───────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--fc-purple);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Skeleton loader ─────────────────────────────────── */
@keyframes fcSkeletonWave {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.fc-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: fcSkeletonWave 1.6s ease-in-out infinite;
  border-radius: var(--fc-radius-sm);
}

/* ── Empty state ─────────────────────────────────────── */
.fc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}
.fc-empty-state__icon {
  font-size: 2.5rem;
  opacity: 0.3;
}
.fc-empty-state__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--fc-sub);
}
.fc-empty-state__desc {
  font-size: 0.78rem;
  color: var(--fc-dim);
  max-width: 280px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   FLOW UTILITIES — telas operacionais com etapas
   Solicitado em GUIA_TEMA_GLOBAL_DOCKERS §8 + §9.
   Naming neutro por função de interface (sem domínio).
   ═══════════════════════════════════════════════════════ */

/* ── fc-flow-steps — barra de progresso de etapas ────── */
.fc-flow-steps {
  display: flex;
  align-items: stretch;
  background: rgba(8,15,36,0.90);
  border-bottom: 1px solid var(--fc-border);
  backdrop-filter: blur(12px);
  overflow-x: auto;
  scrollbar-width: none;
}
.fc-flow-steps::-webkit-scrollbar { display: none; }

.fc-flow-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fc-dim);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
}
.fc-flow-step:hover { color: var(--fc-sub); }
.fc-flow-step.is-active {
  color: var(--fc-text);
  border-bottom-color: var(--fc-accent, var(--fc-purple));
}
.fc-flow-step.is-done { color: var(--fc-green); }

.fc-flow-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--fc-border-2);
  font-size: 0.62rem;
  font-weight: 800;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.fc-flow-step.is-active .fc-flow-step-num {
  background: var(--fc-accent, var(--fc-purple));
  border-color: var(--fc-accent, var(--fc-purple));
  color: #fff;
}
.fc-flow-step.is-done .fc-flow-step-num {
  background: rgba(0,229,160,0.18);
  border-color: rgba(0,229,160,0.4);
  color: var(--fc-green);
}

/* ── Keyframes de transição de etapa ─────────────────── */
@keyframes fcStageEnter {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fcStageLeave {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-18px); }
}

/* ── fc-stage-screen — tela de uma etapa ─────────────── */
.fc-stage-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  animation: fcStageEnter var(--fc-motion-stage) both;
}
.fc-stage-screen.is-leaving {
  animation: fcStageLeave var(--fc-motion-stage) both;
  pointer-events: none;
}

/* ── fc-stage-card — card de primeiro nível de etapa ─── */
.fc-stage-card {
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.fc-stage-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--fc-border);
}
.fc-stage-card__title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-sub);
}
.fc-stage-card__body {
  padding: 16px;
}
.fc-stage-card__body--scroll {
  overflow-y: auto;
  max-height: min(420px, calc(100vh - 200px));
}
.fc-stage-card--list .fc-stage-card__body { padding: 0; }

/* ── fc-flow-shell — layout de fluxo multi-etapa ─────── */
.fc-flow-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.fc-flow-shell__content {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* ── fc-rail — trilho lateral colapsável ─────────────── */
.fc-rail {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 6px;
  background: rgba(8,15,36,0.70);
  border-right: 1px solid var(--fc-border);
  overflow: hidden;
  transition: width var(--fc-motion-stage), padding var(--fc-motion-stage);
}
.fc-rail.is-open { width: 260px; padding: 16px; }
.fc-rail--right {
  border-right: none;
  border-left: 1px solid var(--fc-border);
}

.fc-rail__label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-sub);
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.15s;
}
.fc-rail.is-open .fc-rail__label {
  opacity: 1;
  transition-delay: 0.12s;
}

/* ── fc-action-stack — pilha de ações/botões ─────────── */
.fc-action-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.fc-action-stack .fc-btn { width: 100%; justify-content: flex-start; }

/* ── fc-data-list — lista de eventos/timeline ────────── */
.fc-data-list {
  display: flex;
  flex-direction: column;
  max-height: min(320px, calc(100vh - 300px));
  overflow-y: auto;
}
.fc-data-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--fc-border);
  transition: background 0.15s;
}
.fc-data-list__item:last-child { border-bottom: none; }
.fc-data-list__item:hover { background: rgba(157,106,255,0.04); }
.fc-data-list__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fc-purple);
  margin-top: 4px;
  flex-shrink: 0;
}
.fc-data-list__body { flex: 1; min-width: 0; }
.fc-data-list__text {
  font-size: 0.82rem;
  color: var(--fc-text);
  overflow-wrap: anywhere;
}
.fc-data-list__meta {
  font-size: 0.68rem;
  color: var(--fc-dim);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════
   OPERATIONAL COMPONENTS — fc-op-*
   Para telas de chão de fábrica com ritmo de operação.
   Compactos, alto contraste, estáveis em zoom 90-110%.
   Pedidos em BRIEF_DESIGN_INTERNO_E_HUB_ENTRADA_TECIDOS.md
   ═══════════════════════════════════════════════════════ */

/* ── Tokens de motion operacional ───────────────────── */
:root {
  --fc-ease-op:             cubic-bezier(0.22, 1, 0.36, 1);
  --fc-motion-op-fast:      0.15s cubic-bezier(0.22, 1, 0.36, 1);
  --fc-motion-op-stage:     0.28s cubic-bezier(0.34, 1.1, 0.64, 1);
  --fc-motion-op-emphasis:  0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── fc-op-stepbar — barra de etapas compacta (38-42px) ─
   Estados: .is-done .is-active .is-upcoming               */
.fc-op-stepbar {
  display: flex;
  align-items: stretch;
  height: 40px;
  background: rgba(8,15,36,0.96);
  border-bottom: 1px solid var(--fc-border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.fc-op-stepbar::-webkit-scrollbar { display: none; }

.fc-op-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fc-dim);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--fc-motion-op-fast), border-color var(--fc-motion-op-fast);
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
  position: relative;
}
.fc-op-step:hover { color: var(--fc-sub); }
.fc-op-step.is-active {
  color: var(--fc-text);
  border-bottom-color: var(--fc-accent, var(--fc-cyan));
}
.fc-op-step.is-done { color: var(--fc-green); }
.fc-op-step.is-upcoming { opacity: 0.45; cursor: default; }

.fc-op-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--fc-border-2);
  font-size: 0.58rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: background var(--fc-motion-op-fast), border-color var(--fc-motion-op-fast);
}
.fc-op-step.is-active .fc-op-step-num {
  background: var(--fc-accent, var(--fc-cyan));
  border-color: var(--fc-accent, var(--fc-cyan));
  color: #04081a;
}
.fc-op-step.is-done .fc-op-step-num {
  background: rgba(0,229,160,0.2);
  border-color: rgba(0,229,160,0.5);
  color: var(--fc-green);
}

/* Variante com resumo lateral */
.fc-op-stepbar--with-summary {
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 14px;
  gap: 6px;
}
.fc-op-stepbar--with-summary .fc-op-step {
  padding: 0;
  border-bottom: none;
  height: auto;
}
.fc-op-stepbar--with-summary .fc-step-summary {
  display: block;
}

/* ── fc-step-summary — resumo textual da etapa ───────── */
.fc-step-summary {
  display: none;                     /* visível só em --with-summary */
  font-size: 0.68rem;
  color: var(--fc-sub);
  padding: 0 6px 6px;
  border-bottom: 1px solid var(--fc-border);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.fc-step-summary .fc-step-summary__line {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.fc-step-summary .fc-step-summary__line::before {
  content: "✓";
  color: var(--fc-green);
  font-size: 0.6rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.fc-step-summary .fc-step-summary__line--current::before {
  content: "•";
  color: var(--fc-cyan);
}

/* ── fc-op-status-pill — pastilha de status operacional ─
   fc-status-pill é alias para compatibilidade             */
.fc-op-status-pill,
.fc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 99px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.fc-op-status-pill::before,
.fc-status-pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
  flex-shrink: 0;
}

/* Variantes de status */
.fc-status--pending  { color: var(--fc-amber);  background: rgba(255,179,32,0.10); border-color: rgba(255,179,32,0.22); }
.fc-status--ready    { color: var(--fc-green);  background: rgba(0,229,160,0.10);  border-color: rgba(0,229,160,0.22); }
.fc-status--printed  { color: var(--fc-blue);   background: rgba(74,158,255,0.10); border-color: rgba(74,158,255,0.22); }
.fc-status--error    { color: var(--fc-red);    background: rgba(255,75,85,0.10);  border-color: rgba(255,75,85,0.22); }
.fc-status--disabled { color: var(--fc-dim);    background: rgba(255,255,255,0.04); border-color: var(--fc-border); opacity: 0.6; }
.fc-status--info     { color: var(--fc-purple); background: rgba(157,106,255,0.10); border-color: rgba(157,106,255,0.22); }

/* ── fc-op-inline-help / fc-inline-help — dica de atalho */
.fc-op-inline-help,
.fc-inline-help {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', 'Outfit', monospace;
  font-size: 0.62rem;
  color: var(--fc-dim);
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 3px 0;
}
.fc-op-inline-help kbd,
.fc-inline-help kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--fc-sub);
  white-space: nowrap;
}

/* ── fc-op-stage-pulse — animação forte de avanço ───────
   Aplicar no container da etapa que acabou de avançar    */
@keyframes fcStagePulse {
  0%   { box-shadow: 0 0 0 0  rgba(0,229,160,0.6); }
  30%  { box-shadow: 0 0 0 12px rgba(0,229,160,0); }
  100% { box-shadow: 0 0 0 0  rgba(0,229,160,0); }
}
@keyframes fcStageDone {
  0%   { opacity: 1; transform: scale(1); }
  15%  { transform: scale(1.02); }
  40%  { opacity: 0.85; }
  100% { opacity: 1; transform: scale(1); }
}
.fc-op-stage-pulse {
  animation:
    fcStagePulse var(--fc-motion-op-emphasis) ease-out,
    fcStageDone  var(--fc-motion-op-emphasis) ease-out;
}

/* ── Toast stack — fc-op-toast / fc-toast-stack ─────────
   Stack fixo no topo-direito. Toasts aparecem com slide. */
@keyframes fcToastIn {
  from { opacity: 0; transform: translateX(24px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes fcToastOut {
  from { opacity: 1; transform: translateX(0)    scale(1); max-height: 80px; margin-bottom: 8px; }
  to   { opacity: 0; transform: translateX(24px) scale(0.97); max-height: 0; margin-bottom: 0; }
}

.fc-toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.fc-toast-item,
.fc-op-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--fc-radius);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  pointer-events: all;
  overflow: hidden;
  animation: fcToastIn 0.25s var(--fc-ease-op) both;
  max-width: 100%;
  font-size: 0.8rem;
  font-family: 'Outfit', sans-serif;
  border: 1px solid;
}
.fc-toast-item.is-leaving,
.fc-op-toast.is-leaving {
  animation: fcToastOut 0.22s ease-in both;
}

/* Toast base (neutro) */
.fc-toast-item, .fc-op-toast {
  background: rgba(14,24,54,0.96);
  border-color: var(--fc-border-2);
  color: var(--fc-text);
}

/* Variantes */
.fc-toast--success { background: rgba(0,40,28,0.95);  border-color: rgba(0,229,160,0.35); color: #a3ffdb; }
.fc-toast--error   { background: rgba(50,6,12,0.96);  border-color: rgba(255,75,85,0.35); color: #ffb3b8; }
.fc-toast--warning { background: rgba(46,30,0,0.95);  border-color: rgba(255,179,32,0.35); color: #ffe099; }
.fc-toast--info    { background: rgba(20,10,52,0.95); border-color: rgba(157,106,255,0.35); color: #d4b8ff; }

/* Acessibilidade: aria roles (GUIDELINE_OPERACIONAL_HUB §6)
   Aplicar role="alert" em toasts de erro; role="status" em info/sucesso.
   O JS do designer-externo define o role ao criar o elemento. */
[role="alert"].fc-toast-item,
[role="alert"].fc-op-toast {
  border-left: 3px solid rgba(255,75,85,0.7);
}
[role="status"].fc-toast-item,
[role="status"].fc-op-toast {
  border-left: 3px solid rgba(0,229,160,0.5);
}

.fc-toast__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  object-fit: contain;
}
.fc-toast__body { flex: 1; min-width: 0; }
.fc-toast__title {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.fc-toast__msg {
  font-size: 0.72rem;
  opacity: 0.8;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.fc-toast__close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.fc-toast__close:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   ICONES 3D — fc-icon-3d
   Para usar os SVGs da pasta /icons-3d/ como <img> tag.
   Substitui emojis em toda a interface operacional.
   ═══════════════════════════════════════════════════════ */
.fc-icon-3d {
  display: inline-block;
  width: 28px; height: 28px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.45));
  transition:
    transform var(--fc-motion-op-fast),
    filter    var(--fc-motion-op-fast);
}
.fc-icon-3d:hover {
  transform: translateY(-2px) scale(1.1);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55));
}

/* Tamanhos */
.fc-icon-3d--xs { width: 16px; height: 16px; }
.fc-icon-3d--sm { width: 20px; height: 20px; }
.fc-icon-3d--md { width: 28px; height: 28px; }
.fc-icon-3d--lg { width: 40px; height: 40px; }
.fc-icon-3d--xl { width: 56px; height: 56px; }
.fc-icon-3d--2xl{ width: 80px; height: 80px; }

/* Versão estática (sem hover — para uso em listas densas) */
.fc-icon-3d--static { transition: none; }
.fc-icon-3d--static:hover { transform: none; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.45)); }

/* Container para ícone 3D com badge de status */
.fc-icon-3d-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fc-icon-3d-wrap .fc-icon-3d-badge {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--fc-bg);
  background: var(--fc-green);
}

/* ═══════════════════════════════════════════════════════
   LOADING OVERLAY — fc-loading-overlay
   Sobreposição de carregamento full-screen com card central.
   Substitui versões locais (.loading-overlay, .global-loading-overlay)
   em todas as fábricas.

   HTML:
   <div class="fc-loading-overlay" id="loadingOverlay" hidden>
     <div class="fc-loading-card">
       <div class="fc-loading-spinner"></div>
       <strong class="fc-loading-title">Processando…</strong>
       <span class="fc-loading-sub">Aguarde</span>
     </div>
   </div>
   JS: el.hidden = false / el.hidden = true
   ═══════════════════════════════════════════════════════ */
.fc-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 9, 20, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fcFadeIn 0.18s ease-out both;
}
.fc-loading-overlay[hidden] { display: none; }

.fc-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(340px, 100%);
  padding: 28px 24px;
  border-radius: var(--fc-radius-xl);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border-2);
  box-shadow: var(--fc-shadow), 0 0 40px rgba(157,106,255,0.1);
  text-align: center;
  font-family: 'Outfit', sans-serif;
}
.fc-loading-spinner {
  width: 44px; height: 44px;
  border: 3px solid rgba(157,106,255,0.18);
  border-top-color: var(--fc-purple);
  border-radius: 50%;
  animation: fcSpin 0.85s linear infinite;
  flex-shrink: 0;
}
.fc-loading-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fc-text);
  letter-spacing: 0.02em;
}
.fc-loading-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--fc-sub);
  margin-top: -6px;
}

/* Variante compacta (sem card, spinner centralizado) */
.fc-loading-overlay--inline {
  position: absolute;
  border-radius: inherit;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ═══════════════════════════════════════════════════════
   BANNER INLINE — fc-banner
   Notificação inline dentro de formulários e painéis.
   Distinto do fc-op-toast (que é flutuante/stackável).
   Substitui .banner.success/.error/.info das fábricas.

   HTML:
   <div class="fc-banner fc-banner--success">Operação concluída.</div>
   <div class="fc-banner fc-banner--error" role="alert">Erro ao processar.</div>
   ═══════════════════════════════════════════════════════ */
.fc-banner {
  padding: 11px 14px;
  border-radius: var(--fc-radius-sm);
  border: 1px solid var(--fc-border-2);
  background: rgba(255,255,255,0.04);
  color: var(--fc-text);
  font-size: 0.84rem;
  font-family: 'Outfit', sans-serif;
  line-height: 1.5;
  overflow-wrap: anywhere;
  animation: fcFadeIn 0.2s ease-out both;
}
.fc-banner + .fc-banner { margin-top: 8px; }

.fc-banner--success {
  background: rgba(0,229,160,0.08);
  border-color: rgba(0,229,160,0.28);
  color: #9effd8;
}
.fc-banner--error {
  background: rgba(255,75,85,0.08);
  border-color: rgba(255,75,85,0.28);
  color: #ffb3b8;
}
.fc-banner--warn {
  background: rgba(255,179,32,0.08);
  border-color: rgba(255,179,32,0.28);
  color: #ffe099;
}
.fc-banner--info {
  background: rgba(157,106,255,0.08);
  border-color: rgba(157,106,255,0.28);
  color: #d4b8ff;
}

/* ═══════════════════════════════════════════════════════
   PANEL HEADER FLEX — fc-panel-header--flex
   Extensão do fc-panel-header para cabeçalhos com título
   à esquerda e ações (botões) à direita.
   Substitui .panel-header das fábricas.

   HTML:
   <div class="fc-panel-header fc-panel-header--flex">
     <span class="fc-panel-header__title">Itens do lote</span>
     <div class="fc-panel-header__actions">
       <button class="fc-btn fc-btn-sm fc-btn-ghost">Limpar</button>
     </div>
   </div>
   ═══════════════════════════════════════════════════════ */
.fc-panel-header--flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--fc-border);
}
.fc-panel-header__title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-sub);
  white-space: nowrap;
}
.fc-panel-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   CHIP — fc-chip
   Pílula de status/filtro inline. Substitui .status,
   .tech-badge, .step-pill, .company-chip das fábricas.
   Menor que fc-op-status-pill; sem text-transform.

   HTML:
   <span class="fc-chip fc-chip--ok">Concluído</span>
   <span class="fc-chip fc-chip--warn">Parcial</span>
   <span class="fc-chip fc-chip--num">3</span>
   ═══════════════════════════════════════════════════════ */
.fc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--fc-border-2);
  color: var(--fc-sub);
  vertical-align: middle;
}

/* Variantes de cor */
.fc-chip--ok,
.fc-chip--done   { background: rgba(0,229,160,0.12);  border-color: rgba(0,229,160,0.3);  color: #9effd8; }
.fc-chip--warn,
.fc-chip--partial{ background: rgba(255,179,32,0.12); border-color: rgba(255,179,32,0.3); color: #ffe099; }
.fc-chip--error  { background: rgba(255,75,85,0.12);  border-color: rgba(255,75,85,0.3);  color: #ffb3b8; }
.fc-chip--info   { background: rgba(157,106,255,0.12);border-color: rgba(157,106,255,0.3);color: #d4b8ff; }
.fc-chip--active { background: rgba(0,229,160,0.16);  border-color: rgba(0,229,160,0.5);  color: #c5ffe9; }

/* Variante numérica (badge de contagem, sem padding lateral) */
.fc-chip--num {
  min-width: 22px;
  padding: 3px 6px;
  font-size: 0.72rem;
  background: rgba(157,106,255,0.14);
  border-color: rgba(157,106,255,0.3);
  color: #d4b8ff;
}

/* ── ALERTAS VISUAIS ─────────────────────────────────────────
   .fc-alert-pulse-strong — pulso loop (hub aplica enquanto
     contagem pendente > 0; remove quando zera).
   .fc-alert-flash        — flash one-shot 1.2s (hub aplica +
     remove via flashElement() em services/alerts.js).
   .fc-alert-shake        — shake horizontal one-shot 400ms
     (hub aplica em alertas urgent).
   Consumidor pode passar --fc-accent inline para personalizar cor.
   ──────────────────────────────────────────────────────────── */

@keyframes fcAlertPulseRing {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--fc-accent, var(--fc-alert-color-urgent)) 60%, transparent),
                     0 0 0 0   color-mix(in srgb, var(--fc-accent, var(--fc-alert-color-urgent)) 30%, transparent); }
  50%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fc-accent, var(--fc-alert-color-urgent)) 40%, transparent),
                     0 0 0 12px color-mix(in srgb, var(--fc-accent, var(--fc-alert-color-urgent)) 10%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--fc-accent, var(--fc-alert-color-urgent)) 0%, transparent),
                     0 0 0 20px color-mix(in srgb, var(--fc-accent, var(--fc-alert-color-urgent)) 0%, transparent); }
}

@keyframes fcAlertFlash {
  0%   { background-color: color-mix(in srgb, var(--fc-accent, var(--fc-alert-color-message)) 20%, transparent);
         outline: 2px solid color-mix(in srgb, var(--fc-accent, var(--fc-alert-color-message)) 70%, transparent); }
  60%  { background-color: color-mix(in srgb, var(--fc-accent, var(--fc-alert-color-message)) 10%, transparent);
         outline: 2px solid color-mix(in srgb, var(--fc-accent, var(--fc-alert-color-message)) 40%, transparent); }
  100% { background-color: transparent; outline: 2px solid transparent; }
}

@keyframes fcAlertShake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-5px); }
  30%       { transform: translateX(5px); }
  45%       { transform: translateX(-4px); }
  60%       { transform: translateX(4px); }
  75%       { transform: translateX(-2px); }
  90%       { transform: translateX(2px); }
}

.fc-alert-pulse-strong {
  animation: fcAlertPulseRing 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.fc-alert-flash {
  animation: fcAlertFlash 1.2s ease-out forwards;
  outline-offset: 2px;
  border-radius: inherit;
}

.fc-alert-shake {
  animation: fcAlertShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Combinações — pulse + shake para urgent */
.fc-alert-pulse-strong.fc-alert-shake {
  animation: fcAlertPulseRing 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite,
             fcAlertShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Respeitar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .fc-alert-pulse-strong { animation: none; }
  .fc-alert-flash        { animation: none; }
  .fc-alert-shake        { animation: none; }
}

/* Texto sempre branco sobre fundos azuis (tema global) */
.fc-bg-blue,
.fc-btn-blue,
.fc-badge-blue,
.fc-status--info,
[class*="bg-blue"],
[style*="background:#4a9eff"],
[style*="background-color:#4a9eff"],
[style*="background: #4a9eff"],
[style*="background-color: #4a9eff"],
[style*="background:var(--fc-blue)"],
[style*="background-color:var(--fc-blue)"],
[style*="background: var(--fc-blue)"],
[style*="background-color: var(--fc-blue)"] {
  color: #ffffff !important;
}
.fc-bg-blue *,
.fc-btn-blue *,
.fc-badge-blue *,
.fc-status--info *,
[class*="bg-blue"] *,
[style*="background:#4a9eff"] *,
[style*="background-color:#4a9eff"] *,
[style*="background: #4a9eff"] *,
[style*="background-color: #4a9eff"] *,
[style*="background:var(--fc-blue)"] *,
[style*="background-color:var(--fc-blue)"] *,
[style*="background: var(--fc-blue)"] *,
[style*="background-color: var(--fc-blue)"] * {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   PAGE SHELL — estrutura de página completa
   min-height usa 100svh (safe viewport height) em vez de
   100vh — estável quando a barra de endereço mobile
   aparece/some ou o zoom muda a altura visível.
   ═══════════════════════════════════════════════════════ */

body { scrollbar-gutter: stable; }   /* evita layout shift quando scroll aparece */

.fc-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.fc-page-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

/* ═══════════════════════════════════════════════════════
   TOPBAR OPERACIONAL — faixa de cabeçalho compacta
   Versão global do padrão .op-topbar criado localmente
   nas fábricas. Substitui qualquer .topbar/.op-topbar
   local — usar estas classes.
   ═══════════════════════════════════════════════════════ */

.fc-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  min-height: 40px;
  border-radius: 999px;
  background: var(--fc-glass);
  border: 1px solid var(--fc-border);
  flex-wrap: wrap;
  margin-bottom: 8px;
}
@supports (backdrop-filter: blur(1px)) {
  .fc-topbar { backdrop-filter: blur(16px); }
}

.fc-topbar__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fc-accent, var(--fc-text));
  margin-right: auto;
  white-space: nowrap;
}

.fc-topbar__nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.fc-topbar__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* Botões dentro do topbar ficam mais compactos automaticamente */
.fc-topbar .fc-btn {
  padding: 4px 10px;
  font-size: 0.74rem;
  min-height: 28px;
}

@media (max-width: 640px) {
  .fc-topbar { padding: 6px 10px; border-radius: var(--fc-radius-lg); }
  .fc-topbar__title { font-size: 0.84rem; }
}

/* ═══════════════════════════════════════════════════════
   FLEX LAYOUT UTILITIES — linhas, colunas, espaçadores
   Sempre com flex-wrap:wrap para não estourar em zoom alto.
   ═══════════════════════════════════════════════════════ */

.fc-row {
  display: flex;
  align-items: center;
  gap: var(--fc-card-pad-sm);
  min-width: 0;
  flex-wrap: wrap;
}
.fc-row--nowrap  { flex-wrap: nowrap; }
.fc-row--between { justify-content: space-between; }
.fc-row--end     { justify-content: flex-end; }
.fc-row--top     { align-items: flex-start; }

.fc-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--fc-card-pad-sm);
}

/* Empurra os elementos seguintes para o extremo oposto no fc-row */
.fc-spacer { flex: 1 1 auto; min-width: 0; }

/* ═══════════════════════════════════════════════════════
   FORM LAYOUT — grupos de campo e linhas de formulário
   fc-form-row usa flex-wrap:wrap para que campos desçam
   de linha em zoom alto sem quebrar o layout.
   ═══════════════════════════════════════════════════════ */

.fc-form {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 20px);
}

.fc-form-row {
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  align-items: flex-end;
  flex-wrap: wrap;
}

/* Label + input empilhados; distribui espaço igual em fc-form-row */
.fc-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.fc-form-group--fixed { flex: none; }   /* largura natural, não distribui */

/* ═══════════════════════════════════════════════════════
   FRAME OPERACIONAL — variantes de largura máxima
   Combinar com a base .fc-op-frame (900px / centralizado)
   ═══════════════════════════════════════════════════════ */

.fc-op-frame--sm   { max-width: min(600px,  100%); } /* forms, fluxos lineares */
.fc-op-frame--lg   { max-width: min(1200px, 100%); } /* dashboards, tabelas largas */
.fc-op-frame--full { max-width: 100%; }              /* full-bleed, sem centralização */
.fc-op-frame--flush { padding: 0; }                  /* sem padding interno */

/* ═══════════════════════════════════════════════════════
   TABLE — variantes e sticky header
   ═══════════════════════════════════════════════════════ */

/* Tabela com colunas de largura fixa — texto trunca com ellipsis */
.fc-table--fixed { table-layout: fixed; }

/* Linhas compactas — listas densas operacionais */
.fc-table--dense th { padding: 4px 8px; font-size: 0.58rem; }
.fc-table--dense td { padding: 5px 8px; font-size: 0.78rem; }

/* Zebra — facilita leitura em listas longas */
.fc-table--striped tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.025);
}

/* Coluna de ações — nunca trunca, colapsa ao mínimo necessário */
.fc-table td.fc-table-actions,
.fc-table th.fc-table-actions {
  white-space: nowrap;
  text-align: right;
  width: 1%;
  overflow: visible;
  max-width: none;
}

/* Wrapper com header fixo — tabelas longas em telas operacionais */
.fc-table-wrap--sticky {
  max-height: min(60vh, 580px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.fc-table-wrap--sticky .fc-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--fc-bg-2);
  box-shadow: 0 1px 0 var(--fc-border);
}

/* ═══════════════════════════════════════════════════════
   LOGIN LAYOUT — página de login centralizada
   Substitui o padrão ~80 linhas repetido em cada fábrica.
   Usar: <body class="fc-login-layout">
           <div class="fc-card fc-login-card">...
   ═══════════════════════════════════════════════════════ */

.fc-login-layout {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}

.fc-login-card {
  width: 100%;
  max-width: min(420px, 100%);
  padding: clamp(24px, 4vw, 40px);
}

.fc-login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}
.fc-login-logo img {
  width: clamp(32px, 4vw, 48px);
  height: auto;
}
.fc-login-logo span {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-text);
}

/* ═══════════════════════════════════════════════════════
   STAT CARD — card de KPI / métrica
   Substitui .metric-card, .stat-card, .info-card locais
   presentes em todas as 7 fábricas.

   Uso: <div class="fc-card fc-stat-card">
          <span class="fc-stat-card__label">Peças</span>
          <span class="fc-stat-card__value">1 240</span>
        </div>

   Variante destaque (accent-tinted):
        <div class="fc-card fc-stat-card fc-stat-card--primary">

   Consumidor passa --accent inline ou via :root da fábrica.
   ═══════════════════════════════════════════════════════ */

.fc-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  min-height: 92px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s var(--fc-ease), border-color 0.18s ease;
}
.fc-stat-card:hover {
  transform: translateY(-1px);
  border-color: var(--fc-border-2);
}

/* Variante tintada com cor accent da fábrica */
.fc-stat-card--primary {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent, var(--fc-purple)) 18%, var(--fc-surface)),
    var(--fc-surface)
  );
  border-color: color-mix(in srgb, var(--accent, var(--fc-purple)) 30%, var(--fc-border-2));
}
.fc-stat-card--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 100% 0%,
    color-mix(in srgb, var(--accent, var(--fc-purple)) 15%, transparent),
    transparent 60%
  );
  pointer-events: none;
}

/* Partes */
.fc-stat-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fc-sub);
  line-height: 1.2;
}

.fc-stat-card__value {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1;
  color: var(--fc-text);
  letter-spacing: -0.02em;
}

/* Valor texto longo (ex: "Em andamento") */
.fc-stat-card__value--text {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0;
}

/* Sub-texto abaixo do valor (variação, tendência) */
.fc-stat-card__sub {
  font-size: 0.72rem;
  color: var(--fc-dim);
  margin-top: 2px;
}

/* Grid de stat-cards — 4 colunas colapsando conforme zoom */
.fc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--fc-card-pad-sm);
}

/* ═══════════════════════════════════════════════════════
   METRIC INLINE — métrica compacta sem card
   Para valores em cabeçalhos, tooltips, badges de resumo.
   Uso: <span class="fc-metric-inline">
          <span class="fc-metric-inline__value">42</span>
          <span class="fc-metric-inline__label">peças</span>
        </span>
   ═══════════════════════════════════════════════════════ */

.fc-metric-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.fc-metric-inline__value {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 900;
  line-height: 1;
  color: var(--fc-text);
  letter-spacing: -0.02em;
}
.fc-metric-inline__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fc-sub);
}

/* ═══════════════════════════════════════════════════════
   BTN ACCENT — botão primário com cor accent da fábrica
   Substitui o padrão local background:gradient(--accent,
   --accent-strong) presente em todas as fábricas.

   Consumidor define --accent no :root da fábrica.
   Fallback: --fc-purple (cor default do hub).
   ═══════════════════════════════════════════════════════ */

.fc-btn-accent {
  background: linear-gradient(
    135deg,
    var(--accent, var(--fc-purple)),
    color-mix(in srgb, var(--accent, var(--fc-purple)) 75%, white)
  );
  color: #fff;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent, var(--fc-purple)) 30%, transparent);
}
.fc-btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--accent, var(--fc-purple)) 50%, transparent);
}
.fc-btn-accent:active { transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════
   EYEBROW — label acima de título com cor accent
   Substitui .eyebrow local (sala-tecidos, entrada-tecidos
   e outros). Usar antes de h1/h2.
   ═══════════════════════════════════════════════════════ */

.fc-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, var(--fc-sub));
  margin: 0 0 6px;
}

/* ═══════════════════════════════════════════════════════
   INPUT SIZE VARIANTS
   ═══════════════════════════════════════════════════════ */

.fc-input--sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
}
.fc-input--lg {
  padding: 1rem 1.2rem;
  font-size: 1.05rem;
}

/* ═══════════════════════════════════════════════════════
   PRINT — reset global para impressão
   Esconde chrome operacional; exibe só o conteúdo.
   Classes utilitárias: fc-print-hide / fc-print-only
   ═══════════════════════════════════════════════════════ */

.fc-print-only { display: none; }

@media print {
  /* Esconde elementos de navegação e interação */
  .fc-topbar,
  .fc-rail,
  .fc-action-stack,
  .fc-toast-stack,
  .fc-loading-overlay,
  .fc-op-inline-help,
  .fc-op-stepbar,
  .fc-print-hide,
  .fc-btn:not([data-print-show]),
  button:not([data-print-show]),
  nav { display: none !important; }

  /* Exibe elementos marcados como print-only */
  .fc-print-only { display: revert !important; }

  /* Fundo branco, texto preto */
  html, body, .fc-page, .fc-page-body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Cards e painéis perdem blur/sombra */
  .fc-card, .fc-card--flat, .fc-panel, .fc-glass {
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* Tabelas com bordas visíveis */
  .fc-table-wrap { overflow: visible !important; border: none !important; }
  .fc-table td, .fc-table th { color: #000 !important; border-color: #ccc !important; }
  .fc-table thead th { background: #f5f5f5 !important; position: static !important; }

  /* Frame sem centralização */
  .fc-op-frame, .fc-op-frame--sm, .fc-op-frame--lg { max-width: 100% !important; }

  /* Margens de página */
  @page { margin: 15mm 20mm; }
}

/* ═══════════════════════════════════════════════════════
   SCAN INPUT — campo de leitura de código XL
   Para telas de scanner: SKU, código de barras, NF, lote.
   Maior que .fc-input; fonte mono; feedback visual de leitura.

   Uso:
     <div class="fc-scan-input-wrap">
       <span class="fc-scan-input__hint">Leia o código ↵</span>
       <input class="fc-input fc-scan-input fc-input--live"
              id="scanInput" type="text" autocomplete="off"
              inputmode="text" autofocus>
     </div>

   JS: adicionar .is-reading temporariamente ao processar;
       remover .is-reading e chamar input.select() no erro.
   ═══════════════════════════════════════════════════════ */

@keyframes fcScanInputRead {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}

.fc-scan-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.fc-scan-input__hint {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fc-sub);
  align-self: flex-end;
}

.fc-scan-input {
  font-family: 'JetBrains Mono', 'Outfit', monospace;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 18px 22px;
  text-align: center;
  background: color-mix(in srgb, var(--fc-bg) 70%, transparent);
  border: 2px solid color-mix(in srgb, var(--accent, var(--fc-purple)) 25%, var(--fc-border-2));
  border-radius: var(--fc-radius-lg);
  caret-color: var(--accent, var(--fc-purple));
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.fc-scan-input::placeholder {
  color: var(--fc-dim);
  font-weight: 500;
  letter-spacing: 0;
}
.fc-scan-input:focus {
  outline: none;
  border-color: var(--accent, var(--fc-purple));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, var(--fc-purple)) 22%, transparent);
  animation: fcReadyPulse 1.8s ease-in-out infinite;
}
/* Estado: processando leitura */
.fc-scan-input.is-reading {
  border-color: var(--fc-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fc-green) 26%, transparent),
              0 0 28px color-mix(in srgb, var(--fc-green) 30%, transparent);
  animation: fcScanInputRead 0.5s var(--fc-ease);
}
/* Estado: erro na leitura */
.fc-scan-input.is-error {
  border-color: var(--fc-red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fc-red) 22%, transparent);
  animation: fcAlertShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@media (prefers-reduced-motion: reduce) {
  .fc-scan-input:focus   { animation: none; }
  .fc-scan-input.is-reading { animation: none; }
  .fc-scan-input.is-error   { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   AUDIT USABILIDADE 2026-05-06 — melhorias de contraste,
   hierarquia e legibilidade baseadas em WCAG + dark mode.
   Implementadas pelo designer-interno. HTML: externo aplica.
   ═══════════════════════════════════════════════════════ */

/* ── Focus ring reforçado — acessibilidade por teclado ── */
:focus-visible {
  outline: 2px solid var(--fc-blue);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fc-blue) 20%, transparent);
  border-radius: 4px;
}

/* ── Button: nunca truncar texto — wrap natural ─────── */
.fc-btn {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  min-width: 0;
}

/* ── Elevação — hierarquia visual por camadas ────────── */
/*
  Use em wrappers de card/painel para criar profundidade.
  Fundo da página = elev-0 (mais escuro).
  Cards dentro de painel = elev-2.
  Modal/overlay = elev-3.

  Exemplo:
    <section class="fc-card fc-elevation-1">
      <div class="fc-card fc-elevation-2">...</div>
    </section>
*/
.fc-elevation-0 { background: var(--fc-elev-0, var(--fc-bg)); }
.fc-elevation-1 { background: var(--fc-elev-1, var(--fc-bg-2)); }
.fc-elevation-2 { background: var(--fc-elev-2, var(--fc-bg-3)); }
.fc-elevation-3 { background: var(--fc-elev-3, rgba(20, 35, 72, 0.96)); }

/* ── Section header — separa grupos de cards ─────────── */
/*
  Uso: <div class="fc-section-header">Estoque crítico</div>
*/
.fc-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: clamp(0.6rem, 0.25vw + 0.55rem, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fc-sub);
  border-bottom: 1px solid var(--fc-border);
  margin-bottom: var(--fc-card-pad-sm);
}
.fc-section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--fc-border);
}

/* ── Stat card variante crítica ──────────────────────── */
/*
  Para indicadores que exigem atenção imediata (estoque zerado,
  pedidos atrasados etc.).

  Uso: <div class="fc-card fc-stat-card fc-stat-card--critical">
*/
.fc-stat-card--critical {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--fc-red) 14%, var(--fc-surface)),
    var(--fc-surface));
  border-color: color-mix(in srgb, var(--fc-red) 28%, var(--fc-border-2));
}
.fc-stat-card--critical::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%,
    color-mix(in srgb, var(--fc-red) 12%, transparent), transparent 60%);
  pointer-events: none;
}
.fc-stat-card--critical .fc-stat-card__label { color: color-mix(in srgb, var(--fc-red) 70%, var(--fc-sub)); }
.fc-stat-card--critical .fc-stat-card__value { color: var(--fc-red); }

/* ── Stat card variante aviso ─────────────────────────── */
.fc-stat-card--warn {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--fc-amber) 12%, var(--fc-surface)),
    var(--fc-surface));
  border-color: color-mix(in srgb, var(--fc-amber) 25%, var(--fc-border-2));
}
.fc-stat-card--warn .fc-stat-card__label { color: color-mix(in srgb, var(--fc-amber) 70%, var(--fc-sub)); }
.fc-stat-card--warn .fc-stat-card__value { color: var(--fc-amber); }

/* ── Collapsible — reduz carga cognitiva ─────────────── */
/*
  Usa <details>/<summary> nativo — acessível, sem JS.

  Uso:
    <details class="fc-collapsible">
      <summary class="fc-collapsible__trigger">Histórico de pesagens</summary>
      <div class="fc-collapsible__body">...</div>
    </details>
*/
.fc-collapsible {
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  overflow: hidden;
}
.fc-collapsible__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: clamp(0.78rem, 0.3vw + 0.7rem, 0.92rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fc-sub);
  background: var(--fc-elev-1, var(--fc-bg-2));
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.fc-collapsible__trigger::-webkit-details-marker { display: none; }
.fc-collapsible__trigger::after {
  content: '▸';
  font-size: 0.7em;
  transition: transform 0.2s var(--fc-ease);
}
details[open] .fc-collapsible__trigger { color: var(--fc-text); }
details[open] .fc-collapsible__trigger::after { transform: rotate(90deg); }
.fc-collapsible__body {
  padding: var(--fc-card-pad);
  background: var(--fc-elev-0, var(--fc-bg));
}

/* ── Op step header horizontal — fluxo de etapas compacto ── */
/*
  Variante horizontal do fc-op-stepbar para telas largas.
  Uso: <nav class="fc-op-stepbar fc-op-stepbar--horizontal">
*/
.fc-op-stepbar--horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fc-op-stepbar--horizontal::-webkit-scrollbar { display: none; }
.fc-op-stepbar--horizontal .fc-op-step {
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  text-align: center;
  position: relative;
}
.fc-op-stepbar--horizontal .fc-op-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 60%;
  background: var(--fc-border);
}
.fc-op-stepbar--horizontal .fc-op-step-num {
  margin: 0 auto 4px;
}

/* ── Tooltip contextual — orienta operadores ─────────── */
/*
  Aparece no hover/focus do elemento pai. Sem JS.

  Uso:
    <span class="fc-tooltip-wrap">
      Agrupamento por tecido
      <span class="fc-tooltip">Agrupa os rolos do mesmo tipo para contagem unificada</span>
    </span>
*/
.fc-tooltip-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; cursor: help; }
.fc-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  background: var(--fc-elev-3, rgba(20,35,72,0.96));
  border: 1px solid var(--fc-border-2);
  border-radius: var(--fc-radius-sm);
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--fc-text);
  white-space: nowrap;
  max-width: 260px;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
  box-shadow: var(--fc-shadow);
}
.fc-tooltip-wrap:hover .fc-tooltip,
.fc-tooltip-wrap:focus-within .fc-tooltip { opacity: 1; }

/* ── API status banner — destaca integrações desligadas ── */
/*
  Uso:
    <div class="fc-api-status fc-api-status--off">
      <span>API Tiny desativada</span>
      <button class="fc-btn fc-btn-accent fc-btn-sm">Ativar</button>
    </div>
*/
.fc-api-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--fc-radius);
  border: 1px solid var(--fc-border);
  font-size: clamp(0.78rem, 0.3vw + 0.7rem, 0.9rem);
  font-weight: 600;
}
.fc-api-status--on  {
  background: color-mix(in srgb, var(--fc-green) 8%, transparent);
  border-color: color-mix(in srgb, var(--fc-green) 25%, var(--fc-border));
  color: var(--fc-green);
}
.fc-api-status--off {
  background: color-mix(in srgb, var(--fc-red) 8%, transparent);
  border-color: color-mix(in srgb, var(--fc-red) 25%, var(--fc-border));
  color: color-mix(in srgb, var(--fc-red) 80%, var(--fc-text));
}
.fc-api-status--warn {
  background: color-mix(in srgb, var(--fc-amber) 8%, transparent);
  border-color: color-mix(in srgb, var(--fc-amber) 25%, var(--fc-border));
  color: var(--fc-amber);
}

/* ──────────────────────────────────────────────────────────────────────────
   T-A.J · Utilities adicionadas em 2026-05-13 (aprovação explícita do usuário)
   Migração de classes duplicadas em 4+ fábricas:
   .fc-lead, .fc-employee-list/-item, .fc-tech-list/-card/-badge
   ────────────────────────────────────────────────────────────────────────── */

/* Texto descritivo abaixo de h1/h2 */
.fc-lead {
  color: var(--fc-sub);
  max-width: 80ch;
  line-height: var(--fc-line-height, 1.6);
}

/* Lista de operadores (login) — grade compacta de 2 colunas */
.fc-employee-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 220px;
  overflow: auto;
}
.fc-employee-item {
  padding: 10px 12px;
  border-radius: var(--fc-radius);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--fc-border);
}
.fc-employee-item strong,
.fc-employee-item small {
  display: block;
}
.fc-employee-item small {
  margin-top: 4px;
  color: var(--fc-sub);
}

/* Tech list/card/badge — bloco decorativo de "stack tecnológica" no login */
.fc-tech-list {
  margin: 0;
  padding-left: 18px;
  color: var(--fc-text);
  line-height: 1.8;
}
.fc-tech-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
  padding: 20px;
  border-radius: var(--fc-radius-xl);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--fc-cyan) 10%, transparent),
    color-mix(in srgb, var(--fc-amber) 8%, transparent));
  border: 1px solid var(--fc-border-2);
}
.fc-tech-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--fc-green) 16%, transparent);
  color: color-mix(in srgb, var(--fc-green) 80%, var(--fc-text));
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMAS ALTERNATIVOS — aplicados via [data-theme="X"] no <html>
   Default (sem atributo) = "dark" (atual neon blue/purple).
   2026-05-15 — Onda T-T (multi-tema do hub).
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── TEMA CLARO ─────────────────────────────────────────────────────────── */
html[data-theme="claro"] {
  --fc-bg:        #dde3ec;
  --fc-bg-2:      #e8eef6;
  --fc-bg-3:      #d2d9e3;
  --fc-surface:   rgba(232,238,246,0.95);
  --fc-glass:     rgba(15,23,42,0.04);
  --fc-border:    rgba(15,23,42,0.14);
  --fc-border-2:  rgba(15,23,42,0.22);
  --fc-text:      #0b1220;
  --fc-sub:       #334155;
  --fc-dim:       #64748b;
  --fc-shadow:    0 10px 32px rgba(15,23,42,0.16), 0 2px 6px rgba(15,23,42,0.08);
  --fc-glow:      0 0 32px rgba(74,158,255,0.18);
  --fc-elev-0:    var(--fc-bg);
  --fc-elev-1:    var(--fc-bg-2);
  --fc-elev-2:    var(--fc-bg-3);
  --fc-elev-3:    #ffffff;
  /* Aliases legacy */
  --bg: var(--fc-bg); --bg-deep: var(--fc-bg);
  --panel: var(--fc-bg-2); --text: var(--fc-text);
  --muted: var(--fc-sub); --dim: var(--fc-dim);
  --border: var(--fc-border); --border-soft: var(--fc-border);
  --shadow: var(--fc-shadow);
}
html[data-theme="claro"] body,
html[data-theme="claro"] .fc-page-body { background: var(--fc-bg); color: var(--fc-text); }
html[data-theme="claro"] .fc-card {
  background: linear-gradient(160deg, var(--fc-bg-2) 0%, var(--fc-bg-3) 55%, color-mix(in srgb, var(--fc-bg-3) 70%, var(--fc-border-2)) 100%);
  border: 1px solid var(--fc-border-2);
  box-shadow: 0 10px 28px rgba(15,23,42,0.14), 0 2px 6px rgba(15,23,42,0.08);
}
html[data-theme="claro"] .fc-card:hover {
  background: linear-gradient(160deg, var(--fc-bg-2) 0%, color-mix(in srgb, var(--fc-bg-3) 65%, var(--fc-border-2)) 100%);
  box-shadow: 0 16px 40px rgba(15,23,42,0.18), 0 4px 10px rgba(15,23,42,0.10);
  border-color: color-mix(in srgb, var(--fc-border-2) 80%, black);
}
html[data-theme="claro"] .fc-panel,
html[data-theme="claro"] .fc-stat-card,
html[data-theme="claro"] .fc-loading-card {
  background: var(--fc-bg-2);
  border: 1px solid var(--fc-border);
  box-shadow: 0 8px 22px rgba(15,23,42,0.10), 0 2px 4px rgba(15,23,42,0.05);
}
html[data-theme="claro"] .fc-input,
html[data-theme="claro"] .fc-select,
html[data-theme="claro"] .fc-scan-input {
  background: #fff; color: var(--fc-text);
  border: 1px solid var(--fc-border-2);
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.04);
}
html[data-theme="claro"] .fc-input::placeholder,
html[data-theme="claro"] .fc-select::placeholder { color: var(--fc-dim); }
html[data-theme="claro"] .fc-table th { color: var(--fc-sub); background: var(--fc-bg-3); }
html[data-theme="claro"] .fc-table td { color: var(--fc-text); border-color: var(--fc-border); }
html[data-theme="claro"] .fc-table tr:hover td { background: rgba(74,158,255,0.08); }
html[data-theme="claro"] .fc-glass { background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); }
/* Botões: texto sempre escuro/branco coerente */
html[data-theme="claro"] .fc-btn-secondary,
html[data-theme="claro"] .fc-btn-ghost {
  color: var(--fc-text);
  border: 1px solid var(--fc-border-2);
  background: #fff;
}
html[data-theme="claro"] .fc-btn-secondary:hover,
html[data-theme="claro"] .fc-btn-ghost:hover { background: var(--fc-bg-3); }
/* Chips/badges: aumenta contraste de texto sobre fundo claro */
html[data-theme="claro"] .fc-chip,
html[data-theme="claro"] .fc-badge { color: var(--fc-text); }
html[data-theme="claro"] .fc-chip--ok { background: color-mix(in srgb, var(--fc-green) 14%, white); color: color-mix(in srgb, var(--fc-green) 55%, black); }
html[data-theme="claro"] .fc-chip--warn { background: color-mix(in srgb, var(--fc-amber) 18%, white); color: color-mix(in srgb, var(--fc-amber) 55%, black); }
html[data-theme="claro"] .fc-chip--error { background: color-mix(in srgb, var(--fc-red) 14%, white); color: color-mix(in srgb, var(--fc-red) 55%, black); }
html[data-theme="claro"] .fc-chip--info { background: color-mix(in srgb, var(--fc-blue) 14%, white); color: color-mix(in srgb, var(--fc-blue) 55%, black); }
/* Banners: cor de texto escura em fundo claro */
html[data-theme="claro"] .fc-banner { color: var(--fc-text); }
html[data-theme="claro"] .fc-banner--success { background: color-mix(in srgb, var(--fc-green) 14%, white); border-color: color-mix(in srgb, var(--fc-green) 35%, transparent); }
html[data-theme="claro"] .fc-banner--error   { background: color-mix(in srgb, var(--fc-red) 12%, white); border-color: color-mix(in srgb, var(--fc-red) 35%, transparent); }
html[data-theme="claro"] .fc-banner--warn    { background: color-mix(in srgb, var(--fc-amber) 16%, white); border-color: color-mix(in srgb, var(--fc-amber) 38%, transparent); }
html[data-theme="claro"] .fc-banner--info    { background: color-mix(in srgb, var(--fc-blue) 12%, white); border-color: color-mix(in srgb, var(--fc-blue) 35%, transparent); }
/* Topbar/header em claro: fundo branco com borda inferior */
html[data-theme="claro"] .fc-topbar { background: var(--fc-bg-2); border-bottom: 1px solid var(--fc-border); }
/* Texto on-card vira escuro (sobrescreve neon do dark) */
html[data-theme="claro"] {
  --fc-on-card: #0b1220;
}

/* ─── Sidebar / submenus / flyouts em tema CLARO ─────────────────────────── */
html[data-theme="claro"] [class*="sidebar"],
html[data-theme="claro"] [class*="floating-sidebar"],
html[data-theme="claro"] .fc-flyout,
html[data-theme="claro"] [role="menu"],
html[data-theme="claro"] [role="listbox"] {
  background: linear-gradient(180deg, var(--fc-bg-2) 0%, var(--fc-bg-3) 100%) !important;
  border-color: var(--fc-border-2) !important;
  color: var(--fc-text);
}
/* Items do submenu / dropdowns: fundo neutro, hover suave */
html[data-theme="claro"] [class*="sidebar"] button,
html[data-theme="claro"] [role="menu"] button,
html[data-theme="claro"] [role="menuitem"] {
  color: var(--fc-text) !important;
}
html[data-theme="claro"] [class*="sidebar"] button:hover,
html[data-theme="claro"] [role="menu"] button:hover,
html[data-theme="claro"] [role="menuitem"]:hover {
  background: color-mix(in srgb, var(--fc-blue) 8%, transparent) !important;
}
/* Modal/overlay backdrops claros */
html[data-theme="claro"] .fc-loading-overlay,
html[data-theme="claro"] [class*="modal-overlay"],
html[data-theme="claro"] [class*="backdrop"] {
  background: rgba(15,23,42,0.30) !important;
}

/* ─── Sidebar / submenus em tema CLEAN ───────────────────────────────────── */
html[data-theme="clean"] [class*="sidebar"],
html[data-theme="clean"] [class*="floating-sidebar"],
html[data-theme="clean"] .fc-flyout,
html[data-theme="clean"] [role="menu"],
html[data-theme="clean"] [role="listbox"] {
  background: linear-gradient(180deg, var(--fc-bg-2) 0%, var(--fc-bg-3) 100%) !important;
  border-color: var(--fc-border-2) !important;
  color: var(--fc-text);
}
html[data-theme="clean"] [class*="sidebar"] button,
html[data-theme="clean"] [role="menu"] button,
html[data-theme="clean"] [role="menuitem"] {
  color: var(--fc-text) !important;
}
html[data-theme="clean"] [class*="sidebar"] button:hover,
html[data-theme="clean"] [role="menu"] button:hover,
html[data-theme="clean"] [role="menuitem"]:hover {
  background: rgba(23,23,23,0.06) !important;
}
html[data-theme="clean"] .fc-loading-overlay { background: rgba(23,23,23,0.30) !important; }

/* ─── Sidebar / submenus em tema CYBERPUNK ───────────────────────────────── */
html[data-theme="cyberpunk"] [class*="sidebar"],
html[data-theme="cyberpunk"] .fc-flyout,
html[data-theme="cyberpunk"] [role="menu"] {
  background: linear-gradient(180deg, var(--fc-bg-2) 0%, var(--fc-bg-3) 100%) !important;
  border-color: color-mix(in srgb, var(--fc-pink) 35%, transparent) !important;
  color: var(--fc-text);
}
html[data-theme="cyberpunk"] [class*="sidebar"] button:hover,
html[data-theme="cyberpunk"] [role="menu"] button:hover {
  background: color-mix(in srgb, var(--fc-pink) 12%, transparent) !important;
}

/* ─── TEMA CLEAN ─────────────────────────────────────────────────────────── */
/* minimal off-white/grey, sem neon, corporativo */
html[data-theme="clean"] {
  --fc-bg:        #e8e8e6;
  --fc-bg-2:      #f0f0ee;
  --fc-bg-3:      #dcdcd8;
  --fc-surface:   #f0f0ee;
  --fc-glass:     rgba(23,23,23,0.04);
  --fc-border:    rgba(23,23,23,0.10);
  --fc-border-2:  rgba(23,23,23,0.18);
  --fc-text:      #171717;
  --fc-sub:       #525252;
  --fc-dim:       #a3a3a3;
  --fc-blue:   #2563eb;
  --fc-cyan:   #0891b2;
  --fc-green:  #16a34a;
  --fc-amber:  #d97706;
  --fc-orange: #ea580c;
  --fc-pink:   #db2777;
  --fc-purple: #7c3aed;
  --fc-red:    #dc2626;
  --fc-teal:   #0d9488;
  --fc-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --fc-glow:   none;
  --fc-elev-0: var(--fc-bg);
  --fc-elev-1: var(--fc-bg-2);
  --fc-elev-2: var(--fc-bg-3);
  --fc-elev-3: #ffffff;
  --bg: var(--fc-bg); --panel: var(--fc-bg-2); --text: var(--fc-text);
  --muted: var(--fc-sub); --dim: var(--fc-dim);
  --border: var(--fc-border); --shadow: var(--fc-shadow);
}
html[data-theme="clean"] body,
html[data-theme="clean"] .fc-page-body { background: var(--fc-bg); color: var(--fc-text); }
html[data-theme="clean"] .fc-card {
  background: linear-gradient(160deg, var(--fc-bg-2) 0%, var(--fc-bg-3) 100%);
  border: 1px solid var(--fc-border-2);
  box-shadow: 0 6px 18px rgba(23,23,23,0.10), 0 2px 4px rgba(23,23,23,0.06);
  backdrop-filter: none;
}
html[data-theme="clean"] .fc-card:hover {
  background: linear-gradient(160deg, var(--fc-bg-2) 0%, color-mix(in srgb, var(--fc-bg-3) 70%, var(--fc-border-2)) 100%);
  box-shadow: 0 10px 24px rgba(23,23,23,0.14), 0 3px 6px rgba(23,23,23,0.08);
  border-color: color-mix(in srgb, var(--fc-border-2) 85%, black);
}
html[data-theme="clean"] .fc-input, [data-theme="clean"] .fc-select {
  background: #f7f7f5; color: var(--fc-text); border: 1px solid var(--fc-border-2);
}
html[data-theme="clean"] .fc-btn-primary { box-shadow: none; }
html[data-theme="clean"] * { text-shadow: none !important; }

/* ─── TEMA CYBERPUNK ─────────────────────────────────────────────────────── */
/* black puro + magenta/cyan neon máximo contraste */
html[data-theme="cyberpunk"] {
  --fc-bg:        #0c0817;
  --fc-bg-2:      #15101f;
  --fc-bg-3:      #1d1428;
  --fc-surface:   rgba(29,20,40,0.92);
  --fc-glass:     rgba(192,38,211,0.05);
  --fc-border:    rgba(192,38,211,0.20);
  --fc-border-2:  rgba(0,200,200,0.28);
  --fc-text:      #e8e6f0;
  --fc-sub:       #b29ad6;
  --fc-dim:       #8b7aa8;
  --fc-blue:   #5dd6e5;
  --fc-cyan:   #4dd0e1;
  --fc-green:  #6ee07a;
  --fc-amber:  #f0c850;
  --fc-orange: #ff8c4a;
  --fc-pink:   #d65cb0;
  --fc-purple: #a374e0;
  --fc-red:    #e85575;
  --fc-teal:   #5ed4b8;
  --fc-shadow: 0 0 18px rgba(192,38,211,0.22), 0 8px 24px rgba(0,0,0,0.4);
  --fc-glow:   0 0 18px rgba(192,38,211,0.35);
}
html[data-theme="cyberpunk"] body,
html[data-theme="cyberpunk"] .fc-page-body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(192,38,211,0.08), transparent 65%),
    radial-gradient(ellipse at 80% 100%, rgba(77,208,225,0.06), transparent 65%),
    var(--fc-bg);
  color: var(--fc-text);
}
html[data-theme="cyberpunk"] .fc-card {
  background: var(--fc-bg-2);
  border: 1px solid color-mix(in srgb, var(--fc-pink) 50%, transparent);
  box-shadow: inset 0 0 16px rgba(192,38,211,0.05), 0 4px 14px rgba(0,0,0,0.45);
}
html[data-theme="cyberpunk"] .fc-display,
html[data-theme="cyberpunk"] h1, [data-theme="cyberpunk"] h2 {
  text-shadow: 0 0 6px rgba(192,38,211,0.30);
}
html[data-theme="cyberpunk"] .fc-btn-primary {
  background: linear-gradient(135deg, var(--fc-pink), var(--fc-purple));
  box-shadow: 0 2px 10px rgba(192,38,211,0.35);
}

/* Smooth transition entre temas */
html { transition: background-color 0.35s var(--fc-ease-op, ease); }
body, .fc-page-body, .fc-card, .fc-btn, .fc-input, .fc-table { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

/* Reforço visual: força bg de body quando tema não-dark (vence inline styles do React). */
html[data-theme="claro"] body,
html[data-theme="claro"] #root,
html[data-theme="claro"] .fc-page-body { background: var(--fc-bg) !important; color: var(--fc-text) !important; }
html[data-theme="clean"] body,
html[data-theme="clean"] #root,
html[data-theme="clean"] .fc-page-body { background: var(--fc-bg) !important; color: var(--fc-text) !important; }
html[data-theme="cyberpunk"] body,
html[data-theme="cyberpunk"] #root,
html[data-theme="cyberpunk"] .fc-page-body { background: var(--fc-bg) !important; color: var(--fc-text) !important; }

/* ─── Gradients por tema (vencem inline styles do React) ───────────────── */
html[data-theme="claro"] {
  --fc-card-grad: linear-gradient(160deg, #ffffff 0%, #f8fafc 55%, #eef2f9 100%);
  --fc-sidebar-grad: linear-gradient(180deg, #ffffff 0%, #f1f5f9 55%, #e2e8f0 100%);
  --fc-sidebar-grad-closed: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --fc-modal-grad: linear-gradient(135deg, #ffffff 0%, #f5f7fb 100%);
}
html[data-theme="clean"] {
  --fc-card-grad: linear-gradient(160deg, #ffffff 0%, #fafaf9 55%, #f4f4f3 100%);
  --fc-sidebar-grad: linear-gradient(180deg, #fafaf9 0%, #f4f4f3 100%);
  --fc-sidebar-grad-closed: linear-gradient(180deg, #fafaf9 0%, #f4f4f3 100%);
  --fc-modal-grad: linear-gradient(135deg, #ffffff 0%, #fafaf9 100%);
}
html[data-theme="cyberpunk"] {
  --fc-card-grad: linear-gradient(160deg, rgba(20,8,31,0.95) 0%, rgba(14,4,22,0.95) 55%, rgba(5,1,10,0.98) 100%);
  --fc-sidebar-grad: linear-gradient(180deg, rgba(20,8,31,0.98) 0%, rgba(10,4,18,0.99) 55%, rgba(5,1,10,1) 100%);
  --fc-sidebar-grad-closed: linear-gradient(180deg, rgba(14,4,22,0.97) 0%, rgba(5,1,10,0.99) 100%);
  --fc-modal-grad: linear-gradient(135deg, rgba(20,8,31,0.96) 0%, rgba(10,4,18,0.99) 100%);
}

/* Texto sobre cards muda por tema (escuro pra tema claro/clean) */
html[data-theme="claro"] { --fc-on-card: #0f172a; }
html[data-theme="clean"] { --fc-on-card: #171717; }
html[data-theme="cyberpunk"] { --fc-on-card: #f0f0ff; }

/* ─── Reforço de legibilidade tema claro/clean (Onda T-T fix-1) ─────────
 * Algumas letras em fundo claro ficam baixas (sub/dim derivam pálido).
 * Aumenta contraste e garante override em inline color: 'var(--fc-sub)' etc. */
html[data-theme="claro"] {
  --fc-sub:  #334155; /* slate-700 */
  --fc-dim:  #64748b; /* slate-500 */
  --fc-text: #0f172a; /* slate-900 */
}
html[data-theme="claro"] .fc-label,
html[data-theme="claro"] .fc-eyebrow,
html[data-theme="claro"] .fc-title,
html[data-theme="claro"] .fc-display {
  color: var(--fc-text);
  text-shadow: none;
}
html[data-theme="claro"] .fc-sub,
html[data-theme="claro"] .fc-text-sub { color: var(--fc-sub); }
html[data-theme="claro"] .fc-text-dim { color: var(--fc-dim); }
html[data-theme="claro"] input,
html[data-theme="claro"] textarea,
html[data-theme="claro"] select { color: var(--fc-text); }
html[data-theme="claro"] ::placeholder { color: var(--fc-dim); opacity: 1; }

html[data-theme="clean"] {
  --fc-sub:  #404040;
  --fc-dim:  #737373;
  --fc-text: #171717;
}
html[data-theme="clean"] .fc-label,
html[data-theme="clean"] .fc-eyebrow,
html[data-theme="clean"] .fc-title,
html[data-theme="clean"] .fc-display {
  color: var(--fc-text);
  text-shadow: none;
}
html[data-theme="clean"] .fc-sub,
html[data-theme="clean"] .fc-text-sub { color: var(--fc-sub); }
html[data-theme="clean"] .fc-text-dim { color: var(--fc-dim); }
html[data-theme="clean"] input,
html[data-theme="clean"] textarea,
html[data-theme="clean"] select { color: var(--fc-text); }

/* text-shadow neon dos cards desliga no claro/clean (sombras pretas em fundo claro = manchas) */
html[data-theme="claro"] *,
html[data-theme="clean"] * {
  text-shadow: none !important;
}

/* Cards no claro/clean ganham borda visível em vez de glow */
html[data-theme="claro"] .fc-card,
html[data-theme="clean"] .fc-card {
  border: 1px solid var(--fc-border-2) !important;
  backdrop-filter: none !important;
}

/* Inputs/Tables/Badges com border definido */
html[data-theme="claro"] .fc-input,
html[data-theme="claro"] .fc-select,
html[data-theme="clean"] .fc-input,
html[data-theme="clean"] .fc-select {
  background: #fff;
  border: 1px solid var(--fc-border-2);
  color: var(--fc-text);
}

/* Botão primary no claro/clean: mais sólido (sem glow exagerado) */
html[data-theme="claro"] .fc-btn-primary,
html[data-theme="clean"] .fc-btn-primary {
  background: var(--fc-purple);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES ÓRFÃS — Onda T-A.T (2026-05-16) ──────────────────────────────
   Classes que markup já usa mas sem definição em local nem tema. Padronizar.
   ═════════════════════════════════════════════════════════════════════════ */

/* .panel-h: header de painel — usado em mov/loteamento/impressao */
.panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--fc-border);
  font-size: clamp(0.86rem, 0.2vw + 0.78rem, 1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fc-text);
}

/* .panel-body / .panel-footer / .stage-body / .stage-footer */
.panel-body, .stage-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel-footer, .stage-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--fc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* .kpi-ico-box: caixinha de ícone à esquerda de KPI */
.kpi-ico-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--fc-radius-sm);
  background: color-mix(in srgb, var(--fc-blue) 12%, transparent);
  border: 1px solid var(--fc-border);
  flex-shrink: 0;
}

/* .stage-card / .graphic-card / .hero-panel / .header-card / .login-card:
   alias visual de fc-card local. Aplica fc-card base se não houver fc-card. */
.stage-card:not(.fc-card),
.graphic-card:not(.fc-card),
.hero-panel:not(.fc-card),
.header-card:not(.fc-card),
.login-card:not(.fc-card) {
  background: var(--fc-bg-2);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: var(--fc-card-pad, 14px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* ════════════════════════════════════════════════════════════════════════
   CONTRASTE + SPACING + RESPONSIVE FORÇADO — Onda T-A.Y (2026-05-16) ─────
   ═════════════════════════════════════════════════════════════════════════ */

/* Forçar TODO texto dentro de cards/painéis ter contraste mínimo */
.fc-card,
.fc-panel,
.fc-stat-card,
.fc-card *,
.fc-panel *,
.fc-stat-card * {
  color: var(--fc-text);
}
.fc-card .fc-eyebrow,
.fc-card .fc-label,
.fc-panel .fc-eyebrow,
.fc-panel .fc-label,
.fc-stat-card .fc-eyebrow,
.fc-stat-card__label,
.fc-stat-card__sub,
.fc-card label,
.fc-panel label,
.fc-card small,
.fc-panel small {
  color: color-mix(in srgb, var(--fc-text) 75%, transparent);
}
/* Nunca usar dim escuro em fundo escuro */
.fc-card .fc-dim,
.fc-panel .fc-dim {
  color: color-mix(in srgb, var(--fc-text) 55%, transparent) !important;
}

/* Container max-width universal: nunca passa 100vw */
body,
.fc-page-body,
main,
.fc-page {
  max-width: 100vw;
  overflow-x: hidden;
}
.fc-page {
  max-width: min(1920px, 100%);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Spacing padronizado entre sections */
section + section,
.fc-card + .fc-card,
.fc-panel + .fc-panel {
  margin-top: 0;
}
.fc-page > * + * {
  margin-top: 0; /* gap do flex já cuida */
}

/* Inputs sempre legíveis em fundo escuro */
.fc-input,
.fc-select,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--fc-bg) !important;
  color: var(--fc-text) !important;
  border: 1px solid var(--fc-border-2) !important;
  font-size: clamp(0.86rem, 0.15vw + 0.82rem, 0.98rem);
}
.fc-input:focus,
input:not([type="hidden"]):focus,
select:focus,
textarea:focus {
  border-color: var(--fc-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-blue) 22%, transparent) !important;
  outline: none !important;
}

/* Tabelas sempre legíveis */
.fc-table {
  background: transparent;
  color: var(--fc-text);
}
.fc-table th {
  background: color-mix(in srgb, var(--fc-blue) 12%, var(--fc-bg-3)) !important;
  color: color-mix(in srgb, var(--fc-text) 85%, var(--fc-blue)) !important;
}
.fc-table td {
  color: var(--fc-text) !important;
}

/* Responsive zoom: containers nunca quebram em zoom 110%+ */
@media (min-resolution: 1.1dppx), (max-width: 1280px) {
  .fc-page { padding: 0 12px; }
  .fc-card, .fc-panel { padding: 12px 14px; }
}

/* ════════════════════════════════════════════════════════════════════════
   CARDS NÍTIDOS + SUB-CARDS + BOTÕES REATIVOS — Onda T-A.X (2026-05-16) ──
   ═════════════════════════════════════════════════════════════════════════ */

/* Eleva tons de fundo dos cards pra ficarem mais nítidos contra o body */
:root {
  --fc-card-bg-1: #1a2552;
  --fc-card-bg-2: #243366;
  --fc-subcard-bg: #2d4080;
}

/* Cards principais ficam destacados */
.fc-card,
.fc-panel,
.fc-stat-card {
  background: linear-gradient(160deg, var(--fc-card-bg-1) 0%, var(--fc-card-bg-2) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--fc-blue) 25%, var(--fc-border-2)) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.18) !important;
}

/* Sub-cards (cards dentro de cards) ficam ainda mais visíveis */
.fc-card .fc-card,
.fc-panel .fc-card,
.fc-card .fc-stat-card,
.fc-panel .fc-stat-card,
.fc-card .fc-panel,
.bipar-card .lot-info-row,
.movement-panel .fc-stat-card,
.stage-panel .fc-stat-card {
  background: linear-gradient(160deg, var(--fc-subcard-bg) 0%, color-mix(in srgb, var(--fc-subcard-bg) 80%, var(--fc-blue)) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--fc-blue) 40%, var(--fc-border-2)) !important;
  box-shadow: 0 4px 14px rgba(74,158,255,0.18), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* Botões: mais reativos com hover lift maior + glow */
.fc-btn {
  transition: transform 0.18s var(--fc-ease, ease), box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
}
.fc-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.08);
}
.fc-btn:active {
  transform: translateY(0) scale(0.98) !important;
}
.fc-btn-primary {
  box-shadow: 0 6px 18px rgba(74,158,255,0.40), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
.fc-btn-primary:hover {
  box-shadow: 0 10px 28px rgba(74,158,255,0.60), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.fc-btn-secondary:hover {
  border-color: var(--fc-blue);
  background: color-mix(in srgb, var(--fc-blue) 12%, var(--fc-bg-2));
}
.fc-btn-ghost:hover {
  background: color-mix(in srgb, var(--fc-blue) 10%, transparent);
  border-color: var(--fc-blue);
}

/* Setas / chevron / arrow reativos */
.fc-arrow-advance,
[class*="chevron"],
[class*="arrow"]:not([class*="left"]) {
  transition: transform 0.18s ease, color 0.18s ease;
}
button:hover .fc-arrow-advance,
a:hover .fc-arrow-advance,
button:hover [class*="chevron"],
a:hover [class*="chevron"] {
  transform: translateX(3px);
}

/* Stat-card hover: pulse sutil */
.fc-stat-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.fc-stat-card:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--fc-blue) 50%, var(--fc-border-2)) !important;
  box-shadow: 0 12px 28px rgba(74,158,255,0.22), 0 2px 6px rgba(0,0,0,0.22) !important;
}

/* Cards interativos (com onclick/role=button): cursor + lift */
.fc-card[role="button"],
.fc-card[onclick],
.fc-card.fc-card--interactive {
  cursor: pointer;
}
.fc-card[role="button"]:hover,
.fc-card[onclick]:hover,
.fc-card.fc-card--interactive:hover {
  transform: translateY(-3px);
  border-color: var(--fc-blue) !important;
  box-shadow: 0 14px 32px rgba(74,158,255,0.25), 0 4px 8px rgba(0,0,0,0.25) !important;
}

/* Light theme overrides — preserva paleta clara */
html[data-theme="claro"] .fc-card,
html[data-theme="claro"] .fc-panel,
html[data-theme="claro"] .fc-stat-card {
  background: linear-gradient(160deg, var(--fc-bg-2) 0%, var(--fc-bg-3) 100%) !important;
  border: 1px solid var(--fc-border-2) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,0.12), 0 2px 4px rgba(15,23,42,0.06) !important;
}
html[data-theme="claro"] .fc-card .fc-card,
html[data-theme="claro"] .fc-panel .fc-card,
html[data-theme="claro"] .fc-card .fc-stat-card {
  background: #fff !important;
  border: 1px solid var(--fc-border-2) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,0.10) !important;
}
html[data-theme="clean"] .fc-card,
html[data-theme="clean"] .fc-panel,
html[data-theme="clean"] .fc-stat-card {
  background: linear-gradient(160deg, var(--fc-bg-2) 0%, var(--fc-bg-3) 100%) !important;
  border: 1px solid var(--fc-border-2) !important;
  box-shadow: 0 4px 14px rgba(23,23,23,0.10) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   BEST DESIGN UPGRADE — Onda T-A.W (2026-05-16) ──────────────────────────
   Polimento global: gradient automático em painéis, max-width sensível,
   spacing consistente, hover refinement. Zero animação pesada.
   ═════════════════════════════════════════════════════════════════════════ */

/* Todo fc-panel ganha gradient sutil + sombra refinada se não tiver override */
.fc-panel {
  background: linear-gradient(160deg, var(--fc-bg-2) 0%, var(--fc-bg-3) 100%);
  border: 1px solid var(--fc-border-2);
  border-radius: var(--fc-radius-lg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.20);
  padding: 16px 18px;
}
.fc-panel:hover {
  border-color: color-mix(in srgb, var(--fc-blue) 30%, var(--fc-border-2));
}

/* fc-card refinement (override sutil sem tocar tema antigo) */
.fc-card {
  background: linear-gradient(160deg, var(--fc-bg-2) 0%, var(--fc-bg-3) 100%);
  border: 1px solid var(--fc-border-2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

/* fc-page-body: padding lateral pra não colar nas bordas */
.fc-page-body {
  padding: 12px 18px;
}
@media (max-width: 768px) {
  .fc-page-body { padding: 8px 10px; }
}

/* Topbar premium */
.fc-topbar {
  background: linear-gradient(180deg, var(--fc-bg-2) 0%, var(--fc-bg-3) 100%);
  border: 1px solid var(--fc-border-2);
  border-radius: var(--fc-radius-lg);
  padding: 14px 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  margin-bottom: 16px;
}

/* Botões: refinamento visual sem alterar funções */
.fc-btn {
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: transform 0.14s var(--fc-ease, ease), box-shadow 0.14s ease, border-color 0.14s ease;
}
.fc-btn:hover { transform: translateY(-1px); }
.fc-btn:active { transform: translateY(0); }
.fc-btn-primary {
  box-shadow: 0 4px 12px rgba(74,158,255,0.30);
}
.fc-btn-primary:hover { box-shadow: 0 6px 18px rgba(74,158,255,0.45); }

/* Form groups padronizados */
.fc-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fc-form-group > span,
.fc-form-group > label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fc-sub);
}

/* Inputs com refinamento visual */
.fc-input {
  background: var(--fc-bg);
  border: 1px solid var(--fc-border-2);
  border-radius: var(--fc-radius);
  padding: 12px 14px;
  font-size: 0.95rem;
  color: var(--fc-text);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.fc-input:focus,
.fc-input:focus-visible {
  outline: none;
  border-color: var(--fc-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-blue) 22%, transparent);
}

/* fc-table refinamento */
.fc-table thead th {
  background: var(--fc-bg-3);
  border-bottom: 1px solid var(--fc-border-2);
}
.fc-table tbody tr:hover td {
  background: color-mix(in srgb, var(--fc-blue) 8%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════
   LEGIBILIDADE GLOBAL — Onda T-A.S (2026-05-16) ──────────────────────────
   Aumenta min font-size, contraste sub/dim, padding cards uniforme.
   ═════════════════════════════════════════════════════════════════════════ */
.fc-label,
.fc-eyebrow,
.fc-stat-card__label,
.fc-stat-card__sub {
  font-size: clamp(0.78rem, 0.18vw + 0.74rem, 0.92rem) !important;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.fc-stat-card__value,
.fc-stat-card__value--text {
  font-size: clamp(1.6rem, 0.6vw + 1.4rem, 2.4rem) !important;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.01em;
}
/* Sub/dim mais legíveis em dark — sobe contraste */
:root {
  --fc-sub: #aab4cc;
  --fc-dim: #7c87a0;
}
/* Tema dark default reforça */
html:not([data-theme]) {
  --fc-sub: #aab4cc;
  --fc-dim: #7c87a0;
}

/* Stat-card padronizado (modelo separação) */
.fc-stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  min-height: 110px;
  justify-content: center;
}
.fc-stat-card__label,
.fc-stat-card .fc-eyebrow {
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fc-sub);
  margin-bottom: 2px;
}
.fc-stat-card__value {
  color: var(--fc-text);
}
.fc-stat-card__sub {
  color: var(--fc-dim);
  margin-top: 2px;
}

/* Stat grid auto-fit pra evitar 4 cols apertados em viewport <1600px */
.fc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}

/* Container max-width pra páginas sem layout próprio */
.fc-page {
  max-width: min(1920px, 100%);
  margin: 0 auto;
}

/* Card grid mais responsivo */
.fc-card-grid:not(.fc-stat-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
}

/* Tabelas: min font-size legível */
.fc-table { font-size: clamp(0.82rem, 0.15vw + 0.78rem, 0.94rem); }
.fc-table th { font-size: clamp(0.72rem, 0.12vw + 0.68rem, 0.82rem); }

/* ════════════════════════════════════════════════════════════════════════
   TABLE CELL UTILITIES — Onda T-A.R (2026-05-16) ─────────────────────────
   ════════════════════════════════════════════════════════════════════════ */
.fc-cell-pad   { padding: 10px 12px; }
.fc-cell-right { text-align: right; }
.fc-cell-left  { text-align: left; }
.fc-cell-center{ text-align: center; }
.fc-cell-num   { padding: 10px 12px; text-align: right; font-family: 'JetBrains Mono', monospace; }

/* ════════════════════════════════════════════════════════════════════════
   PERF MODE — prefers-reduced-motion (SO/usuário) + [data-perf="lite"]
   (hub usePerfMode auto-detect hardwareConcurrency<=4 ou opt-in manual).
   Fecha pendência §1088 (tema-pendencias.md). 2026-05-15 — Onda T-A.Q.

   Estratégia: motion-off global + classes decorativas neutralizadas
   (.fc-orb / .fc-bg-grid / .fc-scan / .fc-shimmer) + backdrop-filter
   desligado (custo alto em GPU fraca). Não esconde, só não anima.
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fc-orb, .fc-bg-grid, .fc-scan, .fc-shimmer { animation: none !important; }
}

html[data-perf="lite"] *,
html[data-perf="lite"] *::before,
html[data-perf="lite"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html[data-perf="lite"] .fc-orb     { animation: none !important; opacity: 0 !important; }
html[data-perf="lite"] .fc-bg-grid { animation: none !important; }
html[data-perf="lite"] .fc-scan    { animation: none !important; display: none !important; }
html[data-perf="lite"] .fc-shimmer { animation: none !important; }
/* backdrop-filter custa caro em GPUs fracas — zera em lite */
html[data-perf="lite"] .fc-glass,
html[data-perf="lite"] .fc-panel,
html[data-perf="lite"] .fc-card,
html[data-perf="lite"] .fc-loading-overlay,
html[data-perf="lite"] [class*="sidebar"],
html[data-perf="lite"] [class*="drawer"],
html[data-perf="lite"] [class*="dock"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE FIT — Hub + fábricas embutidas
   Compacta headers, impede overflow horizontal e deixa tabelas/formulários
   rolarem dentro do próprio bloco em celular e paisagem curta.
   ═════════════════════════════════════════════════════════════════════════ */
html {
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}

body.fc-page-body,
body.mobile-body {
  min-height: 100%;
  min-height: 100dvh;
  max-width: 100vw;
  overflow-x: hidden;
}

.fc-page,
.mobile-shell {
  width: 100%;
  max-width: 100%;
}

.fc-table-wrap,
.table-wrap,
.orders-table-wrap,
.history-table-wrap,
.pvg-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fc-table,
table {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

@media (max-width: 900px), (max-height: 560px) and (orientation: landscape) {
  body.fc-page-body,
  body.mobile-body {
    padding: 6px;
  }

  .fc-page,
  .mobile-shell {
    padding: 0 !important;
    gap: 8px !important;
  }

  .fc-topbar,
  .hero-panel,
  .wing-header,
  .content-head,
  .fc-panel-header--flex,
  .drawer-header {
    min-height: 0 !important;
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .fc-topbar__title,
  .module-header__title,
  .wing-header h2,
  .hero-panel h1,
  .fc-panel-header--flex h2 {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  .fc-topbar__actions,
  .fc-topbar__nav,
  .hero-actions,
  .panel-actions,
  .drawer-header-actions,
  .inline-actions {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .fc-btn,
  .fc-btn-sm,
  .fc-chip {
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
  }

  .fc-card,
  .fc-panel,
  .fc-stat-card {
    border-radius: 10px !important;
    padding: 10px !important;
    min-height: 0 !important;
  }

  .fc-card-grid,
  .fc-stat-grid,
  .intake-grid,
  .control-grid,
  .movement-grid,
  .graphic-grid,
  .pesagem-grid-v4,
  .board-stats,
  .marketplace-board {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .fc-form-row,
  .inline-form-grid,
  .quick-menu,
  .quick-menu--wings {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .fc-input,
  .fc-scan-input {
    min-height: 40px !important;
    padding: 9px 10px !important;
    font-size: 1rem !important;
  }

  .fc-scan-input__hint,
  .fc-op-inline-help,
  .fc-inline-help,
  .fc-lead {
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
  }

  .shell {
    display: block !important;
    min-height: 100dvh !important;
  }

  .sb {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 78px !important;
    height: 100dvh !important;
    transform: translateX(-52px);
    transition: transform 180ms ease;
    z-index: 60 !important;
  }

  .sb:hover,
  .sb:focus-within {
    transform: translateX(0);
  }

  .shell > main,
  .main,
  .content {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  body.fc-page-body,
  body.mobile-body {
    padding: 4px;
  }

  .fc-topbar,
  .hero-panel,
  .wing-header,
  .content-head,
  .fc-panel-header--flex {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .fc-card,
  .fc-panel {
    padding: 8px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   FC WORKFLOW CARD STATES · 2026-05-21
   Tokens + classes pro motor fc-workflow.js. Plug-and-play. 4 temas preservados.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  /* idle (não começou) */
  --fc-wf-idle-bg: rgba(255,255,255,0.04);
  --fc-wf-idle-border: rgba(255,255,255,0.08);
  --fc-wf-idle-glow: transparent;
  /* active (em uso, esperando bipa/click) */
  --fc-wf-active-bg: rgba(99, 192, 255, 0.10);
  --fc-wf-active-border: rgba(99, 192, 255, 0.55);
  --fc-wf-active-glow: 0 0 24px rgba(99,192,255,0.25);
  /* done (concluído) */
  --fc-wf-done-bg: rgba(70, 220, 130, 0.10);
  --fc-wf-done-border: rgba(70, 220, 130, 0.55);
  --fc-wf-done-glow: 0 0 22px rgba(70,220,130,0.30);
  /* error (operação falhou) */
  --fc-wf-error-bg: rgba(255, 85, 95, 0.12);
  --fc-wf-error-border: rgba(255, 85, 95, 0.65);
  --fc-wf-error-glow: 0 0 22px rgba(255,85,95,0.30);
  /* blocked (bloqueado por regra) */
  --fc-wf-blocked-bg: rgba(255, 180, 60, 0.10);
  --fc-wf-blocked-border: rgba(255, 180, 60, 0.55);
  --fc-wf-blocked-glow: 0 0 18px rgba(255,180,60,0.22);
  /* locked (não chegou a vez ainda) */
  --fc-wf-locked-bg: rgba(120, 120, 140, 0.06);
  --fc-wf-locked-border: rgba(120, 120, 140, 0.18);
  --fc-wf-locked-glow: transparent;
  --fc-wf-locked-opacity: 0.55;
}

/* Tema claro */
html[data-theme="claro"] {
  --fc-wf-idle-bg: rgba(0,0,0,0.03);
  --fc-wf-idle-border: rgba(0,0,0,0.10);
  --fc-wf-active-bg: rgba(20, 120, 220, 0.08);
  --fc-wf-active-border: rgba(20, 120, 220, 0.45);
  --fc-wf-done-bg: rgba(30, 160, 90, 0.10);
  --fc-wf-done-border: rgba(30, 160, 90, 0.45);
  --fc-wf-error-bg: rgba(210, 50, 60, 0.10);
  --fc-wf-error-border: rgba(210, 50, 60, 0.55);
  --fc-wf-blocked-bg: rgba(210, 140, 30, 0.10);
  --fc-wf-blocked-border: rgba(210, 140, 30, 0.50);
  --fc-wf-locked-bg: rgba(0,0,0,0.02);
  --fc-wf-locked-border: rgba(0,0,0,0.10);
}

/* Tema clean */
html[data-theme="clean"] {
  --fc-wf-active-glow: 0 0 14px rgba(99,192,255,0.18);
  --fc-wf-done-glow: 0 0 14px rgba(70,220,130,0.20);
  --fc-wf-error-glow: 0 0 14px rgba(255,85,95,0.20);
  --fc-wf-blocked-glow: 0 0 12px rgba(255,180,60,0.15);
}

/* Tema cyberpunk */
html[data-theme="cyberpunk"] {
  --fc-wf-active-bg: rgba(0, 240, 255, 0.10);
  --fc-wf-active-border: rgba(0, 240, 255, 0.75);
  --fc-wf-active-glow: 0 0 28px rgba(0,240,255,0.45);
  --fc-wf-done-bg: rgba(57, 255, 160, 0.10);
  --fc-wf-done-border: rgba(57, 255, 160, 0.70);
  --fc-wf-done-glow: 0 0 28px rgba(57,255,160,0.45);
  --fc-wf-error-bg: rgba(255, 50, 130, 0.12);
  --fc-wf-error-border: rgba(255, 50, 130, 0.75);
  --fc-wf-error-glow: 0 0 28px rgba(255,50,130,0.45);
  --fc-wf-blocked-bg: rgba(255, 220, 0, 0.10);
  --fc-wf-blocked-border: rgba(255, 220, 0, 0.65);
  --fc-wf-blocked-glow: 0 0 22px rgba(255,220,0,0.35);
}

@keyframes fc-card-pulse-active {
  0%, 100% { box-shadow: var(--fc-wf-active-glow); }
  50%      { box-shadow: 0 0 32px var(--fc-wf-active-border); }
}
@keyframes fc-card-glow-done {
  0%   { box-shadow: 0 0 0 rgba(70,220,130,0); transform: scale(1); }
  35%  { box-shadow: 0 0 30px rgba(70,220,130,0.55); transform: scale(1.012); }
  100% { box-shadow: var(--fc-wf-done-glow); transform: scale(1); }
}
@keyframes fc-card-shake-error {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-6px); }
  30%      { transform: translateX(6px); }
  45%      { transform: translateX(-4px); }
  60%      { transform: translateX(4px); }
  75%      { transform: translateX(-2px); }
}
@keyframes fc-card-lock-fade {
  from { opacity: 1; }
  to   { opacity: var(--fc-wf-locked-opacity, 0.55); }
}

.fc-wf-card {
  position: relative;
  background: var(--fc-wf-idle-bg);
  border: 1px solid var(--fc-wf-idle-border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 260ms ease, opacity 220ms ease, transform 200ms ease;
  will-change: box-shadow, transform;
}
.fc-wf-card[aria-disabled="true"] { cursor: not-allowed; }

.fc-wf-card--idle    { background: var(--fc-wf-idle-bg);    border-color: var(--fc-wf-idle-border); }
.fc-wf-card--active  { background: var(--fc-wf-active-bg);  border-color: var(--fc-wf-active-border);  box-shadow: var(--fc-wf-active-glow); animation: fc-card-pulse-active 2.2s ease-in-out infinite; }
.fc-wf-card--done    { background: var(--fc-wf-done-bg);    border-color: var(--fc-wf-done-border);    box-shadow: var(--fc-wf-done-glow); animation: fc-card-glow-done 700ms ease-out 1; }
.fc-wf-card--error   { background: var(--fc-wf-error-bg);   border-color: var(--fc-wf-error-border);   box-shadow: var(--fc-wf-error-glow); animation: fc-card-shake-error 480ms ease-in-out 1; }
.fc-wf-card--blocked { background: var(--fc-wf-blocked-bg); border-color: var(--fc-wf-blocked-border); box-shadow: var(--fc-wf-blocked-glow); }
.fc-wf-card--locked  { background: var(--fc-wf-locked-bg);  border-color: var(--fc-wf-locked-border);  opacity: var(--fc-wf-locked-opacity, 0.55); animation: fc-card-lock-fade 300ms ease-out 1 both; pointer-events: none; }

.fc-wf-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.fc-wf-card__title { font-weight: 600; letter-spacing: 0.2px; }
.fc-wf-card__badge {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px;
}
.fc-wf-card__body { font-size: 14px; line-height: 1.45; }
.fc-wf-card__footer { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* perf mode: desliga animações pesadas */
html[data-perf="lite"] .fc-wf-card--active { animation: none; }
html[data-perf="lite"] .fc-wf-card--done   { animation: none; }
html[data-perf="lite"] .fc-wf-card--error  { animation: none; }

/* ── GRID FIXO #50BDF4 + neutraliza wrappers chapados (2026-05-22 grid-fixed) ── */
[style*="background: var(--fc-bg)"] {
  background: transparent !important;
}

html[data-theme="claro"] body {
  background:
    linear-gradient(rgba(80,189,244,0.18) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(80,189,244,0.18) 1px, transparent 1px) 0 0 / 52px 52px,
    #F2F1ED !important;
  background-attachment: fixed, fixed, fixed !important;
}

html:not([data-theme="claro"]) body,
html[data-theme="escuro"] body {
  background:
    linear-gradient(rgba(80,189,244,0.12) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(80,189,244,0.12) 1px, transparent 1px) 0 0 / 52px 52px,
    #150A60 !important;
  background-attachment: fixed, fixed, fixed !important;
}

html #root { background: transparent !important; }