/* Paleta: mesa cinza-azulada, folha branca, tinta de caneta esferográfica azul. */
:root {
    --mesa: #e4e8ee;
    --folha: #ffffff;
    --grafite: #252a33;
    --pauta: #c5ccd6;
    --tinta: #1c3d8c;
    --tinta-escura: #142d69;
    --imprimir: #1d6b4f;
    --bs-body-font-family: "Barlow", "Segoe UI", system-ui, sans-serif;
    --bs-body-color: var(--grafite);
    --bs-body-bg: var(--mesa);
}

body { font-size: 0.95rem; }
.num { font-variant-numeric: tabular-nums; }
.tinta { color: var(--tinta); }

.barra { background: var(--folha); border-bottom: 1px solid var(--pauta); }
.barra .navbar-brand { font-weight: 700; color: var(--grafite); }
.barra .nav-link.active { color: var(--tinta); font-weight: 600; box-shadow: inset 0 -2px 0 var(--tinta); }

.folha {
    background: var(--folha);
    border: 1px solid var(--pauta);
    border-radius: 3px;
    box-shadow: 0 1px 0 var(--pauta), 0 8px 24px -16px rgba(20, 30, 50, 0.35);
}
.folha > .table-responsive > .table { margin: 0; }

.btn-tinta { --bs-btn-bg: var(--tinta); --bs-btn-border-color: var(--tinta); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--tinta-escura); --bs-btn-hover-border-color: var(--tinta-escura); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--tinta-escura); --bs-btn-disabled-bg: var(--tinta); --bs-btn-disabled-border-color: var(--tinta); }
.btn-outline-tinta { --bs-btn-color: var(--tinta); --bs-btn-border-color: var(--tinta);
    --bs-btn-hover-bg: var(--tinta); --bs-btn-hover-border-color: var(--tinta); --bs-btn-hover-color: #fff;
    --bs-btn-disabled-color: #8a93a3; --bs-btn-disabled-border-color: var(--pauta); }
.btn-imprimir { --bs-btn-bg: var(--imprimir); --bs-btn-border-color: var(--imprimir); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #155039; --bs-btn-hover-color: #fff; }

/* Login */
.login { max-width: 380px; margin: 12vh auto; padding: 0 1rem; }

/* Talão */
.talao { padding: 1.75rem; }
.talao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
    padding-bottom: 1rem; border-bottom: 2px solid var(--grafite); }
.empresa-nome { font-weight: 700; font-size: 1.35rem; line-height: 1.2; }
.talao-contato { font-size: 0.9rem; }
@media (min-width: 768px) { .talao-contato { text-align: right; } }
.rotulo { font-size: 0.8rem; font-weight: 600; color: #5b6472; }
.pedido-box { display: inline-block; min-width: 8.5rem; padding: 0.2rem 0.75rem; border: 2px solid var(--grafite);
    font-weight: 700; font-size: 1.1rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Grade de itens: parece pautada, vira campo ao focar */
.grade { --bs-table-border-color: var(--pauta); }
.grade thead th { background: #f1f3f6; font-size: 0.8rem; font-weight: 600; color: #5b6472; }
.grade .col-qtd { width: 11%; }
.grade .col-valor { width: 15%; }
.grade .col-acao { width: 2.5rem; }
.grade td { padding: 0.15rem 0.3rem; }
.grade .form-control-sm { border-color: transparent; background: transparent; font-variant-numeric: tabular-nums; }
.grade .form-control-sm:focus { border-color: var(--tinta); background: #fff; box-shadow: 0 0 0 0.15rem rgba(28, 61, 140, 0.2); }
.grade .form-control-sm.is-invalid { border-color: var(--bs-danger); }
.grade .sub { font-variant-numeric: tabular-nums; color: #5b6472; }
.grade .btn-remover { color: #9aa2ae; border: 0; background: none; line-height: 1; padding: 0.25rem 0.4rem; }
.grade .btn-remover:hover, .grade .btn-remover:focus-visible { color: var(--bs-danger); }
.grade tfoot td { border-top: 2px solid var(--grafite); padding: 0.5rem 0.4rem; }
.grade .total { font-size: 1.15rem; font-weight: 700; color: var(--tinta); }

/* Autocomplete */
.ac-lista { position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 2px); background: #fff;
    border: 1px solid var(--pauta); border-radius: 3px; box-shadow: 0 10px 24px -12px rgba(20, 30, 50, 0.45);
    max-height: 260px; overflow-y: auto; }
.ac-item { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.9rem; }
.ac-item.ativo, .ac-item:hover { background: #e8edf8; }
.ac-item .ac-extra { color: #6c7584; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Avisos */
.avisos { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: 0.5rem; max-width: 22rem; }

@media (max-width: 575px) {
    .talao { padding: 1rem; }
    .grade .col-qtd { width: 18%; }
    .grade .col-valor { width: 22%; }
}
@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } }