/* PHPBaseTemplate - estilo base (PERSONALIZE as cores da paleta padrao abaixo) */

* { box-sizing: border-box; }

/* O atributo hidden precisa vencer qualquer display do componente.
   A regra do navegador ([hidden] { display: none }) tem especificidade 0-1-0
   e perde para .produto-card { display: flex } — era por isso que esconder
   um card pelo JS (card.hidden = true) nao surtia efeito nenhum. */
[hidden] { display: none !important; }

/* ============ PALETA PADRAO (azul) ============ */
:root {
    --topbar-bg: #ffffff;
    --topbar-text: #1e3a8a;
    --topbar-border: #e5e7eb;

    --sidebar-bg: #ffffff;
    --sidebar-text: #1f2937;
    --sidebar-hover-bg: #f3f4f6;
    --sidebar-active-bg: #eff6ff;
    --sidebar-active-text: #1e3a8a;
    --sidebar-active-border: #1e3a8a;

    --content-bg: #f4f6f8;
}

/* ============ PALETAS ALTERNATIVAS ============ */
body.tema-esmeralda {
    --topbar-bg: #065f46;
    --topbar-text: #ecfdf5;
    --topbar-border: #064e3b;

    --sidebar-hover-bg: #ecfdf5;
    --sidebar-active-bg: #d1fae5;
    --sidebar-active-text: #065f46;
    --sidebar-active-border: #065f46;

    --content-bg: #f0fdf4;
}

body.tema-vinho {
    --topbar-bg: #7f1d1d;
    --topbar-text: #fef2f2;
    --topbar-border: #991b1b;

    --sidebar-hover-bg: #fef2f2;
    --sidebar-active-bg: #fee2e2;
    --sidebar-active-text: #7f1d1d;
    --sidebar-active-border: #7f1d1d;

    --content-bg: #fdf6f6;
}

body.tema-roxo {
    --topbar-bg: #5b21b6;
    --topbar-text: #ede9fe;
    --topbar-border: #4c1d95;

    --sidebar-hover-bg: #f5f3ff;
    --sidebar-active-bg: #ede9fe;
    --sidebar-active-text: #5b21b6;
    --sidebar-active-border: #5b21b6;

    --content-bg: #faf5ff;
}

body.tema-cinza {
    --topbar-bg: #1f2937;
    --topbar-text: #f9fafb;
    --topbar-border: #111827;

    --sidebar-hover-bg: #f3f4f6;
    --sidebar-active-bg: #e5e7eb;
    --sidebar-active-text: #111827;
    --sidebar-active-border: #6b7280;

    --content-bg: #f9fafb;
}

/* ============ BASE ============ */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--content-bg);
    color: #1f2937;
}

a { color: #1d4ed8; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============ AUTH ============ */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(circle at 30% 20%, #6d28d9 0%, #4c1d95 55%, #3b0d6e 100%);
}
.auth-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 410px;
}
.auth-logo-top {
    width: 58%;
    max-width: 210px;
    height: auto;
    margin-bottom: 26px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.30));
}
.auth-card {
    background: #fff;
    padding: 36px 32px;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.30);
    width: 100%;
    text-align: center;
}
.auth-card h1 {
    margin: 0 0 4px;
    color: #5b21b6;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.25;
}
.auth-sub {
    color: #6b7280;
    font-size: 14px;
    margin: 0 0 26px;
}
.auth-card p {
    color: #6b7280;
    margin-bottom: 24px;
    font-size: 14px;
}
.auth-logo {
    display: block;
    margin: 0 auto 16px;
    max-width: 180px;
    height: auto;
}
/* Botão "Entrar com Microsoft" */
.btn-microsoft {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #1f2937 !important;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn-microsoft:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}
.btn-microsoft svg { width: 19px; height: 19px; display: block; }
.auth-rodape {
    margin-top: 22px;
    color: rgba(255,255,255,0.75);
    font-size: 12px;
}

/* ============ BOTOES ============ */
/* Tamanho padrao para todos os botoes do sistema */
.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    transition: background 0.15s, opacity 0.15s;
}

.btn-primary {
    background: #1e3a8a;
    color: #fff !important;
    font-weight: 600;
}
.btn-primary:hover { background: #1e40af; text-decoration: none; }

.btn-secondary {
    background: #e5e7eb;
    color: #1f2937 !important;
}
.btn-secondary:hover { background: #d1d5db; text-decoration: none; }

.btn-danger {
    background: #dc2626;
    color: #fff !important;
    font-weight: 600;
}
.btn-danger:hover { background: #b91c1c; text-decoration: none; }

/* Variante maior para CTAs principais (ex.: tela de login) */
.btn-lg {
    padding: 12px 24px;
    font-size: 15px;
}

/* Botoes que mostram apenas icone (acoes em tabelas) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 34px;
    height: 34px;
    line-height: 1;
}
.btn-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Botoes com icone + texto (ex.: "Nova retenção" com +) */
.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-with-icon svg { width: 16px; height: 16px; display: block; }

/* Espacamento entre acoes inline em tabelas */
td .btn-icon + .btn-icon,
td .btn-icon + form,
td form + .btn-icon,
td form + form,
td a + a,
td a + form,
td form + a { margin-left: 4px; }

td form { display: inline-block; vertical-align: middle; margin: 0; }
td .btn-icon { vertical-align: middle; }

/* Forca a ultima coluna (acoes) a manter botoes em uma linha so */
table tr > td:last-child {
    white-space: nowrap;
}

.btn-link {
    color: var(--topbar-text) !important;
    margin-left: 12px;
}

/* ============ LAYOUT ============ */
.topbar {
    background: var(--topbar-bg);
    color: var(--topbar-text);
    border-bottom: 1px solid var(--topbar-border);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.topbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--topbar-text) !important;
    font-size: 18px;
    text-decoration: none;
}
.topbar .brand:hover { text-decoration: none; opacity: 0.85; }
.topbar .brand img { height: 32px; width: auto; display: block; }
.topbar .user {
    color: var(--topbar-text);
    font-size: 14px;
    opacity: 0.92;
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.user-avatar-fallback {
    background: rgba(255, 255, 255, 0.25);
    color: var(--topbar-text);
    font-weight: 600;
    font-size: 14px;
}

.layout {
    display: flex;
    min-height: calc(100vh - 57px);
}

.sidebar {
    width: 220px;
    flex-shrink: 0; /* nao deixa o menu ser espremido por conteudo largo */
    background: var(--sidebar-bg);
    border-right: 1px solid #e5e7eb;
    padding: 16px 0;
}
.sidebar a.menu-item {
    display: block;
    padding: 10px 20px;
    color: var(--sidebar-text) !important;
    border-left: 3px solid transparent;
}
.sidebar a.menu-item:hover { background: var(--sidebar-hover-bg); text-decoration: none; }
.sidebar a.menu-item.active {
    background: var(--sidebar-active-bg);
    border-left-color: var(--sidebar-active-border);
    color: var(--sidebar-active-text) !important;
    font-weight: 600;
}

/* ============ GRUPOS DE MENU ============ */
.sidebar .menu-group {
    margin: 0;
}
.sidebar .menu-group > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 20px;
    color: var(--sidebar-text);
    font-weight: 600;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 3px solid transparent;
}
.sidebar .menu-group > summary::-webkit-details-marker { display: none; }
.sidebar .menu-group > summary::marker { display: none; content: ''; }
.sidebar .menu-group > summary:hover { background: var(--sidebar-hover-bg); }
.sidebar .menu-group > summary::after {
    content: '▸';
    font-size: 12px;
    color: #9ca3af;
    transition: transform 0.15s;
    margin-left: 8px;
}
.sidebar .menu-group[open] > summary::after {
    transform: rotate(90deg);
}
.sidebar .menu-sub a.menu-item {
    padding-left: 36px;
    font-size: 14px;
}

/* ============ TOGGLE DO MENU LATERAL ============ */
.btn-toggle-sidebar {
    background: transparent;
    border: none;
    color: var(--topbar-text);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 4px 10px;
    margin-right: 10px;
    border-radius: 6px;
    transition: opacity 0.15s;
}
.btn-toggle-sidebar:hover { opacity: 0.75; }
.topbar-left {
    display: flex;
    align-items: center;
}

.sidebar-collapsed .sidebar { display: none; }

/* ============ AUTOCOMPLETE ============ */
.autocomplete-wrap { position: relative; }
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 360px;
    max-width: 600px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 4px;
}
.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
    line-height: 1.4;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.highlighted { background: #eff6ff; }
.autocomplete-item .ac-codigo { color: #1e3a8a; font-weight: 600; margin-right: 8px; }
.autocomplete-item .ac-desc { color: #4b5563; }
.autocomplete-empty {
    padding: 10px 12px;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
}

.content {
    flex: 1;
    /* Sem isto o item flex nao encolhe abaixo do conteudo: uma tabela larga
       estica o .content, estica o .layout e a PAGINA INTEIRA passa a rolar
       na horizontal (cortando o topo). Com min-width:0 quem rola e a
       .table-scroll, como deveria. */
    min-width: 0;
    padding: 24px;
}

/* ============ COMPONENTES ============ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.page-header h1 {
    margin: 0;
    font-size: 22px;
    color: #1f2937;
}

.card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}

table {
    width: 100%;
    background: #fff;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
th, td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
}
th { background: #f9fafb; font-weight: 600; color: #4b5563; }
tr:last-child td { border-bottom: none; }

/* Zebra: as listagens do sistema são longas (pedidos, produtos, auditoria)
 * e sem faixa alternada o olho perde a linha ao correr para a direita. */
tbody tr:nth-child(even) td { background: #fcfcfd; }
tbody tr:hover td { background: #f1f5f9; }

tfoot td, tfoot th {
    background: #f9fafb;
    font-weight: 700;
    border-top: 2px solid #e5e7eb;
    border-bottom: none;
}

/* Campos dentro de célula de tabela ficam compactos — a linha não pode
 * crescer só porque tem um input dentro (telas de entrada/saída/solicitação). */
td input, td select {
    padding: 6px 8px;
    font-size: 13px;
}

td input[type=number] {
    width: 84px;
    text-align: center;
    font-weight: 600;
}

/* Linha inteira apagada: produto inativo, pedido excluído, filial inativa */
tr.muted td { opacity: .55; }

.row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.field { flex: 1; min-width: 180px; }
.row label,
.field label {
    display: block;
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 4px;
    font-weight: 500;
}
/* Campo de formulário tem a mesma cara em QUALQUER lugar da tela.
 *
 * Antes o estilo estava preso a `.field input` / `.row input`, então todo
 * campo fora desses wrappers — dentro de célula de tabela, por exemplo —
 * caía no visual padrão do navegador e destoava do resto.
 *
 * Os tipos são listados um a um de propósito: um `input:not(...)` teria
 * especificidade maior e passaria por cima dos controles da loja
 * (.qtd-controles input) e da busca do catálogo. */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=date], input[type=datetime-local], input[type=tel],
input[type=url], input[type=time], input:not([type]),
select, textarea {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2937;
    background: #fff;
    max-width: 100%;
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=number]:focus, input[type=search]:focus, input[type=date]:focus,
input[type=datetime-local]:focus, input[type=tel]:focus, input[type=url]:focus,
input[type=time]:focus, input:not([type]):focus,
select:focus, textarea:focus {
    outline: none;
    border-color: #1e3a8a;
    box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}

select { cursor: pointer; }

input:disabled, select:disabled, textarea:disabled {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Dentro de .field / .row o campo ocupa a largura toda do wrapper */
.row input, .row select, .row textarea,
.field input, .field select, .field textarea { width: 100%; }

.row textarea, .field textarea { min-height: 80px; resize: vertical; }
.form-actions { margin-top: 16px; display: flex; gap: 8px; }

/* Tabela com inputs/selects/textareas dentro das celulas (ex.: tolerancias por pais) */
.tabela-form td select,
.tabela-form td input,
.tabela-form td textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}
.tabela-form td textarea {
    min-height: 60px;
    resize: vertical;
}
.tabela-form td select:focus,
.tabela-form td input:focus,
.tabela-form td textarea:focus {
    outline: none;
    border-color: #1e3a8a;
    box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.tabela-form td { vertical-align: top; }

/* Validação visual do campo Resultado (entre m e M) */
.input-conforme {
    background: #d1fae5 !important;
    border-color: #10b981 !important;
    color: #065f46 !important;
    font-weight: 600;
}
.input-nao-conforme {
    background: #fee2e2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
    font-weight: 600;
}

/* Grid de 6 colunas iguais (para alinhar campos em multiplas linhas) */
.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}
@media (max-width: 1024px) {
    .grid-6 { grid-template-columns: repeat(3, 1fr); }
    .grid-6 .field[style*="grid-column"] { grid-column: span 3 !important; }
}
@media (max-width: 600px) {
    .grid-6 { grid-template-columns: repeat(2, 1fr); }
    .grid-6 .field[style*="grid-column"] { grid-column: span 2 !important; }
}

/* ============ LOADING ============ */
.loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
    animation: fadeIn 0.15s ease-out;
}
.loading-overlay .spinner {
    width: 56px;
    height: 56px;
    border: 5px solid #e5e7eb;
    border-top-color: #1e3a8a;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}
.loading-overlay .msg {
    font-size: 15px;
    color: #1e3a8a;
    font-weight: 600;
}
.loading-overlay .submsg {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.flash {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
}
.flash-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.flash-info    { background: #dbeafe; color: #1e3a8a; border: 1px solid #93c5fd; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}
.badge-success   { background: #d1fae5; color: #065f46; }
.badge-danger    { background: #fee2e2; color: #991b1b; }
.badge-warning   { background: #fef3c7; color: #92400e; }
.badge-info      { background: #dbeafe; color: #1e40af; }
.badge-primary   { background: #c7d2fe; color: #3730a3; }
.badge-purple    { background: #ede9fe; color: #5b21b6; }
.badge-pink      { background: #fce7f3; color: #9d174d; }
.badge-orange    { background: #ffedd5; color: #9a3412; }
.badge-secondary { background: #e5e7eb; color: #4b5563; }

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Grids genericos do dashboard quebram em telas pequenas */
@media (max-width: 900px) {
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}
.stat-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.stat-card .label { color: #6b7280; font-size: 13px; margin-bottom: 6px; }
.stat-card .value { font-size: 28px; font-weight: 700; color: #1e3a8a; }

.empty {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

.filters-bar {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}

/* ============ SELETOR DE TEMA ============ */
.tema-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.tema-card {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
.tema-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.tema-card.selected {
    border-color: #1e3a8a;
    box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.tema-card .preview {
    display: flex;
    height: 90px;
}
.tema-card .preview .pv-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 24px;
}
.tema-card .preview .pv-sidebar {
    width: 38%;
    margin-top: 24px;
    border-right: 1px solid #e5e7eb;
}
.tema-card .preview .pv-content {
    flex: 1;
    margin-top: 24px;
}
.tema-card .info {
    padding: 12px 14px;
    border-top: 1px solid #f3f4f6;
}
.tema-card .info .nome {
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
}
.tema-card .info .selecionado {
    display: none;
    font-size: 12px;
    color: #065f46;
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 12px;
    margin-top: 4px;
}
.tema-card.selected .info .selecionado { display: inline-block; }
.tema-card input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* ============ INDICADORES (bolinhas de status) ============ */
.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}
.dot-ok     { background: #16a34a; }
.dot-alerta { background: #f59e0b; }
.dot-ruim   { background: #dc2626; }

/* Dica curta ao lado do rotulo (ex.: "auto", "da fórmula") */
.label-hint {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
    cursor: help;
}


/* ============ PAINEL DE FILTROS RECOLHIVEL ============ */
.filtros-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 14px;
    overflow: hidden;
}
.filtros-resumo {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    user-select: none;
}
.filtros-resumo::-webkit-details-marker { display: none; }
.filtros-resumo::before {
    content: '';
    width: 0; height: 0;
    border-left: 5px solid #9ca3af;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s;
}
.filtros-box[open] .filtros-resumo::before { transform: rotate(90deg); }
.filtros-resumo:hover { background: #f9fafb; }
.filtros-badge {
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
}
.filtros-box form { padding: 0 16px 14px; }
.filtros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 14px;
    align-items: end;
}
.filtros-grid .field { min-width: 0; }
/* Formula tem o texto mais longo (codigo + descricao) — ocupa 3 colunas.
   Com isso os 8 filtros somam 10 unidades e preenchem a linha inteira,
   sem sobrar coluna vazia antes da borda direita. */
.filtros-grid .filtro-largo { grid-column: span 3; }
.filtros-acoes {
    display: flex;
    gap: 8px;
    align-items: end;
    grid-column: 1 / -1;
    margin-top: 2px;
}

/* ============ RESUMO DA LISTAGEM ============ */
.lista-resumo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #4b5563;
}
.resumo-total strong { font-size: 15px; color: #111827; }
.resumo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.resumo-chip .dot { margin-left: 0; }
.resumo-ok     { background: #f0fdf4; color: #166534; }
.resumo-alerta { background: #fffbeb; color: #92400e; }
.resumo-ruim   { background: #fef2f2; color: #991b1b; }
.resumo-legenda {
    margin-left: auto;
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #9ca3af;
}
.resumo-legenda .dot { margin-left: 0; margin-right: 3px; width: 8px; height: 8px; }

/* ============ PAGINACAO ============ */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 4px;
}
.pag-btn {
    display: inline-block;
    min-width: 34px;
    padding: 6px 11px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #4b5563 !important;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}
.pag-btn:hover { background: #f9fafb; border-color: #d1d5db; text-decoration: none; }
.pag-atual {
    background: var(--sidebar-active-bg, #ede9fe);
    border-color: var(--sidebar-active-border, #7c3aed);
    color: #5b21b6 !important;
    font-weight: 700;
}
.pag-off {
    opacity: .45;
    pointer-events: none;
}
.pag-sep { color: #9ca3af; padding: 0 2px; }

/* ============ ESTADO VAZIO ============ */
.empty-state {
    text-align: center;
    padding: 44px 24px;
}
.empty-titulo {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.empty-texto {
    font-size: 13px;
    color: #6b7280;
    max-width: 440px;
    margin: 0 auto 18px;
    line-height: 1.5;
}


/* ============ TABELA COM ROLAGEM HORIZONTAL ============ */
.table-scroll {
    overflow-x: auto;
    max-width: 100%;
    border-radius: 8px;
}

/* ============ CAMPO DE ARQUIVO ============ */
.field input[type=file] {
    cursor: pointer;
    background: #fff;
    padding: 0;                 /* o botao interno cuida do respiro */
    overflow: hidden;
    line-height: 38px;
}
.field input[type=file]::file-selector-button {
    margin-right: 12px;
    padding: 0 16px;
    height: 38px;
    border: none;
    border-right: 1px solid #d1d5db;
    background: #f3f4f6;
    color: #1e3a8a;
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}
.field input[type=file]::file-selector-button:hover { background: #e5e7eb; }

/* ============ TEXTOS E CAIXAS AUXILIARES ============ */
.muted { color: #6b7280; font-size: 13px; }

.info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.55;
}
.info-box code { background: #dbeafe; padding: 1px 6px; border-radius: 4px; }

.warn-box {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.55;
}

/* Checkbox com rotulo ao lado (ex.: "Ativar restricao por IP") */
.field-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
}
.field-check input { width: 18px; height: 18px; cursor: pointer; }

/* ============ LOGIN LOCAL (AUTH_DRIVER=local) ============ */
.auth-form { text-align: left; }
.auth-form .field { margin-bottom: 14px; }
.auth-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.auth-form input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
}
.auth-form input:focus {
    outline: none;
    border-color: #5b21b6;
    box-shadow: 0 0 0 3px rgba(91,33,182,0.12);
}
.auth-form .btn-primary { width: 100%; justify-content: center; margin-top: 6px; }
.auth-erro {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-size: 13px;
    text-align: left;
}

/* ============ AUDITORIA (diff antes/depois) ============ */
.diff-de   { color: #991b1b; text-decoration: line-through; }
.diff-para { color: #166534; font-weight: 600; }
.json-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 340px;
    overflow: auto;
}

/* =====================================================================
   Lojinha Frooty — complementos do padrão

   Duas coisas que só existem neste sistema:
   1. o seletor de FILIAL no topo do menu (a filial ativa define tudo que
      aparece nas telas, então ela precisa estar sempre visível);
   2. a tela de login com os dois caminhos (usuário/senha e Microsoft),
      que pede um divisor entre eles.
   ===================================================================== */

/* ---- Filial ativa (sidebar) ---- */
.filial-box {
    margin: 0 10px 14px;
    padding: 10px 12px;
    background: rgba(91, 33, 182, .07);
    border: 1px solid rgba(91, 33, 182, .18);
    border-radius: 10px;
}

.filial-rotulo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6b7280;
    margin-bottom: 4px;
}

.filial-nome {
    font-weight: 700;
    font-size: .92rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filial-select {
    width: 100%;
    padding: 6px 8px;
    font-size: .88rem;
    font-weight: 600;
    border: 1px solid #d8d0f0;
    border-radius: 7px;
    background: #fff;
    color: #111827;
    cursor: pointer;
}

.filial-select:focus {
    outline: 2px solid rgba(91, 33, 182, .35);
    outline-offset: 1px;
}

/* Com a sidebar recolhida o seletor não cabe */
.sidebar-collapsed .filial-box { display: none; }

/* ---- Login com os dois caminhos ---- */
.auth-divisor {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    color: #9ca3af;
    font-size: .82rem;
}

.auth-divisor::before,
.auth-divisor::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.auth-link {
    text-align: center;
    font-size: .85rem;
    color: #6b7280;
    margin: 12px 0 0;
}

.auth-link a { color: #5b21b6; }

/* ---- Tema escuro do menu, se o usuário escolher ---- */
body.tema-preto .filial-box,
body.tema-cinza .filial-box {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
}

body.tema-preto .filial-nome,
body.tema-cinza .filial-nome { color: #f9fafb; }

/* =====================================================================
   Tema PRETO — fundo escuro com cards brancos

   E o tema que a operacao usa hoje (usuarios.tema = 'preto' no banco).
   O contraste do card branco sobre fundo escuro e o que da a cara de
   loja na tela de pedido; sem ele a tela some num cinza chapado.
   ===================================================================== */
body.tema-preto {
    --topbar-bg: #0f172a;
    --topbar-text: #f8fafc;
    --topbar-border: #1e293b;

    --sidebar-bg: #111c31;
    --sidebar-text: #e2e8f0;
    --sidebar-hover-bg: rgba(255, 255, 255, .06);
    --sidebar-active-bg: rgba(124, 58, 237, .22);
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: #a78bfa;

    --content-bg: #1e293b;
}

/* =====================================================================
   LOJA — catalogo e carrinho

   Estas telas NAO sao de gestao. A tela de pedido roda em TABLET e CELULAR,
   na mao do funcionario comprando em pe no balcao. Por isso:

     - alvo de toque de 48px (dedo, nao mouse)
     - a foto do produto e o que identifica o item
     - tocar no card ja adiciona 1 — sem mirar num botao pequeno
     - no tablet e no celular o carrinho vira barra fixa no rodape

   Usado em: novo pedido, edicao de pedido, catalogo de produtos e o
   formulario publico do QR Code.
   ===================================================================== */

/* Cabecalho de secao da loja (📦 Selecione os Produtos) */
.loja-secao {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #5b21b6;
}

body.tema-preto .loja-secao { color: #c4b5fd; }

/* ---------------------------------------------------------------------
   Layout da loja

   Catalogo em cima, carrinho embaixo, os dois em largura inteira — mesma
   disposicao do sistema que estamos migrando. Coluna lateral foi testada
   e descartada: num tablet de 768px ela rouba metade da tela do catalogo,
   que e onde o operador trabalha.
   --------------------------------------------------------------------- */
.loja-layout { display: block; }

/* ---------------------------------------------------------------------
   Catalogo
   --------------------------------------------------------------------- */
.loja-busca { margin-bottom: 14px; }

.loja-busca input {
    width: 100%;
    height: 48px;
    font-size: 1rem;
    padding: 0 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.loja-busca input:focus { outline: none; border-color: #7c3aed; }

.produtos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.produto-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid #e8e6f0;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.produto-card.clicavel { cursor: pointer; }

@media (hover: hover) {
    .produto-card.clicavel:hover {
        border-color: #a78bfa;
        box-shadow: 0 6px 18px rgba(124, 58, 237, .18);
    }
}

.produto-card.selecionado {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

.produto-card.sem-estoque { opacity: .55; filter: grayscale(60%); }
.produto-card.sem-estoque:hover { border-color: #e8e6f0; box-shadow: none; }

/* ---- Imagem ---- */
.produto-imagem {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f7f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.produto-imagem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.produto-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef2f7, #dbe3ec);
    font-size: 2.8rem;
}

/* Produto sem foto: o logo da Frooty em marca d agua. Discreto de
   proposito — num grid onde a maioria tem foto, um logo forte em
   cada card sem foto chamaria mais atencao que os produtos reais. */
.produto-placeholder img {
    width: 62%;
    height: auto;
    opacity: .3;
    padding: 0;
}

.produto-esgotado {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, .72);
    color: #fff;
    font-weight: 700;
    font-size: .84rem;
    letter-spacing: .06em;
    z-index: 2;
}

.badge-estoque-card {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: .74rem;
    font-weight: 700;
}

.estoque-ok-card    { background: #d1fae5; color: #065f46; }
.estoque-baixo-card { background: #fef3c7; color: #92400e; }
.estoque-zero-card  { background: #fee2e2; color: #991b1b; }

/* Quantidade escolhida, sobre a foto */
.produto-contador {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border-radius: 16px;
    background: #10b981;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(16, 185, 129, .45);
}

.produto-card.selecionado .produto-contador { display: flex; }

/* ---- Corpo ---- */
.produto-info {
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 9px;
}

.produto-codigo {
    font-size: .82rem;
    font-weight: 700;
    color: #7c3aed;
}

.produto-nome {
    font-size: .96rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    flex: 1;
}

/* ---- Preços em linhas, como no sistema antigo ---- */
.produto-precos {
    background: #f8f9fb;
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.preco-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
}

.preco-linha .rotulo { color: #6b7280; }
.preco-linha .valor  { font-weight: 700; color: #1f2937; white-space: nowrap; }
.preco-linha.indisponivel { opacity: .4; }

/* ---- Caixa ou unidade: botões grandes ---- */
.tipo-venda {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tipo-btn {
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: .84rem;
    font-weight: 700;
    border: 2px solid #e8e6f0;
    border-radius: 12px;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.tipo-btn .ico { font-size: 1rem; line-height: 1; }

.tipo-btn.ativo {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border-color: #6d28d9;
    color: #fff;
    box-shadow: 0 3px 10px rgba(109, 40, 217, .35);
}

.tipo-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    background: #f3f4f6;
}

/* ---- Quantidade ---- */
.qtd-controles {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    gap: 8px;
    align-items: center;
}

.qtd-btn {
    height: 48px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(109, 40, 217, .3);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.qtd-btn:active:not(:disabled) { transform: scale(.93); }

.qtd-btn:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
    cursor: not-allowed;
}

.qtd-controles input {
    height: 48px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
    border: 2px solid #e8e6f0;
    border-radius: 12px;
    padding: 0 4px;
    min-width: 0;
    background: #fff;
    -moz-appearance: textfield;
}

.qtd-controles input::-webkit-outer-spin-button,
.qtd-controles input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* =====================================================================
   Carrinho

   Card de largura inteira ABAIXO do catalogo, como no sistema que estamos
   migrando. A quantidade e editavel aqui dentro e o item pode ser
   removido — sem isso o operador teria de rolar de volta ate o card do
   produto so para corrigir um numero.
   ===================================================================== */
.carrinho {
    background: #fff;
    border: 1px solid #eaecef;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
    margin-bottom: 16px;
}

.carrinho h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #5b21b6;
}

.carrinho-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 34px 16px;
    color: #9ca3af;
    font-size: .95rem;
}

/* ---- Linha do item ---- */
.carrinho-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f0f7;
}

.carrinho-item:last-child { border-bottom: none; }

.carrinho-item-nome {
    font-weight: 700;
    color: #6d28d9;
    line-height: 1.3;
    font-size: .95rem;
}

.carrinho-item-qtd {
    display: block;
    margin-top: 2px;
    color: #9ca3af;
    font-size: .8rem;
}

/* Controle de quantidade dentro do carrinho: mesmo alvo de toque do card */
.carrinho-controles {
    display: grid;
    grid-template-columns: 40px 62px 40px;
    gap: 6px;
    align-items: center;
}

.carrinho-controles .qtd-btn { height: 40px; font-size: 19px; border-radius: 10px; }

.carrinho-controles input {
    height: 40px;
    text-align: center;
    font-size: 1.02rem;
    font-weight: 700;
    border: 1.5px solid #e8e6f0;
    border-radius: 10px;
    padding: 0 2px;
    min-width: 0;
    -moz-appearance: textfield;
}

.carrinho-controles input::-webkit-outer-spin-button,
.carrinho-controles input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.carrinho-item-valor {
    min-width: 104px;
    text-align: right;
    font-size: 1.05rem;
    font-weight: 700;
    color: #5b21b6;
    white-space: nowrap;
}

.btn-remover {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-remover:hover { background: #fecaca; }

/* ---- Total e finalizacao ----
   Bloco roxo com o CTA verde dentro: o total e a acao ficam juntos e
   separados do resto da tela, como no sistema que estamos migrando. */
.carrinho-total {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
}

.carrinho-total .linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
}

.carrinho-total .rotulo {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.carrinho-total .valor {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.carrinho-total .btn-finalizar {
    display: block;
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 10px;
    background: #10b981;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}

.carrinho-total .btn-finalizar:hover:not(:disabled) { background: #059669; }
.carrinho-total .btn-finalizar:disabled { background: #9ca3af; cursor: not-allowed; }

.carrinho-aviso {
    margin: 10px 0 0;
    font-size: .84rem;
    color: #fde68a;
    line-height: 1.4;
}

/* ---- Atalho para o carrinho (so em tela pequena) ----
   O catalogo no tablet e longo; sem isto o operador rola ate o fim so
   para conferir o total. O botao LEVA ao carrinho — nao abre uma gaveta,
   para o fluxo continuar sendo o mesmo do sistema antigo. */
.carrinho-atalho { display: none; }

@media (max-width: 1199px) {
    .carrinho-atalho {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 55;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        background: #fff;
        border-top: 3px solid #7c3aed;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .16);
    }

    .carrinho-atalho .rotulo { color: #6b7280; font-size: .75rem; }
    .carrinho-atalho .valor  { font-size: 1.3rem; font-weight: 700; color: #5b21b6; }
    .carrinho-atalho .btn-primary { height: 46px; padding: 0 18px; white-space: nowrap; }

    /* Espaco para a barra nao cobrir o rodape do carrinho */
    .loja-layout { padding-bottom: 84px; }
}

/* ---- Celular: a linha do item vira duas ---- */
@media (max-width: 700px) {
    .carrinho-item {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
    }
    .carrinho-item-nome  { grid-column: 1 / -1; }
    .carrinho-controles  { grid-column: 1; justify-self: start; }
    .carrinho-item-valor { grid-column: 2; }
    .btn-remover         { grid-column: 2; justify-self: end; }
    .carrinho-total .valor { font-size: 1.6rem; }
    .carrinho-total .btn-primary { width: 100%; }
}
/* ---------------------------------------------------------------------
   Celular: dois produtos por linha
   --------------------------------------------------------------------- */
@media (max-width: 620px) {
    .produtos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .produto-info  { padding: 10px 11px 12px; gap: 7px; }
    .produto-nome  { font-size: .85rem; }
    .produto-codigo{ font-size: .75rem; }
    .preco-linha   { font-size: .76rem; }
    .tipo-btn      { height: 46px; font-size: .76rem; }
    .qtd-controles { grid-template-columns: 44px 1fr 44px; gap: 6px; }
    .qtd-btn       { height: 44px; font-size: 20px; }
    .qtd-controles input { height: 44px; font-size: 1.05rem; }
}

/* ---------------------------------------------------------------------
   Filial ativa na barra do topo

   Só aparece quando o menu está recolhido — que é o caso das telas de
   loja. Tudo no sistema é isolado por filial; sem esse indicador dá para
   registrar um pedido na loja errada sem perceber.
   --------------------------------------------------------------------- */
.topbar-filial {
    display: none;
    margin-left: 14px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(124, 58, 237, .14);
    color: var(--topbar-text);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-collapsed .topbar-filial { display: inline-block; }

@media (max-width: 620px) {
    .topbar-filial { margin-left: 8px; font-size: .74rem; padding: 4px 9px; max-width: 34vw; }
}

/* =====================================================================
   Ajustes de acabamento

   Complementam o CSS base do template com o que as telas deste sistema
   pediram: titulos dentro de card, cards com contorno visivel, e o
   comportamento das listagens longas.
   ===================================================================== */

/* ---- Titulo de secao dentro de um card ----
   As telas de entrada, saida, solicitacao e faturamento usam <h2> para
   separar blocos ("Dados da entrada", "Produtos"). Sem regra propria ele
   herdava o tamanho do navegador e ficava desproporcional. */
.card > h2,
.card > h2:first-child {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef0f3;
    font-size: 1.06rem;
    font-weight: 700;
    color: #1f2937;
}

.card > h2 + .row,
.card > h2 + .field,
.card > h2 + table,
.card > h2 + .table-scroll { margin-top: 0; }

/* Card com contorno: sobre fundo claro a sombra sozinha quase nao aparece,
   e os blocos da tela ficam sem separacao. */
.card {
    border: 1px solid #eaecef;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

/* Tabela solta na tela (fora de card) ganha o mesmo contorno */
.content > table,
.table-scroll > table { border: 1px solid #eaecef; }

/* Dentro de um card a tabela nao repete contorno nem sombra */
.card table {
    box-shadow: none;
    border: 1px solid #eef0f3;
}

/* ---- Tabela rolavel ----
   Listagens largas (pedidos detalhados, diagnostico) rolam dentro da
   propria caixa, sem arrastar a pagina inteira. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

/* ---- Cabecalho de pagina ----
   No celular o titulo e os botoes nao cabem lado a lado. */
@media (max-width: 700px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .page-header > div { display: flex; flex-wrap: wrap; gap: 8px; }
    .content { padding: 16px 12px; }
}

/* ---- Caixas de aviso ---- */
.info-box, .warn-box {
    border-radius: 8px;
    line-height: 1.5;
}

/* ---- Filtros ----
   A barra de filtros e o bloco mais repetido do sistema; sem alinhamento
   os botoes ficavam colados nos campos. */
.filtros-acoes {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.filtros-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.filtros-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

/* ---- Estado vazio ---- */
.card.empty {
    text-align: center;
    color: #6b7280;
    padding: 34px 20px;
}

/* ---- Tema escuro: os blocos brancos precisam de contraste no texto ---- */
body.tema-preto .card,
body.tema-preto table,
body.tema-preto .filtros-box,
body.tema-preto .info-box { color: #1f2937; }

body.tema-preto .page-header h1 { color: #f1f5f9; }
body.tema-preto .muted           { color: #94a3b8; }

/* =====================================================================
   PAINEL — figura, KPIs e graficos

   A figura de topo e a UNICA >= 48px da tela: e o numero que o painel
   lidera. Os KPIs sao secundarios e ficam menores de proposito — se
   todos gritam, nenhum e lido.

   O texto nunca veste a cor do dado: rotulo e valor usam cinza de
   leitura, e o roxo fica so nas marcas dos graficos.
   ===================================================================== */

.painel-topo {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}

/* ---- Figura principal ---- */
.figura {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    margin: 0;
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    border: none;
    color: #fff;
}

.figura-rotulo {
    font-size: .85rem;
    opacity: .85;
    letter-spacing: .01em;
}

/* Sem tabular-nums: em numero grande a largura fixa dos digitos deixa
   espacos estranhos entre eles. */
.figura-valor {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.figura-delta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 600;
}

.figura-delta .muted { color: rgba(255, 255, 255, .7); font-weight: 500; }
.figura-delta.sobe   { color: #a7f3d0; }
.figura-delta.desce  { color: #fecaca; }

/* ---- KPIs ---- */
.kpis {
    display: grid;
    /* 3 colunas fixas: com 6 KPIs o auto-fit fazia 4 + 2, e a linha torta
       chamava mais atencao que os numeros. */
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-content: start;
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid #eaecef;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

.kpi-rotulo {
    font-size: .78rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.kpi-valor {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.15;
}

.kpi-nota { font-size: .78rem; color: #9ca3af; }

/* Medidor: trilho e um passo mais claro do mesmo matiz da marca */
.kpi-medidor {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #f3f0fd;
    overflow: hidden;
    margin: 2px 0;
}

.kpi-medidor i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: #7c3aed;
}

/* ---- Cabecalho do card de grafico ---- */
.card-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef0f3;
}

.card-cabecalho > div { min-width: 0; }

.card-cabecalho h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.06rem;
    font-weight: 700;
    color: #1f2937;
}

/* ---- Grafico ---- */
.grafico {
    display: block;
    width: 100%;
    height: auto;
    /* A altura vem do viewBox; travar em pixel cortaria a faixa do eixo X */
    overflow: visible;
}

/* Alvo de toque bem maior que a marca — dedo nao acerta ponto de 8px */
.grafico .alvo { cursor: pointer; }
.grafico .alvo:hover ~ .marca,
.grafico .marca:hover { opacity: .82; }

.grafico-barras { margin-top: 4px; }

/* Grafico de viewBox estreito (card de meia largura). O teto mantem o texto
   do SVG no mesmo tamanho aparente dos demais quando o card vira largura
   total no tablet. */
.grafico-compacto {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.tabela-grafico { margin-top: 14px; }
.tabela-grafico table { box-shadow: none; }

/* ---- Dois graficos lado a lado ---- */
.painel-duplo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.painel-duplo > .card { margin-bottom: 16px; }

/* ---- Estado (status): cor NUNCA sozinha, sempre com icone + rotulo ---- */
.estado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.estado-critico { background: #fdecec; color: #a02020; }
.estado-alerta  { background: #fdf3e0; color: #8a5a00; }

/* ---- Titulo de secao: quebra o painel longo em blocos legiveis ---- */
.painel-secao {
    margin: 26px 0 12px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* A regua ocupa a sobra da linha e amarra o titulo ao conteudo abaixo */
.painel-secao::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #dfe3e8, transparent);
}

.painel-secao:first-of-type { margin-top: 4px; }

/* ---- Chip de icone do KPI ---- */
.kpi-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
    border-radius: 9px;
    background: #f3f0fd;
    color: #6d28d9;
}

.kpi-icone svg { width: 17px; height: 17px; }

/* O card inteiro reage ao mouse: o painel parece vivo sem piscar cor */
.kpi { transition: box-shadow .16s ease, transform .16s ease; }
.kpi:hover {
    box-shadow: 0 4px 12px rgba(16, 24, 40, .09);
    transform: translateY(-1px);
}

/* ---- Rodape da figura principal ---- */
.figura-rodape {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .8rem;
    color: rgba(255, 255, 255, .78);
}

.figura-rodape strong { color: #fff; font-weight: 700; }

/* ---- Subtitulo do card: onde mora a UNIDADE do grafico ---- */
.card-sub {
    margin: 3px 0 0;
    font-size: .78rem;
    color: #6b7280;
}

.titulo-com-icone { display: flex; align-items: center; gap: 8px; }

.titulo-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #f3f0fd;
    color: #6d28d9;
    flex-shrink: 0;
}

.titulo-icone svg { width: 15px; height: 15px; }

/* =====================================================================
   RANKING DE CLIENTES

   Magnitude com rotulo longo (nome de pessoa) = barra horizontal. Aqui
   ela vira lista em vez de SVG porque cada linha carrega quatro coisas —
   posicao, nome, matricula/empresa e valor — e HTML faz isso melhor:
   seleciona, quebra em celular e o leitor de tela le na ordem certa.

   O valor esta escrito em TODA linha: a barra da a comparacao, o texto
   da o numero. Nada fica preso no tooltip.

   A barra usa o mesmo roxo unico dos graficos. A posicao NAO muda de cor
   por colocacao — cor por rank engana o olho; o comprimento ja ordena.
   ===================================================================== */
.ranking {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ranking-item {
    display: grid;
    grid-template-columns: 26px 38px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px solid #f1f3f6;
}

.ranking-item:last-child { border-bottom: none; }

/* Produto nao tem rosto: a lista de produtos usa a mesma linha sem o avatar */
.ranking-simples .ranking-item { grid-template-columns: 26px 1fr auto; }

.ranking-pos {
    font-size: .9rem;
    font-weight: 700;
    color: #4b5563;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ranking-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f3f0fd;
    color: #6d28d9;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.ranking-corpo {
    min-width: 0;              /* deixa o nome longo cortar em vez de esticar */
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ranking-nome {
    font-size: .93rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-meta {
    font-size: .76rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trilho um passo mais claro do mesmo matiz, como nos KPIs */
.ranking-trilho {
    display: block;
    height: 6px;
    margin-top: 3px;
    border-radius: 3px;
    background: #f3f0fd;
    overflow: hidden;
}

.ranking-trilho i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: #7c3aed;
}

.ranking-valor {
    font-size: .95rem;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ranking-rodape { margin: 12px 0 0; font-size: .76rem; }

@media (max-width: 620px) {
    /* Celular: o valor desce para a segunda linha em vez de espremer o nome */
    .ranking-item {
        grid-template-columns: 24px 34px 1fr;
        row-gap: 6px;
    }
    .ranking-simples .ranking-item { grid-template-columns: 24px 1fr; }
    .ranking-avatar { width: 34px; height: 34px; font-size: .74rem; }
    .ranking-valor  { grid-column: 2 / -1; font-size: .9rem; }
}

/* ---- Telas menores ---- */
@media (max-width: 1000px) {
    .painel-topo  { grid-template-columns: 1fr; }
    .painel-duplo { grid-template-columns: 1fr; }
    .kpis         { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
    .figura-valor { font-size: 2.1rem; }
    .kpis         { grid-template-columns: 1fr 1fr; }
    .kpi          { padding: 12px 13px; }
    .kpi-valor    { font-size: 1.25rem; }
    .card-cabecalho { flex-direction: column; align-items: flex-start; }
}

/* ---- Tema escuro: os cards seguem brancos, so o titulo muda ---- */
body.tema-preto .card-cabecalho h2,
body.tema-preto .ranking-nome,
body.tema-preto .ranking-valor,
body.tema-preto .kpi-valor { color: #1f2937; }

/* =====================================================================
   BUSCA DE CLIENTE POR NOME

   No balcao a pessoa diz o NOME, nao a matricula — por isso o nome e o
   campo principal e o mais largo. Escolhendo da lista, matricula e
   empresa vem junto e os tres travam, para ninguem editar por cima de um
   cadastro existente sem querer. O ✕ destrava.
   ===================================================================== */

.cliente-busca {
    position: relative;
    flex: 2 1 320px;   /* o dobro dos demais campos da linha */
    min-width: 260px;
}

.campo-busca { position: relative; }

/* Espaco a direita para o ⏳ e o ✕ nao sentarem em cima do texto */
.campo-busca input { padding-right: 74px; }

.busca-status {
    position: absolute;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
}

.busca-limpar {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: #fee2e2;
    color: #991b1b;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.busca-limpar:hover { background: #fecaca; }

.busca-msg {
    display: block;
    margin-top: 5px;
    font-size: .8rem;
    color: #6b7280;
    line-height: 1.35;
}

.busca-msg.ok { color: #0f7a4a; font-weight: 600; }

/* ---- Resultado da busca ---- */
.autocomplete-dropdown .autocomplete-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: .9rem;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
}

.autocomplete-dropdown .autocomplete-item:last-child { border-bottom: none; }
.autocomplete-dropdown .autocomplete-item:hover      { background: #f5f3ff; }

/* A matricula vem em etiqueta: e o dado que confirma a pessoa certa
   quando ha dois nomes parecidos na lista. */
.cracha-matricula {
    background: #7c3aed;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Campos travados apos escolher o cliente ----
   O <select> nao tem readOnly, e desabilitar perderia o valor no envio;
   entao bloqueamos so a interacao. */
select.travado {
    pointer-events: none;
    background: #f9fafb;
    color: #6b7280;
}

input:read-only:not([type=number]) {
    background: #f9fafb;
    color: #4b5563;
}

/* No celular a lista precisa caber na largura da tela */
@media (max-width: 620px) {
    .autocomplete-dropdown { min-width: 0; width: 100%; }
    .autocomplete-dropdown .autocomplete-item { padding: 12px 12px; }
}

/* ---------------------------------------------------------------------
   Tabela de produtos com controles (entrada, saida e solicitacao)

   O select de "Tipo" tinha largura automatica: "Unidade" saia estreito e
   "Caixa (12 un)" largo, deixando a coluna serrilhada. Com largura 100%
   (vinda de .tabela-form) todos ocupam a mesma celula e a coluna alinha.

   O alinhamento vertical volta a "middle": a etiqueta de estoque e o
   texto de unidades sao baixos, e com "top" ficavam pendurados no alto
   da linha enquanto o select ocupava toda a altura.
   --------------------------------------------------------------------- */
.tabela-produtos td { vertical-align: middle; }

.tabela-produtos td select,
.tabela-produtos td input {
    height: 40px;
    padding: 6px 10px;
}

/* Quantidade: centralizada e em negrito, como nos cards da loja */
.tabela-produtos td input[type=number] {
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
}

/* Coluna de unidades calculadas: nao quebra linha e nao compete com o dado */
.tabela-produtos .unidades {
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
}

/* Linha com estoque insuficiente */
.tabela-produtos tr.input-nao-conforme td { background: #fef2f2; }
.tabela-produtos tr.input-nao-conforme td input { border-color: #f87171; }

/* Em tela estreita a tabela rola dentro da propria caixa; sem largura
   minima as colunas se espremem e o select fica ilegivel. */
@media (max-width: 860px) {
    .tabela-produtos { min-width: 720px; }
}

/* =====================================================================
   HISTORICO RECOLHIVEL (solicitacoes, entradas e saidas de estoque)

   Um lancamento com 13 produtos ocupava a tela inteira e escondia os
   demais. Agora cada registro mostra so o cabecalho — tipo, data, quem
   fez e o total — e abre sob demanda.

   Usa <details>/<summary> nativo: recolhe sem JavaScript, o navegador
   ainda acha o conteudo na busca da pagina (Ctrl+F) e a impressao pode
   abrir tudo de uma vez.
   ===================================================================== */
.historico-item {
    background: #fff;
    border: 1px solid #eaecef;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
    overflow: hidden;
}

.historico-item > summary {
    list-style: none;          /* tira o triangulo padrao do navegador */
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.historico-item > summary::-webkit-details-marker { display: none; }
.historico-item > summary:hover { background: #fafafd; }

.historico-item[open] > summary {
    border-bottom: 1px solid #eef0f3;
    background: #fafafd;
}

/* ---- Lado esquerdo: identificacao ---- */
.historico-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 4px;
    font-size: 1.02rem;
    font-weight: 700;
    color: #1f2937;
}

.historico-meta {
    margin: 0;
    font-size: .82rem;
    color: #6b7280;
    line-height: 1.45;
}

.historico-meta strong { color: #4b5563; }

/* ---- Lado direito: numeros e a seta ---- */
.historico-resumo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.historico-seta {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f3f0fd;
    color: #6d28d9;
    font-size: .78rem;
    transition: transform .18s ease;
}

.historico-item[open] .historico-seta { transform: rotate(180deg); }

/* ---- Corpo ---- */
.historico-corpo { padding: 0 18px 16px; }

.historico-corpo table {
    box-shadow: none;
    border: 1px solid #eef0f3;
    margin-top: 14px;
}

.historico-obs {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: #f9fafb;
    border-left: 3px solid #d8d0f0;
    border-radius: 0 6px 6px 0;
    font-size: .86rem;
    color: #4b5563;
    line-height: 1.45;
}

/* ---- Barra de acoes acima da lista ---- */
.historico-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

/* ---- Impressao: abre todos, sem seta ---- */
@media print {
    .historico-item        { break-inside: avoid; box-shadow: none; }
    .historico-item > summary { background: none; }
    .historico-seta        { display: none; }
    .historico-corpo       { display: block !important; }
    .historico-acoes       { display: none; }
}

@media (max-width: 700px) {
    .historico-item > summary { padding: 12px 14px; }
    .historico-corpo          { padding: 0 14px 14px; }
    .historico-resumo         { width: 100%; justify-content: space-between; }
}

/* =====================================================================
   BARRA DO TOPO RECOLHIVEL (ligada por perfil)

   O perfil Solicitante usa o sistema quase so para lancar pedido, muitas
   vezes num tablet em pe no balcao. A barra do topo nao serve a esse
   fluxo — mas nao pode sumir de vez: e por ela que se confere a FILIAL
   ativa e e por ela que se sai do sistema num aparelho compartilhado.

   Entao ela sai do fluxo e volta em tres gestos:
     - mouse encostando no topo  (a faixa invisivel do ::before)
     - toque na aba central      (o unico caminho no tablet: nao ha hover)
     - Tab do teclado            (:focus-within)

   Sem a classe .topbar-oculta no <html>, nada aqui tem efeito: a barra
   continua no fluxo como em qualquer outra tela.
   ===================================================================== */

/* Fora do modo oculto o involucro nao existe visualmente */
.topbar-puxador { display: none; }

html.topbar-oculta .topbar-area {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 0;                 /* ancora sem ocupar espaco */
    z-index: 60;
}

/* Faixa de aproximacao: 14px invisiveis colados no topo da janela.
   Menos que isso o mouse "erra" a barra; mais atrapalha quem clica no
   conteudo logo abaixo. */
@media (hover: hover) {
    html.topbar-oculta .topbar-area::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 14px;
    }
}

html.topbar-oculta .topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    transform: translateY(-100%);
    transition: transform .18s ease;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .18);
}

/* Os gestos que trazem a barra de volta.

   O :hover fica TRANCADO atras de @media (hover: hover) por um motivo que
   so aparece no aparelho: no tablet, tocar num elemento deixa o :hover
   grudado nele ate o proximo toque em outro lugar. Sem a guarda, o segundo
   toque na aba tirava a classe .topbar-presa mas o hover fantasma segurava
   a barra aberta — e a aba parecia nao funcionar. */
@media (hover: hover) {
    html.topbar-oculta .topbar-area:hover .topbar { transform: translateY(0); }
}

html.topbar-oculta .topbar:focus-within,
html.topbar-oculta.topbar-presa .topbar { transform: translateY(0); }

/* Sem a barra no fluxo, o conteudo ocupa a janela inteira */
html.topbar-oculta .layout { min-height: 100vh; }

/* ---- A aba ---- */
html.topbar-oculta .topbar-puxador {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Larga o bastante para caber o nome da filial, que e a informacao que
       ela carrega — e alta o bastante para ser um alvo de toque decente */
    gap: 8px;
    /* Com a barra a vista o rotulo da filial some e sobra so a seta — sem um
       minimo, a aba encolhia para 33px e virava um alvo dificil de acertar */
    min-width: 48px;
    max-width: min(70vw, 320px);
    height: 26px;
    padding: 0 12px;
    border: none;
    border-radius: 0 0 10px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    background: var(--topbar-bg);
    color: var(--topbar-text);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
    cursor: pointer;
    opacity: .85;
    transition: opacity .15s ease, transform .18s ease;
}

/* Alvo de toque maior que o desenho: a aba tem 26px de altura para nao
   virar uma segunda barra, mas o dedo acerta uma area de ~40px. */
html.topbar-oculta .topbar-puxador::after {
    content: "";
    position: absolute;
    left: -10px; right: -10px;
    top: 0; bottom: -14px;
}

html.topbar-oculta .topbar-puxador:hover  { opacity: 1; }
html.topbar-oculta .topbar-puxador:focus-visible {
    outline: 2px solid var(--sidebar-active-border);
    outline-offset: 2px;
}

.topbar-puxador-filial {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-puxador-seta {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform .18s ease;
}

/* Barra a vista: a seta aponta para cima (recolher) e a aba desce junto */
@media (hover: hover) {
    html.topbar-oculta .topbar-area:hover .topbar-puxador { transform: translateX(-50%) translateY(57px); }
}

html.topbar-oculta.topbar-presa .topbar-puxador { transform: translateX(-50%) translateY(57px); }

/* Com a barra a vista o nome da filial esta escrito nela; a aba encolhe para
   nao repetir a informacao em cima do cabecalho */
@media (hover: hover) {
    html.topbar-oculta .topbar-area:hover .topbar-puxador-filial { display: none; }
}

html.topbar-oculta.topbar-presa .topbar-puxador-filial { display: none; }

@media (hover: hover) {
    html.topbar-oculta .topbar-area:hover .topbar-puxador-seta { transform: rotate(180deg); }
}

html.topbar-oculta.topbar-presa .topbar-puxador-seta { transform: rotate(180deg); }

/* Impressao: a barra nao entra no papel de jeito nenhum */
@media print {
    html.topbar-oculta .topbar,
    .topbar-puxador { display: none !important; }
}

/* Texto so para leitor de tela */
.sr-apenas {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Campo de marcar com explicacao (usado no cadastro de perfil) ---- */
.campo-marcavel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: 400;
}

.campo-marcavel input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #7c3aed;
}

.campo-marcavel strong { display: block; font-size: .92rem; color: #1f2937; }
.campo-marcavel small  { display: block; margin-top: 2px; color: #6b7280; line-height: 1.45; }

/* =====================================================================
   CONTADOR NO BOTAO DE TIPO

   O card tem UM campo de quantidade, mas guarda DUAS quantidades: uma de
   caixa e uma de unidade. O botao Caixa/Unidade troca qual delas o campo
   mostra — nao apaga a outra.

   Sem o contador, a quantidade do tipo que nao esta a vista ficaria
   invisivel no card: a pessoa poe 2 caixas, troca para unidade, digita 3,
   e o card mostra "3". O numerinho no botao e o que impede o "eu achei
   que tinha pedido so 3".
   ===================================================================== */
.tipo-btn { position: relative; }

.tipo-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 10px;
    background: #5b21b6;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* No botao ativo o fundo ja e roxo: o contador inverte para continuar legivel */
.tipo-btn.ativo .tipo-contador {
    background: #fff;
    color: #5b21b6;
}

/* Tipo com quantidade, mas que NAO esta a vista: a borda avisa que ha algo
   ali antes mesmo de o olho chegar no numero */
.tipo-btn.tem-qtd:not(.ativo) {
    border-color: #a78bfa;
    background: #f7f4ff;
}
/* =====================================================================
   ENTRADA DOS GRAFICOS

   O pedido era "3D". 3D em grafico de negocio cobra caro: a perspectiva
   muda a AREA percebida conforme a posicao, e a coluna da frente parece
   maior que uma do fundo de mesmo valor — justamente o que esses graficos
   existem para comparar.

   O que deixa a tela viva sem mexer na leitura e o MOVIMENTO DE ENTRADA:
   a coluna cresce da base ate a altura real, a linha se desenha da
   esquerda para a direita. O estado final e exatamente o mesmo de antes;
   so o caminho ate ele deixou de ser instantaneo.
   ===================================================================== */

@keyframes grafico-coluna-sobe {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes grafico-linha-desenha {
    from { stroke-dashoffset: var(--traco); }
    to   { stroke-dashoffset: 0; }
}

@keyframes grafico-area-surge {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* transform-box: fill-box faz a origem ser a caixa da PROPRIA barra; sem
   isso a escala usaria o canto do SVG e a barra sairia deslizando. */
.grafico .marca {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: grafico-coluna-sobe .45s cubic-bezier(.22, .9, .3, 1) backwards;
    animation-delay: var(--atraso, 0ms);
}

.grafico .marca-linha {
    stroke-dasharray: var(--traco);
    animation: grafico-linha-desenha .9s cubic-bezier(.3, .7, .3, 1) backwards;
}

.grafico .marca-area {
    animation: grafico-area-surge .9s ease backwards;
    animation-delay: .25s;
}

/* Quem pediu menos movimento no sistema ve o grafico pronto, sem animacao.
   O dasharray tambem precisa sair, senao a linha ficaria tracejada. */
@media (prefers-reduced-motion: reduce) {
    .grafico .marca,
    .grafico .marca-linha,
    .grafico .marca-area { animation: none; }
    .grafico .marca-linha { stroke-dasharray: none; }
}

/* Impressao: o papel nao anima, e uma barra congelada no meio da animacao
   sairia com a altura errada. */
@media print {
    .grafico .marca,
    .grafico .marca-linha,
    .grafico .marca-area { animation: none; }
    .grafico .marca-linha { stroke-dasharray: none; }
}

/* Acao travada por REGRA DE NEGOCIO, nao por falta de permissao.
   Fica a vista, apagada e com o motivo no title — sumir o botao faria a
   pessoa procurar o que nao existe. */
.btn-travado,
.badge-travado {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: auto;   /* precisa receber hover para mostrar o title */
}

/* =====================================================================
   Promoções
   Vermelho-alaranjado só aqui: é a cor de "oferta" que o cliente já
   reconhece, e não colide com o verde (selecionado) nem o roxo (marca).
   ===================================================================== */
.selo-promocao {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    padding: 5px 10px;
    border-radius: 20px;
    background: #dc2626;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow: 0 2px 6px rgba(220, 38, 38, .4);
}

.produto-card:has(.selo-promocao) { border-color: #fca5a5; }

.produto-precos:has(.em-promocao) { background: #fef2f2; }

.preco-linha .preco-de {
    color: #9ca3af;
    font-weight: 500;
    font-size: .78rem;
    margin-right: 4px;
}

.preco-linha .preco-por { color: #dc2626; font-weight: 800; }

.promo-validade {
    margin-top: 2px;
    font-size: .74rem;
    font-weight: 600;
    color: #b91c1c;
}

/* Filtro "Promoções" ao lado da busca */
.loja-busca:has(.chip-promo) { display: flex; gap: 10px; align-items: center; }
.loja-busca:has(.chip-promo) input { flex: 1; min-width: 0; }

.chip-promo {
    height: 48px;
    padding: 0 16px;
    border: 2px solid #fca5a5;
    border-radius: 10px;
    background: #fff;
    color: #b91c1c;
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chip-promo[aria-pressed="true"] { background: #dc2626; border-color: #dc2626; color: #fff; }

/* No link público o filtro fica sozinho, acima da grade */
.chip-promo.solto { margin: 0 4px 12px; }

/* Linha do carrinho com preço promocional */
.carrinho-item-promo {
    display: block;
    margin-top: 2px;
    color: #b91c1c;
    font-size: .78rem;
    font-weight: 600;
}

.carrinho-item-promo s { color: #9ca3af; font-weight: 500; }

/* Economia somada, logo abaixo do total */
.carrinho-economia {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: .92rem;
    font-weight: 700;
}

.carrinho-total .carrinho-economia {
    margin: -6px 0 14px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* Faturamento: desconto de promoção abaixo do valor da linha */
.fat-promo {
    display: inline-block;
    color: #b91c1c;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Formulario de promocao em modo edicao: sem uma marca, da para achar que
   ainda vai cadastrar uma nova. */
.editando-promocao {
    border-left: 3px solid #7c3aed;
    padding-left: 12px;
}

/* Limite por pedido da promocao: o alerta fica junto do preco, nao no
   carrinho — la ja seria tarde para escolher outra quantidade. */
.promo-limite {
    margin-top: 2px;
    font-size: .74rem;
    font-weight: 700;
    color: #9a3412;
}

/* Motivo da promocao no card: o cliente ve por que esta mais barato.
   Fica antes do limite, que e a regra de compra — primeiro o porque, depois
   o quanto pode levar. */
.promo-motivo {
    align-self: flex-start;
    margin-top: 4px;
    font-size: .76rem;
    font-weight: 700;
    color: #7c2d12;
    background: #ffedd5;
    border-radius: 6px;
    padding: 3px 7px;
    display: inline-block;
}

.promo-motivo .obs {
    font-weight: 500;
    color: #9a3412;
}

.promo-motivo .obs::before { content: '· '; }