/* ==========================================================================
   pFlow — design "Fluxo"
   --------------------------------------------------------------------------
   Pele por cima de site.css. Só é carregada quando o design efetivo é
   "fluxo" (Views/Shared/_DesignHead.cshtml); o clássico nunca a vê.

   A ideia: a interface tratada como um móvel bem acabado.
   - Painéis com ESPESSURA: cada cartão tem um bordo inferior visível, como a
     aresta de uma placa (--o-shadow-panel, que é também o --shadow-sm).
   - A "orla" como estado: nos cartões de quadro, esse bordo leva a cor do
     estado do tenant (inset 0 -3px 0).
   - Estados em forma de ETIQUETA (a etiqueta das peças, com o furo).
   - KPIs com régua de fita métrica.
   - Separadores numa calha (tabuleiro) com o ativo em painel.
   - Schibsted Grotesk; IBM Plex Mono para referências e cotas.

   Mesmas regras da casa que o Oficina (DESIGN-SYSTEM.md, "Designs"):
   - TODAS as regras começam por html[data-design="fluxo"] (ou o mesmo dentro
     de :where()). Só @font-face fica de fora — DesignSkinScopeTests verifica.
   - Bloco escuro = html[data-design="fluxo"][data-theme="dark"], depois do claro.
   - !important só onde o clássico o usa na mesma propriedade, ou contra style="".
   - Marca do tenant: preenchimento = --pflow-brand (+ --pflow-brand-contrast);
     texto/traço = --o-brand-ink (BrandColorVariants contra as superfícies do Fluxo).
   - Os nomes --o-* são o contrato partilhado com o Oficina e com pflow-design.js.
   ========================================================================== */

/* ─── Fontes (OFL: wwwroot/fonts/schibsted-grotesk/LICENSE.txt, wwwroot/fonts/ibm-plex/LICENSE.txt) ── */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/schibsted-grotesk/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/schibsted-grotesk/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/schibsted-grotesk/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/schibsted-grotesk/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 100 400; font-display: swap; src: url("../fonts/ibm-plex/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 100 400; font-display: swap; src: url("../fonts/ibm-plex/IBMPlexMono-Regular-Latin2.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500 900; font-display: swap; src: url("../fonts/ibm-plex/IBMPlexMono-Medium-Latin1.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500 900; font-display: swap; src: url("../fonts/ibm-plex/IBMPlexMono-Medium-Latin2.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02; }

/* ─── Tokens — claro (bétula) ────────────────────────────────────────── */

html[data-design="fluxo"] {
    --font-ui: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: var(--font-ui);
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --bs-font-sans-serif: var(--font-ui);
    --bs-font-monospace: var(--font-mono);
    --bs-body-font-family: var(--font-ui);
    --bs-body-font-size: .9375rem;

    --o-brand-ink: var(--system-base-color-on-light, var(--pflow-brand-dark));
    --o-brand-rail: var(--o-brand-ink);
    --o-brand-hover: color-mix(in srgb, var(--pflow-brand) 88%, var(--pflow-brand-contrast));

    --o-ink: #1f1c19;
    --o-ink-2: #4a4540;
    --o-tray: #ebe6dd;
    --o-edge: #dcd3c5;
    --o-led-ok: #3c9a62;
    --o-led-warn: #d9a032;
    --o-led-danger: #c9503a;
    --o-led-info: #3f7fb0;
    --o-led-idle: #a39b90;
    --o-solid-ok: #2f7d4f;
    --o-solid-danger: #b3412c;
    --o-solid-warn: #d9a032;
    --o-solid-warn-text: #1f1c19;
    --o-solid-info: #2f6690;
    --o-solid-neutral: #5c564f;
    --o-hazard: repeating-linear-gradient(-45deg, var(--o-led-warn) 0 7px, color-mix(in srgb, var(--o-led-warn) 55%, #fff) 7px 14px);
    --o-board: #dccfb6;
    --o-board-line: #bfae8f;
    --o-shadow-panel: 0 1px 0 var(--o-edge), 0 2px 0 var(--o-edge), 0 10px 18px -14px rgba(70, 50, 30, .35);
    --o-shadow-low: 0 1px 0 var(--o-edge), 0 4px 10px -8px rgba(70, 50, 30, .3);
    --o-shadow-pop: 0 18px 40px -18px rgba(50, 35, 20, .45), 0 0 0 1px rgba(31, 28, 25, .05);
    /* Régua de fita métrica: traços a cada 6 px, maiores a cada 30. */
    --o-tape: repeating-linear-gradient(90deg, var(--input-border) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, var(--muted-color) 0 1px, transparent 1px 30px);
    /* Linha de fluxo: traço neutro (segue o tema pelo --input-border). */
    --o-flow-line: var(--input-border);
    /* Placa clara atrás do logo do tenant no escuro — a imagem traz as cores dele. */
    --o-logo-plaque: #f6f2ec;

    --bg-color: #f3f0ea;
    --surface-sunk: #f8f6f1;
    --card-bg: #ffffff;
    --text-color: #1f1c19;
    --muted-color: #6b655d;
    --border-color: #e3ddd3;
    --input-bg: #ffffff;
    --input-border: #d2c9bc;
    --brand-tint: color-mix(in srgb, var(--pflow-brand) 8%, #ffffff);
    --brand-tint-strong: color-mix(in srgb, var(--pflow-brand) 14%, #ffffff);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--o-brand-ink) 24%, transparent);
    --shadow-sm: var(--o-shadow-panel);

    --ok-fg: #2f7d4f;
    --ok-bg: #e6f1ea;
    --ok-border: #c4dccb;
    --warn-fg: #8f6110;
    --warn-bg: #f8eed9;
    --warn-border: #e8d3a6;
    --danger-fg: #b3412c;
    --danger-bg: #f7e5e0;
    --danger-border: #e8bfb3;
    --info-fg: #2f6690;
    --info-bg: #e3edf5;
    --info-border: #bdd2e4;
    --solid-contrast: #ffffff;

    --radius-pill: 999px;
    --radius-card: 12px;
    --radius-sub: 10px;
    --radius-control: 9px;

    --navbar-bg: var(--bg-color);
    --navbar-border: var(--border-color);
    --navbar-text: var(--o-ink-2);
    --navbar-text-hover: var(--text-color);
    --navbar-text-active: var(--text-color);
    --dropdown-bg: var(--card-bg);
    --dropdown-hover: var(--surface-sunk);
    --user-avatar-color: var(--o-ink-2);
    --user-avatar-hover: var(--text-color);
    --quote-tree-guide: #d8cfc1;

    --sidebar-bg: var(--bg-color);
    --sidebar-border: transparent;
    --sidebar-text: var(--o-ink-2);
    --sidebar-text-hover: var(--text-color);
    --sidebar-active-bg: var(--card-bg);
    --sidebar-active-text: var(--text-color);
    --sidebar-group-title: var(--muted-color);

    --bs-primary-rgb: var(--system-base-color-on-light-rgb, 13, 110, 253);
    --bs-secondary-rgb: 107, 101, 93;
    --bs-success-rgb: 47, 125, 79;
    --bs-info-rgb: 47, 102, 144;
    --bs-warning-rgb: 217, 160, 50;
    --bs-danger-rgb: 179, 65, 44;
    --bs-light-rgb: 248, 246, 241;
    --bs-dark-rgb: 31, 28, 25;
    --bs-body-color-rgb: 31, 28, 25;
    --bs-body-bg-rgb: 243, 240, 234;
    --bs-body-color: var(--text-color);
    --bs-body-bg: var(--bg-color);
}

/* ─── Tokens — escuro (nogueira) ─────────────────────────────────────── */

html[data-design="fluxo"][data-theme="dark"] {
    --o-brand-ink: var(--system-base-color-on-dark, var(--pflow-brand));
    --o-ink: #f0ebe3;
    --o-ink-2: #d2cac0;
    --o-tray: #1b1916;
    --o-edge: #0c0b0a;
    --o-led-ok: #5cbf80;
    --o-led-warn: #e7b450;
    --o-led-danger: #ec7a63;
    --o-led-info: #6aa8da;
    --o-led-idle: #7d756b;
    --o-solid-neutral: #4a4540;
    --o-board: #4a4033;
    --o-board-line: #6b5d49;
    --o-shadow-panel: 0 1px 0 var(--o-edge), 0 2px 0 var(--o-edge), 0 12px 20px -14px rgba(0, 0, 0, .8);
    --o-shadow-low: 0 1px 0 var(--o-edge), 0 4px 10px -8px rgba(0, 0, 0, .7);
    --o-shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .75), 0 0 0 1px rgba(240, 235, 227, .05);

    --bg-color: #161412;
    --surface-sunk: #1c1a17;
    --card-bg: #221f1c;
    --text-color: #f0ebe3;
    --muted-color: #a59d92;
    --border-color: #35312c;
    --input-bg: #1c1a17;
    --input-border: #47413a;
    --brand-tint: color-mix(in srgb, var(--pflow-brand) 14%, #221f1c);
    --brand-tint-strong: color-mix(in srgb, var(--pflow-brand) 24%, #221f1c);

    --ok-fg: #78c693;
    --ok-bg: #1b2c21;
    --ok-border: #2d4a36;
    --warn-fg: #e3b45d;
    --warn-bg: #2e2516;
    --warn-border: #57462a;
    --danger-fg: #ef8c78;
    --danger-bg: #34201b;
    --danger-border: #5e3329;
    --info-fg: #91c0e4;
    --info-bg: #1a2733;
    --info-border: #2f4a63;

    --dropdown-bg: var(--card-bg);
    --dropdown-hover: #2a2622;
    --quote-tree-guide: #47413a;

    --bs-primary-rgb: var(--system-base-color-on-dark-rgb, 110, 168, 254);
    --bs-secondary-rgb: 165, 157, 146;
    --bs-success-rgb: 92, 191, 128;
    --bs-danger-rgb: 236, 122, 99;
    --bs-light-rgb: 34, 31, 28;
    --bs-dark-rgb: 240, 235, 227;
    --bs-body-color-rgb: 240, 235, 227;
    --bs-body-bg-rgb: 22, 20, 18;
}

/* ─── Base ───────────────────────────────────────────────────────────── */

html[data-design="fluxo"] body {
    font-family: var(--font-ui);
    font-size: var(--bs-body-font-size);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
html[data-design="fluxo"] body::before { display: none; }
:where(html[data-design="fluxo"]) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { font-family: var(--font-ui); }
html[data-design="fluxo"] h1 { font-weight: 680; letter-spacing: -.02em; }
:where(html[data-design="fluxo"]) :is(h2, h3, h4) { font-weight: 650; letter-spacing: -.01em; }
:where(html[data-design="fluxo"]) :is(code, kbd, pre, samp) { font-family: var(--font-mono); }
:where(html[data-design="fluxo"]) a { color: var(--o-brand-ink); }
:where(html[data-design="fluxo"]) a:hover { color: var(--text-color); }
html[data-design="fluxo"] ::selection { background: color-mix(in srgb, var(--pflow-brand) 26%, transparent); }
html[data-design="fluxo"] .text-muted { color: var(--muted-color) !important; }
html[data-design="fluxo"][data-theme="dark"] .text-dark { color: var(--text-color) !important; }
html[data-design="fluxo"] .pflow-mono,
html[data-design="fluxo"] .pflow-cell-mono { font-family: var(--font-mono); font-size: .93em; }

/* ─── Shell ──────────────────────────────────────────────────────────── */

html[data-design="fluxo"] .pflow-navbar {
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-design="fluxo"] .navbar-user-name { font-weight: 560; }
/* O logo é do TENANT: nunca recebe a cor base nem as cores do pFlow. No escuro fica numa placa clara,
   para um logo escuro nunca desaparecer. */
html[data-design="fluxo"][data-theme="dark"] .navbar-logo,
html[data-design="fluxo"][data-theme="dark"] .portal-topbar-logo {
    padding: 4px 8px;
    background: var(--o-logo-plaque);
    border-radius: 8px;
    box-shadow: 0 1px 0 var(--o-edge);
}
html[data-design="fluxo"] .app-footer { opacity: .7; }

html[data-design="fluxo"] .pflow-sidebar { border-right-color: transparent; }
html[data-design="fluxo"] .pflow-sidebar-link,
html[data-design="fluxo"] .pflow-sidebar-group-trigger {
    border-radius: var(--radius-sub);
    font-weight: 560;
}
html[data-design="fluxo"] .pflow-sidebar-link:hover,
html[data-design="fluxo"] .pflow-sidebar-group-trigger:hover,
html[data-design="fluxo"] .pflow-sidebar-collapse-btn:hover { color: var(--text-color); background: color-mix(in srgb, var(--card-bg) 65%, transparent); }
html[data-design="fluxo"] .pflow-sidebar-link.is-active,
html[data-design="fluxo"] .pflow-sidebar-group.has-active > .pflow-sidebar-group-trigger {
    color: var(--text-color);
    background: var(--card-bg);
    box-shadow: var(--o-shadow-low);
}
html[data-design="fluxo"] .pflow-sidebar-link.is-active .pflow-sidebar-icon,
html[data-design="fluxo"] .pflow-sidebar-group.has-active > .pflow-sidebar-group-trigger .pflow-sidebar-icon { color: var(--o-brand-ink); }
html[data-design="fluxo"] .pflow-sidebar-flyout {
    background: var(--card-bg);
    border-color: var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--o-shadow-pop);
}
html[data-design="fluxo"] .pflow-sidebar-flyout .pflow-sidebar-link.is-active { background: var(--surface-sunk); box-shadow: none; }
html[data-design="fluxo"] .pflow-sidebar-flyout-title { letter-spacing: .02em; text-transform: none; font-weight: 600; font-size: .78rem; }
html[data-design="fluxo"] .pflow-sidebar-fab {
    color: var(--bg-color);
    background: var(--o-ink);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 12px 24px -10px rgba(0, 0, 0, .45);
}

/* ─── Cabeçalho de página ────────────────────────────────────────────── */

html[data-design="fluxo"] .page-header { margin-bottom: 24px; }
html[data-design="fluxo"] .page-header h1 {
    font-size: clamp(1.55rem, 2.4vw, 1.9rem);
    font-weight: 680;
    letter-spacing: -.02em;
    line-height: 1.12;
}
html[data-design="fluxo"] .page-header p { font-size: .92rem; }
html[data-design="fluxo"] .page-eyebrow {
    margin-bottom: 6px;
    color: var(--muted-color);
    font-size: .8125rem;
    font-weight: 550;
    letter-spacing: 0;
    text-transform: none;
}

/* ─── Botões: painéis que se carregam ────────────────────────────────── */

html[data-design="fluxo"] .btn {
    border-radius: var(--radius-control);
    font-weight: 580;
    transition: background-color .15s, border-color .15s, color .15s, filter .15s;
}
html[data-design="fluxo"] .btn-primary {
    color: var(--pflow-brand-contrast);
    background: var(--pflow-brand);
    border-color: transparent;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 0 rgba(0, 0, 0, .08);
}
html[data-design="fluxo"] .btn-primary:hover,
html[data-design="fluxo"] .btn-primary:focus,
html[data-design="fluxo"] .btn-primary:active {
    color: var(--pflow-brand-contrast);
    background: var(--o-brand-hover);
    border-color: transparent;
}
html[data-design="fluxo"] .btn-outline-primary { color: var(--o-brand-ink); background: var(--card-bg); border-color: var(--o-brand-ink); }
html[data-design="fluxo"] .btn-outline-primary:hover,
html[data-design="fluxo"] .btn-outline-primary:focus,
html[data-design="fluxo"] .btn-outline-primary:active,
html[data-design="fluxo"] .btn-outline-primary.active { color: var(--pflow-brand-contrast); background: var(--pflow-brand); border-color: transparent; }
html[data-design="fluxo"] .btn-outline-secondary,
html[data-design="fluxo"] .btn-light {
    color: var(--text-color);
    background: var(--card-bg);
    border-color: var(--input-border);
    box-shadow: 0 1px 0 var(--o-edge);
}
html[data-design="fluxo"] .btn-outline-secondary:hover,
html[data-design="fluxo"] .btn-outline-secondary:focus,
html[data-design="fluxo"] .btn-outline-secondary:active,
html[data-design="fluxo"] .btn-outline-secondary.active,
html[data-design="fluxo"] .btn-light:hover { color: var(--text-color); background: var(--card-bg); border-color: var(--o-ink-2); }
html[data-design="fluxo"] .btn-secondary { color: #ffffff; background: var(--o-solid-neutral); border-color: transparent; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
html[data-design="fluxo"] .btn-success { color: #ffffff; background: var(--o-solid-ok); border-color: transparent; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
html[data-design="fluxo"] .btn-danger { color: #ffffff; background: var(--o-solid-danger); border-color: transparent; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
html[data-design="fluxo"] .btn-warning { color: var(--o-solid-warn-text); background: var(--o-solid-warn); border-color: transparent; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16); }
html[data-design="fluxo"] .btn-info { color: #ffffff; background: var(--o-solid-info); border-color: transparent; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
html[data-design="fluxo"] .btn-dark { color: var(--bg-color); background: var(--o-ink); border-color: transparent; }
html[data-design="fluxo"] .btn-secondary:hover,
html[data-design="fluxo"] .btn-success:hover,
html[data-design="fluxo"] .btn-danger:hover,
html[data-design="fluxo"] .btn-warning:hover,
html[data-design="fluxo"] .btn-info:hover,
html[data-design="fluxo"] .btn-dark:hover { filter: brightness(1.07); border-color: transparent; }
html[data-design="fluxo"] .btn-success:hover { color: #ffffff; background: var(--o-solid-ok); }
html[data-design="fluxo"] .btn-danger:hover { color: #ffffff; background: var(--o-solid-danger); }
html[data-design="fluxo"] .btn-secondary:hover { color: #ffffff; background: var(--o-solid-neutral); }
html[data-design="fluxo"] .btn-warning:hover { color: var(--o-solid-warn-text); background: var(--o-solid-warn); }
html[data-design="fluxo"] .btn-info:hover { color: #ffffff; background: var(--o-solid-info); }
html[data-design="fluxo"] .btn-outline-success { color: var(--ok-fg); border-color: var(--ok-border); background: var(--card-bg); }
html[data-design="fluxo"] .btn-outline-success:hover, html[data-design="fluxo"] .btn-outline-success.active { color: #ffffff; background: var(--o-solid-ok); border-color: transparent; }
html[data-design="fluxo"] .btn-outline-danger { color: var(--danger-fg); border-color: var(--danger-border); background: var(--card-bg); }
html[data-design="fluxo"] .btn-outline-danger:hover, html[data-design="fluxo"] .btn-outline-danger.active { color: #ffffff; background: var(--o-solid-danger); border-color: transparent; }
html[data-design="fluxo"] .btn-outline-warning { color: var(--warn-fg); border-color: var(--warn-border); background: var(--card-bg); }
html[data-design="fluxo"] .btn-outline-warning:hover, html[data-design="fluxo"] .btn-outline-warning.active { color: var(--o-solid-warn-text); background: var(--o-solid-warn); border-color: transparent; }
html[data-design="fluxo"] .btn-outline-info { color: var(--info-fg); border-color: var(--info-border); background: var(--card-bg); }
html[data-design="fluxo"] .btn-outline-info:hover, html[data-design="fluxo"] .btn-outline-info.active { color: #ffffff; background: var(--o-solid-info); border-color: transparent; }
html[data-design="fluxo"] .btn-outline-dark { color: var(--text-color); border-color: var(--o-ink-2); background: var(--card-bg); }
html[data-design="fluxo"] .btn-outline-dark:hover { color: var(--bg-color); background: var(--o-ink); }
html[data-design="fluxo"] .btn-link { color: var(--o-brand-ink); }
html[data-design="fluxo"] .btn-link:hover { color: var(--text-color); }
html[data-design="fluxo"] .pflow-toggle-group,
html[data-design="fluxo"] .btn-group.pflow-toggle-group {
    padding: 3px;
    gap: 2px;
    background: var(--o-tray);
    border-radius: 11px;
}
html[data-design="fluxo"] .pflow-toggle-group .btn,
html[data-design="fluxo"] .btn-group.pflow-toggle-group .btn {
    color: var(--o-ink-2);
    background: transparent;
    border-color: transparent;
    border-radius: 8px !important;
    box-shadow: none;
}
html[data-design="fluxo"] .pflow-toggle-group .btn.active,
html[data-design="fluxo"] .btn-group.pflow-toggle-group .btn.active {
    color: var(--text-color);
    background: var(--card-bg);
    border-color: transparent;
    box-shadow: 0 1px 0 var(--o-edge), 0 2px 6px -2px rgba(70, 50, 30, .22);
}
html[data-design="fluxo"] .nav-pills .nav-link { border-radius: var(--radius-control); color: var(--o-ink-2); }
html[data-design="fluxo"] .nav-pills .nav-link.active { color: var(--text-color); background-color: var(--card-bg); box-shadow: var(--o-shadow-low); }

/* ─── Cartões, secções, campos de detalhe ────────────────────────────── */

html[data-design="fluxo"] .card { border-radius: var(--radius-card); box-shadow: var(--o-shadow-panel); }
html[data-design="fluxo"] .card-header,
html[data-design="fluxo"] .card-footer { background-color: var(--surface-sunk); }
html[data-design="fluxo"] .card-header { font-weight: 620; }
html[data-design="fluxo"] .form-section h2,
html[data-design="fluxo"] .surface-card h2 { font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; }
html[data-design="fluxo"] .form-section .section-title,
html[data-design="fluxo"] .section-title { color: var(--text-color); font-weight: 650; letter-spacing: -.005em; }
html[data-design="fluxo"] .section-heading-sm { font-weight: 640; }
html[data-design="fluxo"] .detail-card-heading h2 { font-weight: 650; }
html[data-design="fluxo"] .detail-card-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    color: var(--o-brand-ink);
    background: var(--surface-sunk);
    border-radius: var(--radius-sub);
    box-shadow: inset 0 0 0 1px var(--border-color);
}
html[data-design="fluxo"] .detail-field { background: var(--surface-sunk); border-color: var(--border-color); }
html[data-design="fluxo"] .detail-field dt { font-size: .78rem; font-weight: 560; letter-spacing: 0; text-transform: none; }
html[data-design="fluxo"] .detail-field dd { font-weight: 560; }
html[data-design="fluxo"] .detail-field a,
html[data-design="fluxo"] .record-section td a,
html[data-design="fluxo"] .detail-record-title:hover { color: var(--o-brand-ink); }
html[data-design="fluxo"] .clickable-row:hover { background: var(--surface-sunk); }
html[data-design="fluxo"] .inline-notice,
html[data-design="fluxo"] .operation-notice { background: var(--surface-sunk); border-radius: var(--radius-card); }
html[data-design="fluxo"] .inline-notice > i,
html[data-design="fluxo"] .operation-notice > i { color: var(--o-brand-ink); }
html[data-design="fluxo"] .operation-notice.is-warning { background: var(--warn-bg); border-color: var(--warn-border); }
html[data-design="fluxo"] .empty-state { background: var(--surface-sunk); border-color: var(--input-border); border-radius: var(--radius-card); }
html[data-design="fluxo"] .pflow-switch-row,
html[data-design="fluxo"] .feature-toggle { background: var(--surface-sunk); border-radius: var(--radius-sub); }

/* ─── Separadores: calha com o ativo em painel ───────────────────────── */

html[data-design="fluxo"] .detail-tabs,
html[data-design="fluxo"] .pflow-tabs.nav-tabs {
    gap: 2px;
    padding: 4px;
    background: var(--o-tray);
    border: 0;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .04);
}
html[data-design="fluxo"] .detail-tabs-links { gap: 2px; }
html[data-design="fluxo"] .detail-tabs .nav-link,
html[data-design="fluxo"] .pflow-tabs.nav-tabs .nav-link {
    padding: 8px 14px;
    color: var(--o-ink-2) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 9px;
    box-shadow: none;
    font-size: .875rem;
    font-weight: 560;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color .15s, color .15s, box-shadow .15s;
}
html[data-design="fluxo"] .detail-tabs .nav-link:hover,
html[data-design="fluxo"] .pflow-tabs.nav-tabs .nav-link:hover {
    color: var(--text-color) !important;
    background: color-mix(in srgb, var(--card-bg) 55%, transparent) !important;
}
html[data-design="fluxo"] .detail-tabs .nav-link.active,
html[data-design="fluxo"] .pflow-tabs.nav-tabs .nav-link.active {
    color: var(--text-color) !important;
    background: var(--card-bg) !important;
    box-shadow: 0 1px 0 var(--o-edge), 0 2px 6px -2px rgba(70, 50, 30, .22);
}
html[data-design="fluxo"] .tab-count,
html[data-design="fluxo"] .detail-tabs .tab-count,
html[data-design="fluxo"] .pflow-tabs .pflow-tab-count {
    min-width: 0;
    min-height: 0;
    padding: 0;
    color: var(--muted-color);
    background: transparent;
    border: 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
}
html[data-design="fluxo"] .detail-tabs .nav-link.active .tab-count,
html[data-design="fluxo"] .pflow-tabs .nav-link.active .pflow-tab-count { color: var(--o-brand-ink); background: transparent; }
html[data-design="fluxo"] .tab-count.is-alert,
html[data-design="fluxo"] .detail-tabs .tab-count.is-alert {
    padding: 1px 6px;
    color: #ffffff;
    background: var(--o-solid-danger);
    border-radius: 999px;
}
html[data-design="fluxo"] .nav-tabs:not(.pflow-tabs) { border-bottom-color: var(--border-color); }
html[data-design="fluxo"] .nav-tabs:not(.pflow-tabs) .nav-link { color: var(--o-ink-2) !important; font-weight: 560; border-radius: 9px 9px 0 0; }
html[data-design="fluxo"] .nav-tabs:not(.pflow-tabs) .nav-link:hover { color: var(--text-color) !important; }
html[data-design="fluxo"] .nav-tabs:not(.pflow-tabs) .nav-link.active {
    color: var(--text-color) !important;
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) var(--border-color) var(--card-bg) !important;
}

/* ─── Estados: etiquetas com furo ────────────────────────────────────── */

/* A forma da etiqueta das peças: ponta à esquerda, furo, fundo na cor do estado. */
html[data-design="fluxo"] .status-pill,
html[data-design="fluxo"] .record-badge:not(.is-dynamic),
html[data-design="fluxo"] .phase-pill {
    --tag: var(--o-led-idle);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px 3px 14px;
    color: var(--text-color);
    background: color-mix(in srgb, var(--tag) 26%, var(--card-bg));
    border: 0;
    border-radius: 0 7px 7px 0;
    clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
    font-size: .78rem;
    font-weight: 620;
    letter-spacing: 0;
    text-transform: none;
}
html[data-design="fluxo"] .status-pill::before,
html[data-design="fluxo"] .phase-pill::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--card-bg);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tag) 55%, #000);
}
html[data-design="fluxo"] .status-pill.is-active,
html[data-design="fluxo"] .record-badge.is-positive { --tag: var(--o-led-ok); }
html[data-design="fluxo"] .status-pill.is-archived { --tag: var(--o-led-warn); }
html[data-design="fluxo"] .status-pill.is-pending { --tag: var(--o-led-info); }
html[data-design="fluxo"] .status-pill.is-danger { --tag: var(--o-led-danger); }
html[data-design="fluxo"] .status-pill > .bi-circle-fill,
html[data-design="fluxo"] .phase-pill-dot { display: none; }
/* Fase/estado com a cor do TENANT: a etiqueta toma a cor guardada (sem migração de dados). */
html[data-design="fluxo"] .phase-pill { --tag: var(--pill-color, var(--o-led-idle)); font-size: .82rem; }
html[data-design="fluxo"][data-theme="dark"] .phase-pill { color: var(--text-color); background: color-mix(in srgb, var(--tag) 30%, var(--card-bg)); }
html[data-design="fluxo"] .record-badge:not(.is-dynamic) { padding-left: 12px; }
html[data-design="fluxo"] .record-badge.is-score-excelente { --tag: var(--o-led-ok); }
html[data-design="fluxo"] .record-badge.is-score-bom { --tag: var(--o-brand-ink); }
html[data-design="fluxo"] .record-badge.is-score-atencao { --tag: var(--o-led-warn); }
html[data-design="fluxo"] .record-badge.is-score-risco { --tag: var(--o-led-danger); }
html[data-design="fluxo"] .status-dot { border-radius: 3px; }
html[data-design="fluxo"] .status-dot.is-alto { background: var(--o-led-danger); }
html[data-design="fluxo"] .status-dot.is-medio { background: var(--o-led-warn); }
html[data-design="fluxo"] .status-dot.is-baixo { background: var(--o-led-ok); }
html[data-design="fluxo"] .badge { border-radius: 6px; font-weight: 620; letter-spacing: 0; }
html[data-design="fluxo"] .flag-chip.on { color: var(--text-color); background: var(--brand-tint-strong); border-color: var(--o-brand-ink); }

/* ─── KPIs: régua de fita métrica ────────────────────────────────────── */

html[data-design="fluxo"] .area-kpi,
html[data-design="fluxo"] .kpi-card {
    position: relative;
    padding-bottom: 26px;
    border-radius: var(--radius-card);
    box-shadow: var(--o-shadow-panel);
}
html[data-design="fluxo"] .area-kpi::after,
html[data-design="fluxo"] .kpi-card::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 10px;
    height: 7px;
    background-image: var(--o-tape);
    background-size: 100% 4px, 100% 7px;
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat;
    opacity: .7;
    pointer-events: none;
}
/* O estado deixa de ser a barra lateral: passa a um sinal no canto. */
html[data-design="fluxo"] .area-kpi::before {
    top: 16px;
    right: 16px;
    bottom: auto;
    left: auto;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: transparent;
}
html[data-design="fluxo"] .area-kpi.is-alert::before { background: var(--o-led-danger); box-shadow: 0 0 0 4px var(--danger-bg); }
html[data-design="fluxo"] .area-kpi.is-warn::before { background: var(--o-led-warn); box-shadow: 0 0 0 4px var(--warn-bg); }
html[data-design="fluxo"] .area-kpi.is-info::before { background: var(--o-led-info); box-shadow: 0 0 0 4px var(--info-bg); }
html[data-design="fluxo"] .area-kpi.is-ok::before { background: var(--o-led-ok); box-shadow: 0 0 0 4px var(--ok-bg); }
html[data-design="fluxo"] .area-kpi:hover { border-color: var(--input-border); box-shadow: var(--o-shadow-panel); }
html[data-design="fluxo"] .area-kpi-value { font-size: 2rem; font-weight: 650; letter-spacing: -.025em; }
html[data-design="fluxo"] .area-kpi-value.is-compact { font-size: 1.25rem; letter-spacing: -.01em; }
html[data-design="fluxo"] .area-kpi-label,
html[data-design="fluxo"] .area-group-title,
html[data-design="fluxo"] .kpi-label { font-size: .8125rem; font-weight: 560; letter-spacing: 0; text-transform: none; }
html[data-design="fluxo"] .kpi-label { color: var(--muted-color); }
html[data-design="fluxo"] .kpi-value { color: var(--text-color); font-weight: 650; letter-spacing: -.02em; }
html[data-design="fluxo"] .kpi-value.good { color: var(--ok-fg); }
html[data-design="fluxo"] .kpi-value.warn { color: var(--warn-fg); }
html[data-design="fluxo"] .kpi-value.bad { color: var(--danger-fg); }
html[data-design="fluxo"] .kpi-hint { color: var(--muted-color); }
html[data-design="fluxo"] .area-nav-item { border-radius: var(--radius-card); box-shadow: var(--o-shadow-low); }
html[data-design="fluxo"] .area-nav-item:hover { border-color: var(--input-border); }
html[data-design="fluxo"] .client-hub-card,
html[data-design="fluxo"] .quote-kpi,
html[data-design="fluxo"] .quote-card { border-radius: var(--radius-card); box-shadow: var(--o-shadow-panel); }

/* ─── Página inicial ─────────────────────────────────────────────────── */

html[data-design="fluxo"] .app-card { box-shadow: var(--o-shadow-panel); transition: border-color .15s, box-shadow .15s; }
html[data-design="fluxo"] .app-card:hover {
    border-color: var(--pflow-brand);
    box-shadow: 0 1px 0 var(--o-edge), 0 2px 0 var(--pflow-brand), 0 12px 20px -14px rgba(70, 50, 30, .35);
    transform: none;
}
html[data-design="fluxo"] .app-card .card-icon { color: var(--o-brand-ink); }
html[data-design="fluxo"] .app-card .card-footer {
    padding: 12px 10px 14px;
    color: var(--text-color);
    background: transparent;
    font-size: 1rem;
    font-weight: 620;
    letter-spacing: -.005em;
}
html[data-design="fluxo"] .app-card svg[stroke="#000"],
html[data-design="fluxo"] .app-card svg [stroke="#000"] { stroke: var(--text-color); }
html[data-design="fluxo"] .app-card svg[fill="#000"],
html[data-design="fluxo"] .app-card svg [fill="#000"] { fill: var(--text-color); }
html[data-design="fluxo"][data-theme="dark"] .app-card svg[stroke="#000"],
html[data-design="fluxo"][data-theme="dark"] .app-card svg:has([stroke="#000"]) { filter: none; }
html[data-design="fluxo"] .checkin-admin-action { background: var(--surface-sunk); }

/* ─── Formulários ────────────────────────────────────────────────────── */

html[data-design="fluxo"] .field > label,
html[data-design="fluxo"] .field > .form-label,
html[data-design="fluxo"] .form-group > label:not(.form-check-label) {
    color: var(--o-ink-2);
    font-size: .8125rem;
    font-weight: 600;
}
html[data-design="fluxo"] .pflow-input,
html[data-design="fluxo"] .pflow-textarea,
html[data-design="fluxo"] .form-control,
html[data-design="fluxo"] .form-select {
    border-width: 1px !important;
    border-radius: var(--radius-control);
    box-shadow: inset 0 1px 2px rgba(31, 28, 25, .05);
    transition: border-color .15s, box-shadow .15s;
}
html[data-design="fluxo"] .pflow-input:focus,
html[data-design="fluxo"] .pflow-textarea:focus,
html[data-design="fluxo"] .form-control:focus,
html[data-design="fluxo"] .form-select:focus {
    border-color: var(--o-brand-ink) !important;
    box-shadow: var(--focus-ring) !important;
}
html[data-design="fluxo"] .input-group-text { color: var(--muted-color); background: var(--surface-sunk); border-color: var(--input-border); }
html[data-design="fluxo"] .form-check-input:checked { background-color: var(--pflow-brand); border-color: var(--o-brand-ink); }
html[data-design="fluxo"] .form-check-input:focus { border-color: var(--o-brand-ink); box-shadow: var(--focus-ring); }
html[data-design="fluxo"] .form-range::-webkit-slider-thumb { background-color: var(--pflow-brand); }
html[data-design="fluxo"] .form-range::-moz-range-thumb { background-color: var(--pflow-brand); }
html[data-design="fluxo"] .pflow-input.select2-hidden-accessible + .select2-container--default .select2-selection,
html[data-design="fluxo"] .form-select.select2-hidden-accessible + .select2-container--default .select2-selection {
    border-width: 1px !important;
    border-radius: var(--radius-control) !important;
    box-shadow: inset 0 1px 2px rgba(31, 28, 25, .05);
}
html[data-design="fluxo"] .pflow-input.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-design="fluxo"] .form-select.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: calc(var(--control-h) - 2px) !important;
    line-height: calc(var(--control-h) - 2px) !important;
}
html[data-design="fluxo"] .pflow-input.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__arrow,
html[data-design="fluxo"] .form-select.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--control-h) - 2px) !important; }
html[data-design="fluxo"] .pflow-input-sm.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: calc(var(--control-h-sm) - 2px) !important;
    line-height: calc(var(--control-h-sm) - 2px) !important;
}
html[data-design="fluxo"] .pflow-input-sm.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--control-h-sm) - 2px) !important; }
html[data-design="fluxo"] .select2-container--default.select2-container--focus .select2-selection,
html[data-design="fluxo"] .select2-container--default.select2-container--open .select2-selection {
    border-color: var(--o-brand-ink) !important;
    box-shadow: var(--focus-ring) !important;
}
html[data-design="fluxo"] .select2-dropdown {
    border-width: 1px !important;
    border-color: var(--border-color) !important;
    border-radius: var(--radius-sub) !important;
    box-shadow: var(--o-shadow-pop);
    overflow: hidden;
}
html[data-design="fluxo"] .select2-results__option--highlighted,
html[data-design="fluxo"] .select2-results__option:hover { color: var(--text-color) !important; background: var(--brand-tint-strong) !important; }
html[data-design="fluxo"] .select2-results__option[aria-selected="true"] { color: var(--text-color) !important; background: var(--surface-sunk) !important; }
html[data-design="fluxo"] .select2-results__option[aria-selected="true"].select2-results__option--highlighted { color: var(--text-color) !important; background: var(--brand-tint-strong) !important; }
html[data-design="fluxo"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--text-color) !important;
    background: var(--brand-tint-strong) !important;
    border: 0 !important;
    border-radius: 6px !important;
}

/* ─── Tabelas, alertas, listas ───────────────────────────────────────── */

html[data-design="fluxo"] .table { --bs-table-bg: transparent; color: var(--text-color); border-color: var(--border-color); }
html[data-design="fluxo"] .table > thead > tr > th,
html[data-design="fluxo"] .table > thead > tr > td {
    color: var(--muted-color);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--border-color);
    font-size: .8rem;
    font-weight: 600;
}
html[data-design="fluxo"] .alert { color: var(--text-color); border-radius: var(--radius-card); }
html[data-design="fluxo"] .alert-success { background: var(--ok-bg); border-color: var(--ok-border); }
html[data-design="fluxo"] .alert-warning { background: var(--warn-bg); border-color: var(--warn-border); }
html[data-design="fluxo"] .alert-danger { background: var(--danger-bg); border-color: var(--danger-border); }
html[data-design="fluxo"] .alert-info { background: var(--info-bg); border-color: var(--info-border); }
html[data-design="fluxo"] .alert-primary { background: var(--brand-tint); border-color: var(--border-color); }
html[data-design="fluxo"] .alert-secondary,
html[data-design="fluxo"] .alert-light,
html[data-design="fluxo"] .alert-dark { background: var(--surface-sunk); border-color: var(--border-color); }
html[data-design="fluxo"] .alert .alert-link { color: inherit; }
html[data-design="fluxo"] .progress { background: var(--o-tray); border-radius: 999px; }
html[data-design="fluxo"] .progress-bar { background-color: var(--pflow-brand); }
html[data-design="fluxo"] .list-group-item { color: var(--text-color); background-color: var(--card-bg); border-color: var(--border-color); }
html[data-design="fluxo"] .list-group-item.active { color: var(--text-color); background-color: var(--brand-tint-strong); border-color: var(--border-color); }
html[data-design="fluxo"] .page-link { color: var(--o-brand-ink); background: var(--card-bg); border-color: var(--border-color); }
html[data-design="fluxo"] .page-item.active .page-link { color: var(--pflow-brand-contrast); background: var(--pflow-brand); border-color: transparent; }

/* ─── Menus, modais, pesquisa ────────────────────────────────────────── */

html[data-design="fluxo"] .dropdown-menu {
    padding: 6px;
    border-radius: var(--radius-card);
    box-shadow: var(--o-shadow-pop);
}
html[data-design="fluxo"] .dropdown-item { border-radius: 8px; }
html[data-design="fluxo"] .modal-content {
    color: var(--text-color);
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--o-shadow-pop);
}
html[data-design="fluxo"] .modal-header,
html[data-design="fluxo"] .modal-footer { border-color: var(--border-color); }
html[data-design="fluxo"] .modal-footer { background: var(--surface-sunk); border-radius: 0 0 16px 16px; }
html[data-design="fluxo"] .modal-title { font-weight: 650; letter-spacing: -.01em; }
html[data-design="fluxo"] .offcanvas { color: var(--text-color); background-color: var(--bg-color); box-shadow: var(--o-shadow-pop); }
html[data-design="fluxo"] .offcanvas-title { font-weight: 650; }
html[data-design="fluxo"] .global-search-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-design="fluxo"] .global-search-panel { border-radius: 16px; box-shadow: var(--o-shadow-pop); }
html[data-design="fluxo"] kbd {
    padding: 1px 6px;
    color: var(--muted-color);
    background: var(--surface-sunk);
    border: 1px solid var(--input-border);
    border-radius: 5px;
    box-shadow: none;
    font-size: .72rem;
}

/* ─── Ações flutuantes ───────────────────────────────────────────────── */

html[data-design="fluxo"] .fab-action {
    color: var(--pflow-brand-contrast);
    background-color: var(--pflow-brand);
    border-radius: 16px;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 12px 24px -10px rgba(0, 0, 0, .45);
    transition: background-color .15s;
}
html[data-design="fluxo"] .fab-action:hover { transform: none; background-color: var(--o-brand-hover); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 12px 24px -10px rgba(0, 0, 0, .45); }
html[data-design="fluxo"] .fab-action.active { transform: none; color: var(--bg-color); background-color: var(--o-ink); }
html[data-design="fluxo"] .action-drawer { background-color: var(--bg-color); box-shadow: var(--o-shadow-pop); }
html[data-design="fluxo"] .action-drawer-title { font-weight: 650; }
html[data-design="fluxo"] .quote-fab { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 12px 24px -10px rgba(0, 0, 0, .45); }

/* ─── AG Grid ────────────────────────────────────────────────────────── */

html[data-design="fluxo"] .ag-theme-alpine,
html[data-design="fluxo"] .ag-theme-quartz {
    --ag-font-family: var(--font-ui);
    --ag-font-size: 13.5px;
    --ag-background-color: var(--card-bg);
    --ag-odd-row-background-color: var(--card-bg);
    --ag-foreground-color: var(--text-color);
    --ag-data-color: var(--text-color);
    --ag-header-background-color: var(--surface-sunk);
    --ag-header-foreground-color: var(--muted-color);
    --ag-border-color: var(--border-color);
    --ag-secondary-border-color: var(--border-color);
    --ag-row-border-color: var(--border-color);
    --ag-row-hover-color: var(--surface-sunk);
    --ag-selected-row-background-color: color-mix(in srgb, var(--pflow-brand) 8%, var(--card-bg));
    --ag-input-focus-border-color: var(--o-brand-ink);
    --ag-range-selection-border-color: var(--o-brand-ink);
    --ag-checkbox-checked-color: var(--o-brand-ink);
    --ag-alpine-active-color: var(--o-brand-ink);
    --ag-cell-horizontal-border: solid transparent;
    --ag-header-column-separator-display: none;
    --ag-header-column-resize-handle-color: var(--input-border);
    --ag-control-panel-background-color: var(--surface-sunk);
    --ag-modal-overlay-background-color: color-mix(in srgb, var(--card-bg) 70%, transparent);
    --ag-border-radius: 6px;
    --ag-wrapper-border-radius: var(--radius-card);
    --ag-card-radius: 10px;
    --ag-card-shadow: var(--o-shadow-pop);
    --ag-popup-shadow: var(--o-shadow-pop);
}
html[data-design="fluxo"] .ag-theme-alpine .ag-header-cell-text,
html[data-design="fluxo"] .ag-theme-quartz .ag-header-cell-text { font-size: .8rem; font-weight: 600; }
html[data-design="fluxo"] .ag-theme-alpine .ag-root-wrapper,
html[data-design="fluxo"] .ag-theme-quartz .ag-root-wrapper { box-shadow: var(--o-shadow-panel); }
html[data-design="fluxo"] .ag-theme-alpine .ag-paging-panel,
html[data-design="fluxo"] .ag-theme-quartz .ag-paging-panel { color: var(--muted-color); font-size: .8rem; }
html[data-design="fluxo"] .ag-theme-alpine .ag-row-selected { box-shadow: inset 3px 0 0 var(--pflow-brand); }
html[data-design="fluxo"] .row-received { color: var(--text-color) !important; background-color: var(--ok-bg) !important; }
html[data-design="fluxo"] .row-ordered,
html[data-design="fluxo"] .row-partial { color: var(--text-color) !important; background-color: var(--warn-bg) !important; }
html[data-design="fluxo"] .row-pending { color: var(--text-color) !important; background-color: var(--danger-bg) !important; }

/* ─── SweetAlert2 ────────────────────────────────────────────────────── */

html[data-design="fluxo"] .swal2-popup {
    color: var(--text-color) !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: var(--o-shadow-pop);
    font-family: var(--font-ui);
}
html[data-design="fluxo"] .swal2-title { color: var(--text-color) !important; font-weight: 680; letter-spacing: -.015em; }
html[data-design="fluxo"] .swal2-html-container { color: var(--o-ink-2) !important; }
html[data-design="fluxo"] .swal2-footer { color: var(--muted-color) !important; border-top-color: var(--border-color) !important; }
html[data-design="fluxo"] .swal2-input,
html[data-design="fluxo"] .swal2-textarea,
html[data-design="fluxo"] .swal2-select {
    color: var(--text-color) !important;
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-control);
    box-shadow: inset 0 1px 2px rgba(31, 28, 25, .05) !important;
}
html[data-design="fluxo"] .swal2-input:focus,
html[data-design="fluxo"] .swal2-textarea:focus { border-color: var(--o-brand-ink) !important; box-shadow: var(--focus-ring) !important; }
html[data-design="fluxo"] .swal2-styled { border-radius: var(--radius-control) !important; font-family: var(--font-ui); font-weight: 600; }
html[data-design="fluxo"] .swal2-styled:focus { box-shadow: var(--focus-ring) !important; }
html[data-design="fluxo"] .swal2-styled.swal2-confirm { color: var(--pflow-brand-contrast); background-color: var(--pflow-brand); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
html[data-design="fluxo"] .swal2-styled.swal2-cancel { color: var(--text-color); background-color: var(--card-bg); border: 1px solid var(--input-border); box-shadow: 0 1px 0 var(--o-edge); }
html[data-design="fluxo"] .swal2-styled.swal2-deny { color: #ffffff; background-color: var(--o-solid-danger); }
html[data-design="fluxo"] .swal2-styled.pflow-swal-btn--primary { color: var(--pflow-brand-contrast) !important; background-color: var(--pflow-brand) !important; border: 0 !important; }
html[data-design="fluxo"] .swal2-styled.pflow-swal-btn--danger { color: #ffffff !important; background-color: var(--o-solid-danger) !important; border: 0 !important; }
html[data-design="fluxo"] .swal2-styled.pflow-swal-btn--ok { color: #ffffff !important; background-color: var(--o-solid-ok) !important; border: 0 !important; }
html[data-design="fluxo"] .swal2-styled.pflow-swal-btn--warn { color: var(--o-solid-warn-text) !important; background-color: var(--o-solid-warn) !important; border: 0 !important; }
html[data-design="fluxo"] .swal2-styled.pflow-swal-btn--info { color: #ffffff !important; background-color: var(--o-solid-info) !important; border: 0 !important; }
html[data-design="fluxo"] .swal2-styled.pflow-swal-btn--neutral { color: var(--text-color) !important; background-color: var(--card-bg) !important; border: 1px solid var(--input-border) !important; }
html[data-design="fluxo"] .swal2-timer-progress-bar { background: var(--pflow-brand); }

/* ─── Toasts ─────────────────────────────────────────────────────────── */

html[data-design="fluxo"] .toastify {
    padding: 13px 18px 13px 20px;
    color: #f6f2ec;
    background: #24211d;
    border-radius: 12px;
    box-shadow: inset 4px 0 0 var(--o-led-idle), 0 18px 36px -16px rgba(0, 0, 0, .55);
    font-family: var(--font-ui);
    font-weight: 560;
}
html[data-design="fluxo"] .toastify.pflow-toast--ok { box-shadow: inset 4px 0 0 var(--o-led-ok), 0 18px 36px -16px rgba(0, 0, 0, .55); }
html[data-design="fluxo"] .toastify.pflow-toast--warn { box-shadow: inset 4px 0 0 var(--o-led-warn), 0 18px 36px -16px rgba(0, 0, 0, .55); }
html[data-design="fluxo"] .toastify.pflow-toast--danger { box-shadow: inset 4px 0 0 var(--o-led-danger), 0 18px 36px -16px rgba(0, 0, 0, .55); }
html[data-design="fluxo"] .toastify.pflow-toast--info { box-shadow: inset 4px 0 0 var(--o-led-info), 0 18px 36px -16px rgba(0, 0, 0, .55); }
html[data-design="fluxo"] .toastify.pflow-toast--brand { box-shadow: inset 4px 0 0 var(--pflow-brand), 0 18px 36px -16px rgba(0, 0, 0, .55); }
html[data-design="fluxo"] .toastify.toast-pflow-operator { border-radius: 18px !important; }
html[data-design="fluxo"] .toast-operator-text { font-weight: 650; letter-spacing: -.01em; }

/* ─── Sessão de trabalho ─────────────────────────────────────────────── */

html[data-design="fluxo"] .work-session-pill { border-radius: var(--radius-control); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
html[data-design="fluxo"] .work-session-pill-active { background: var(--o-solid-danger); }
html[data-design="fluxo"] .work-session-pill-paused { color: var(--o-solid-warn-text); background: var(--o-solid-warn); }

/* ─── Impressão ──────────────────────────────────────────────────────── */

@media print {
    html[data-design="fluxo"] {
        --bg-color: #ffffff;
        --card-bg: #ffffff;
        --surface-sunk: #ffffff;
        --text-color: #000000;
        --o-shadow-panel: none;
        --shadow-sm: none;
    }
}

/* ==========================================================================
   Ecrãs de produção — classes dos <style> das próprias views.
   Mesma cobertura do Oficina; cores de dados do tenant mantêm-se.
   ========================================================================== */

html[data-design="fluxo"] .progress-danger { color: var(--danger-fg); background-color: var(--danger-bg); border-radius: 6px; }
html[data-design="fluxo"] .progress-warning { color: var(--warn-fg); background-color: var(--warn-bg); border-radius: 6px; }
html[data-design="fluxo"] .progress-success { color: var(--ok-fg); background-color: var(--ok-bg); border-radius: 6px; }

/* ─── Quadros kanban: tabuleiro + painéis com a orla na cor do estado ── */

html[data-design="fluxo"] .project-kanban-column,
html[data-design="fluxo"] .construction-kanban-column,
html[data-design="fluxo"] .obra-kanban-column,
html[data-design="fluxo"] .module-kanban-column,
html[data-design="fluxo"] .kanban-col {
    background: var(--o-tray);
    border: 0;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .04);
}
html[data-design="fluxo"] .project-kanban-column.is-drop-target,
html[data-design="fluxo"] .construction-kanban-column.is-drop-target,
html[data-design="fluxo"] .obra-kanban-column.is-drop-target,
html[data-design="fluxo"] .module-kanban-column.drag-over { background: var(--brand-tint-strong); box-shadow: inset 0 0 0 2px var(--o-brand-ink); }
html[data-design="fluxo"] .project-kanban-column-header,
html[data-design="fluxo"] .construction-kanban-column-header,
html[data-design="fluxo"] .obra-kanban-column-header,
html[data-design="fluxo"] .kanban-col-header {
    background: transparent;
    border-bottom: 0;
}
html[data-design="fluxo"] .project-kanban-column-title,
html[data-design="fluxo"] .construction-kanban-column-title,
html[data-design="fluxo"] .obra-kanban-column-title,
html[data-design="fluxo"] .kanban-col-header { font-size: .875rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
html[data-design="fluxo"] .project-kanban-state-dot,
html[data-design="fluxo"] .construction-kanban-state-dot,
html[data-design="fluxo"] .obra-kanban-state-dot { border-radius: 3px; border-color: rgba(0, 0, 0, .25); }
html[data-design="fluxo"] .project-kanban-count,
html[data-design="fluxo"] .construction-kanban-count,
html[data-design="fluxo"] .obra-kanban-count,
html[data-design="fluxo"] .module-kanban-column-count,
html[data-design="fluxo"] .kanban-col-count,
html[data-design="fluxo"] .project-kanban-state-filter-count,
html[data-design="fluxo"] .kanban-state-filter-count {
    color: var(--muted-color);
    background: transparent;
    font-family: var(--font-mono);
    font-weight: 500;
}
html[data-design="fluxo"] .project-kanban-card,
html[data-design="fluxo"] .construction-kanban-card,
html[data-design="fluxo"] .obra-kanban-card {
    color: var(--text-color);
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 11px;
    box-shadow: 0 1px 0 var(--o-edge), 0 6px 12px -10px rgba(70, 50, 30, .35), inset 0 -3px 0 var(--kanban-state-color, var(--o-led-idle));
    transition: border-color .15s, box-shadow .15s;
}
html[data-design="fluxo"] .project-kanban-card:hover,
html[data-design="fluxo"] .construction-kanban-card:hover,
html[data-design="fluxo"] .obra-kanban-card:hover {
    border-color: var(--input-border);
    box-shadow: 0 1px 0 var(--o-edge), 0 10px 18px -12px rgba(70, 50, 30, .4), inset 0 -3px 0 var(--kanban-state-color, var(--o-led-idle));
    transform: none;
}
html[data-design="fluxo"] .project-kanban-card.dragging,
html[data-design="fluxo"] .construction-kanban-card.dragging,
html[data-design="fluxo"] .project-kanban-card-ghost,
html[data-design="fluxo"] .construction-kanban-card-ghost {
    transform: rotate(-1.2deg);
    box-shadow: 0 1px 0 var(--o-edge), 0 18px 30px -14px rgba(70, 50, 30, .45), inset 0 -3px 0 var(--kanban-state-color, var(--o-led-idle));
}
html[data-design="fluxo"] .project-kanban-card.insertion-before,
html[data-design="fluxo"] .construction-kanban-card.insertion-before { border-top: 3px solid var(--o-brand-ink); }
html[data-design="fluxo"] .obra-kanban-card.insertion-before::before { background: var(--o-brand-ink); }
html[data-design="fluxo"] .project-kanban-ref,
html[data-design="fluxo"] .construction-kanban-number,
html[data-design="fluxo"] .obra-kanban-ref,
html[data-design="fluxo"] .obra-proj-card-ref,
html[data-design="fluxo"] .module-card-code { color: var(--muted-color); font-family: var(--font-mono); font-size: .78rem; }
html[data-design="fluxo"] .project-kanban-name,
html[data-design="fluxo"] .construction-kanban-name { font-weight: 620; }
html[data-design="fluxo"] .construction-kanban-client,
html[data-design="fluxo"] .obra-kanban-client,
html[data-design="fluxo"] .obra-proj-card-client { color: var(--muted-color); }
html[data-design="fluxo"] .project-kanban-step-pill,
html[data-design="fluxo"] .obra-kanban-step-pill,
html[data-design="fluxo"] .construction-kanban-badge {
    color: var(--o-ink-2);
    background: var(--surface-sunk);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--border-color);
}
html[data-design="fluxo"] .construction-kanban-card-action-btn,
html[data-design="fluxo"] .project-kanban-flow-btn,
html[data-design="fluxo"] .project-kanban-archive-btn {
    color: var(--o-ink-2);
    background-color: var(--card-bg);
    border-color: var(--border-color);
    border-radius: 8px;
}
html[data-design="fluxo"] .construction-kanban-card-action-btn:hover,
html[data-design="fluxo"] .project-kanban-flow-btn:hover,
html[data-design="fluxo"] .project-kanban-archive-btn:hover { color: var(--text-color); background-color: var(--surface-sunk); }
html[data-design="fluxo"] .project-kanban-deadline-dot.deadline-approaching,
html[data-design="fluxo"] .construction-kanban-deadline-dot.deadline-approaching { background-color: var(--o-led-warn); }
html[data-design="fluxo"] .project-kanban-deadline-dot.deadline-expired,
html[data-design="fluxo"] .construction-kanban-deadline-dot.deadline-expired { background-color: var(--o-led-danger); }
html[data-design="fluxo"] .project-kanban-deadline,
html[data-design="fluxo"] .construction-kanban-deadline { font-family: var(--font-mono); }
html[data-design="fluxo"] .project-kanban-empty,
html[data-design="fluxo"] .construction-kanban-empty,
html[data-design="fluxo"] .obra-kanban-empty,
html[data-design="fluxo"] .module-kanban-empty { color: var(--muted-color); }

/* Quadro de produção (passos) */
html[data-design="fluxo"] .kanban-card {
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 11px;
    box-shadow: 0 1px 0 var(--o-edge), 0 6px 12px -10px rgba(70, 50, 30, .35);
}
html[data-design="fluxo"] .kanban-card.in-progress { border-left: 1px solid var(--border-color); box-shadow: 0 1px 0 var(--o-edge), 0 6px 12px -10px rgba(70, 50, 30, .35), inset 0 -3px 0 var(--o-led-warn); }
html[data-design="fluxo"] .kanban-card-sub,
html[data-design="fluxo"] .step-pill-label { color: var(--muted-color); }
html[data-design="fluxo"] .kanban-col.col-complete { background: var(--ok-bg); }
html[data-design="fluxo"] .step-header-row { border-bottom-color: var(--border-color); }
html[data-design="fluxo"] .step-pill-pct { color: var(--text-color); }
/* O resumo por etapa (.step-header-row) é desenhado como linha de fluxo — ver a secção seguinte. */

/* ─── Linha de fluxo: o motivo do design ─────────────────────────────── */
/* Onde o ecrã JÁ mostra uma sequência, as etapas viram nós sobre um traço contínuo. O traço é neutro
   e enche-se com a cor base do tenant até onde o trabalho já foi; uma etapa concluída é um nó cheio
   com visto, a etapa em curso leva um anel na versão legível da cor. Forma, não cor: serve qualquer
   marca. Só reveste markup que existe — nunca acrescenta conteúdo. Cores de dados do tenant (cor de
   etapa, de estado) ficam onde estavam. */

/* Resumo por etapa — quadro de produção do projeto e fluxo de produção da obra. O estado do nó lê-se
   da largura da barra que a página já escreve (width:100% = concluída, width:0% = por fazer). */
html[data-design="fluxo"] .step-header-row { gap: 14px 0; }
html[data-design="fluxo"] .step-header-row > .step-pill:not(:has(> .progress-bar-step)) {
    margin-right: 18px !important;
    border-right-color: var(--border-color) !important;
}
html[data-design="fluxo"] .step-pill:has(> .progress-bar-step) {
    position: relative;
    align-items: flex-start;
    min-width: 116px;
    gap: 2px;
    padding: 32px 16px 0 0;
}
html[data-design="fluxo"] .step-pill > .progress-bar-step {
    position: absolute;
    top: 9px;
    left: 21px;
    right: 0;
    min-width: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--o-flow-line);
}
html[data-design="fluxo"] .step-pill:last-child > .progress-bar-step { display: none; }
html[data-design="fluxo"] .step-pill > .progress-bar-step > .progress-bar-step-fill { background: var(--pflow-brand); border-radius: 2px; }
html[data-design="fluxo"] .step-pill:has(> .progress-bar-step)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--card-bg);
    box-shadow: inset 0 0 0 2px var(--o-flow-line);
}
html[data-design="fluxo"] .step-pill:has(> .progress-bar-step > .progress-bar-step-fill[style*="width:100%"])::before {
    background: var(--pflow-brand);
    box-shadow: none;
}
html[data-design="fluxo"] .step-pill:has(> .progress-bar-step > .progress-bar-step-fill[style*="width:100%"])::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 8px;
    width: 5px;
    height: 10px;
    border: solid var(--pflow-brand-contrast);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
html[data-design="fluxo"] .step-pill:has(> .progress-bar-step > .progress-bar-step-fill:not([style*="width:0%"]):not([style*="width:100%"]))::before {
    box-shadow: inset 0 0 0 2px var(--o-brand-ink), 0 0 0 4px color-mix(in srgb, var(--pflow-brand) 22%, transparent);
}
html[data-design="fluxo"] .step-pill:has(> .progress-bar-step > .progress-bar-step-fill:not([style*="width:0%"]):not([style*="width:100%"]))::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--o-brand-ink);
}
html[data-design="fluxo"] .step-pill:has(> .progress-bar-step) > .step-pill-label:first-child { color: var(--text-color); font-size: .84rem; font-weight: 620; }
html[data-design="fluxo"] .step-pill:has(> .progress-bar-step) > .step-pill-pct,
html[data-design="fluxo"] .step-pill:has(> .progress-bar-step) > .step-pill-label:last-child { font-family: var(--font-mono); font-size: .76rem; }
html[data-design="fluxo"] .step-pill:has(> .progress-bar-step) > .step-pill-pct { font-weight: 600; }

/* Linha do tempo (levantamentos, contagens): traço de fluxo, nós com folga à volta. As cores por tipo
   de evento ficam. */
html[data-design="fluxo"] .pflow-timeline::before { top: 4px; bottom: 4px; left: 10.5px; width: 3px; border-radius: 2px; background: var(--o-flow-line); }
html[data-design="fluxo"] .pflow-timeline-marker { box-shadow: 0 0 0 3px var(--card-bg); }
html[data-design="fluxo"] .pflow-timeline-meta { font-family: var(--font-mono); font-size: .74rem; }

/* Percurso do material: cada destino é um nó, as setas viram traço. O destino com saldo por resolver
   é a etapa em curso. */
html[data-design="fluxo"] .pflow-route { gap: 10px 0; }
html[data-design="fluxo"] .pflow-route-step {
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-weight: 560;
}
html[data-design="fluxo"] .pflow-route-step > .bi {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--muted-color);
    background: var(--card-bg);
    box-shadow: inset 0 0 0 2px var(--o-flow-line);
    font-size: .78rem;
}
html[data-design="fluxo"] .pflow-route-step.is-current { background: none; border-color: transparent; font-weight: 620; }
html[data-design="fluxo"] .pflow-route-step.is-current > .bi {
    color: var(--o-brand-ink);
    box-shadow: inset 0 0 0 2px var(--o-brand-ink), 0 0 0 4px color-mix(in srgb, var(--pflow-brand) 22%, transparent);
}
html[data-design="fluxo"] .pflow-route-step .route-qty { font-family: var(--font-mono); font-weight: 400; font-size: .74rem; }
html[data-design="fluxo"] .pflow-route-arrow {
    flex: 0 0 28px;
    height: 3px;
    margin: 0 10px;
    border-radius: 2px;
    background: var(--o-flow-line);
    font-size: 0;
}
html[data-design="fluxo"] .pflow-route-arrow::before { display: none; }

/* Planeamento: as etapas continuam painéis (são filtros); as setas viram o traço que os liga e o
   termómetro de ocupação passa a um troço da mesma linha. */
html[data-design="fluxo"] .plan-pipeline { gap: 0; }
html[data-design="fluxo"] .plan-pipeline-step {
    background: var(--card-bg);
    border-color: var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--o-shadow-low);
}
html[data-design="fluxo"] .plan-pipeline-step:hover { border-color: var(--input-border); }
html[data-design="fluxo"] .plan-pipeline-step.is-active { border-color: var(--border-color); box-shadow: inset 0 -3px 0 var(--o-brand-ink), var(--o-shadow-low); }
html[data-design="fluxo"] .plan-pipeline-step.is-bottleneck { border-color: var(--danger-border); }
html[data-design="fluxo"] .plan-pipeline-step-name { font-weight: 620; }
html[data-design="fluxo"] .plan-pipeline-step-meta { font-family: var(--font-mono); font-size: .72rem; }
html[data-design="fluxo"] .plan-pipeline-gauge { height: 3px; border-radius: 2px; background: var(--o-flow-line); }
html[data-design="fluxo"] .plan-pipeline-arrow { position: relative; width: 22px; padding: 0; }
html[data-design="fluxo"] .plan-pipeline-arrow > .bi { display: none; }
html[data-design="fluxo"] .plan-pipeline-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
    background: var(--o-flow-line);
}

/* Etapas de um módulo (cartões e quadro do detalhe de projeto): os botões já são nós — cheio na cor
   da etapa quando concluído, contorno quando por fazer. Ficam redondos e ligados por traço. */
html[data-design="fluxo"] .module-stage-btn { position: relative; border-width: 2px; border-radius: 50%; }
html[data-design="fluxo"] .module-card-footer .module-stage-btn + .module-stage-btn::before,
html[data-design="fluxo"] .module-kanban-pills .module-stage-btn + .module-stage-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + 2px);
    width: 5px;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
    background: var(--o-flow-line);
}
html[data-design="fluxo"] .module-kanban-pills .module-stage-btn + .module-stage-btn::before { width: 4px; }

/* ─── Detalhe de projeto: módulos ────────────────────────────────────── */

html[data-design="fluxo"] .module-card { border-color: var(--border-color); border-radius: var(--radius-card); box-shadow: var(--o-shadow-panel); }
html[data-design="fluxo"] .module-card:hover,
html[data-design="fluxo"] .module-card:focus-visible { border-color: var(--input-border); box-shadow: var(--o-shadow-panel); transform: none; }
html[data-design="fluxo"] .module-card-header,
html[data-design="fluxo"] .module-card-actions { border-color: var(--border-color); }
html[data-design="fluxo"] .module-card-meta-item { background: var(--surface-sunk); border-radius: 8px; }
html[data-design="fluxo"] .module-card-meta-label,
html[data-design="fluxo"] .module-card-status-label,
html[data-design="fluxo"] .module-card-linked-article { color: var(--muted-color); }
html[data-design="fluxo"] .module-card-attachments.has-attachments,
html[data-design="fluxo"] .module-kanban-attachments.has-attachments { color: var(--info-fg); background: var(--info-bg); }
html[data-design="fluxo"] .module-avatar-fallback { color: var(--muted-color); background: var(--surface-sunk); }
html[data-design="fluxo"] .module-kanban-card { background: var(--card-bg); border-color: var(--border-color); border-radius: 10px; box-shadow: 0 1px 0 var(--o-edge), 0 6px 12px -10px rgba(70, 50, 30, .35); }
html[data-design="fluxo"] .image-item { border-radius: var(--radius-sub); box-shadow: var(--o-shadow-low); }
html[data-design="fluxo"] .image-item:hover { transform: none; box-shadow: var(--o-shadow-panel); }

/* ─── Detalhe de obra ────────────────────────────────────────────────── */

html[data-design="fluxo"] .top-action-btn { border-radius: var(--radius-control); }
html[data-design="fluxo"] .top-action-btn:hover { transform: none; }
html[data-design="fluxo"] .state-production,
html[data-design="fluxo"] .state-assembling,
html[data-design="fluxo"] .state-painting,
html[data-design="fluxo"] .state-finished {
    --tag: var(--o-led-idle);
    padding-left: 14px;
    color: var(--text-color);
    background: color-mix(in srgb, var(--tag) 26%, var(--card-bg));
    border-radius: 0 7px 7px 0;
    clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
    font-weight: 620;
}
html[data-design="fluxo"] .state-production { --tag: var(--o-led-danger); }
html[data-design="fluxo"] .state-assembling { --tag: var(--o-led-warn); }
html[data-design="fluxo"] .state-painting { --tag: var(--o-led-info); }
html[data-design="fluxo"] .state-finished { --tag: var(--o-led-ok); }
html[data-design="fluxo"] #costSummaryLoader { background: color-mix(in srgb, var(--bg-color) 72%, transparent); }
html[data-design="fluxo"] .cost-summary-loader-box { color: var(--text-color); background: var(--card-bg); border-radius: 16px; box-shadow: var(--o-shadow-pop); }
html[data-design="fluxo"] .cost-summary-spinner { border-color: var(--o-tray); border-top-color: var(--pflow-brand); }
html[data-design="fluxo"] .pending-tasks-alert { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border); border-radius: var(--radius-card); }
html[data-design="fluxo"] .construction-task-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--o-shadow-panel); }
html[data-design="fluxo"] .construction-task-card.overdue { border-color: var(--danger-border); box-shadow: 0 1px 0 var(--o-edge), inset 0 -3px 0 var(--o-led-danger); }
html[data-design="fluxo"] .construction-task-card.notification-target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--o-brand-ink) 30%, transparent), var(--o-shadow-panel); }
html[data-design="fluxo"] .construction-task-description { color: var(--text-color); }
html[data-design="fluxo"] .construction-task-meta { color: var(--muted-color); }
html[data-design="fluxo"] .construction-task-pill { color: var(--o-brand-ink); background: var(--brand-tint); border-radius: 6px; }
html[data-design="fluxo"] .construction-task-overdue-badge { color: #ffffff; background: var(--o-solid-danger); border-radius: 6px; }
html[data-design="fluxo"] .construction-task-due-date.overdue { color: var(--danger-fg); }
html[data-design="fluxo"] .obra-proj-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--o-shadow-panel); }
html[data-design="fluxo"] .obra-proj-card:hover { border-color: var(--input-border); box-shadow: var(--o-shadow-panel); }
html[data-design="fluxo"] .obra-proj-card-thumb { background-color: var(--surface-sunk); }
html[data-design="fluxo"] .obra-session-type-card { border-radius: var(--radius-sub); }
html[data-design="fluxo"] .obra-session-type-card:hover { background: var(--surface-sunk); }
html[data-design="fluxo"] .obra-session-type-card.selected { background: var(--brand-tint); box-shadow: inset 0 0 0 2px var(--o-brand-ink); }

/* ─── Ordem de produção ──────────────────────────────────────────────── */

html[data-design="fluxo"] .detail-card { background: var(--surface-sunk); border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
html[data-design="fluxo"] .detail-label { color: var(--muted-color); font-size: .8rem; font-weight: 560; }
html[data-design="fluxo"] .badge-archived { background-color: var(--o-solid-neutral); border-radius: 6px; }
html[data-design="fluxo"] .gcpMaterialSize { font-family: var(--font-mono); }
html[data-design="fluxo"] .edge-chip { color: var(--ok-fg); background: var(--ok-bg); border-radius: 6px; font-family: var(--font-mono); }
html[data-design="fluxo"] .ag-autocomplete-editor { border-color: var(--input-border); border-radius: 6px; }
html[data-design="fluxo"] .pflow-ag-autocomplete-list { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sub); box-shadow: var(--o-shadow-pop); }
html[data-design="fluxo"] .pflow-ag-autocomplete-item:hover,
html[data-design="fluxo"] .pflow-ag-autocomplete-item.active { color: var(--text-color); background: var(--brand-tint-strong); }
html[data-design="fluxo"] .pflow-ag-autocomplete-meta,
html[data-design="fluxo"] .pflow-ag-autocomplete-item:hover .pflow-ag-autocomplete-meta,
html[data-design="fluxo"] .pflow-ag-autocomplete-item.active .pflow-ag-autocomplete-meta { color: var(--muted-color); }
html[data-design="fluxo"] .preview-board-list-panel,
html[data-design="fluxo"] #previewBoardViewport { background: var(--surface-sunk); border: 1px solid var(--border-color); border-radius: var(--radius-sub); }
html[data-design="fluxo"] .preview-board-list-header { border-bottom-color: var(--border-color); }
html[data-design="fluxo"] .preview-board-list-item { color: var(--text-color); border-radius: 8px; }
html[data-design="fluxo"] .preview-board-list-item:hover { background: var(--card-bg); }
html[data-design="fluxo"] .preview-board-list-item.active { color: var(--text-color); background: var(--card-bg); border-color: transparent; box-shadow: var(--o-shadow-low); }
html[data-design="fluxo"] .preview-board-list-meta { color: var(--muted-color); font-family: var(--font-mono); }

/* ─── Plano de corte (CutPlanView) ───────────────────────────────────── */

html[data-design="fluxo"] {
    --cp-board-bg: var(--o-board);
    --cp-piece-waste: #c9bba0;
    --cp-piece-waste-text: #3a332a;
    --cp-piece-lixo: #a39b90;
    --cp-piece-lixo-text: #f6f2ec;
    --cp-last-printed-ring: var(--o-led-ok);
    --cp-cut-guide-chip-bg: var(--card-bg);
    --cp-cut-guide-chip-text: var(--text-color);
}
html[data-design="fluxo"][data-theme="dark"] {
    --cp-piece-waste: #5a4f40;
    --cp-piece-waste-text: #f0ebe3;
    --cp-piece-lixo: #2c2824;
    --cp-piece-lixo-text: #a59d92;
    --cp-cut-guide-chip-bg: rgba(34, 31, 28, .94);
}
html[data-design="fluxo"] .cp-btn {
    border-radius: var(--radius-control);
    font-family: var(--font-ui);
    font-weight: 580;
    box-shadow: 0 1px 0 var(--o-edge);
}
html[data-design="fluxo"] .cp-btn:hover { filter: none; border-color: var(--input-border); }
html[data-design="fluxo"] .cp-btn:active { transform: none; }
html[data-design="fluxo"] .cp-action[aria-pressed="true"] { background: var(--brand-tint-strong); border-color: var(--o-brand-ink); }
html[data-design="fluxo"] .cp-btn-mode.active { color: #ffffff; background: var(--o-solid-danger); border-color: transparent; }
html[data-design="fluxo"] .cp-board-counter { font-family: var(--font-mono); font-weight: 500; }
html[data-design="fluxo"] .cp-progress-bar { border-radius: 999px; }
html[data-design="fluxo"] .cp-board-limit-notice { position: relative; padding-left: 22px; border-radius: var(--radius-sub); }
html[data-design="fluxo"] .cp-board-limit-notice::before,
html[data-design="fluxo"] .cp-limit-badge::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
    background: var(--o-hazard);
    border-radius: var(--radius-sub) 0 0 var(--radius-sub);
}
html[data-design="fluxo"] .cp-limit-badge { padding-left: 13px; border-radius: 6px; }

/* ─── Postos de operador ─────────────────────────────────────────────── */

html[data-design="fluxo"] .op-session-timer,
html[data-design="fluxo"] .op-multi-timer,
html[data-design="fluxo"] .op-hero-dims { font-weight: 650; letter-spacing: -.03em; }
html[data-design="fluxo"] .op-hero,
html[data-design="fluxo"] .op-scanbar { box-shadow: var(--o-shadow-panel); }
html[data-design="fluxo"] .multi-band-container { background: var(--o-tray); border-radius: 999px; }
html[data-design="fluxo"] .multi-band { border-radius: 999px; }
/* A faixa da sessão: uma tira de orla a correr, na cor do tenant. */
html[data-design="fluxo"] .fill-orla,
html[data-design="fluxo"] .fill-cnc {
    background: repeating-linear-gradient(-45deg, var(--pflow-brand) 0 10px, color-mix(in srgb, var(--pflow-brand) 68%, var(--card-bg)) 10px 20px);
    background-size: 200% 100%;
}
html[data-design="fluxo"] .fill-cut { background: var(--o-hazard); }
html[data-design="fluxo"] .multi-band.paused { background: var(--o-led-idle) !important; }
html[data-design="fluxo"] .op-reader { border-radius: var(--radius-card); box-shadow: var(--o-shadow-panel); }
html[data-design="fluxo"] .table-section { border-radius: var(--radius-card); box-shadow: var(--o-shadow-panel); }
html[data-design="fluxo"] .op-suggest-card.is-selected { border-color: var(--o-led-ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--o-led-ok) 40%, transparent); }
html[data-design="fluxo"] .form-section select.form-control { border-radius: var(--radius-control); }

/* ─── Pica-ponto e presença ──────────────────────────────────────────── */

html[data-design="fluxo"] .checkin-card { border-radius: 16px; box-shadow: var(--o-shadow-panel); }
html[data-design="fluxo"] .type-choice-btn { border-radius: var(--radius-card); box-shadow: var(--o-shadow-low); }
html[data-design="fluxo"] .type-choice-btn:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--o-brand-ink) 35%, transparent), var(--o-shadow-low); }
html[data-design="fluxo"] .type-choice-btn:active,
html[data-design="fluxo"] .compact-card:active,
html[data-design="fluxo"] .checkin-btn:active { transform: none; }
html[data-design="fluxo"] .type-choice-btn i,
html[data-design="fluxo"] .icon-loc { color: var(--o-led-info); }
html[data-design="fluxo"] .type-choice-btn.obra-btn i,
html[data-design="fluxo"] .icon-obra { color: var(--o-led-warn); }
html[data-design="fluxo"] .obra-search { border: 1px solid var(--input-border); border-radius: var(--radius-control); }
html[data-design="fluxo"] .compact-card { border-radius: var(--radius-sub); box-shadow: var(--o-shadow-low); }
html[data-design="fluxo"] .compact-card:hover,
html[data-design="fluxo"] .compact-card.suggested { box-shadow: 0 0 0 2px color-mix(in srgb, var(--o-led-ok) 40%, transparent), var(--o-shadow-low); }
html[data-design="fluxo"] .badge-obra { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border); }
html[data-design="fluxo"] .badge-loc { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-border); }
html[data-design="fluxo"] .checkin-btn { border-radius: var(--radius-sub); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
html[data-design="fluxo"] .btn-checkout { background-color: var(--o-solid-danger); }
html[data-design="fluxo"] .btn-checkout:hover { background-color: var(--o-solid-danger); filter: brightness(1.07); }
html[data-design="fluxo"] .entry-time-display { font-weight: 650; letter-spacing: -.02em; }
html[data-design="fluxo"] .presence-summary-pill.working { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border); }
html[data-design="fluxo"] .presence-summary-pill.in-session { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-border); }
html[data-design="fluxo"] .presence-summary-pill.overdue { color: var(--danger-fg); background: var(--danger-bg); border-color: var(--danger-border); }
html[data-design="fluxo"] .presence-search { border-color: var(--input-border); border-radius: var(--radius-control); }
html[data-design="fluxo"] .presence-search:focus { border-color: var(--o-brand-ink); box-shadow: var(--focus-ring); }
html[data-design="fluxo"] .presence-person-card { border-radius: var(--radius-card); box-shadow: var(--o-shadow-panel); }
html[data-design="fluxo"] .presence-person-card.is-working { border-color: var(--ok-border); box-shadow: 0 1px 0 var(--o-edge), inset 0 -3px 0 var(--o-led-ok); }
html[data-design="fluxo"] .presence-avatar { background: var(--surface-sunk); }
html[data-design="fluxo"] .presence-state-dot { border-radius: 4px; border-color: var(--card-bg); background: var(--o-led-danger); }
html[data-design="fluxo"] .is-working .presence-state-dot { background: var(--o-led-ok); }
html[data-design="fluxo"] .presence-state-label { color: var(--danger-fg); background: var(--danger-bg); }
html[data-design="fluxo"] .is-working .presence-state-label { color: var(--ok-fg); background: var(--ok-bg); }
html[data-design="fluxo"] .presence-session-badge { color: var(--info-fg); background: var(--info-bg); }
html[data-design="fluxo"] .presence-elapsed { color: var(--muted-color); background: var(--surface-sunk); font-family: var(--font-mono); }
html[data-design="fluxo"] .presence-elapsed.warning { color: var(--warn-fg); background: var(--warn-bg); }
html[data-design="fluxo"] .presence-elapsed.critical { color: var(--danger-fg); background: var(--danger-bg); }

/* ─── Login por PIN ──────────────────────────────────────────────────── */

html[data-design="fluxo"] .pinpadnumber {
    color: var(--text-color);
    background: var(--card-bg);
    border-width: 1px;
    border-color: var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--o-shadow-panel);
    font-weight: 620;
}
html[data-design="fluxo"] .pinpadnumber:hover { border-color: var(--input-border); }
html[data-design="fluxo"] .pinpadnumber.pinpad-confirm { color: var(--pflow-brand-contrast); background: var(--pflow-brand); border-color: transparent; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
/* A tecla "C" vem com style="background-color: lightcoral" no markup. */
html[data-design="fluxo"] .pinpadnumber[style*="lightcoral"] { color: var(--danger-fg); background-color: var(--danger-bg) !important; border-color: var(--danger-border); }
html[data-design="fluxo"] .bordered-authuser { border-width: 3px; border-color: var(--pflow-brand); }
html[data-design="fluxo"] .authuser { font-weight: 620; }

/* ─── KPIs locais e cartões de custo ─────────────────────────────────── */

html[data-design="fluxo"] .cost-card.profit { border-left-color: var(--o-led-ok); }
html[data-design="fluxo"] .cost-card.loss { border-left-color: var(--o-led-danger); }