/* ============================================================
   Sanfarma - Portal Executivo - Design System v2
   Fonte unica de tokens e componentes compartilhados.
   Carregado via /static/css/app.css?v={{ static_version }}.
   ============================================================ */

/* Geist self-hospedada: woff2 variavel unico (pesos 100-900), servido
   de /static com Cache-Control imutavel. Substitui o Google Fonts CDN
   (sem render-blocking, sem preconnect, sem dependencia externa).
   Licenca OFL 1.1 em /static/fonts/Geist-OFL.txt */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/Geist-Variable.woff2') format('woff2');
}

:root {
    /* Marca - azul oficial do logo Sanfarma (#127EC4) */
    --sf-blue: #127EC4;
    --sf-blue-dark: #0E649C;
    --sf-blue-900: #0A4A75;
    --sf-blue-light: #E3F0FA;
    --sf-blue-border: #A9CFE9;
    --sf-focus-ring: rgba(18, 126, 196, 0.20);

    /* Neutros - escala slate */
    --sf-ink: #0F1B2D;
    --sf-ink-2: #44546A;
    --sf-ink-3: #64748B;
    --sf-line: #E2E8F0;
    --sf-line-light: #EDF2F7;
    --sf-surface: #F6F8FA;
    --sf-card: #FFFFFF;
    --sf-bg: #F6F8FA;

    /* Status colors (semanticas de dados - isentas da regra de accent unico) */
    --critica: #D92D20;
    --critica-light: #FCEBE8;
    --alta: #DC6803;
    --alta-light: #FCF0E4;
    --media: #D97706;
    --media-light: #FEF7E6;
    --baixa: #0E9F6E;
    --baixa-light: #E6F6EF;
    --info: #0EA5E9;
    --pos: #0E9F6E;
    --pos-light: #E6F6EF;
    --accent-purple: #6D28D9;
    --accent-purple-light: #F1EAFC;

    /* Radius lock: inputs/botoes 8px, cards 12px, paineis 16px, badges pill */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 28px;
    --r-pill: 999px;

    /* Aliases (keep existing names working) */
    --radius: var(--r-md);
    --radius-sm: var(--r-sm);

    /* Escala de espacamento 4/8 */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;

    /* Blue-tinted shadows */
    --shadow-sm: 0 1px 3px rgba(10, 74, 117, 0.06);
    --shadow: 0 2px 8px rgba(10, 74, 117, 0.08), 0 1px 2px rgba(10, 74, 117, 0.04);
    --shadow-lg: 0 12px 28px rgba(10, 74, 117, 0.12), 0 4px 8px rgba(10, 74, 117, 0.06);
    --shadow-brand: 0 8px 24px rgba(18, 126, 196, 0.28);
    --shadow-brand-lg: 0 16px 40px rgba(18, 126, 196, 0.22);

    /* Typography - familia unica Geist */
    --font-heading: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-ui: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-ui);
    background: var(--sf-bg);
    color: var(--sf-ink);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Headings usam a mesma familia (peso diferencia hierarquia) */
h1, h2, h3, .card__title {
    font-family: var(--font-heading);
}

/* Numeros tabulares: colunas de valores alinham em tabelas e grids */
table, .tabulator, .num {
    font-variant-numeric: tabular-nums;
}

/* Header */
header {
    background: var(--sf-card);
    border-bottom: 1px solid var(--sf-line);
    padding: 0.75rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(10, 74, 117, 0.05);
}
.top-bar {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--sf-ink);
}
.brand-logo {
    height: 38px;
    width: auto;
    display: block;
}
.brand-sub {
    font-size: 0.78rem;
    color: var(--sf-ink-3);
    font-weight: 500;
    padding-left: 0.75rem;
    border-left: 1px solid var(--sf-line);
}
.user-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--sf-ink-2);
}
.user-bar a {
    color: var(--sf-ink-2);
    text-decoration: none;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: var(--r-pill);
    transition: color 0.18s, background 0.18s;
}
.user-bar a:hover {
    background: var(--sf-blue-light);
    color: var(--sf-blue-dark);
}
.user-bar a.is-active {
    color: white;
    background: var(--sf-blue);
    box-shadow: 0 2px 8px rgba(18, 126, 196, 0.25);
}
.user-bar span {
    font-weight: 600;
    color: var(--sf-ink);
    padding: 0.4rem 0.5rem;
}
.nav-toggle {
    display: none;
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--r-md);
    padding: 0.45rem 0.55rem;
    cursor: pointer;
    color: var(--sf-ink-2);
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.nav-toggle:hover { background: var(--sf-blue-light); }

/* Aviso */
.aviso {
    background: var(--sf-blue-light);
    border-bottom: 1px solid var(--sf-blue-border);
    padding: 0.75rem 1.5rem;
    font-size: 0.88rem;
    color: var(--sf-blue-dark);
}
.aviso__inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.aviso__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: var(--sf-blue);
    color: white;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
}
.aviso strong { font-weight: 700; }

main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem;
}
main.main--wide { max-width: min(1820px, 96vw); }

/* Page header */
.page-header {
    margin-bottom: 1.5rem;
}
.page-header h2 {
    margin: 0 0 0.35rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sf-ink);
}
.page-header p {
    margin: 0;
    color: var(--sf-ink-3);
}
.page-header__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--sf-ink-3);
}
.breadcrumbs a {
    color: var(--sf-blue);
    text-decoration: none;
    font-weight: 600;
}
.breadcrumbs a:hover { text-decoration: underline; }
.timestamp {
    font-size: 0.82rem;
    color: var(--sf-ink-3);
    font-weight: 500;
}

/* Cards */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.card {
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.card__header {
    padding: 1.25rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--sf-line-light);
}
.card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sf-ink);
}
.card__subtitle {
    font-size: 0.85rem;
    color: var(--sf-ink-3);
    margin-top: 0.25rem;
    font-weight: 500;
}
.card__body {
    padding: 1rem 1.25rem;
    flex: 1;
}
.card__footer {
    padding: 0.75rem 1.25rem 1.25rem;
}
.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--sf-line-light);
}
.metric-row:last-child { border-bottom: none; }
.metric-row__label {
    color: var(--sf-ink-2);
    font-size: 0.88rem;
}
.metric-row__value {
    font-weight: 700;
    font-size: 0.95rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--sf-blue);
    color: white;
    padding: 0.65rem 1.1rem;
    border-radius: var(--r-pill);
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-size: 0.88rem;
    font-family: var(--font-ui);
    transition: background 0.18s, transform 0.08s, box-shadow 0.18s;
    line-height: 1.3;
}
.btn:hover {
    background: var(--sf-blue-dark);
    box-shadow: 0 4px 12px rgba(18, 126, 196, 0.25);
}
.btn:active { transform: scale(0.98); }
.btn-secondary {
    background: var(--sf-card);
    color: var(--sf-ink-2);
    border: 1px solid var(--sf-line);
}
.btn-secondary:hover {
    background: var(--sf-blue-light);
    color: var(--sf-blue-dark);
    box-shadow: none;
}
.btn-block { width: 100%; }
.btn-sm { padding: 0.45rem 0.85rem; font-size: 0.82rem; }
.btn-icon { padding: 0.5rem; }

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}
.badge-critica { background: var(--critica-light); color: var(--critica); }
.badge-alta { background: var(--alta-light); color: var(--alta); }
.badge-media { background: var(--media-light); color: var(--media); }
.badge-baixa { background: var(--baixa-light); color: var(--baixa); }
.badge-outline {
    background: transparent;
    border: 1px solid currentColor;
}
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.5rem;
    border-radius: var(--r-pill);
    font-size: 0.85rem;
    font-weight: 700;
}

/* Tables */
.table-wrap {
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.table-wrap table { min-width: 1100px; }
thead th {
    background: var(--sf-surface);
    color: var(--sf-ink-2);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--sf-line);
    white-space: nowrap;
    text-align: left;
}
tbody tr {
    border-bottom: 1px solid var(--sf-line-light);
    transition: background 0.12s;
}
tbody tr:nth-child(even) { background: rgba(232, 242, 251, 0.35); }
tbody tr:hover { background: var(--sf-blue-light); }
tbody td {
    padding: 1rem;
    vertical-align: top;
}
.td-product { min-width: 240px; }
.product-code {
    font-weight: 700;
    color: var(--sf-ink);
    font-size: 0.95rem;
}
.product-name {
    color: var(--sf-ink-2);
    font-size: 0.86rem;
    margin-top: 0.2rem;
    line-height: 1.4;
}
.product-meta {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--sf-ink-3);
}
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.number-stack {
    text-align: right;
    line-height: 1.45;
}
.number-stack .main {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--sf-ink);
}
.number-stack .sub {
    font-size: 0.78rem;
    color: var(--sf-ink-3);
}
.muted { color: var(--sf-ink-3); }

/* Motivos list */
.motivos {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.83rem;
    color: var(--sf-ink-2);
    line-height: 1.5;
}
.motivos li { margin: 0.15rem 0; }

/* Empty state */
.empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--sf-ink-3);
}
.empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    color: var(--sf-line);
}

/* Slide-over */
.slide-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 74, 117, 0.35);
    backdrop-filter: blur(2px);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.slide-overlay.active {
    opacity: 1;
    visibility: visible;
}
.slide-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 100vw);
    background: var(--sf-card);
    box-shadow: -12px 0 48px rgba(10, 74, 117, 0.15);
    z-index: 210;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
.slide-panel.active { transform: translateX(0); }
.slide-panel__header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--sf-line);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.slide-panel__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sf-ink);
}
.slide-panel__subtitle {
    margin: 0.25rem 0 0;
    color: var(--sf-ink-3);
    font-size: 0.88rem;
}
.slide-panel__close {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--sf-ink-2);
    display: grid;
    place-items: center;
    transition: background 0.15s, color 0.15s;
}
.slide-panel__close:hover {
    background: var(--sf-blue-light);
    color: var(--sf-blue-dark);
}
.slide-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}
.slide-panel__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--sf-line);
    background: var(--sf-surface);
    font-size: 0.85rem;
    color: var(--sf-ink-3);
}

/* Pedido cards dentro do slide-over */
.pedido-card {
    border: 1px solid var(--sf-line);
    border-radius: var(--r-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: var(--sf-card);
    transition: box-shadow 0.15s;
}
.pedido-card:hover { box-shadow: var(--shadow-sm); }
.pedido-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.pedido-card__pedido {
    font-weight: 700;
    font-size: 1rem;
    color: var(--sf-ink);
}
.pedido-card__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
    font-size: 0.86rem;
}
.pedido-card__grid div { display: flex; flex-direction: column; }
.pedido-card__grid span:first-child { color: var(--sf-ink-3); font-size: 0.78rem; }
.pedido-card__grid span:last-child { color: var(--sf-ink); font-weight: 600; }
.pedido-card__alert {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--r-md);
    background: var(--critica-light);
    color: var(--critica);
    font-size: 0.84rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pedido-card__info {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--r-md);
    background: var(--sf-blue-light);
    color: var(--sf-blue-dark);
    font-size: 0.84rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Summary chips */
.summary-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.summary-chip {
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--r-lg);
    padding: 0.85rem 1.1rem;
    min-width: 140px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.18s;
}
.summary-chip:hover {
    box-shadow: var(--shadow);
}
.summary-chip__label {
    font-size: 0.75rem;
    color: var(--sf-ink-3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.summary-chip__value {
    font-size: 1.4rem;
    font-weight: 800;
    margin-top: 0.15rem;
    font-family: var(--font-heading);
    color: var(--sf-ink);
}
.summary-chip--sm { min-width: 120px; padding: 0.65rem 0.9rem; }
.summary-chip--sm .summary-chip__value { font-size: 1.2rem; }

/* Toolbar (filtros/ações acima de tabelas e grids) */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
}
.toolbar .campo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: var(--sf-ink-2);
}
.toolbar select,
.toolbar input[type="search"],
.toolbar input[type="text"] {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--sf-line);
    border-radius: var(--r-md);
    font: inherit;
    font-size: 0.9rem;
    background: var(--sf-card);
    color: var(--sf-ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.toolbar select:focus,
.toolbar input[type="search"]:focus,
.toolbar input[type="text"]:focus {
    outline: none;
    border-color: var(--sf-blue);
    box-shadow: 0 0 0 3px var(--sf-focus-ring);
}
.toolbar input[type="search"] { min-width: 220px; }
.toolbar .spacer { flex: 1; }

/* Tabulator no padrao visual do portal */
.tabulator {
    border: 1px solid var(--sf-line);
    border-radius: var(--r-lg);
    background: var(--sf-card);
    font-size: 0.88rem;
}
.tabulator .tabulator-header {
    background: var(--sf-surface);
    border-bottom: 1px solid var(--sf-line);
}
.tabulator .tabulator-header .tabulator-col {
    background: transparent;
}
.tabulator .tabulator-header .tabulator-col-title {
    font-weight: 600;
    color: var(--sf-ink-2);
}
.tabulator-row.tabulator-row-even { background: rgba(232, 242, 251, 0.25); }
.tabulator .tabulator-footer { background: var(--sf-surface); }
.tabulator .tabulator-group { background: var(--sf-blue-light); font-weight: 600; }
.tabulator .tabulator-responsive-collapse { padding: 0.5rem 0.75rem; }
.tabulator .tabulator-responsive-collapse table { min-width: 0; font-size: 0.85rem; }

/* Celulas ricas (formatters HTML) precisam quebrar linha dentro do Tabulator */
.tabulator-cell .product-name,
.tabulator-cell .motivos,
.tabulator-cell .product-meta { white-space: normal; }
.tabulator-row .tabulator-cell { vertical-align: top; }

/* Densidade compacta (SFGrid) */
.sf-grid--compact .tabulator-row .tabulator-cell { padding: 4px 6px; }
.sf-grid--compact.tabulator { font-size: 0.82rem; }
.sf-grid--compact .tabulator-header .tabulator-col-content { padding: 6px; }

/* Seletor de colunas visiveis (SFGrid) */
.sf-colpicker {
    position: absolute;
    z-index: 300;
    width: 220px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.sf-colpicker label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--r-sm);
    font-size: 0.88rem;
    cursor: pointer;
}
.sf-colpicker label:hover { background: var(--sf-surface); }

.summary-chip__value.neg { color: var(--critica); }
.summary-chip__value.pos { color: var(--pos); }

/* Fluxo de Caixa */
.fc-fontes { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.fc-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.fc-table-wrap {
    overflow: auto;
    max-height: 70vh;
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
table.fc-grade { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fc-grade th, .fc-grade td { padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--sf-line-light); white-space: nowrap; }
.fc-grade th { position: sticky; top: 0; background: var(--sf-card); text-align: right; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sf-ink-3); z-index: 2; }
.fc-grade th:first-child, .fc-grade td:first-child { text-align: left; }
/* 1a coluna congelada */
.fc-grade td:first-child { position: sticky; left: 0; background: var(--sf-card); z-index: 1; }
.fc-grade th:first-child { left: 0; z-index: 3; }
.fc-grade td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fc-grade tr.nao-util { background: var(--sf-surface); color: var(--sf-ink-3); }
.fc-grade tr.nao-util td:first-child { background: var(--sf-surface); }
.fc-grade tr.hoje { background: var(--sf-blue-light); }
.fc-grade tr.hoje td:first-child { background: var(--sf-blue-light); }
.fc-grade tr.passado { color: var(--sf-ink-3); background: var(--sf-surface); }
.fc-grade tr.passado td:first-child { background: var(--sf-surface); }
.fc-grade tr:hover { background: var(--sf-blue-light); cursor: pointer; }
.fc-grade tr:hover td:first-child { background: var(--sf-blue-light); }
.fc-grade td.total { font-weight: 600; border-left: 1px solid var(--sf-line-light); }
.fc-grade tr.fc-resumo-mes { background: var(--sf-surface); font-weight: 600; }
.fc-grade tr.fc-resumo-mes td { border-top: 2px solid var(--sf-line); border-bottom: 2px solid var(--sf-line); }
.fc-grade tr.fc-resumo-mes td:first-child { background: var(--sf-surface); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.03em; color: var(--sf-ink-3); }
.fc-grade tr.fc-resumo-mes:hover, .fc-grade tr.fc-resumo-mes:hover td:first-child { background: var(--sf-surface); cursor: default; }
.fc-grade td .neg { color: var(--critica); font-weight: 600; }
.fc-grade td .pos { color: var(--pos); }
.fc-grade tr.distorcao td { background: var(--critica-light); }
.fc-grade .saldo-real-input {
    width: 110px; text-align: right; padding: 0.2rem 0.35rem; font-size: 0.85rem;
    border: 1px solid var(--sf-line); border-radius: var(--r-sm);
    font-variant-numeric: tabular-nums;
}
.fc-grade .saldo-real-input.declarado { border-color: var(--pos); background: var(--pos-light); font-weight: 600; }
.fc-grade .btn-ajuste { border: none; background: none; color: var(--sf-blue); cursor: pointer; font-weight: 700; }
.fc-aviso { background: var(--media-light); border: 1px solid var(--media); color: var(--media); border-radius: var(--r-md); padding: 0.6rem 0.9rem; margin-bottom: 1rem; font-size: 0.88rem; }
.fc-ajustes { margin-top: 1.5rem; }
.fc-ajustes table { font-size: 0.85rem; border-collapse: collapse; }
.fc-ajustes th, .fc-ajustes td { padding: 0.35rem 0.7rem; border-bottom: 1px solid var(--sf-line-light); text-align: right; }
.fc-ajustes td.destaque { color: var(--critica); font-weight: 700; }
dialog.fc-dialog { border: none; border-radius: var(--r-xl); padding: 1.25rem; box-shadow: 0 20px 50px rgba(10, 74, 117, 0.25); min-width: 320px; }
dialog.fc-dialog::backdrop { background: rgba(10, 74, 117, 0.35); }
dialog.fc-dialog label { display: block; font-size: 0.8rem; color: var(--sf-ink-3); margin: 0.6rem 0 0.2rem; }
dialog.fc-dialog input, dialog.fc-dialog textarea { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--sf-line); border-radius: var(--r-sm); font-size: 0.9rem; }
dialog.fc-dialog .acoes { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* Relatorios (Yris) */
.rep-layout { max-width: 900px; margin: 0 auto; }
.rep-resultado {
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem 2rem;
    margin-top: 1rem;
    line-height: 1.65;
    overflow-x: auto;
}
.rep-resultado h1 { font-size: 1.45rem; margin-top: 0; font-family: var(--font-heading); }
.rep-resultado h2 { font-size: 1.1rem; margin-top: 1.5rem; border-bottom: 1px solid var(--sf-line-light); padding-bottom: 0.3rem; font-family: var(--font-heading); }
.rep-resultado table { min-width: 0; width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.rep-resultado th, .rep-resultado td { border: 1px solid var(--sf-line); padding: 0.5rem 0.75rem; text-align: left; }
.rep-resultado th { background: var(--sf-surface); }
.rep-resultado blockquote { border-left: 3px solid var(--sf-blue); margin: 0; padding: 0.25rem 1rem; color: var(--sf-ink-2); }

/* Contrato visual do relatorio */
.rep-contexto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    background: var(--sf-blue-light);
    border: 1px solid var(--sf-blue-border);
    border-radius: var(--r-md);
    font-size: 0.85rem;
    color: var(--sf-ink-2);
}
.rep-contexto strong { color: var(--sf-blue-dark); }
.rep-contexto + .summary-bar { margin-top: 1rem; }
.rep-tabela { margin-top: 1.25rem; }
.rep-bullets { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.rep-bullets li { margin: 0.25rem 0; font-size: 0.88rem; color: var(--sf-ink-2); }
.rep-como {
    margin-top: 1.25rem;
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--r-md);
    padding: 0.7rem 1rem;
}
.rep-como > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--sf-ink-2);
}
.rep-como > summary:hover { color: var(--sf-blue-dark); }
.rep-confianca { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.rep-confianca__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--r-pill);
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--baixa-light);
    color: var(--baixa);
}
.rep-confianca__chip--aviso {
    background: var(--media-light);
    color: var(--media);
}
/* Card de destaque textual */
.summary-chip--texto .summary-chip__value {
    font-size: 0.98rem;
    line-height: 1.35;
    font-weight: 600;
}

/* ============================================================
   Formularios (login, conta; admin adota no PR 7 da #101)
   ============================================================ */
.form-card { max-width: 480px; padding: 1.5rem; }
.form-card .campo { display: block; margin-bottom: 0.9rem; }
.form-card .campo:last-of-type { margin-bottom: 1.2rem; }
.form-card input,
.login-wrap input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--sf-ink);
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: var(--r-md);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.form-card input { margin-top: 0.35rem; }
.form-card input:focus,
.login-wrap input:focus {
    outline: none;
    border-color: var(--sf-blue);
    background: var(--sf-card);
    box-shadow: 0 0 0 3px var(--sf-focus-ring);
}

/* ============================================================
   Login (pagina standalone: importa app.css, nao estende base)
   ============================================================ */
body.login {
    min-height: 100vh;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--sf-surface) 0%, var(--sf-card) 60%, var(--sf-blue-light) 100%);
}
.login-wrap { width: 100%; max-width: 400px; }
.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    text-align: center;
}
.login-logo { width: 210px; height: auto; display: block; }
.login-brand h1 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-family: var(--font-heading);
    color: var(--sf-ink);
}
.login-brand span { font-size: 0.88rem; color: var(--sf-ink-3); font-weight: 500; }
.login-wrap form {
    background: var(--sf-card);
    border: 1px solid var(--sf-line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
}
.login-wrap .field { margin-bottom: 1.1rem; }
.login-wrap label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sf-ink-3);
    margin-bottom: 0.4rem;
}
.login-wrap .btn { padding: 0.8rem 1rem; font-size: 0.95rem; margin-top: 0.5rem; }
.login-wrap .erro {
    background: var(--critica-light);
    color: var(--critica);
    border: 1px solid var(--critica);
    border-radius: var(--r-md);
    padding: 0.7rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.login-wrap .foot { text-align: center; font-size: 0.8rem; color: var(--sf-ink-3); margin-top: 1.5rem; }

/* ============================================================
   Home (hub de modulos)
   ============================================================ */
.home-hero { margin: 2.5rem 0 2rem; text-align: center; }
.home-hero h2 {
    margin: 0 0 0.4rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-family: var(--font-heading);
    color: var(--sf-ink);
}
.home-hero p { margin: 0; color: var(--sf-ink-3); font-size: 1rem; }
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
    justify-content: center;
    gap: 1.25rem;
}
.module-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.75rem;
    text-decoration: none;
    color: var(--sf-ink);
    border-radius: var(--r-xl);
    transition: box-shadow 0.2s, transform 0.2s;
}
.module-card:hover {
    box-shadow: var(--shadow-brand-lg);
    transform: translateY(-3px);
}
.module-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    background: var(--sf-blue-light);
    color: var(--sf-blue-dark);
    transition: transform 0.2s;
}
.module-card:hover .module-card__icon { transform: scale(1.05); }
.module-card h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--sf-ink);
}
.module-card p {
    margin: 0;
    color: var(--sf-ink-2);
    font-size: 0.92rem;
    line-height: 1.5;
}
.module-card .btn { margin-top: 0.75rem; align-self: flex-start; }
@media (max-width: 768px) {
    .home-hero { margin: 1.5rem 0 1.25rem; }
    .home-hero h2 { font-size: 1.5rem; }
    .module-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   PR 5 (#101) — Grids: index (producao), maquina, planilha, compra + drills.
   Consolida os <style>/style= extraidos dos templates de grid.
   ============================================================ */

/* Acoes do cabecalho da pagina (botao "Analisar com Yris" + timestamp).
   Mesmo padrao inline em index/maquina/compra — regra unica cobrindo os dois
   nomes de classe usados nas specs (page-header__actions == header-actions). */
.page-header__actions,
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Subtitulo do CC no cabecalho da pagina da maquina. */
.page-header__cc {
    color: var(--sf-ink-3);
    font-size: 1rem;
    font-weight: 500;
}

/* Status do grid (contador de linhas). Coexiste com o id #grid-status lido
   pelo grid.js — so a classe e estilizada. Compartilhado maquina/planilha/compra. */
.grid-status {
    font-size: 0.85rem;
    color: var(--sf-ink-3);
}

/* Banner "grid truncado" (planilha). Default display:none; grid.js troca
   para block quando ha corte de linhas — o contrato JS e preservado. */
.grid-truncado {
    display: none;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--r-sm);
    background: var(--media-light);
    border: 1px solid var(--media);
    color: var(--media);
    font-size: 0.9rem;
}

/* index — destaques ("por onde comecar"). Card elevado igual .card/.summary-chip:
   fundo --sf-card (nao --sf-surface). Tokens legados remapeados na paleta aprovada. */
.destaques { margin-bottom: 1.25rem; }
.destaques__head {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--sf-ink-3);
}
.destaques__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem;
}
.destaque {
    display: flex; align-items: center; gap: 0.85rem;
    background: var(--sf-card); border: 1px solid var(--sf-line);
    border-left: 4px solid var(--critica); border-radius: var(--r-md);
    padding: 0.85rem 1rem; text-decoration: none; color: var(--sf-ink);
    box-shadow: var(--shadow-sm); transition: box-shadow 0.15s, transform 0.15s;
}
.destaque:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.destaque__rank {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: var(--critica-light); color: var(--critica);
    display: grid; place-items: center; font-weight: 700; font-size: 0.9rem;
}
.destaque__rank--ok { background: var(--baixa-light); color: var(--baixa); }
.destaque__body { flex: 1; min-width: 0; }
.destaque__title { font-weight: 700; font-size: 0.98rem; }
.destaque__meta {
    font-size: 0.82rem; color: var(--sf-ink-3); margin-top: 0.2rem;
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.destaque__chevron { flex-shrink: 0; color: var(--sf-ink-3); }
.destaque--ok {
    border-left-color: var(--baixa); color: var(--sf-ink-2);
    font-weight: 600; font-size: 0.92rem;
}

/* index — agrupamento por setor. */
.setor { margin-bottom: 1.75rem; }
.setor__head {
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
    margin-bottom: 0.85rem; padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--sf-line);
}
.setor__nome { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--sf-ink); }
.setor__meta { font-size: 0.82rem; color: var(--sf-ink-3); font-weight: 500; }
.setor__meta-critico { color: var(--critica); font-weight: 600; }

/* index — modificadores de status extraidos de style= inline. */
.pill--critica { background: var(--critica-light); color: var(--critica); }
.metric-row__value--critica { color: var(--critica); }

/* Drill de pedidos por maquina (slide-over) — antes um <style> no partial. */
.slide-summary .summary-bar { margin-bottom: 1.25rem; }
.slide-summary .summary-chip { padding: 0.6rem 0.85rem; min-width: auto; }
.slide-summary .summary-chip__value { font-size: 1.1rem; }
.drill-section-title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700; }
.pedido-card__info--spaced { margin-top: 0.5rem; }

/* compra — subtitulos (<h4>) das tabelas do drill de compra. */
.drill-subtitle { margin: 1.25rem 0 0.5rem; }

/* compra — modificador de alerta p/ valor da summary-chip (espelha .pos/.neg
   ~L763). Usado em "Recebimentos atrasados" quando total_atrasados > 0. */
.summary-chip__value.warn { color: var(--alta); }

/* ============================================================
   PR 6 (#101) — Relatorios (fluxo do gerador) + Fluxo de Caixa
   (comparador/dialog/drill) + relatorio_detalhe.
   Fluxo de DETALHE (RelatorioView) ja coberto em "Relatorios (Yris)".
   ============================================================ */

/* --- relatorios: form / exemplos / etapas / feedback / historico --- */
.rep-form textarea {
    width: 100%;
    min-height: 110px;
    padding: 0.9rem 1rem;
    border: 1px solid var(--sf-line);
    border-radius: var(--r-md);
    font: inherit;
    font-size: 1rem;
    resize: vertical;
    background: var(--sf-surface);
}
.rep-form textarea:focus { outline: 2px solid var(--sf-blue); border-color: transparent; }

.rep-exemplos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.rep-exemplo {
    border: 1px solid var(--sf-line);
    background: var(--sf-surface);
    border-radius: var(--r-pill);
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    color: var(--sf-ink-2);
    cursor: pointer;
}
.rep-exemplo:hover { background: var(--sf-blue-light); color: var(--sf-blue-dark); }

.rep-steps { list-style: none; margin: 1rem 0; padding: 0; }
.rep-steps li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0;
    color: var(--sf-ink-2);
    font-size: 0.92rem;
}
.rep-steps .dot {
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 0.72rem; font-weight: 700;
    background: var(--sf-line-light); color: var(--sf-ink-3);
}
.rep-steps li.ok .dot { background: var(--baixa-light); color: var(--baixa); }
.rep-steps li.fallback .dot { background: var(--media-light); color: var(--media); }
.rep-steps li.ativo .dot {
    background: var(--sf-blue-light); color: var(--sf-blue-dark);
    animation: pulsar 1.2s ease-in-out infinite;
}
@keyframes pulsar { 50% { opacity: 0.45; } }

.rep-feedback { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.rep-feedback .btn-secondary.ativo { border-color: var(--sf-blue); color: var(--sf-blue-dark); background: var(--sf-blue-light); }
.rep-erro {
    background: var(--critica-light); color: var(--critica);
    border-radius: var(--r-md); padding: 1rem 1.25rem; margin-top: 1rem; font-weight: 600;
}
/* Erro inline do detalhe de relatorio: texto simples, sem a caixa da .rep-erro
   (preserva o render original — era style="color:var(--critica);font-weight:600") */
.rep-erro-inline { color: var(--critica); font-weight: 600; }
.rep-hist { margin-top: 2.5rem; }
.rep-hist table { min-width: 0; }
.rep-status { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.rep-status.done, .rep-status.degraded { color: var(--baixa); }
.rep-status.running { color: var(--info); }
.rep-status.error { color: var(--critica); }

/* style= estaticos migrados p/ classe (JS sobrescreve display via element.style) */
.rep-aviso-tempo { display: none; margin-left: 0.75rem; }
.is-hidden { display: none; }

/* --- relatorio_detalhe: metadados + acao (erro/feedback reusam .rep-erro/.rep-feedback acima) --- */
.rep-meta { color: var(--sf-ink-3); font-size: 0.85rem; }
.rep-detalhe__acao { margin-top: 0.5rem; }

/* --- fluxo: notas/toolbar/dialog (substitui style= inline de fluxo.html) --- */
.fc-chip-nota { font-size: 0.75rem; }
.fc-toolbar-acoes { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fc-nota { font-size: 0.8rem; }
.fc-nota-bloco { font-size: 0.8rem; margin: 0.3rem 0; }
.fc-comparador-nota { font-size: 0.85rem; }
.fc-dialog h3 { margin: 0; }
.fc-dialog__ajuda { font-size: 0.85rem; margin: 0.3rem 0 0; }

/* --- fluxo drill do dia (_drill_dia.html): <style> extraido, tokens legados
   corrigidos p/ os canonicos do :root --- */
.drill-fc h4 { margin: 1rem 0 0.4rem; font-size: 0.95rem; }
.drill-fc table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.drill-fc th, .drill-fc td { padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--sf-line-light); text-align: left; }
.drill-fc td.num, .drill-fc th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.drill-fc tr.ignorado td { text-decoration: line-through; color: var(--sf-ink-3); }
.drill-fc .tag { display: inline-block; font-size: 0.68rem; padding: 0.08rem 0.4rem; border-radius: var(--r-pill); margin-left: 0.3rem; }
.drill-fc .tag-prev { background: var(--media-light); color: var(--media); }
.drill-fc .btn-mini { border: 1px solid var(--sf-line); background: var(--sf-surface); border-radius: var(--r-sm); padding: 0.1rem 0.5rem; font-size: 0.72rem; cursor: pointer; }
.drill-fc .btn-mini:hover { background: var(--sf-bg); }
.drill-fc .total { font-weight: 700; }
.drill-fc .vazio { color: var(--sf-ink-3); font-size: 0.85rem; padding: 0.4rem 0; }

/* Navegacao colapsada */
@media (max-width: 960px) {
    .nav-toggle { display: inline-flex; }
    .user-bar {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--sf-card);
        border-bottom: 1px solid var(--sf-line);
        box-shadow: var(--shadow-lg);
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        padding: 0.75rem 1.5rem 1rem;
        border-radius: 0 0 var(--r-lg) var(--r-lg);
    }
    .user-bar.open { display: flex; }
    .user-bar a { padding: 0.7rem 0.75rem; border-radius: var(--r-md); }
    .user-bar a.is-active { border-radius: var(--r-pill); }
    .user-bar span { padding: 0.7rem 0.75rem 0.35rem; color: var(--sf-ink-3); font-size: 0.82rem; }
}

/* Mobile */
@media (max-width: 768px) {
    main { padding: 1rem; }
    .page-header h2 { font-size: 1.35rem; }
    .grid-cards { grid-template-columns: 1fr; }
    table { font-size: 0.85rem; }
    tbody td { padding: 0.85rem 0.75rem; }

    /* Chips de resumo em grade 2xN */
    .summary-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .summary-chip { min-width: 0; }
    .summary-chip__value { font-size: 1.15rem; }

    /* Toolbars empilham */
    .toolbar { align-items: stretch; }
    .toolbar input[type="search"] { min-width: 0; flex: 1 1 100%; }
    .toolbar .campo { justify-content: space-between; }
    .fc-toolbar { flex-direction: column; align-items: stretch; }

    /* Relatorios */
    .rep-resultado { padding: 1.1rem 1rem; }

    /* alvo de toque >=40px nos chips de exemplo */
    .rep-exemplo { padding: 0.55rem 0.9rem; }

    /* Historico de relatorios vira cards */
    .rep-hist .table-wrap table { min-width: 0; }
    .rep-hist thead { display: none; }
    .rep-hist table, .rep-hist tbody, .rep-hist tr, .rep-hist td { display: block; width: 100%; }
    .rep-hist tr { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--sf-line-light); }
    .rep-hist td { padding: 0.1rem 0; border: none; }
}

/* HTMX indicator */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }