/* ==========================================================================
   Lançador Automático de Notas — tema claro
   Uma única família tipográfica (Geist) com mono para números e códigos.
   Superfícies brancas, bordas finas, sem gradientes nem sombras pesadas.
   Verde / âmbar / vermelho aparecem só em estados (ok / atenção / bloqueio).
   ========================================================================== */

/* Fontes vendorizadas (vendor/fonts, OFL): nada de CDN (CSP). */
@font-face {
    font-family: "Geist";
    src: url("/vendor/fonts/geist-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("/vendor/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --bg: #f5f5f3;
    --surface: #ffffff;
    --surface-2: #fafaf8;
    --surface-3: #f0f0ee;
    --border: #e6e6e2;
    --border-strong: #d0d0cb;
    --text: #1a1a1a;
    --text-2: #5c5c57;
    --text-3: #6f6f69;

    --ink: #1a1a1a;
    --ink-hover: #000000;

    /* Cores da marca, lidas da logo (assets/logo-bra.png). */
    --brand-green: #076835;
    --brand-green-dark: #05522a;
    --brand-yellow: #fed61f;
    --brand-yellow-dark: #f0c800;

    --accent: var(--brand-green);
    --accent-hover: var(--brand-green-dark);
    --accent-soft: #e7f2ec;
    --accent-ring: rgba(7, 104, 53, 0.24);

    --ok: #15803d;
    --ok-hover: #166f36;
    --ok-soft: #e8f5ec;
    --ok-border: #b9e0c6;
    --warn: #b45309;
    --warn-soft: #fdf4e6;
    --warn-border: #f1d6a8;
    --danger: #b91c1c;
    --danger-soft: #fdecec;
    --danger-border: #f2bdbd;

    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04);
    --shadow-md: 0 4px 14px -4px rgba(20, 20, 20, 0.1), 0 1px 2px rgba(20, 20, 20, 0.04);
    --shadow-lg: 0 16px 40px -12px rgba(20, 20, 20, 0.18), 0 2px 6px rgba(20, 20, 20, 0.06);

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --fast: 150ms;

    --nav-h: 96px;
    --strip-h: 32px;
    --page-max: 1400px;
}

/* --- Base ------------------------------------------------------------------ */

* {
    box-sizing: border-box;
}

/* `hidden` vence qualquer display: sem isto, um selo com display:inline-flex aparece escondido. */
[hidden] {
    display: none !important;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

a {
    color: var(--accent);
    text-decoration: none;
}

::selection {
    background: var(--accent-soft);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* --- Barra superior --------------------------------------------------------
   Formato do site da empresa: bloco verde com a logo à esquerda, faixa
   diagonal amarela, faixa superior amarela, links verdes e botão amarelo.
   -------------------------------------------------------------------------- */

.topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--nav-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topnav-inner {
    display: flex;
    align-items: stretch;
    height: 100%;
}

/* Bloco da logo: verde com a borda direita inclinada e uma faixa amarela ao lado. */
.brand-wrap {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 62px 0 28px;
}

.brand-wrap::before,
.brand-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
}

.brand-wrap::before {
    z-index: -2;
    background: var(--brand-green);
    clip-path: polygon(0 0, calc(100% - 46px) 0, calc(100% - 14px) 100%, 0 100%);
}

.brand-wrap::after {
    z-index: -1;
    background: var(--brand-yellow);
    clip-path: polygon(calc(100% - 46px) 0, calc(100% - 32px) 0, 100% 100%, calc(100% - 14px) 100%);
}

.brand {
    display: block;
    line-height: 0;
    border-radius: 4px;
}

.brand img {
    display: block;
    height: 58px;
    width: auto;
}

.topnav-main {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: -32px; /* encosta na faixa diagonal */
}

.topnav-strip {
    height: var(--strip-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 28px 0 62px;
    background: var(--brand-yellow);
    color: var(--brand-green-dark);
    font-size: 12.5px;
    font-weight: 500;
}

.strip-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topnav-row {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 28px 0 50px;
}

.topnav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
}

.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 12px;
    background: none;
    border: 0;
    color: var(--brand-green);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--fast) var(--ease);
}

.nav-item:hover {
    color: var(--brand-green-dark);
}

.nav-item.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--brand-yellow);
}

.nav-item b {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Página ---------------------------------------------------------------- */

.page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 28px 28px 72px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
    flex-wrap: wrap;
}

.page-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.page-lede {
    margin: 6px 0 0;
    color: var(--text-2);
    font-size: 14px;
    max-width: 62ch;
}

.page-foot {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--text-3);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.panel {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px 20px;
    box-shadow: var(--shadow-sm);
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.panel-heading h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.text-button {
    background: none;
    border: 0;
    padding: 4px 2px;
    border-radius: 4px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.text-button:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Botões ---------------------------------------------------------------- */

.primary-button,
.secondary-button,
.omie-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition:
        background-color var(--fast) var(--ease),
        border-color var(--fast) var(--ease),
        color var(--fast) var(--ease),
        box-shadow var(--fast) var(--ease);
}

button.primary-button {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
}

button.primary-button:hover:not(:disabled) {
    background: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

button.secondary-button,
a.secondary-button {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}

button.secondary-button:hover:not(:disabled),
a.secondary-button:hover {
    background: var(--surface-2);
    border-color: #b7b7b1;
}

button.omie-button {
    background: var(--brand-yellow);
    border-color: var(--brand-yellow);
    color: var(--brand-green-dark);
    font-weight: 700;
}

button.omie-button:hover:not(:disabled) {
    background: var(--brand-yellow-dark);
    border-color: var(--brand-yellow-dark);
}

button.primary-button:disabled,
button.secondary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

button.omie-button:disabled {
    background: var(--surface-3);
    border-color: var(--border);
    color: var(--text-3);
    cursor: not-allowed;
}

/* --- Selo de resultado ------------------------------------------------------- */

.result-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition:
        background-color var(--fast) var(--ease),
        color var(--fast) var(--ease);
}

.result-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-3);
    flex-shrink: 0;
}

.result-badge.ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.result-badge.ok::before {
    background: var(--ok);
}

.result-badge.blocked {
    background: var(--danger-soft);
    color: var(--danger);
}

.result-badge.blocked::before {
    background: var(--danger);
}

.validation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.validation-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 3px 10px 3px 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: default;
    transition:
        background-color var(--fast) var(--ease),
        border-color var(--fast) var(--ease);
}

.validation-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.validation-item p {
    margin: 0;
    font-weight: 500;
    white-space: nowrap;
}

.validation-item small {
    display: none;
    font-size: 12px;
    color: var(--warn);
}

.validation-item.has-reason small {
    display: inline;
}

.validation-item.has-reason p::after {
    content: "·";
    margin-left: 6px;
    color: var(--border-strong);
}

.validation-item .check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background-color var(--fast) var(--ease),
        border-color var(--fast) var(--ease);
}

.validation-item.ok {
    border-color: var(--ok-border);
    background: var(--ok-soft);
}

.validation-item.ok .check {
    background: var(--ok);
    border-color: var(--ok);
}

.validation-item.fail {
    border-color: var(--warn-border);
    background: var(--warn-soft);
}

.validation-item.fail .check {
    border-color: var(--warn);
}

/* Pendente leva ao campo que falta. */
.validation-item.fail {
    cursor: pointer;
}

.validation-item.fail:hover {
    border-color: var(--warn);
}

/* --- Abas (controle segmentado) --------------------------------------------- */

.nf-switcher {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    margin-bottom: 14px;
    border-radius: var(--radius);
    background: var(--surface-3);
}

.nf-switcher[hidden] {
    display: none;
}

.nf-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    max-width: 280px;
    padding: 0 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        background-color var(--fast) var(--ease),
        color var(--fast) var(--ease),
        box-shadow var(--fast) var(--ease);
}

.nf-tab:hover {
    color: var(--text);
}

.nf-tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow:
        var(--shadow-sm),
        0 0 0 1px var(--border);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.form-field span {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
}

.form-field input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    transition:
        border-color var(--fast) var(--ease),
        box-shadow var(--fast) var(--ease);
}

.form-field input::placeholder {
    color: var(--text-3);
}

.form-field input:hover:not(:focus) {
    border-color: #b7b7b1;
}

.form-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* --- Fila -------------------------------------------------------------------- */

.queue-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.queue-empty {
    padding: 40px 24px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 13px;
    text-align: center;
}

.queue-item {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color var(--fast) var(--ease);
    animation: item-enter 180ms var(--ease) both;
}

.queue-item:hover {
    border-color: var(--border-strong);
}

@keyframes item-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.queue-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.queue-item-head b {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.queue-item-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.queue-item-amount span {
    color: var(--text-3);
    font-size: 12px;
}

.queue-item-head small {
    display: block;
    margin-top: 3px;
    color: var(--text-3);
    font-size: 12px;
}

.queue-item-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0 0 14px;
    font-size: 13px;
}

.queue-item-fields > div {
    min-width: 0;
}

.queue-item-fields dt {
    margin-bottom: 2px;
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 500;
}

.queue-item-fields dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.queue-item-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Toast ------------------------------------------------------------------- */

#toast-root {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(420px, calc(100vw - 32px));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    box-shadow: var(--shadow-lg);
    animation: toast-in 180ms var(--ease) both;
}

.toast::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--ok);
    flex-shrink: 0;
}

.toast.error {
    border-color: var(--danger-border);
}

.toast.error::before {
    background: var(--danger);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Sessão (faixa amarela) ---------------------------------------------------- */

.top-strip-right {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}

.top-user {
    color: var(--brand-green-dark);
}

.strip-button {
    background: none;
    border: 0;
    padding: 2px 0;
    color: var(--brand-green-dark);
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.text-button.perigo,
button.secondary-button.perigo {
    color: var(--danger);
}

/* --- Fila: abas, histórico, descarte --------------------------------------------- */

.fila-abas {
    margin: 0;
}

.fila-aviso {
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-sm);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 13px;
}

.queue-historico {
    margin: 10px 0 12px;
    font-size: 12.5px;
    color: var(--text-2);
}

.queue-historico summary {
    cursor: pointer;
    font-weight: 500;
}

.queue-historico ol {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 0;
    padding-left: 18px;
}

.queue-historico b {
    color: var(--text);
}

.queue-historico q {
    display: block;
    margin-top: 2px;
    color: var(--text);
}

.descarte-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.descarte-form[hidden] {
    display: none;
}

/* Os motivos prontos ocupam a linha de cima; campo e botões seguem na de baixo. */
.descarte-form {
    flex-wrap: wrap;
}

.descarte-sugestoes {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: 6px;
}

.descarte-sugestao {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 500;
    transition:
        border-color var(--fast) var(--ease),
        color var(--fast) var(--ease);
}

.descarte-sugestao:hover {
    border-color: var(--text-3);
    color: var(--text);
}

.descarte-sugestao:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

@media (max-width: 720px) {
    .descarte-sugestao {
        min-height: 44px;
        font-size: 14px;
    }
    /* No celular o campo ganha a linha inteira; espremido ao lado dos botões, o motivo não cabia. */
    .descarte-form .descarte-motivo {
        flex-basis: 100%;
    }
}

.descarte-motivo {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.bloqueio {
    padding-top: 80px;
    color: var(--text-2);
    text-align: center;
}

/* --- Telas de conta ----------------------------------------------------------------- */

.login-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 0;
    font-size: 13px;
}

.login-aviso {
    margin: 12px 0 0;
    padding: 8px 10px;
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-sm);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 13px;
}

.form-field span small {
    color: var(--text-3);
    font-weight: 400;
}

.conta-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

a.conta-link-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    margin-top: 18px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    background: var(--brand-green);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* --- Usuários ------------------------------------------------------------------------ */

.nav-badge,
.aba-contagem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.nav-badge[hidden],
.aba-contagem:empty {
    display: none;
}

.usuario-acoes {
    align-items: center;
}

/* Papel: controle segmentado (rádios), no lugar do <select> nativo. */
.segmentado {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius);
    background: var(--surface-3);
}

.segmentado-opcao {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color var(--fast) var(--ease),
        color var(--fast) var(--ease);
}

.segmentado-opcao input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmentado-opcao:has(input:checked) {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.segmentado-opcao:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Senha com botão de mostrar/ocultar dentro do campo. */
.senha-campo {
    position: relative;
    display: block;
}

.senha-campo input {
    padding-right: 44px;
}

.senha-ver {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-3);
    transform: translateY(-50%);
}

.senha-ver:hover {
    color: var(--text);
}

.usuario-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-2);
}

/* --- Responsivo -------------------------------------------------------------- */

@media (max-width: 720px) {
    .topnav-inner {
        padding: 0 16px;
        gap: 14px;
    }
    :root {
        --nav-h: 88px;
    }
    /* No celular a faixa fica só com o Sair. */
    .topnav-strip {
        justify-content: flex-end;
        padding: 0 12px 0 32px;
        font-size: 12px;
    }
    .strip-title,
    .top-user {
        display: none;
    }
    .brand-wrap {
        padding: 0 36px 0 14px;
    }
    .brand-wrap::before {
        clip-path: polygon(0 0, calc(100% - 30px) 0, calc(100% - 10px) 100%, 0 100%);
    }
    .brand-wrap::after {
        clip-path: polygon(calc(100% - 30px) 0, calc(100% - 20px) 0, 100% 100%, calc(100% - 10px) 100%);
    }
    .brand img {
        height: 30px;
    }
    .topnav-main {
        margin-left: -20px;
    }
    .topnav-row {
        gap: 8px;
        padding: 0 12px 0 32px;
    }
    .nav-item {
        padding: 0 8px;
        font-size: 13px;
    }
    /* Os destinos rolam na horizontal; o da página atual sai para caber mais. */
    .nav-item.active {
        display: none;
    }
    .topnav-links {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .topnav-links::-webkit-scrollbar {
        display: none;
    }
    /* Os destinos rolam: a borda some aos poucos para mostrar que há mais. */
    .topnav-links {
        padding-right: 24px;
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
    .page {
        padding: 20px 16px 56px;
    }
    .panel {
        padding: 16px;
    }
    .panel-heading {
        flex-wrap: wrap;
    }
    .queue-item-fields {
        grid-template-columns: 1fr 1fr;
    }
    .queue-item-actions {
        justify-content: stretch;
    }
    .queue-item-actions > * {
        flex: 1 1 auto;
    }
}

/* --- Login --------------------------------------------------------------------- */

.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 400px;
    margin: 0 auto;
    padding: 64px 16px;
}

.login-logo {
    width: 180px;
    height: auto;
}

.login-panel {
    width: 100%;
}

.login-panel h1 {
    margin: 0 0 4px;
    font-size: 18px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.login-form > button[type="submit"] {
    height: 38px;
}

.login-erro {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 13px;
}

.login-nota {
    margin: 16px 0 0;
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .descarte-form {
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    /* O selo de situação desce para baixo do nome em vez de vazar do card. */
    .queue-item-head {
        flex-wrap: wrap;
    }
    /* Quebrado embaixo do nome, o valor alinha à esquerda com o rótulo. */
    .queue-item-amount {
        align-items: flex-start;
    }
    .usuario-acoes {
        flex-direction: column;
        align-items: stretch;
    }
    .segmentado {
        display: flex;
    }
    .segmentado-opcao {
        flex: 1;
        justify-content: center;
        height: 40px;
    }
}

/* Celular: campo com menos de 16px faz o iOS dar zoom no foco; toque com pelo menos 44px. */
@media (max-width: 720px) {
    input:not([type="checkbox"]):not([type="radio"]),
    .descarte-motivo {
        min-height: 44px;
        font-size: 16px;
    }
    button.primary-button,
    button.secondary-button,
    a.secondary-button,
    button.omie-button,
    a.conta-link-botao {
        min-height: 44px;
    }
    .senha-ver {
        width: 44px;
        height: 44px;
        right: 0;
    }
}

/* --- Área de administração: Usuários | Auditoria ------------------------------- */

.admin-abas {
    display: flex;
    gap: 4px;
    margin: -6px 0 16px;
    border-bottom: 1px solid var(--border);
}

.admin-abas a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
}

.admin-abas a:hover {
    color: var(--text);
}

.admin-abas a[aria-current="page"] {
    color: var(--brand-green);
}

.admin-abas a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--brand-yellow);
}

/* --- Auditoria -------------------------------------------------------------- */

.trilha-filtros {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.trilha-categorias {
    margin-bottom: 0;
}

.trilha-contagem {
    margin-left: 2px;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
}

.trilha-contagem:empty {
    display: none;
}

.trilha-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.trilha-busca {
    flex: 1 1 300px;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
}

.trilha-busca:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.trilha-exportar {
    flex-shrink: 0;
}

.trilha-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trilha-dia {
    margin: 14px 0 4px;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.trilha-dia:first-child {
    margin-top: 0;
}

.trilha-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.trilha-item[open] {
    border-color: var(--border-strong);
}

.trilha-item.grav-critico {
    border-left: 3px solid var(--danger);
}

.trilha-item.grav-atencao {
    border-left: 3px solid var(--warn);
}

.trilha-item summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 14px;
    cursor: pointer;
    list-style: none;
}

.trilha-item summary::-webkit-details-marker {
    display: none;
}

.trilha-item summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius);
}

.trilha-marca:empty {
    display: none;
}

.trilha-selo {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.trilha-selo.grav-critico {
    background: var(--danger-soft);
    color: var(--danger);
}

.trilha-selo.grav-atencao {
    background: var(--warn-soft);
    color: var(--warn);
}

.trilha-resumo {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.trilha-resumo b {
    font-size: 13.5px;
    font-weight: 600;
}

.trilha-resumo small {
    overflow: hidden;
    color: var(--text-3);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trilha-hora {
    flex-shrink: 0;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.trilha-detalhes {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
}

.trilha-detalhes dt {
    color: var(--text-3);
}

.trilha-detalhes dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.trilha-mudancas {
    width: calc(100% - 28px);
    margin: 0 14px 14px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.trilha-mudancas th,
.trilha-mudancas td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.trilha-mudancas th {
    color: var(--text-3);
    font-weight: 600;
}

.trilha-mais {
    align-self: center;
    margin: 14px auto 0;
    display: flex;
}

.trilha-mais[hidden] {
    display: none;
}

@media (max-width: 720px) {
    .trilha-busca {
        flex-basis: 100%;
        min-height: 44px;
        font-size: 16px;
    }
    .trilha-periodo .segmentado-opcao,
    .admin-abas a {
        min-height: 44px;
    }
    .trilha-periodo {
        width: 100%;
    }
    .trilha-periodo .segmentado-opcao {
        flex: 1;
        justify-content: center;
        padding: 0 6px;
        white-space: nowrap;
    }
    .trilha-exportar {
        min-height: 44px;
    }
    .trilha-categorias .nf-tab {
        height: 36px;
    }
    .trilha-item summary {
        gap: 8px;
        padding: 8px 12px;
    }
    .trilha-detalhes {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
    .trilha-detalhes dd {
        margin-bottom: 6px;
    }
}

/* Situação da NF no OMIE, no card da fila. */
.omie-situacao {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-muted, #f4f4f2);
    font-size: 14px;
}
.omie-situacao.ok {
    background: #e8f5ec;
    color: #14532d;
}
/* Não "revisao": é a classe do <main> da tela Revisar, com altura de tela cheia. */
.omie-situacao.atencao {
    background: #fff4e5;
    color: #7a3e00;
}

/* ==========================================================================
   Revisar, E-mails e Execução (ADR-008)
   ========================================================================== */

/* --- Pedaços comuns ---------------------------------------------------------- */

.lista-cabeca {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.lista-cabeca h1 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.lista-total {
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 20px;
    text-align: center;
}

.lista-total:empty {
    display: none;
}

.lista-vazia,
.vis-vazio,
.ficha-vazia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    color: var(--text-3);
    font-size: 13px;
    text-align: center;
    list-style: none;
}

.lista-vazia p,
.vis-vazio p {
    margin: 0;
}

.vazio-curto {
    margin: 0;
    color: var(--text-3);
    font-size: 13px;
}

/* Botão dentro do controle segmentado (painéis da Revisão): mesmo visual do rádio. */
button.segmentado-opcao {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
}

.segmentado-opcao[aria-selected="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.segmentado-opcao b {
    margin-left: 5px;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
}

.segmentado-opcao b:empty {
    display: none;
}

.status-selo {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.status-pronta,
.status-lancado,
.status-lancado_manual {
    background: var(--ok-soft);
    color: var(--ok);
}

.status-aguardando,
.status-sem_nf,
.status-revisao {
    background: var(--warn-soft);
    color: var(--warn);
}

.status-falhou,
.status-recusada {
    background: var(--danger-soft);
    color: var(--danger);
}

.status-recebida,
.status-lendo,
.status-aprovado,
.status-lancando {
    background: var(--accent-soft);
    color: var(--accent);
}

/* --- Revisar: três painéis na altura da janela ----------------------------------
   Lista estreita, documento no centro com a maior área, ficha compacta à direita.
   Cada painel rola por dentro; a página não rola.
   ------------------------------------------------------------------------------ */

.revisao {
    --lista-w: 300px;
    --ficha-w: 440px;
    display: grid;
    grid-template-columns: var(--lista-w) minmax(0, 1fr) var(--ficha-w);
    gap: 12px;
    height: calc(100dvh - var(--nav-h));
    padding: 12px;
}

.revisao-modos {
    display: none;
}

.painel-lista,
.painel-documento,
.painel-ficha {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* Lista */

.painel-lista .lista-cabeca {
    padding: 12px 14px 0;
}

.lote-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px 10px;
    border-bottom: 1px solid var(--border);
}

.lote-todas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.lote-todas input,
.item-marcar {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--brand-green);
    cursor: pointer;
}

.lote-todas:has(input:disabled),
.item-marcar:disabled {
    cursor: not-allowed;
}

.lote-barra .omie-button {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
}

.lista-nfs {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.grupo-nfs ul {
    margin: 0;
    padding: 0 6px 6px;
    list-style: none;
}

.grupo-email {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 14px 6px;
    background: var(--surface);
}

.grupo-email b,
.grupo-email small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grupo-email b {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

.grupo-email small {
    color: var(--text-3);
    font-size: 11.5px;
}

.grupo-nfs + .grupo-nfs {
    border-top: 1px solid var(--border);
}

.item-nf {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: stretch;
    border-radius: var(--radius);
    transition: background-color var(--fast) var(--ease);
}

.item-nf:hover {
    background: var(--surface-2);
}

.item-nf.ativa {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--brand-green);
}

.item-marcar-alvo {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12px;
    cursor: pointer;
}

.item-abrir {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 9px 10px 9px 0;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    text-align: left;
}

.item-abrir:focus-visible {
    outline-offset: -2px;
}

.item-linha {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.item-linha b {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-sub {
    color: var(--text-3);
    font-size: 12px;
}

.item-valor {
    color: var(--text);
    font-size: 12.5px;
    font-weight: 500;
}

.item-selo {
    margin-left: auto;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.item-selo.atencao {
    background: var(--warn-soft);
    color: var(--warn);
}

.item-selo.bloqueia {
    background: var(--danger-soft);
    color: var(--danger);
}

.item-selo.pronta {
    background: var(--ok-soft);
    color: var(--ok);
}

/* Documento */

.visualizador {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.vis-barra {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
}

.vis-abas {
    display: flex;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.vis-abas::-webkit-scrollbar {
    display: none;
}

.vis-aba {
    position: relative;
    flex-shrink: 0;
    height: 44px;
    padding: 0 12px;
    border: 0;
    background: none;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--fast) var(--ease);
}

.vis-aba:hover {
    color: var(--text);
}

.vis-aba[aria-selected="true"] {
    color: var(--brand-green);
}

.vis-aba[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--brand-yellow);
}

.vis-aba:focus-visible {
    outline-offset: -4px;
}

.vis-abrir {
    align-self: center;
    flex-shrink: 0;
}

.vis-fonte {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 14px;
    border-bottom: 1px solid var(--ok-border);
    background: var(--accent-soft);
    color: var(--brand-green-dark);
    font-size: 13px;
}

.vis-fonte q {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vis-fonte-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
}

.vis-fonte-fechar:hover {
    background: rgba(7, 104, 53, 0.1);
}

.vis-corpo {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--surface-3);
}

.vis-pdf,
.vis-img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.vis-img {
    object-fit: contain;
    background: var(--surface-3);
}

.vis-conversa {
    height: 100%;
    overflow-y: auto;
    padding: 18px 22px;
    background: var(--surface);
}

.conversa {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 78ch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mensagem {
    padding: 2px 0 2px 14px;
    border-left: 2px solid var(--border);
    scroll-margin: 24px;
}

.mensagem.ativa {
    border-left-color: var(--brand-green);
}

.mensagem-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-bottom: 6px;
    font-size: 12.5px;
}

.mensagem-cabeca b {
    font-size: 13px;
    font-weight: 600;
}

.mensagem-cabeca span,
.mensagem-cabeca time {
    color: var(--text-3);
}

.mensagem-cabeca time {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
}

.mensagem-corpo {
    font-size: 13.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

mark.trecho {
    padding: 1px 2px;
    border-radius: 3px;
    background: color-mix(in oklch, var(--brand-yellow) 60%, white);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--brand-yellow) 60%, white);
    color: var(--text);
}

/* Ficha */

.painel-ficha .ficha-vazia {
    flex: 1;
}

.ficha {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.ficha-cabeca {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.ficha-titulo {
    min-width: 0;
}

.ficha-titulo h2 {
    margin: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ficha-titulo small {
    display: block;
    margin-top: 2px;
    color: var(--text-3);
    font-size: 12px;
}

.ficha-valor {
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.ficha-rolagem {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 16px 18px;
}

.ficha-campos {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ficha .validation-list {
    gap: 4px;
    margin-bottom: 4px;
}

.ficha .validation-item {
    min-height: 24px;
    padding: 2px 8px 2px 4px;
    font-size: 12px;
}

.ficha .validation-item .check {
    width: 14px;
    height: 14px;
}

.alertas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.alerta {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 4px 8px;
    align-items: start;
    padding: 8px 10px;
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    background: var(--warn-soft);
    font-size: 13px;
}

.alerta-icone {
    display: flex;
    padding-top: 2px;
    color: var(--warn);
}

.alerta p {
    margin: 0;
    line-height: 1.45;
}

/* Alerta sem ícone (detalhe do e-mail): o texto ocupa a linha toda, não a coluna de 16 px do ícone. */
.alerta > p:first-child {
    grid-column: 1 / -1;
}

.alerta.bloqueia {
    border-color: var(--danger-border);
    background: var(--danger-soft);
}

.alerta.bloqueia .alerta-icone {
    color: var(--danger);
}

.alerta-selo {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: 0.02em;
    vertical-align: 1px;
    white-space: nowrap;
}

.alerta.recolhivel {
    grid-template-columns: 16px minmax(0, 1fr) 28px;
}

.alerta-recolher {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
}

.alerta-recolher:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text);
}

.alerta-recolher:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.alertas-recolhidos {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 2px;
    color: var(--text-2);
    font-size: 12.5px;
}

.alertas-recolhidos .text-button {
    padding: 0;
    font-size: 12.5px;
}

@media (max-width: 720px) {
    .alerta.recolhivel {
        grid-template-columns: 16px minmax(0, 1fr) 44px;
    }

    .alerta-recolher {
        width: 44px;
        height: 44px;
        margin: -12px -10px -8px 0;
    }
}

.alerta-fonte {
    grid-column: 2;
    justify-self: start;
    padding: 0;
    font-size: 12.5px;
}

.grupo {
    margin-top: 18px;
}

.grupo h3 {
    margin: 0 0 8px;
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.grupo-cabeca {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 6px;
}

.grupo-cabeca:first-child {
    margin-top: 0;
}

.grupo-cabeca h3 {
    margin: 0;
}

.campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

/* Rótulo com etiqueta pode quebrar em duas linhas: o campo desce para alinhar com o vizinho. */
.campo {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
}

.campo.largo {
    grid-column: 1 / -1;
}

.campo-rotulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-height: 20px;
    margin-bottom: 4px;
}

.campo-rotulo label {
    color: var(--text-2);
    font-size: 12px;
    font-weight: 500;
}

.campo input,
.linha input,
.imposto input:not([type="checkbox"]),
.descarte-motivo {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 13.5px;
    transition:
        border-color var(--fast) var(--ease),
        box-shadow var(--fast) var(--ease);
}

.campo input:hover:not(:focus):not(:disabled),
.linha input:hover:not(:focus):not(:disabled) {
    border-color: #b7b7b1;
}

.campo input:focus,
.linha input:focus,
.imposto input:not([type="checkbox"]):focus,
.descarte-motivo:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.campo input:disabled,
.linha input:disabled,
.imposto input:disabled {
    background: var(--surface-2);
    color: var(--text-2);
}

.campo input::placeholder,
.imposto input::placeholder {
    color: var(--text-3);
}

/* Confiança baixa: borda âmbar e uma barra, até alguém conferir (editar tira). */
.campo input.conferir {
    border-color: var(--warn-border);
    box-shadow: inset 3px 0 0 var(--warn);
}

/* Falta para aprovar: âmbar até preencher; o chip da checagem leva até aqui. */
.campo input[aria-invalid="true"],
.linha input[aria-invalid="true"] {
    /* background-color, não background: o atalho apagaria a seta do seletor (input[data-combo]). */
    background-color: var(--warn-soft);
}

.campo input[aria-invalid="true"]:not(:focus),
.linha input[aria-invalid="true"]:not(:focus) {
    border-color: var(--warn);
}

.campo:has(input[aria-invalid="true"]) .campo-rotulo label {
    color: var(--warn);
}

.conferencia:has(input[aria-invalid="true"]) {
    border-color: var(--warn-border);
    background: var(--warn-soft);
}

input[name="cnpj"],
input[name="chave_nfe"],
.linha input[data-coluna="codigoBarras"] {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

/* Etiqueta de fonte: de onde veio o valor. Clicável quando leva a um documento ou mensagem. */
.fonte {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

button.fonte {
    cursor: pointer;
    transition: background-color var(--fast) var(--ease);
}

button.fonte:hover {
    background: color-mix(in oklch, var(--accent-soft) 80%, var(--brand-green));
}

/* Alvo de toque maior que o desenho. */
button.fonte::after {
    content: "";
    position: absolute;
    inset: -8px -4px;
}

.fonte.baixa {
    background: var(--warn-soft);
    color: var(--warn);
}

button.fonte.baixa:hover {
    background: color-mix(in oklch, var(--warn-soft) 80%, var(--warn));
}

.fonte-conf::before {
    content: "·";
    margin-right: 4px;
}

.fonte.editado {
    background: var(--surface-3);
    color: var(--text-2);
}

.fonte.estatica {
    cursor: default;
}

.linhas {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.linha {
    display: grid;
    gap: 6px;
    align-items: center;
}

.linha-parcelas {
    grid-template-columns: 78px 104px minmax(0, 1fr) 32px;
}

.linha-parcelas .linha-largo {
    grid-column: 1 / 4;
    grid-row: 2;
}

.linha-parcelas:not(.linha-cabeca) {
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border);
}

.linha-rateio {
    grid-template-columns: minmax(0, 1fr) 72px 112px 32px;
}

.linha input {
    height: 32px;
    padding: 0 8px;
}

.linha-cabeca span {
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 500;
}

.linha-remover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-3);
}

.linha-remover:hover:not(:disabled) {
    background: var(--danger-soft);
    color: var(--danger);
}

.ficha-campos:disabled .linha-remover,
.ficha-campos:disabled .linhas-rodape .text-button {
    visibility: hidden;
}

.linhas-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.linhas-soma {
    color: var(--text-3);
    font-size: 12px;
    white-space: nowrap;
}

.linhas-soma.diverge {
    color: var(--warn);
    font-weight: 600;
}

.impostos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.imposto {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 4px 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: background-color var(--fast) var(--ease);
}

.imposto:has(input[type="checkbox"]:checked) {
    border-color: var(--ok-border);
    background: var(--accent-soft);
}

.imposto label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 30px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.imposto input[type="checkbox"],
.conferencia input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--brand-green);
    cursor: pointer;
}

.imposto input:not([type="checkbox"]) {
    width: 104px;
    height: 30px;
    padding: 0 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    text-align: right;
}

.conferencia {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color var(--fast) var(--ease),
        border-color var(--fast) var(--ease);
}

.conferencia input {
    width: 18px;
    height: 18px;
}

.conferencia:has(input:checked) {
    border-color: var(--ok-border);
    background: var(--ok-soft);
}

.ficha-acoes {
    padding: 10px 16px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.ficha-acoes .descarte-form {
    margin: 0 0 10px;
}

.ficha-botoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ficha-botoes-direita {
    display: flex;
    gap: 8px;
}

/* Tela larga, mas não tanto: lista e ficha encolhem para o documento caber. */
@media (max-width: 1320px) {
    .revisao {
        --lista-w: 252px;
        --ficha-w: 392px;
    }
    .linha-parcelas {
        grid-template-columns: 72px 100px minmax(0, 1fr) 32px;
    }
}

/* Até tablet: um painel por vez, escolhido no controle segmentado. */
@media (max-width: 1100px) {
    .revisao {
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: auto;
        min-height: calc(100dvh - var(--nav-h));
        padding: 12px 16px 16px;
    }
    .revisao-modos {
        display: flex;
        position: sticky;
        top: calc(var(--nav-h) + 8px);
        z-index: 5;
        box-shadow: var(--shadow-md);
    }
    .revisao-modos .segmentado-opcao {
        flex: 1;
        justify-content: center;
        min-height: 40px;
    }
    .revisao[data-painel="lista"] .painel-documento,
    .revisao[data-painel="lista"] .painel-ficha,
    .revisao[data-painel="documento"] .painel-lista,
    .revisao[data-painel="documento"] .painel-ficha,
    .revisao[data-painel="ficha"] .painel-lista,
    .revisao[data-painel="ficha"] .painel-documento {
        display: none;
    }
    .painel-lista,
    .painel-ficha {
        overflow: visible;
    }
    .lista-nfs,
    .ficha-rolagem {
        overflow: visible;
    }
    .painel-documento {
        height: calc(100dvh - var(--nav-h) - 80px);
        min-height: 420px;
    }
    .grupo-email {
        position: static;
    }
    .ficha-acoes {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: 0 -6px 16px -10px rgba(20, 20, 20, 0.2);
    }
}

@media (max-width: 720px) {
    .revisao-modos .segmentado-opcao {
        min-height: 44px;
    }
    .item-marcar-alvo {
        padding-top: 14px;
    }
    .item-marcar,
    .lote-todas input {
        width: 20px;
        height: 20px;
    }
    .item-abrir {
        min-height: 56px;
    }
    .lote-todas {
        min-height: 44px;
    }
    .lote-barra .omie-button {
        height: 44px;
    }
    .vis-fonte-fechar,
    .linha-remover {
        width: 44px;
        height: 44px;
    }
    .vis-aba {
        height: 48px;
    }
    .campos {
        grid-template-columns: minmax(0, 1fr);
    }
    .campo input,
    .linha input,
    .imposto input:not([type="checkbox"]) {
        height: 44px;
    }
    .linha-parcelas {
        grid-template-columns: 96px minmax(0, 1fr) 44px;
    }
    .linha-parcelas input[data-coluna="valor"] {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    .linha-parcelas .linha-largo {
        grid-row: 3;
        grid-column: 1 / 3;
    }
    .linha-parcelas.linha-cabeca span:nth-child(3) {
        display: none;
    }
    .linha-rateio {
        grid-template-columns: minmax(0, 1fr) 84px 44px;
    }
    .linha-rateio input[data-coluna="valor"] {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    .linha-rateio.linha-cabeca span:nth-child(3) {
        display: none;
    }
    .linha-rateio:not(.linha-cabeca) {
        padding-bottom: 6px;
        border-bottom: 1px dashed var(--border);
    }
    .impostos {
        grid-template-columns: minmax(0, 1fr);
    }
    .imposto input:not([type="checkbox"]) {
        width: 140px;
    }
    .imposto label {
        min-height: 44px;
    }
    .conferencia input {
        width: 22px;
        height: 22px;
    }
    /* Uma linha só: a barra fixa no rodapé não pode comer metade da tela. */
    .ficha-botoes,
    .ficha-botoes-direita {
        flex: 1 1 auto;
    }
    .ficha-botoes > *,
    .ficha-botoes-direita > * {
        flex: 1 1 0;
        padding: 0 8px;
    }
    .ficha-botoes-direita {
        flex-basis: 66%;
    }
    .vis-conversa {
        padding: 14px 16px;
    }
    .ficha-cabeca,
    .ficha-rolagem,
    .ficha-acoes {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* --- E-mails recebidos ----------------------------------------------------------- */

.page-dividida {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.painel-entradas {
    position: sticky;
    top: calc(var(--nav-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100dvh - var(--nav-h) - 44px);
    padding: 14px 8px 8px;
}

.painel-entradas > .lista-cabeca,
.painel-entradas > .segmentado {
    margin: 0 6px;
}

.filtro-entradas {
    display: flex;
    flex-wrap: wrap;
}

.filtro-entradas .segmentado-opcao {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 8px;
    font-size: 12.5px;
    white-space: nowrap;
}

.entradas {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.entradas > li + li {
    border-top: 1px solid var(--border);
}

.entrada-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    text-align: left;
    transition: background-color var(--fast) var(--ease);
}

.entrada-item:hover {
    background: var(--surface-2);
}

.entradas > li.ativa .entrada-item {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--brand-green);
}

.entrada-item:focus-visible {
    outline-offset: -2px;
}

.entrada-linha {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.entrada-linha b {
    flex: 1;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entrada-linha time {
    flex-shrink: 0;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 11.5px;
}

.entrada-sub {
    display: block;
    overflow: hidden;
    color: var(--text-2);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entrada-meta {
    flex-wrap: wrap;
    gap: 4px 8px;
    color: var(--text-3);
    font-size: 12px;
}

.entrada-alertas {
    color: var(--warn);
    font-weight: 600;
}

.painel-entrada {
    min-height: 320px;
    padding: 18px 22px 22px;
}

.entrada-voltar {
    display: none;
    margin-bottom: 8px;
    padding: 6px 0;
}

.entrada-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.entrada-cabeca h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.entrada-cabeca small {
    display: block;
    margin-top: 3px;
    color: var(--text-3);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.entrada-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
}

.entrada-motivo {
    margin: 14px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 13px;
    font-weight: 500;
}

.entrada-motivo.perigo {
    border-color: var(--danger-border);
    background: var(--danger-soft);
    color: var(--danger);
}

.painel-entrada > .alertas {
    margin-top: 14px;
}

.entrada-secao {
    margin-top: 22px;
}

.entrada-secao h3 {
    margin: 0 0 10px;
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.documentos,
.nfs-geradas {
    margin: 0;
    padding: 0;
    list-style: none;
}

.documentos li,
.nfs-geradas li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 0;
    border-top: 1px solid var(--border);
}

.documentos li:last-child,
.nfs-geradas li:last-child {
    border-bottom: 1px solid var(--border);
}

.documento-nome {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.documento-nome b {
    font-size: 13.5px;
    font-weight: 600;
}

.documento-nome span {
    overflow: hidden;
    color: var(--text-3);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documento-acoes {
    display: flex;
    flex-shrink: 0;
    gap: 14px;
}

.agente-uso {
    margin: 0;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 12.5px;
}

@media (max-width: 1100px) {
    .page-dividida {
        grid-template-columns: minmax(0, 1fr);
    }
    .painel-entradas {
        position: static;
        max-height: none;
    }
    .entradas {
        overflow: visible;
    }
    .page-dividida[data-aberto="sim"] .painel-entradas,
    .page-dividida[data-aberto="nao"] .painel-entrada {
        display: none;
    }
    .entrada-voltar {
        display: inline-flex;
    }
}

@media (max-width: 720px) {
    .painel-entrada {
        padding: 14px 16px 18px;
    }
    .entrada-voltar,
    .documento-acoes a,
    .nfs-geradas a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .filtro-entradas .segmentado-opcao {
        flex: 1 1 40%;
        min-height: 44px;
    }
    .entrada-item {
        min-height: 64px;
    }
    .nfs-geradas li {
        flex-wrap: wrap;
    }
}

/* --- Execução: linha do tempo ------------------------------------------------------ */

.execucao-atualizado {
    color: var(--text-3);
    font-size: 12px;
}

.aviso-ia {
    padding: 10px 16px;
    border-bottom: 1px solid var(--warn-border);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 14px;
    line-height: 1.4;
}

.aviso-ia a {
    color: inherit;
    font-weight: 600;
    white-space: nowrap;
}

.custos-painel {
    margin-bottom: 16px;
}

.custos-titulo {
    margin: 0 0 12px;
    font-size: 15px;
}

.custos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.custo-cartao {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.custo-rotulo,
.custo-cartao small {
    color: var(--text-3);
    font-size: 12px;
}

.custo-valor {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.custo-barra {
    height: 6px;
    margin-top: 12px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.custo-barra span {
    display: block;
    height: 100%;
    background: var(--accent);
}

.custo-barra.perto span {
    background: var(--warn);
}

.custos-modelos {
    margin: 10px 0 0;
    color: var(--text-2);
    font-size: 12px;
}

.passo-custo,
.entrada-custo {
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}

.execucao-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 18px;
}

.execucao-filtros .fila-abas {
    margin: 0;
}

.passos-dia {
    margin: 18px 0 6px;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.passos-dia:first-child {
    margin-top: 0;
}

.passos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.passo {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.passo.nivel-aviso {
    border-color: var(--warn-border);
    box-shadow: inset 3px 0 0 var(--warn);
}

.passo.nivel-erro {
    border-color: var(--danger-border);
    background: color-mix(in oklch, var(--danger-soft) 55%, white);
    box-shadow: inset 3px 0 0 var(--danger);
}

.passo-hora {
    padding-top: 1px;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 12px;
}

.passo-corpo {
    min-width: 0;
}

.passo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.passo-etapa,
.passo-nivel {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.passo-nivel.nivel-erro {
    background: var(--danger);
    color: #fff;
}

.passo-nivel.nivel-aviso {
    background: var(--warn-soft);
    color: var(--warn);
}

.passo-mensagem {
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.passo.nivel-erro .passo-mensagem {
    color: var(--danger);
    font-weight: 600;
}

.passo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    margin-top: 2px;
    color: var(--text-3);
    font-size: 12px;
}

.passo-meta:empty {
    display: none;
}

.passo-link {
    font-weight: 500;
}

.passo-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.passo-dados {
    font-family: var(--font-mono);
    font-size: 11.5px;
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .execucao-filtros .segmentado {
        width: 100%;
    }
    .execucao-filtros .segmentado-opcao {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }
    .filtro-etapa {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .filtro-etapa .nf-tab {
        flex-shrink: 0;
        height: 40px;
    }
    .passo {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
    .passo-link {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }
}

/* --- Fornecedores (BRA-38) ----------------------------------------------------------
   Lista com busca à esquerda (mesmo molde de E-mails); à direita o perfil em cartões, o uso em
   barras horizontais, as relações em duas colunas e os títulos numa tabela que vira cartões.
   ---------------------------------------------------------------------------------- */

/* A lista rola por dentro do painel: o resto não pode encolher para ceder espaço a ela. */
.painel-fornecedores > :not(.entradas) {
    flex-shrink: 0;
}

.painel-fornecedores > .fornecedores-busca,
.painel-fornecedores > .espelho-aviso {
    margin: 0 6px;
}

.fornecedores-busca {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 13.5px;
    transition: border-color var(--fast) var(--ease);
}

.fornecedores-busca:hover:not(:focus) {
    border-color: color-mix(in oklch, var(--border-strong) 70%, var(--text));
}

.fornecedores-busca:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.espelho-aviso {
    padding: 8px 10px;
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 12.5px;
    font-weight: 500;
}

.fornecedor-cnpj {
    font-family: var(--font-mono);
    font-size: 12px;
}

.entrada-sub .fornecedor-cnpj {
    flex-shrink: 0;
}

.entrada-sub > span:not(.fornecedor-cnpj) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.fornecedores-lista .entrada-sub {
    display: flex;
}

.fornecedor-fora {
    color: var(--warn);
    font-weight: 600;
}

/* Os cartões dependem da largura do painel, não da janela: 4 lado a lado ou 2 × 2, nunca 3 + 1. */
.painel-fornecedor {
    container-type: inline-size;
}

.fornecedor-cartoes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 16px;
}

@container (max-width: 680px) {
    .fornecedor-cartoes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fornecedor-cartoes .custo-valor {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.fornecedor-sem-perfil {
    margin-top: 14px;
}

/* Barras de uso: rótulo, barra e número numa grade, para as barras alinharem entre linhas. */
.uso-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px 28px;
}

.uso-grupo h4,
.relacao-sub {
    margin: 0 0 8px;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
}

.relacao-sub {
    margin-top: 14px;
}

.uso-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Rótulo e número numa linha, a barra embaixo na largura toda: o nome não precisa ser cortado. */
.uso-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "rotulo numero"
        "barra barra";
    align-items: end;
    gap: 3px 10px;
    font-size: 13px;
}

.uso-rotulo {
    grid-area: rotulo;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uso-rotulo small {
    display: block;
    color: var(--text-3);
    font-size: 11.5px;
}

.uso-barra {
    grid-area: barra;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.uso-barra span {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: var(--accent);
}

.uso-numero {
    grid-area: numero;
    min-width: 40px;
    color: var(--text-2);
    font-size: 12.5px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.uso-resto {
    margin: 8px 0 0;
    color: var(--text-3);
    font-size: 12px;
}

.fornecedor-relacoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0 32px;
}

.pessoas .documento-nome span,
.aprendido .documento-nome span {
    white-space: normal;
}

/* Títulos recentes. */
.titulos-rolagem {
    overflow-x: auto;
}

.titulos-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.titulos-tabela th {
    padding: 0 10px 8px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-3);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.titulos-tabela td {
    padding: 8px 10px 8px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.titulos-tabela td:nth-child(1),
.titulos-tabela td:nth-child(2) {
    white-space: nowrap;
}

.titulos-tabela th.num,
.titulos-tabela td:nth-child(2) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.titulos-tabela td:nth-child(5) {
    min-width: 160px;
}

.titulo-status {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.titulo-status.ok {
    color: var(--ok);
}

.titulo-status.atencao {
    color: var(--warn);
}

.titulo-status.perigo {
    color: var(--danger);
}

.titulo-status.neutro {
    color: var(--text-2);
}

@media (max-width: 720px) {
    .fornecedores-busca {
        min-height: 44px;
    }
    .nfs-geradas .documento-acoes {
        gap: 18px;
    }
    .fornecedor-cartoes {
        gap: 8px;
    }
    .fornecedor-cartoes .custo-cartao {
        padding: 10px 12px;
    }
    .fornecedor-cartoes .custo-valor {
        font-size: 15px;
    }
    .nfs-geradas button.text-button {
        min-height: 44px;
    }
    /* A tabela vira um cartão por título, com o rótulo de cada campo ao lado do valor. */
    .titulos-rolagem {
        overflow: visible;
    }
    .titulos-tabela thead {
        display: none;
    }
    .titulos-tabela,
    .titulos-tabela tbody {
        display: block;
    }
    .titulos-tabela tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
    }
    .titulos-tabela td {
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 0;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }
    .titulos-tabela td:nth-child(2) {
        text-align: left;
    }
    .titulos-tabela td:nth-child(5) {
        grid-column: 1 / -1;
        min-width: 0;
    }
    .titulos-tabela td::before {
        content: attr(data-rotulo);
        color: var(--text-3);
        font-size: 11.5px;
    }
}

/* Com "Fornecedores", os seis destinos não cabiam na barra do tablet (768 px estourava 3 px).
   Entre o celular (que rola os destinos) e o desktop, os itens ficam mais justos. */
@media (min-width: 721px) and (max-width: 1000px) {
    .topnav-row {
        padding: 0 16px 0 44px;
    }
    .topnav-links {
        gap: 2px;
    }
    .nav-item {
        padding: 0 9px;
    }
    .nav-item.active::after {
        left: 9px;
        right: 9px;
    }
}

@media (min-width: 721px) and (max-width: 800px) {
    .topnav-row {
        padding: 0 12px 0 36px;
    }
    /* Nos poucos pixels em que ainda não cabe (admin com contadores), rola como no celular. */
    .topnav-links {
        gap: 0;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .topnav-links::-webkit-scrollbar {
        display: none;
    }
    .nav-item {
        gap: 6px;
        padding: 0 7px;
        font-size: 13px;
    }
    .nav-item.active::after {
        left: 7px;
        right: 7px;
    }
}

.ver-mais {
    margin-top: 6px;
    min-height: 32px;
}

@media (max-width: 720px) {
    .ver-mais {
        min-height: 44px;
    }
}

@media (max-width: 720px) {
    /* NF: número e valor na primeira linha inteira; situação e links embaixo. */
    .nfs-do-fornecedor .documento-nome {
        flex: 1 1 100%;
    }
    .nfs-do-fornecedor .documento-acoes {
        margin-left: auto;
    }
}

@media (max-width: 720px) {
    .titulos-tabela td:nth-child(1),
    .titulos-tabela td:nth-child(2) {
        font-weight: 600;
    }
    .titulos-tabela td:nth-child(1)::before,
    .titulos-tabela td:nth-child(2)::before {
        font-weight: 400;
    }
}

/* --- Seletor com busca (assets/combobox.js) ---------------------------------- */

.campo input[data-combo],
.linha input[data-combo] {
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 14px;
}

.combo-lista {
    position: fixed;
    z-index: 50;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.combo-opcao,
.combo-vazio {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    line-height: 1.3;
}

.combo-opcao {
    cursor: pointer;
}

.combo-opcao:hover {
    background: var(--surface-3);
}

.combo-opcao[aria-selected="true"] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
}

.combo-vazio {
    color: var(--text-3);
}

@media (max-width: 720px) {
    .combo-opcao,
    .combo-vazio {
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: 16px;
    }
}