/*
 * ERP NF-e - design system
 *
 * Camada sobre o Bootstrap 5.3: redefine os tokens que ele ja expoe como
 * custom properties, em vez de sobrescrever regra por regra. O tema do
 * formulario do Symfony (bootstrap_5_layout) continua funcionando.
 */

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */

:root {
    /* Neutros */
    --erp-0:   #ffffff;
    --erp-25:  #fcfcfd;
    --erp-50:  #f7f8fa;
    --erp-100: #eef0f4;
    --erp-200: #e2e5ec;
    --erp-300: #cbd1dc;
    --erp-400: #97a1b3;
    --erp-500: #6b7688;
    --erp-600: #4d5768;
    --erp-700: #39414f;
    --erp-800: #232a35;
    --erp-900: #151a22;

    /* Acento */
    --erp-accent:        #3b5bdb;
    --erp-accent-hover:  #2f4bc4;
    --erp-accent-soft:   #eef2ff;
    --erp-accent-border: #c7d2fe;

    /* Semanticos */
    --erp-success: #0f8a5f;
    --erp-success-soft: #e7f7f0;
    --erp-danger:  #d13b3b;
    --erp-danger-soft: #fdecec;
    --erp-warning: #b06f1a;
    --erp-warning-soft: #fdf3e3;
    --erp-info:    #1d6fa5;
    --erp-info-soft: #e8f3fa;

    /* Superficies */
    --erp-bg:          var(--erp-50);
    --erp-surface:     var(--erp-0);
    --erp-surface-alt: var(--erp-25);
    --erp-border:      var(--erp-200);
    --erp-border-soft: var(--erp-100);
    --erp-text:        var(--erp-800);
    --erp-text-muted:  var(--erp-500);
    --erp-text-faint:  var(--erp-400);

    --erp-sidebar-bg:     var(--erp-900);
    --erp-sidebar-text:   #aeb6c4;
    --erp-sidebar-active: #ffffff;

    --erp-radius-sm: 6px;
    --erp-radius:    9px;
    --erp-radius-lg: 14px;

    --erp-shadow-sm: 0 1px 2px rgba(16, 22, 34, .05);
    --erp-shadow:    0 1px 3px rgba(16, 22, 34, .08), 0 1px 2px rgba(16, 22, 34, .04);
    --erp-shadow-lg: 0 12px 28px -8px rgba(16, 22, 34, .18);

    --erp-sidebar-w: 244px;

    /* Tokens do proprio Bootstrap */
    --bs-body-bg: var(--erp-bg);
    --bs-body-color: var(--erp-text);
    --bs-border-color: var(--erp-border);
    --bs-border-radius: var(--erp-radius);
    --bs-border-radius-sm: var(--erp-radius-sm);
    --bs-border-radius-lg: var(--erp-radius-lg);
    --bs-primary: var(--erp-accent);
    --bs-link-color: var(--erp-accent);
    --bs-link-hover-color: var(--erp-accent-hover);
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-bs-theme="dark"] {
    --erp-bg:          #0f1319;
    --erp-surface:     #171c24;
    --erp-surface-alt: #1c222b;
    --erp-border:      #2a323e;
    --erp-border-soft: #222933;
    --erp-text:        #e4e8ef;
    --erp-text-muted:  #98a2b3;
    --erp-text-faint:  #6d7686;

    --erp-accent:        #7c93f5;
    --erp-accent-hover:  #93a6f7;
    --erp-accent-soft:   #1c2340;
    --erp-accent-border: #2f3a63;

    --erp-success: #4ec99a; --erp-success-soft: #123227;
    --erp-danger:  #f07171; --erp-danger-soft:  #38191c;
    --erp-warning: #e0a458; --erp-warning-soft: #362614;
    --erp-info:    #63b3e0; --erp-info-soft:    #12293a;

    --erp-sidebar-bg:   #0b0e13;
    --erp-sidebar-text: #8b94a5;

    --erp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --erp-shadow:    0 1px 3px rgba(0, 0, 0, .5);
    --erp-shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, .7);
}

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

* { -webkit-font-smoothing: antialiased; }

body {
    background: var(--erp-bg);
    color: var(--erp-text);
    font-family: var(--bs-font-sans-serif);
    font-size: .9375rem;
    line-height: 1.55;
}

/* Numeros de mesma largura: colunas de dinheiro alinham verticalmente */
.num, td.num, th.num, .table td.text-end, .table th.text-end {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

code, .mono { font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; }

::selection { background: var(--erp-accent); color: #fff; }

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

/* ------------------------------------------------------------------ *
 * Layout: sidebar + conteudo
 * ------------------------------------------------------------------ */

.app {
    display: grid;
    grid-template-columns: var(--erp-sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    background: var(--erp-sidebar-bg);
    color: var(--erp-sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 1.25rem .75rem;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .25rem .5rem 1.25rem;
    color: #fff;
    text-decoration: none;
    font-weight: 650;
    letter-spacing: -.01em;
}

.sidebar__logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--erp-accent), #6b8afd);
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    flex: none;
}

.sidebar__label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #5f6878;
    font-weight: 600;
    padding: 1rem .75rem .375rem;
}

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }

.sidebar__link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    border-radius: var(--erp-radius-sm);
    color: var(--erp-sidebar-text);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: background .12s, color .12s;
}

.sidebar__link:hover { background: rgba(255, 255, 255, .06); color: #e8ebf0; }

.sidebar__link.is-active {
    background: rgba(255, 255, 255, .1);
    color: var(--erp-sidebar-active);
    font-weight: 600;
}

.sidebar__link svg { width: 17px; height: 17px; flex: none; opacity: .85; }

.sidebar__footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.sidebar__user {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    min-width: 0;
}

.sidebar__avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--erp-accent);
    color: #fff;
    display: grid; place-items: center;
    font-size: .75rem; font-weight: 600;
    flex: none;
}

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

.sidebar__user-name {
    font-size: .8125rem; font-weight: 600; color: #d5dae2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar__user-mail {
    font-size: .6875rem; color: #666f7e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem 1.75rem;
    border-bottom: 1px solid var(--erp-border);
    background: var(--erp-surface);
    position: sticky; top: 0; z-index: 20;
}

.content { padding: 1.75rem; flex: 1; }
.content--narrow { max-width: 1180px; }

/* ------------------------------------------------------------------ *
 * Cabecalho de pagina
 * ------------------------------------------------------------------ */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.page-head__title {
    font-size: 1.4rem;
    font-weight: 650;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--erp-text);
}

.page-head__sub {
    color: var(--erp-text-muted);
    font-size: .875rem;
    margin: .25rem 0 0;
}

/* Grupo de acoes: resolve o desalinhamento de botoes lado a lado.
   display:contents faz o <form> sumir do layout e o <button> virar
   filho direto do flex, ficando alinhado com os <a> irmaos. */
.actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.actions--end { justify-content: flex-end; }
.actions > form { display: contents; }

/* ------------------------------------------------------------------ *
 * Cards
 * ------------------------------------------------------------------ */

.card {
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-sm);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--erp-border-soft);
    padding: .875rem 1.25rem;
    font-weight: 600;
    font-size: .875rem;
    color: var(--erp-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: var(--erp-radius-lg) var(--erp-radius-lg) 0 0;
}

.card-header small, .card-header .text-muted { font-weight: 400; color: var(--erp-text-muted); }
.card-body { padding: 1.25rem; }

/* Cards de metrica */
.stat {
    display: block;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg);
    padding: 1.125rem 1.25rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--erp-shadow-sm);
    transition: border-color .12s, box-shadow .12s, transform .12s;
    height: 100%;
}

a.stat:hover {
    border-color: var(--erp-accent-border);
    box-shadow: var(--erp-shadow);
    transform: translateY(-1px);
}

/* Card de status escolhido. Mesmo tratamento do chip de canal, porque os dois
   fazem a mesma coisa: recortar a listagem. */
a.stat.is-ativo {
    border-color: var(--erp-primary, #2563eb);
    box-shadow: 0 0 0 1px var(--erp-primary, #2563eb);
}

.stat__label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--erp-text-muted);
}

.stat__value {
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-top: .375rem;
    font-variant-numeric: tabular-nums;
}

.stat__hint { font-size: .75rem; color: var(--erp-text-faint); margin-top: .125rem; }

/* ------------------------------------------------------------------ *
 * Tabelas
 * ------------------------------------------------------------------ */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--erp-text);
    margin: 0;
    font-size: .875rem;
}

.table > thead > tr > th {
    background: var(--erp-surface-alt);
    border-bottom: 1px solid var(--erp-border);
    color: var(--erp-text-muted);
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .625rem 1rem;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--erp-border-soft);
    vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr:hover > td { background: var(--erp-surface-alt); }

.table tfoot th {
    padding: .625rem 1rem;
    background: var(--erp-surface-alt);
    border-top: 1px solid var(--erp-border);
    font-weight: 600;
    font-size: .8125rem;
}

/* Tabela dentro de card: cantos arredondados sem vazar */
.card > .table-responsive { border-radius: 0 0 var(--erp-radius-lg) var(--erp-radius-lg); overflow: hidden; }
.card > .table-responsive:first-child { border-radius: var(--erp-radius-lg); }

/* Links de tabela: texto normal, com a cor de acento so no hover.
   Azul sublinhado em toda linha polui e envelhece a listagem. */
.table a {
    color: inherit;
    text-decoration: none;
}

.table a:hover {
    color: var(--erp-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cell-strong { font-weight: 600; }
.cell-sub { font-size: .75rem; color: var(--erp-text-muted); }

.row-muted { opacity: .55; }

/* Estado vazio */
.empty { padding: 3rem 1.5rem; text-align: center; color: var(--erp-text-muted); }
.empty__icon { font-size: 1.75rem; opacity: .35; margin-bottom: .5rem; }
.empty__title { font-weight: 600; color: var(--erp-text); margin-bottom: .25rem; }
.empty__text { font-size: .875rem; }

/* ------------------------------------------------------------------ *
 * Botoes
 * ------------------------------------------------------------------ */

.btn {
    --bs-btn-padding-y: .4375rem;
    --bs-btn-padding-x: .875rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--erp-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}

.btn-sm {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .625rem;
    --bs-btn-font-size: .8125rem;
}

.btn svg { width: 15px; height: 15px; flex: none; }

.btn-primary {
    --bs-btn-bg: var(--erp-accent);
    --bs-btn-border-color: var(--erp-accent);
    --bs-btn-hover-bg: var(--erp-accent-hover);
    --bs-btn-hover-border-color: var(--erp-accent-hover);
    --bs-btn-active-bg: var(--erp-accent-hover);
    --bs-btn-active-border-color: var(--erp-accent-hover);
    --bs-btn-disabled-bg: var(--erp-accent);
    --bs-btn-disabled-border-color: var(--erp-accent);
    box-shadow: var(--erp-shadow-sm);
}

.btn-outline-secondary {
    --bs-btn-color: var(--erp-text);
    --bs-btn-border-color: var(--erp-border);
    --bs-btn-bg: var(--erp-surface);
    --bs-btn-hover-color: var(--erp-text);
    --bs-btn-hover-bg: var(--erp-surface-alt);
    --bs-btn-hover-border-color: var(--erp-300);
    --bs-btn-active-color: var(--erp-text);
    --bs-btn-active-bg: var(--erp-100);
    --bs-btn-active-border-color: var(--erp-300);
}

.btn-outline-primary {
    --bs-btn-color: var(--erp-accent);
    --bs-btn-border-color: var(--erp-accent-border);
    --bs-btn-bg: var(--erp-surface);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--erp-accent);
    --bs-btn-hover-border-color: var(--erp-accent);
}

.btn-outline-danger {
    --bs-btn-color: var(--erp-danger);
    --bs-btn-border-color: var(--erp-border);
    --bs-btn-bg: var(--erp-surface);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--erp-danger);
    --bs-btn-hover-border-color: var(--erp-danger);
}

.btn-link { --bs-btn-color: var(--erp-text-muted); text-decoration: none; }
.btn-link:hover { color: var(--erp-text); }

/* Botao so com icone (remover item, etc.) */
.btn-icon {
    width: 34px; height: 34px;
    padding: 0;
    flex: none;
}

.btn-icon.btn-sm { width: 28px; height: 28px; }

/* ------------------------------------------------------------------ *
 * Badges / status
 * ------------------------------------------------------------------ */

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .1875rem .5rem;
    border-radius: 100px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.badge-status--neutral { background: var(--erp-100); color: var(--erp-600); border-color: var(--erp-200); }
.badge-status--success { background: var(--erp-success-soft); color: var(--erp-success); border-color: color-mix(in srgb, var(--erp-success) 25%, transparent); }
.badge-status--danger  { background: var(--erp-danger-soft);  color: var(--erp-danger);  border-color: color-mix(in srgb, var(--erp-danger) 25%, transparent); }
.badge-status--warning { background: var(--erp-warning-soft); color: var(--erp-warning); border-color: color-mix(in srgb, var(--erp-warning) 25%, transparent); }
.badge-status--info    { background: var(--erp-info-soft);    color: var(--erp-info);    border-color: color-mix(in srgb, var(--erp-info) 25%, transparent); }
.badge-status--dark    { background: var(--erp-200); color: var(--erp-700); border-color: var(--erp-300); }

[data-bs-theme="dark"] .badge-status--neutral { background: var(--erp-surface-alt); color: var(--erp-text-muted); border-color: var(--erp-border); }
[data-bs-theme="dark"] .badge-status--dark { background: var(--erp-surface-alt); color: var(--erp-text); border-color: var(--erp-border); }

/* Sem o ponto */
.badge-plain::before { display: none; }

/* ------------------------------------------------------------------ *
 * Formularios
 * ------------------------------------------------------------------ */

.form-label {
    font-size: .8125rem;
    font-weight: 550;
    color: var(--erp-text);
    margin-bottom: .3125rem;
}

.form-control, .form-select {
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    color: var(--erp-text);
    font-size: .875rem;
    padding: .4375rem .6875rem;
    transition: border-color .12s, box-shadow .12s;
}

.form-control::placeholder { color: var(--erp-text-faint); }

.form-control:focus, .form-select:focus {
    background: var(--erp-surface);
    color: var(--erp-text);
    border-color: var(--erp-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--erp-accent) 15%, transparent);
}

.form-control:disabled, .form-control[readonly] { background: var(--erp-surface-alt); }

.form-text {
    font-size: .75rem;
    color: var(--erp-text-muted);
    margin-top: .25rem;
}

.form-check-input { border-color: var(--erp-300); }
.form-check-input:checked { background-color: var(--erp-accent); border-color: var(--erp-accent); }
.form-check-input:focus { border-color: var(--erp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--erp-accent) 15%, transparent); }
.form-check-label { font-size: .875rem; }

.invalid-feedback, .form-error-message {
    font-size: .75rem;
    color: var(--erp-danger);
    margin-top: .25rem;
    display: block;
}

.form-control.is-invalid, .form-select.is-invalid { border-color: var(--erp-danger); }

/* Secao de formulario com titulo */
.form-section + .form-section { margin-top: 1.25rem; }

/* Linha de item da nota: tudo alinhado pela base do campo */
.item-linha {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) 90px 90px 120px 110px 36px;
    gap: .625rem;
    align-items: start;
    padding: .875rem;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    background: var(--erp-surface-alt);
    margin-bottom: .625rem;
}

.item-linha .mb-3 { margin-bottom: 0 !important; }

/* O botao de remover alinha com a altura do input, nao com o label */
.item-linha__remover { align-self: start; margin-top: 1.5625rem; }

@media (max-width: 900px) {
    .item-linha { grid-template-columns: 1fr 1fr; }
    .item-linha__remover { grid-column: 2; justify-self: end; margin-top: .5rem; }
}

/* Link para o painel do marketplace, ao lado do número do pedido */
.link-externo {
    display: inline-flex;
    align-items: center;
    margin-left: .375rem;
    color: var(--erp-text-faint);
    vertical-align: middle;
}

.link-externo:hover { color: var(--erp-accent); }
.link-externo svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ *
 * Paginação
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * Cartoes de integracao por canal
 *
 * <details> nativo: expande sem JS e mantem o estado de teclado/acessi-
 * bilidade de graca. A faixa colorida identifica o canal de relance.
 * ------------------------------------------------------------------ */

.canal {
    margin-bottom: .75rem;
    border: 1px solid var(--erp-border);
    border-left: 3px solid var(--canal-cor, var(--erp-border));
    border-radius: var(--erp-radius);
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-sm);
    overflow: hidden;
}

.canal__topo {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Some com a setinha padrao do <summary> nos dois motores. */
.canal__topo::-webkit-details-marker { display: none; }
.canal__topo::marker { content: ''; }

.canal__topo:hover { background: var(--erp-surface-alt, rgba(127, 127, 127, .04)); }

/* ------------------------------------------------------------------ *
 * Avatar, escolha de aparencia e permissoes
 * ------------------------------------------------------------------ */

.avatar { border-radius: 50%; display: inline-block; vertical-align: middle; object-fit: cover; }

.avatar--inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    line-height: 1;
}

.escolha-avatar { display: flex; flex-wrap: wrap; gap: .5rem; }

.escolha-avatar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    width: 4.5rem;
    padding: .5rem .25rem;
    border: 2px solid transparent;
    border-radius: var(--erp-radius);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.escolha-avatar__item:hover { background: var(--erp-surface-alt, rgba(127, 127, 127, .07)); }

/* O destaque sai do proprio radio (:has), nao de uma classe vinda do servidor:
   assim a selecao aparece no clique, antes de salvar. */
.escolha-avatar__item.is-ativo,
.escolha-avatar__item:has(input:checked) { border-color: var(--erp-primary, #2563eb); }

/* Esconder sem position:absolute e sem pointer-events:none - o radio precisa
   continuar recebendo foco de teclado. */
.escolha-avatar__item input,
.escolha-cor__item input {
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.escolha-avatar__item:focus-within,
.escolha-cor__item:focus-within .escolha-cor__bola {
    outline: 2px solid var(--erp-primary, #2563eb);
    outline-offset: 2px;
}

.escolha-avatar__item .avatar { width: 44px; height: 44px; font-size: 18px; }
.escolha-avatar__nome { font-size: .6875rem; color: var(--erp-text-muted); }

.escolha-cor { display: flex; flex-wrap: wrap; gap: .5rem; }
.escolha-cor__item { cursor: pointer; line-height: 0; display: inline-block; }

.escolha-cor__bola {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 3px solid transparent;
    box-shadow: 0 0 0 1px var(--erp-border);
    transition: transform .12s;
}

.escolha-cor__item:hover .escolha-cor__bola { transform: scale(1.1); }

.escolha-cor__item.is-ativo .escolha-cor__bola,
.escolha-cor__item:has(input:checked) .escolha-cor__bola {
    border-color: var(--erp-surface);
    box-shadow: 0 0 0 2px var(--erp-text);
}

/* Edicao de preco e estoque direto na linha da oferta. */
.editar-oferta { display: flex; align-items: center; gap: .3rem; }
.editar-oferta__prefixo { font-size: .8125rem; color: var(--erp-text-muted); }
.editar-oferta input[name="preco"] { width: 6.5rem; text-align: right; }
.editar-oferta input[name="quantidade"] { width: 4.5rem; text-align: right; }

/* Lista de requisitos da senha: cinza ate cumprir, verde depois. */
.requisitos {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    font-size: .8125rem;
    line-height: 1.7;
}

.requisitos li {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--erp-text-muted);
    transition: color .15s;
}

/* O marcador e um pseudo-elemento: vira check sem precisar de icone por item. */
.requisitos li::before {
    content: '';
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: .5;
    transition: all .15s;
}

.requisitos li.is-ok { color: #16a34a; font-weight: 500; }

.requisitos li.is-ok::before {
    border-color: #16a34a;
    background: #16a34a;
    opacity: 1;
    /* Check desenhado com o proprio fundo recortado. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat,
             linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat,
          linear-gradient(#000, #000);
    mask-composite: exclude;
}

.permissoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.25rem; }
.permissoes__grupo { border: 0; margin: 0; padding: 0; min-width: 0; }

.permissoes__titulo {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--erp-text-muted);
    margin-bottom: .5rem;
    padding: 0;
}

.permissao { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .625rem; cursor: pointer; }
.permissao input { margin-top: .2rem; flex: 0 0 auto; }
.permissao__rotulo { display: block; font-size: .875rem; font-weight: 500; }
.permissao__ajuda { display: block; font-size: .75rem; color: var(--erp-text-muted); line-height: 1.35; }
.permissao.is-off { opacity: .45; }

/* ------------------------------------------------------------------ *
 * Filtro por canal: o logo e o botao
 * ------------------------------------------------------------------ */

.canais-filtro {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}

.canal-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .625rem;
    border: 1px solid var(--erp-border);
    border-radius: 999px;
    background: var(--erp-surface);
    color: var(--erp-text-muted);
    text-decoration: none;
    font-size: .8125rem;
    line-height: 1;
    transition: border-color .12s, color .12s, box-shadow .12s;
}

.canal-chip:hover {
    color: var(--erp-text);
    border-color: var(--erp-text-muted);
}

/* O canal selecionado precisa se distinguir sem depender de cor, porque os
   logos ja sao coloridos: borda forte + sombra. */
.canal-chip.is-ativo {
    color: var(--erp-text);
    border-color: var(--erp-primary, #2563eb);
    box-shadow: 0 0 0 1px var(--erp-primary, #2563eb);
}

.canal-chip img { border-radius: 5px; display: block; }
.canal-chip__todos { font-weight: 600; }

.canal-chip__contagem {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .75rem;
}

/* Icone do canal nas listagens, no lugar do nome escrito. */
.canal-icone {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 6px;
    vertical-align: middle;
    flex: 0 0 auto;
}

.canal__logo {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 9px;
}

.canal__id { flex: 1 1 auto; min-width: 0; }
.canal__nome { font-weight: 600; font-size: .9375rem; }

.canal__resumo {
    font-size: .8125rem;
    color: var(--erp-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.canal__seta {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: var(--erp-text-muted);
    transition: transform .15s ease;
}

.canal[open] .canal__seta { transform: rotate(180deg); }

.canal__corpo {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--erp-border-soft);
    padding-top: 1rem;
}

/* Barra que surge ao marcar pedidos na lista, com as acoes do lote. */
.barra-selecao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
    padding: .625rem 1rem;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-sm);
}

.barra-selecao__info { font-size: .875rem; color: var(--erp-text-muted); }
.barra-selecao__info strong { color: var(--erp-text); font-variant-numeric: tabular-nums; }

.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--erp-border-soft);
}

.paginacao__info { font-size: .8125rem; color: var(--erp-text-muted); font-variant-numeric: tabular-nums; }
.paginacao__links { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }

.paginacao__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 .5rem;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    background: var(--erp-surface);
    color: var(--erp-text);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}

.paginacao__link:hover { background: var(--erp-surface-alt); border-color: var(--erp-300); color: var(--erp-text); }

.paginacao__link.is-atual {
    background: var(--erp-accent);
    border-color: var(--erp-accent);
    color: #fff;
}

.paginacao__link.is-off { opacity: .4; pointer-events: none; }
.paginacao__reticencias { color: var(--erp-text-faint); padding: 0 .25rem; }

/* ------------------------------------------------------------------ *
 * Lista de verificação (diagnóstico do certificado)
 * ------------------------------------------------------------------ */

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }

.check { display: flex; gap: .625rem; align-items: flex-start; }

.check__icon {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: .6875rem; font-weight: 700; line-height: 1;
    flex: none;
    margin-top: .125rem;
}

.check__icon--ok   { background: var(--erp-success-soft); color: var(--erp-success); }
.check__icon--fail { background: var(--erp-danger-soft);  color: var(--erp-danger); }
.check__icon--warn { background: var(--erp-warning-soft); color: var(--erp-warning); }

.check__body { display: flex; flex-direction: column; min-width: 0; }
.check__label { font-size: .8125rem; font-weight: 600; }
.check__detail { font-size: .75rem; color: var(--erp-text-muted); word-break: break-word; }
.check__warn { font-size: .75rem; color: var(--erp-danger); margin-top: .125rem; }

/* ------------------------------------------------------------------ *
 * Alertas
 * ------------------------------------------------------------------ */

.alert {
    border-radius: var(--erp-radius);
    border: 1px solid;
    padding: .75rem 1rem;
    font-size: .875rem;
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}

.alert .btn-close { margin-left: auto; padding: .5rem; font-size: .625rem; }

.alert-success { background: var(--erp-success-soft); border-color: color-mix(in srgb, var(--erp-success) 30%, transparent); color: var(--erp-success); }
.alert-danger  { background: var(--erp-danger-soft);  border-color: color-mix(in srgb, var(--erp-danger) 30%, transparent);  color: var(--erp-danger); }
.alert-warning { background: var(--erp-warning-soft); border-color: color-mix(in srgb, var(--erp-warning) 30%, transparent); color: var(--erp-warning); }
.alert-info    { background: var(--erp-info-soft);    border-color: color-mix(in srgb, var(--erp-info) 30%, transparent);    color: var(--erp-info); }
.alert-secondary { background: var(--erp-surface-alt); border-color: var(--erp-border); color: var(--erp-text-muted); }

.alert a, .alert .alert-link { color: inherit; font-weight: 600; text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * Barra de filtros
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * Barra de filtros
 *
 * Busca e acoes em cima, sempre visiveis. O resto fica numa gaveta que
 * so abre quando pedida - ou sozinha, quando ja ha filtro aplicado.
 * ------------------------------------------------------------------ */

.filtros {
    margin-bottom: 1rem;
    padding: .75rem;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-sm);
}

.filtros__topo {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

.filtros__busca { position: relative; flex: 1 1 260px; min-width: 0; }
.filtros__busca .form-control { padding-left: 2.25rem; }

.filtros__lupa {
    position: absolute;
    left: .75rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    color: var(--erp-text-muted);
    pointer-events: none;
}

.filtros__alternar { display: inline-flex; align-items: center; gap: .375rem; }
.filtros__alternar svg { width: 1rem; height: 1rem; }

.filtros__contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: var(--erp-primary, #2563eb);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
}

/* A gaveta: escondida por padrao, revelada por [data-expandida]. */
.filtros__grade { display: none; }

.filtros[data-expandida] .filtros__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--erp-border-soft);
}

.campo-filtro { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }

.campo-filtro__rotulo {
    font-size: .75rem;
    font-weight: 600;
    color: var(--erp-text-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Retorno da busca por CEP, logo abaixo do campo. */
.cep-aviso { min-height: 1.2em; }
.cep-aviso--ok { color: var(--erp-success-text, #15803d); }
.cep-aviso--erro { color: var(--erp-danger-text, #b91c1c); font-weight: 600; }

/* Resumo do CFOP que a nota vai usar.

   Discreto enquanto falta escolher empresa/cliente, e destacado quando ja tem
   um codigo definido - e o numero que a pessoa precisa conferir antes de
   transmitir. */
.cfop-resumo {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    padding: .5rem .75rem;
    border: 1px dashed var(--erp-border);
    border-radius: var(--erp-radius-lg, .5rem);
    background: var(--erp-surface-2, transparent);
}

.cfop-resumo.is-pronto {
    border-style: solid;
    border-color: var(--erp-primary, #2563eb);
}

.cfop-resumo__rotulo {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--erp-text-muted);
}

.cfop-resumo__campo {
    width: 5.5rem;
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: .04em;
}

.cfop-resumo.is-pronto .cfop-resumo__campo {
    border-color: var(--erp-primary, #2563eb);
    color: var(--erp-primary, #2563eb);
}

.cfop-resumo__texto { font-size: .8125rem; color: var(--erp-text-muted); }

.cfop-resumo__alerta {
    font-size: .75rem;
    font-weight: 600;
    padding: .125rem .5rem;
    border-radius: 999px;
    background: var(--erp-warning-bg, rgba(217, 119, 6, .15));
    color: var(--erp-warning-text, #d97706);
}

/* Combobox com busca dentro do dropdown.

   O <select> nativo fica escondido mas PRESENTE: ele continua enviando o valor
   do formulario. Nao usa display:none para o navegador ainda conseguir focar o
   campo ao reportar erro de validacao. */
.combo { position: relative; }

.combo__nativo {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    bottom: 0;
}

.combo__gatilho {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combo__gatilho--vazio { color: var(--erp-text-muted); }

.combo__painel {
    position: absolute;
    z-index: 20;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg, .5rem);
    box-shadow: var(--erp-shadow);
    padding: .5rem;
}

.combo__lista {
    max-height: 15rem;
    overflow-y: auto;
    margin-top: .375rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.combo__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: .4rem .5rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: inherit;
    font-size: .875rem;
    cursor: pointer;
}

.combo__item:hover,
.combo__item:focus { background: var(--erp-accent-bg, rgba(127,127,127,.12)); outline: none; }

.combo__item.is-ativo {
    color: var(--erp-text);
    box-shadow: inset 0 0 0 1px var(--erp-primary, #2563eb);
}

.combo__vazio { padding: .5rem; font-size: .8125rem; color: var(--erp-text-muted); }

/* Multipla escolha: ocupa duas colunas porque sao varias caixas lado a lado,
   e espremidas numa coluna so elas quebrariam uma por linha. */
.campo-filtro--caixas { grid-column: span 2; }
.campo-filtro__caixas { display: flex; flex-wrap: wrap; gap: .375rem; }

.caixa-filtro {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .625rem;
    border: 1px solid var(--erp-border);
    border-radius: 999px;
    font-size: .8125rem;
    color: var(--erp-text-muted);
    cursor: pointer;
    user-select: none;
}

.caixa-filtro:hover { border-color: var(--erp-accent-border); }

/* :has para o estado marcado seguir a caixa sem depender de JS - mesma
   abordagem dos seletores de avatar e de cor. */
.caixa-filtro:has(input:checked) {
    color: var(--erp-text);
    border-color: var(--erp-primary, #2563eb);
    box-shadow: 0 0 0 1px var(--erp-primary, #2563eb);
}

.campo-filtro--periodo { grid-column: span 2; }
.campo-filtro__par { display: flex; align-items: center; gap: .375rem; }
.campo-filtro__par .form-control { min-width: 0; flex: 1 1 0; }
.campo-filtro__ate { font-size: .8125rem; color: var(--erp-text-muted); flex: 0 0 auto; }

.filtros__atalhos { display: flex; gap: .25rem; flex-wrap: wrap; }

.filtros__atalho {
    padding: .3125rem .625rem;
    border: 1px solid var(--erp-border);
    border-radius: 999px;
    background: transparent;
    color: var(--erp-text-muted);
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.filtros__atalho:hover {
    background: var(--erp-surface-alt, rgba(127, 127, 127, .08));
    color: var(--erp-text);
    border-color: var(--erp-text-muted);
}

/* Fichas do que esta aplicado, cada uma removivel sozinha. */
.filtros__chips {
    display: flex;
    gap: .375rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--erp-border-soft);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .5rem .25rem .625rem;
    border: 1px solid var(--erp-border);
    border-radius: 999px;
    background: var(--erp-surface-alt, rgba(127, 127, 127, .06));
    font-size: .75rem;
    line-height: 1.4;
}

.chip__rotulo { color: var(--erp-text-muted); }
.chip__valor { font-weight: 600; color: var(--erp-text); }

.chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    color: var(--erp-text-muted);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
}

.chip__x:hover { background: var(--erp-danger, #dc2626); color: #fff; }

.chip--limpar {
    color: var(--erp-text-muted);
    text-decoration: none;
    border-style: dashed;
    background: transparent;
}

.chip--limpar:hover { color: var(--erp-text); }

@media (max-width: 640px) {
    .campo-filtro--periodo { grid-column: span 1; }
    .campo-filtro--caixas { grid-column: span 1; }
}

.filters {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filters .form-control, .filters .form-select { min-width: 180px; }
.filters__search { flex: 1 1 260px; max-width: 380px; }

/* ------------------------------------------------------------------ *
 * Lista de definicoes (detalhe)
 * ------------------------------------------------------------------ */

.dl-clean { margin: 0; display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: .5rem 1rem; font-size: .875rem; }
.dl-clean dt { color: var(--erp-text-muted); font-weight: 500; }
.dl-clean dd { margin: 0; font-weight: 500; }

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

.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--erp-accent) 12%, transparent), transparent),
        var(--erp-bg);
}

.login-card {
    width: 100%;
    max-width: 390px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-lg);
    padding: 2rem;
}

/* ------------------------------------------------------------------ *
 * Alternador de tema
 * ------------------------------------------------------------------ */

.theme-toggle {
    width: 34px; height: 34px;
    border-radius: var(--erp-radius-sm);
    border: 1px solid var(--erp-border);
    background: var(--erp-surface);
    color: var(--erp-text-muted);
    display: grid; place-items: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.theme-toggle:hover { background: var(--erp-surface-alt); color: var(--erp-text); }
.theme-toggle svg { width: 16px; height: 16px; }
[data-bs-theme="light"] .theme-toggle .icon-sun,
:root:not([data-bs-theme="dark"]) .theme-toggle .icon-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ------------------------------------------------------------------ *
 * Sino de notificações (topo)
 * ------------------------------------------------------------------ */
.sino__botao { position: relative; }
.sino__contador {
    position: absolute; top: -5px; right: -5px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px;
    background: var(--bs-danger); color: #fff;
    font-size: .6875rem; font-weight: 600; line-height: 17px; text-align: center;
}
.sino__contador[hidden] { display: none; }
.sino__menu { width: 360px; max-width: calc(100vw - 2rem); padding: 0; overflow: hidden; }
.sino__cabecalho {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .625rem .875rem; border-bottom: 1px solid var(--erp-border);
}
[data-sino-lista] { max-height: 360px; overflow-y: auto; }
.sino__item {
    display: flex; gap: .625rem; padding: .625rem .875rem;
    color: var(--erp-text); text-decoration: none;
    border-bottom: 1px solid var(--erp-border);
}
.sino__item:last-child { border-bottom: 0; }
.sino__item:hover { background: var(--erp-surface-alt); color: var(--erp-text); }
.sino__item.is-nova { background: color-mix(in srgb, var(--bs-primary) 7%, transparent); }
.sino__marca { flex: 0 0 8px; height: 8px; margin-top: .375rem; border-radius: 999px; background: var(--bs-info); }
.sino__marca--success { background: var(--bs-success); }
.sino__marca--warning { background: var(--bs-warning); }
.sino__marca--danger { background: var(--bs-danger); }
.sino__titulo { display: block; font-size: .8125rem; font-weight: 600; }
.sino__texto { display: block; font-size: .8125rem; color: var(--erp-text-muted); }
.sino__quando { display: block; font-size: .75rem; color: var(--erp-text-muted); margin-top: .125rem; }
.sino__vazio { padding: 1rem .875rem; font-size: .8125rem; color: var(--erp-text-muted); }

/* Aviso que aparece quando uma notificação chega com a página aberta. */
.sino-aviso {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1080;
    width: 360px; max-width: calc(100vw - 2rem);
    padding: .75rem .875rem; border-radius: var(--erp-radius-sm);
    background: var(--erp-surface); color: var(--erp-text);
    border: 1px solid var(--erp-border); border-left: 4px solid var(--bs-info);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    font-size: .8125rem;
}
.sino-aviso--success { border-left-color: var(--bs-success); }
.sino-aviso--warning { border-left-color: var(--bs-warning); }
.sino-aviso--danger { border-left-color: var(--bs-danger); }
.sino-aviso a { color: inherit; text-decoration: none; display: block; }
.sino-aviso strong { display: block; margin-bottom: .125rem; }

/* ------------------------------------------------------------------ *
 * Responsivo: sidebar vira gaveta
 * ------------------------------------------------------------------ */

.sidebar-toggle { display: none; }

@media (max-width: 992px) {
    .app { grid-template-columns: 1fr; }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--erp-sidebar-w);
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--erp-shadow-lg);
    }

    .app.is-open .sidebar { transform: none; }

    .app.is-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(10, 14, 20, .5);
        z-index: 50;
    }

    .sidebar-toggle {
        display: grid;
        place-items: center;
        width: 34px; height: 34px;
        border-radius: var(--erp-radius-sm);
        border: 1px solid var(--erp-border);
        background: var(--erp-surface);
        color: var(--erp-text);
        cursor: pointer;
    }

    .content, .topbar { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 576px) {
    .page-head { flex-direction: column; align-items: stretch; }
    .page-head .actions { justify-content: flex-start; }
    .dl-clean { grid-template-columns: 1fr; gap: .125rem 0; }
    .dl-clean dd { margin-bottom: .5rem; }
}

@media print {
    .sidebar, .topbar, .actions, .btn { display: none !important; }
    .app { grid-template-columns: 1fr; }
    .content { padding: 0; }
    .card { border: none; box-shadow: none; }
}

/* ------------------------------------------------------------------ *
 * Campo exigido que não é um input
 *
 * O frete é escolhido num rádio que só existe depois de cotar, então não há
 * um campo para marcar com .is-invalid. A moldura cerca a área inteira — o
 * botão de cotar e a lista de opções — porque quando nada foi cotado o que
 * falta é apertar o botão, não preencher um campo.
 * ------------------------------------------------------------------ */

.exigido {
    border: 2px solid transparent;
    border-radius: .5rem;
    transition: border-color .15s ease;
}

.exigido.is-exigido {
    border-color: var(--erp-danger);
    padding: .5rem;
}

.exigido__aviso {
    color: var(--erp-danger-text, #b91c1c);
    font-size: .8125rem;
    font-weight: 600;
    margin-top: .375rem;
}
/* ------------------------------------------------------------------ *
 * Grupo recolhível da barra lateral
 *
 * Feito com <details>/<summary>: sem JS, navegável pelo teclado e imune a
 * erro de script. O marcador nativo sai de cena e a seta vira o indicador,
 * para o cabeçalho ficar igual aos outros links.
 * ------------------------------------------------------------------ */

.sidebar__grupo { display: flex; flex-direction: column; gap: 2px; }

.sidebar__grupo__titulo {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* O triângulo padrão do <summary>, nos dois motores. */
.sidebar__grupo__titulo::-webkit-details-marker { display: none; }
.sidebar__grupo__titulo::marker { content: ''; }

.sidebar__grupo__titulo > span { flex: 1; }

.sidebar__seta { transition: transform .15s ease; opacity: .6 !important; }

.sidebar__grupo[open] .sidebar__seta { transform: rotate(180deg); }

/* O recuo alinha o texto do filho com o dos links de primeiro nível, que
   começam depois do ícone. */
.sidebar__subitem { padding-left: 2.4rem; font-size: .8125rem; }