/* Placavel — sistema visual ("Chapa").
   Ideia: o produto é a placa. Azul-marinho DA MARCA (#1B365D, logotipo oficial) nas áreas estruturais,
   neutros slate (cinza-azulado) para descansar a vista no balcão, azul vivo só nas ações, bordô da marca
   (#80252A) como acento discreto, verde para confirmar e vermelho para alertar/cancelar.
   Logotipos em static/marca/ (originais em PNG transparente, reduzidos ao tamanho de uso).
   Tipografia: Barlow Condensed (títulos e números, parente das letras da placa) + Barlow (texto).
   Tudo parte das variáveis abaixo — para mudar a identidade, altere só este bloco. */
:root {
  --marca-azul: #1b365d;    /* azul-marinho do logotipo */
  --marca-bordo: #80252a;   /* bordô do símbolo e do slogan */
  --azul-900: #11233d;
  --azul-800: #1b365d;      /* = azul da marca: menu lateral */
  --azul-700: #1e3f73;
  --azul-600: #1d4ed8;      /* ação principal (6,7:1 sobre branco) */
  --azul-700h: #1e40af;     /* ação principal (hover) */
  --azul-100: #e3ebf8;
  --azul-50: #f0f5fc;
  --papel: #f1f5f9;         /* fundo da aplicação (slate-100) */
  --superficie: #ffffff;
  --linha: #e2e8f0;         /* slate-200 */
  --linha-forte: #cbd5e1;   /* slate-300 */
  --tinta: #0f172a;         /* slate-900 */
  --suave: #475569;         /* slate-600: 7,6:1 sobre branco */
  --verde: #0e9f6e;
  --verde-texto: #086b49;   /* verde para TEXTO: 4,5:1+ também sobre --verde-suave e --azul-50 */
  --verde-suave: #e3f6ee;
  --vermelho: #d92d45;
  --vermelho-suave: #fdebed;
  --ambar: #d58a00;
  --ambar-suave: #fff4d9;
  --raio: 12px;
  --raio-sm: 8px;
  --sombra: 0 1px 2px rgba(16, 35, 77, .06), 0 1px 1px rgba(16, 35, 77, .03);
  --sombra-alta: 0 10px 30px rgba(16, 35, 77, .16), 0 2px 6px rgba(16, 35, 77, .08);
  --sidebar-w: 248px;

  --bs-body-font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-bg: var(--papel);
  --bs-body-color: var(--tinta);
  --bs-secondary-color: var(--suave);
  --bs-border-color: var(--linha);
  --bs-border-radius: var(--raio-sm);
  --bs-primary: #1d4ed8;           --bs-primary-rgb: 29, 78, 216;
  --bs-success: #0e9f6e;           --bs-success-rgb: 14, 159, 110;
  --bs-danger: #d92d45;            --bs-danger-rgb: 217, 45, 69;
  --bs-warning: #d58a00;           --bs-warning-rgb: 213, 138, 0;
  --bs-link-color: #1d4ed8;        --bs-link-color-rgb: 29, 78, 216;
  --bs-link-hover-color: #1e40af;  --bs-link-hover-color-rgb: 30, 64, 175;
  --bs-heading-color: var(--tinta);
  --bs-secondary-rgb: 71, 85, 105;
  --bs-secondary-color: #475569;
}

body { font-size: 1rem; line-height: 1.5; font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3, .h4, .h5 { font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif; font-weight: 600; letter-spacing: .005em; color: var(--tinta); }
h1.h3, .page h1 { font-size: 1.85rem; font-weight: 700; margin-bottom: .25rem; }
h2.h4 { font-size: 1.45rem; }
a { text-underline-offset: 2px; }
.ic { flex: none; vertical-align: -.18em; }
:focus-visible { outline: 3px solid rgba(29, 78, 216, .45); outline-offset: 2px; }

/* ---------- estrutura: barra lateral + conteúdo ---------- */
.shell { display: flex; min-height: 100vh; }
.content { flex: 1; min-width: 0; padding: 1.75rem 2.25rem 3.5rem; position: relative; }
/* selo da marca no alto das páginas internas: filete azul-marinho com o acento bordô do logotipo */
.content::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--marca-azul) 0, var(--marca-azul) calc(100% - 7rem), var(--marca-bordo) calc(100% - 7rem)); }
@media print { .content::before { display: none; } }
.page { max-width: 1240px; margin: 0 auto; }

.sidebar {
  flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--azul-800) 0%, var(--azul-900) 100%);
  color: #fff; padding: 1.4rem .85rem 1rem; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
}

/* Marca no topo do menu: logotipo oficial em branco (expandido) ou só o símbolo (recolhido) */
.marca-menu { display: flex; align-items: center; justify-content: center; margin: 0 .2rem 1.5rem; padding: .35rem .25rem .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12); border-radius: 0; text-decoration: none; }
.marca-menu img { display: block; height: auto; }
.marca-menu .marca-logo { width: 100%; max-width: 13rem; }
.marca-menu .marca-simbolo { display: none; width: 2.6rem; }
.marca-menu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }

.sidebar .nav { flex-direction: column; gap: .15rem; }
.sidebar .nav-link {
  display: flex; align-items: center; gap: .75rem; color: rgba(255, 255, 255, .72);
  padding: .65rem .85rem; border-radius: 9px; font-weight: 500; font-size: 1.02rem;
  transition: background-color .15s, color .15s;
}
.sidebar .nav-link .ic { opacity: .85; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sidebar .nav-link.active { color: #fff; background: rgba(255, 255, 255, .14); font-weight: 600; box-shadow: inset 3px 0 0 #93b4ff; }
.sidebar .nav-link.active .ic { opacity: 1; }
.sidebar .nav-link:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.sidebar .atendente {
  margin-top: auto; padding: .9rem .6rem 0; border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; align-items: center; font-size: .92rem;
}
.sidebar .avatar {
  grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--marca-bordo); color: #fff; font: 700 1.1rem "Barlow Condensed", sans-serif; letter-spacing: .02em;
}
.sidebar .atendente-nome { font-weight: 600; line-height: 1.2; }
.sidebar .atendente-rotulo { color: rgba(255, 255, 255, .62); font-size: .8rem; }
.sidebar .atendente-links { grid-column: 1 / -1; display: flex; gap: 1rem; margin-top: .6rem; }
.sidebar .atendente a, .sidebar .atendente .sair-btn { color: #a9c6ff; font-size: .88rem; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.sidebar .atendente a:hover, .sidebar .atendente .sair-btn:hover { color: #fff; text-decoration: underline; }

/* ---------- abas do módulo ---------- */
/* Sem caixa de rolagem: as abas quebram para a linha de baixo quando não cabem (overflow-x: auto
   virava uma caixa com barras, inclusive vertical, por causa do margin-bottom: -1px das abas). */
.hub-tabs { flex-wrap: wrap; overflow: visible; gap: 0 .25rem; border-bottom: 1px solid var(--linha-forte); margin-bottom: 1.5rem !important; }
.hub-tabs .nav-link {
  display: inline-flex; align-items: center; gap: .5rem; color: var(--suave); padding: .7rem 1.05rem;
  border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 0; font-weight: 500; white-space: nowrap;
  transition: color .15s, border-color .15s, background-color .15s;
}
.hub-tabs .nav-link:hover { color: var(--tinta); background: rgba(29, 78, 216, .05); }
.hub-tabs .nav-link.active { color: var(--azul-600); border-bottom-color: var(--azul-600); font-weight: 600; }
@media (max-width: 575.98px) { .hub-tabs .nav-link { padding: .6rem .7rem; gap: .4rem; } }

/* ---------- cartões ---------- */
.card { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
.shadow-sm { box-shadow: var(--sombra) !important; }
.card-header { background: #fbfcfe !important; border-bottom: 1px solid var(--linha); padding: .8rem 1.1rem; border-radius: var(--raio) var(--raio) 0 0 !important; }
.card-body { padding: 1.25rem 1.35rem; }
.card-titulo { display: flex; align-items: center; gap: .65rem; font-size: 1.3rem; font-weight: 700; margin: 0 0 1rem; padding: 0; border: 0; }
.card-titulo .passo {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--azul-600); color: #fff; font: 700 .95rem "Barlow", sans-serif;
}
.card-titulo.perigo .passo { background: var(--vermelho); }
.card .h5.text-uppercase { text-transform: none; }

/* ---------- botões ---------- */
.btn { --bs-btn-border-radius: var(--raio-sm); --bs-btn-font-weight: 600; --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .5rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .05s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .9rem; }
.btn-lg { --bs-btn-padding-y: .72rem; --bs-btn-font-size: 1.12rem; --bs-btn-border-radius: 10px; }
.btn-primary { --bs-btn-bg: #1d4ed8; --bs-btn-border-color: #1d4ed8; --bs-btn-hover-bg: #1e40af; --bs-btn-hover-border-color: #1e40af; --bs-btn-active-bg: #1e3a8a; --bs-btn-active-border-color: #1e3a8a; --bs-btn-disabled-bg: #1d4ed8; --bs-btn-disabled-border-color: #1d4ed8; box-shadow: 0 1px 2px rgba(29, 78, 216, .35); }
.btn-success { --bs-btn-bg: #0e9f6e; --bs-btn-border-color: #0e9f6e; --bs-btn-hover-bg: #0b8a5f; --bs-btn-hover-border-color: #0b8a5f; --bs-btn-active-bg: #097450; --bs-btn-active-border-color: #097450; --bs-btn-disabled-bg: #0e9f6e; --bs-btn-disabled-border-color: #0e9f6e; box-shadow: 0 1px 2px rgba(14, 159, 110, .35); }
.btn-danger { --bs-btn-bg: #d92d45; --bs-btn-border-color: #d92d45; --bs-btn-hover-bg: #bf2439; --bs-btn-hover-border-color: #bf2439; --bs-btn-active-bg: #a51f31; --bs-btn-active-border-color: #a51f31; }
.btn-dark { --bs-btn-bg: var(--azul-800); --bs-btn-border-color: var(--azul-800); --bs-btn-hover-bg: var(--azul-900); --bs-btn-hover-border-color: var(--azul-900); }
.btn-outline-primary { --bs-btn-color: #1d4ed8; --bs-btn-border-color: #9fb9ee; --bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1d4ed8; --bs-btn-active-bg: #1e40af; }
.btn-outline-secondary { --bs-btn-color: #3b4a60; --bs-btn-border-color: var(--linha-forte); --bs-btn-hover-bg: #eef2f8; --bs-btn-hover-color: var(--tinta); --bs-btn-hover-border-color: #b5c1d3; --bs-btn-active-bg: #e3e9f3; --bs-btn-active-color: var(--tinta); --bs-btn-active-border-color: #b5c1d3; background: #fff; }
.btn-outline-dark { --bs-btn-color: var(--azul-800); --bs-btn-border-color: var(--linha-forte); --bs-btn-hover-bg: var(--azul-800); --bs-btn-hover-border-color: var(--azul-800); background: #fff; }
.btn-outline-danger { --bs-btn-color: #d92d45; --bs-btn-border-color: #f0a9b3; --bs-btn-hover-bg: #d92d45; --bs-btn-hover-border-color: #d92d45; background: #fff; }
.btn-link { text-decoration: none; font-weight: 600; }
.btn-link:hover { text-decoration: underline; }

/* ---------- formulários ---------- */
.form-label { font-weight: 600; font-size: .88rem; color: #33425a; margin-bottom: .3rem; }
.form-control, .form-select { min-height: 2.6rem; border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); background-color: #fff; color: var(--tinta); transition: border-color .15s, box-shadow .15s; }
.form-control::placeholder { color: #94a1b5; }
.form-control:hover:not(:disabled), .form-select:hover:not(:disabled) { border-color: #a9b6ca; }
.form-control:focus, .form-select:focus { border-color: var(--azul-600); box-shadow: 0 0 0 .22rem rgba(29, 78, 216, .18); }
.form-control:disabled, .form-select:disabled { background: #eef1f6; }
.form-control-sm, .form-select-sm { min-height: 2.1rem; }
.form-text { color: var(--suave); }
.form-check-input { border-color: #9aa8bf; width: 1.1em; height: 1.1em; }
.form-check-input:checked { background-color: var(--azul-600); border-color: var(--azul-600); }
.form-check-input:focus { box-shadow: 0 0 0 .22rem rgba(29, 78, 216, .18); border-color: var(--azul-600); }
.campo-placa { font-family: "Barlow Condensed", sans-serif; font-size: 1.35rem; font-weight: 600; letter-spacing: .09em; }

/* ---------- tabelas ---------- */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f5f8fe; --bs-table-border-color: var(--linha); font-size: .96rem; }
.table > :not(caption) > * > * { padding: .75rem .9rem; }
.table thead th, .table-light { --bs-table-bg: #f6f8fc; --bs-table-color: var(--suave); }
.table thead th { background: #f6f8fc; color: var(--suave); font-weight: 600; font-size: .86rem; letter-spacing: .01em; border-bottom: 1px solid var(--linha-forte); white-space: nowrap; }
/* position: relative = a caixa de rolagem contém os elementos absolutos da tabela (ex.: o texto
   .visually-hidden "Remover" no cabeçalho). Sem isso eles se posicionam pelo card, escapam do corte
   e alargam a página no celular. */
.table-responsive { position: relative; border-radius: var(--raio); }
.card > .table-responsive:first-child > .table thead th:first-child { border-top-left-radius: var(--raio); }
.card > .table-responsive:first-child > .table thead th:last-child { border-top-right-radius: var(--raio); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f5f8fe; }
.linha-encerrada { opacity: .62; }

/* ---------- selos (status) ---------- */
.badge { font-weight: 600; font-size: .78rem; letter-spacing: .01em; padding: .36em .65em; border-radius: 999px; border: 1px solid transparent; }
.badge.text-bg-success { background: var(--verde-suave) !important; color: #086b49 !important; border-color: #b6e5d0; }
.badge.text-bg-danger { background: var(--vermelho-suave) !important; color: #a3182c !important; border-color: #f4bcc4; }
.badge.text-bg-warning { background: var(--ambar-suave) !important; color: #7a4d00 !important; border-color: #f2d58f; }
.badge.text-bg-primary { background: var(--azul-100) !important; color: #1e40af !important; border-color: #bccdf3; }
.badge.text-bg-info { background: #e0f4fb !important; color: #0b5a76 !important; border-color: #b4e0ef; }
.badge.text-bg-secondary { background: #eceff5 !important; color: #46556b !important; border-color: #d6dce8; }
.badge.text-bg-light { background: #fff !important; color: #46556b !important; border-color: var(--linha-forte) !important; }
.badge.text-bg-dark { background: var(--azul-800) !important; color: #fff !important; }

/* ---------- avisos ---------- */
.alert { border-radius: var(--raio-sm); border-width: 1px; padding: .8rem 1rem; }
.alert-danger { --bs-alert-bg: var(--vermelho-suave); --bs-alert-border-color: #f2b6bf; --bs-alert-color: #8c1527; }
.alert-warning { --bs-alert-bg: var(--ambar-suave); --bs-alert-border-color: #f0d28a; --bs-alert-color: #6b4300; }
.alert-success { --bs-alert-bg: var(--verde-suave); --bs-alert-border-color: #b2e3cd; --bs-alert-color: #075a3d; }
.alert-info { --bs-alert-bg: var(--azul-50); --bs-alert-border-color: #bccdf3; --bs-alert-color: #173d8a; }

/* toasts (mensagens do sistema e avisos em tempo real) */
.toast-pilha { position: fixed; top: 1rem; right: 1rem; z-index: 1100; display: flex; flex-direction: column; gap: .6rem; width: min(26rem, calc(100vw - 2rem)); pointer-events: none; }
.toast-pilha .toast { pointer-events: auto; background: #fff; border: 1px solid var(--linha); border-left: 5px solid var(--azul-600); border-radius: 10px; box-shadow: var(--sombra-alta); display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .9rem .8rem .9rem; opacity: 1; }
.toast-pilha .toast.fade:not(.show) { opacity: 0; }
.toast-pilha .toast.t-success { border-left-color: var(--verde); }
.toast-pilha .toast.t-danger { border-left-color: var(--vermelho); }
.toast-pilha .toast.t-warning { border-left-color: var(--ambar); }
.toast-pilha .t-icone { margin-top: .12rem; }
.toast-pilha .t-success .t-icone { color: var(--verde); }
.toast-pilha .t-danger .t-icone { color: var(--vermelho); }
.toast-pilha .t-warning .t-icone { color: var(--ambar); }
.toast-pilha .t-info .t-icone, .toast-pilha .t-primary .t-icone { color: var(--azul-600); }
.toast-pilha .t-corpo { flex: 1; min-width: 0; }
.toast-pilha .t-titulo { font-weight: 700; line-height: 1.25; }
.toast-pilha .t-texto { color: #3b4a60; font-size: .94rem; overflow-wrap: anywhere; }
.toast-pilha .t-fechar { border: 0; background: transparent; color: var(--suave); padding: .1rem; line-height: 1; border-radius: 6px; }
.toast-pilha .toast.saindo { opacity: 0; transform: translateX(1rem); transition: opacity .2s, transform .2s; }
.toast-pilha .t-fechar:hover { background: #eef2f8; color: var(--tinta); }

/* ---------- indicadores (fila de produção, caixa) ---------- */
.kpi { display: block; text-decoration: none; color: var(--tinta); background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: .75rem 1rem .8rem; position: relative; box-shadow: var(--sombra); transition: box-shadow .15s, border-color .15s, transform .15s; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--bs-secondary-bg, #aab5c7); }
.kpi-warning::before { background: var(--ambar); }
.kpi-primary::before { background: var(--azul-600); }
.kpi-success::before { background: var(--verde); }
.kpi-danger::before { background: var(--vermelho); }
.kpi-danger::before { background: var(--vermelho); }
.kpi:hover { box-shadow: 0 4px 14px rgba(16, 35, 77, .12); color: var(--tinta); border-color: var(--linha-forte); }
.kpi-ativo { border-color: var(--azul-600); box-shadow: 0 0 0 3px rgba(29, 78, 216, .18); }
.kpi-n { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi-r { font-size: .9rem; color: var(--suave); font-weight: 500; }

.barra { height: .7rem; background: #e3e8f1; border-radius: 999px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--azul-600); border-radius: 999px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ---------- pedido: formulário em modo "carrinho" ---------- */
.lista-busca { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; max-height: 320px; overflow-y: auto; border-radius: var(--raio-sm); box-shadow: var(--sombra-alta); border: 1px solid var(--linha); margin-top: .25rem; }
.lista-busca .list-group-item { border-color: var(--linha); padding: .6rem .9rem; }
.cliente-chip { background: var(--azul-50); border: 1px solid #cddcf8; border-left: 5px solid var(--azul-600); border-radius: var(--raio-sm); padding: .6rem .9rem; }
.formato-opcao { padding: .5rem .5rem .5rem 2rem; background: #fff; border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); }
.formato-opcao:has(input:checked) { border-color: var(--azul-600); background: var(--azul-50); }

.compositor { background: linear-gradient(180deg, #f7f9fe, #f1f5fd); border: 1px solid #d3def5; border-radius: var(--raio); padding: 1rem 1.1rem 1.1rem; margin-bottom: 1rem; }
.compositor .placa-previa { margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px dashed #c3d2ee; }
.carrinho-topo { display: flex; align-items: center; justify-content: space-between; margin: 1.1rem 0 .5rem; }
.carrinho-topo h3 { font-size: 1.15rem; margin: 0; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.carrinho-topo .contador { background: var(--azul-600); color: #fff; border-radius: 999px; min-width: 1.6rem; padding: 0 .5rem; font: 700 .9rem/1.6rem "Barlow", sans-serif; text-align: center; }
.carrinho { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: #fff; }
.carrinho .table { margin: 0; }
.carrinho tfoot td { background: #f6f8fc; border-top: 1px solid var(--linha-forte); font-size: 1.05rem; }
.carrinho .btn-remover { border: 0; background: transparent; color: var(--suave); border-radius: 8px; min-width: 2.5rem; min-height: 2.5rem; padding: .3rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.carrinho .btn-remover:focus-visible { outline: 3px solid rgba(217, 45, 69, .45); outline-offset: 1px; }
.carrinho .btn-remover:hover { background: var(--vermelho-suave); color: var(--vermelho); }
.carrinho-vazio { text-align: center; padding: 1.6rem 1rem 1.7rem; color: var(--suave); border: 2px dashed #cdd7e7; border-radius: var(--raio); background: #fafbfe; }
.carrinho-vazio .placa-mini { opacity: .45; margin-bottom: .7rem; }
.carrinho-vazio p { margin: 0; }
.carrinho-vazio .dica { font-size: .9rem; margin-top: .15rem; }
@keyframes entrou { from { background-color: #d6f3e6; } to { background-color: transparent; } }
.linha-nova > td { animation: entrou 1.4s ease-out; }
/* placa/chassi já em outro pedido: aviso AMARELO (informativo, não bloqueia o lançamento) */
.aviso-placa { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid #f0d48a; border-left: 6px solid var(--ambar); background: var(--ambar-suave); color: #4f3500; border-radius: var(--raio-sm); padding: .8rem 1rem; margin-top: .8rem; }
.aviso-placa .ic { color: #a86d00; margin-top: .15rem; }
.aviso-placa strong { color: #3d2900; }
.aviso-placa .corpo > div + div { margin-top: .15rem; }
.aviso-placa .corpo > div:last-child { font-size: .92rem; }
/* quadro "Estou ciente da duplicidade" (aparece com item repetido no carrinho) */
.caixa-ciencia { border-left: 6px solid var(--ambar); }
.caixa-ciencia .passo { background: var(--ambar-suave); color: #8a5a00; }
.ciencia-lista { margin: 0 0 .75rem; padding-left: 1.1rem; }
.ciencia-lista li + li { margin-top: .25rem; }
.ciencia-check { padding-block: .35rem; }
.ciencia-check .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: .1rem; }
.ciencia-check .form-check-label { padding-left: .35rem; }
.resumo-pedido { position: sticky; top: 1rem; }
.resumo-pedido .card-body { padding: 1.35rem; }
.resumo-valor { font-family: "Barlow Condensed", sans-serif; font-size: 3.1rem; font-weight: 700; line-height: 1.05; color: var(--azul-700); font-variant-numeric: tabular-nums; }
.itens-mini { border-collapse: separate; border-spacing: 0 .25rem; }
.itens-mini td { padding: 0 .9rem 0 0; vertical-align: middle; border: 0; background: transparent; }
.tabela-itens td, .tabela-itens th { vertical-align: middle; }
#tabela-itens[hidden], #itens-vazio[hidden] { display: none; }

/* ---------- abas de rolagem, paginação, listas ---------- */
.pagination { --bs-pagination-color: var(--azul-600); --bs-pagination-active-bg: var(--azul-600); --bs-pagination-active-border-color: var(--azul-600); --bs-pagination-border-color: var(--linha); --bs-pagination-border-radius: var(--raio-sm); }
.list-group-item-action:hover { background: var(--azul-50); }
.list-group-item.active { background: var(--azul-600); border-color: var(--azul-600); }

/* ---------- telas de entrada ---------- */
.entrada { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: radial-gradient(1200px 520px at 50% -12%, #dde6f3 0, transparent 70%), var(--papel);
  border-top: 4px solid var(--marca-azul); }
.entrada .cartao { width: 100%; max-width: 420px; }
.marca-entrada { text-align: center; margin: 0 auto 1.5rem; }
.marca-entrada img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.entrada .card { box-shadow: var(--sombra-alta); }

/* ---------- telas estreitas: conteúdo em tela cheia (o menu vira gaveta, ver "menu em gaveta") ---------- */
@media (max-width: 991.98px) {
  .content { padding: 4.4rem 1rem 2.5rem; }
  .resumo-pedido { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-link, .hub-tabs .nav-link, .btn, .kpi { transition: none; }
  .linha-nova > td { animation: none; }
}

.ajuda-item summary { cursor: pointer; font-weight: 600; color: var(--azul-600); width: fit-content; }
.ajuda-item summary:hover { text-decoration: underline; }
.ajuda-item p { max-width: 70ch; }

/* fila de produção: cada placa do pedido em uma linha própria */
.item-linha { display: flex; align-items: center; gap: 1rem; padding: .4rem 0; }
.item-linha + .item-linha { border-top: 1px dashed var(--linha); }
.item-linha .sel-item { flex: none; margin: 0; width: 1.15rem; height: 1.15rem; cursor: pointer; }   /* placa -> etiqueta */
.item-suporte::before { content: ""; flex: none; width: 1.15rem; }   /* alinha com as placas (suporte não tem etiqueta) */
.item-placa { flex: none; width: 7.2rem; }
.item-dados { flex: 1 1 11rem; min-width: 9rem; line-height: 1.3; }
/* local de instalação e observações do pedido, abaixo do chassi (fila e Portal do Cliente) */
.item-extra { font-size: .875em; color: var(--tinta); overflow-wrap: anywhere; margin-top: .1rem; }
.item-extra-rot { color: var(--suave); font-weight: 600; }
/* documentos da placa (_docs_placa.html): só ícones, sem texto. Verde = anexado; vermelho = exigido e
   faltando. Na fila, o clique abre o modal de documentos. O nome fica no title/aria-label. Alvo de 28 px. */
.docs-barra { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.doc-ic { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 7px; border: 1px solid;
  text-decoration: none; transition: background-color .15s, border-color .15s; }
span.doc-ic { cursor: default; }
.doc-ic .ic { flex: none; }
.doc-ok { color: var(--verde-texto); border-color: color-mix(in srgb, var(--verde) 35%, transparent); background: var(--verde-suave); }
.doc-ok:hover, .doc-ok:focus-visible { border-color: var(--verde); color: var(--verde-texto); }
.doc-falta { color: var(--vermelho); border-color: var(--vermelho); background: var(--vermelho-suave); }
button.doc-ic { padding: 0; cursor: pointer; }
button.doc-falta:hover, button.doc-falta:focus-visible { background: color-mix(in srgb, var(--vermelho) 18%, transparent); }
@media (prefers-reduced-motion: reduce) { .doc-ic { transition: none; } }
/* "Documentos" do pedido na fila: abre o modal (o que falta aparece na barra de ícones da placa) */
.doc-btn { margin-top: .45rem; }   /* o visual é o do Imprimir (btn-outline-dark), igual aos outros botões do card */
/* ---------- modal de documentos da fila (_docs_placa.html: modal_docs; conteúdo em _docs_painel.html; static/docs_modal.js) */
.modal-docs .modal-content { border: 0; border-radius: 16px; overflow: hidden; }
.modal-docs .modal-header { position: relative; gap: .5rem; border-bottom-color: var(--linha-forte, #dbe2ea); }
.modal-docs .modal-body { overscroll-behavior: contain; }
.dp-titulo-ic { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: var(--azul-50); color: var(--azul-600); }
.dp-alca { display: none; }
/* resumo do pedido: cliente, quantos faltam e a barra de progresso dos exigidos */
.dp-resumo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1rem;
  padding: .75rem .9rem; border-radius: 12px; background: var(--vermelho-suave); color: var(--vermelho); }
.dp-resumo-ok { background: var(--verde-suave); color: var(--verde-texto); }
.dp-resumo-txt { display: flex; flex-direction: column; gap: .1rem; }
.dp-resumo-txt strong { display: inline-flex; align-items: center; gap: .35rem; font-size: 1rem; }
.dp-cliente { color: var(--suave); font-size: .82rem; font-weight: 600; }
.dp-progresso { display: flex; align-items: center; gap: .55rem; flex: 1 1 10rem; max-width: 16rem; }
.dp-progresso-barra { flex: 1; height: .5rem; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); overflow: hidden; }
.dp-progresso-barra > span { display: block; height: 100%; border-radius: inherit; background: currentColor; transition: width .4s ease-out; }
.dp-progresso-num { font-weight: 800; font-variant-numeric: tabular-nums; }
/* cada placa: a mesma mini-placa da fila, proprietário/veículo e a conta da placa */
.dp-placa { padding: .8rem; border: 1px solid var(--linha-forte, #dbe2ea); border-radius: 14px; }
.dp-placa + .dp-placa { margin-top: .75rem; }
.dp-placa-cab { display: flex; align-items: center; gap: .75rem; margin-bottom: .7rem; }
.dp-placa-chip { flex: none; }
.dp-placa-dados { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dp-placa-dados strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-placa-dados small { color: var(--suave); }
.dp-placa-conta { flex: none; display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 999px;
  background: var(--vermelho-suave); color: var(--vermelho); font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dp-placa-conta.ok { background: var(--verde-suave); color: var(--verde-texto); }
/* os seis documentos: cartões com ícone, nome e situação; selo no canto (✓ anexado, ! faltando) */
.dp-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.dp-docs li { display: flex; flex-direction: column; gap: .2rem; }
.dp-doc { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  min-height: 6.4rem; padding: .7rem .45rem .6rem; border: 1.5px solid; border-radius: 12px; font: inherit; text-align: center;
  text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s; }
.dp-doc:active { transform: scale(.98); }
.dp-ic { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 12px; }
.dp-nome { font-size: .85rem; font-weight: 700; line-height: 1.2; }
.dp-sit { font-size: .74rem; font-weight: 600; opacity: .9; }
.dp-selo { position: absolute; top: .4rem; right: .4rem; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem;
  border-radius: 50%; color: #fff; font-size: .75rem; font-weight: 900; line-height: 1; }
.dp-ok { color: var(--verde-texto); border-color: color-mix(in srgb, var(--verde) 45%, transparent); background: var(--verde-suave); }
.dp-ok .dp-ic { background: color-mix(in srgb, var(--verde) 16%, transparent); }
.dp-ok .dp-selo { background: var(--verde); }
.dp-ok:hover, .dp-ok:focus-visible { border-color: var(--verde); color: var(--verde-texto); box-shadow: 0 3px 10px color-mix(in srgb, var(--verde) 20%, transparent); }
.dp-falta { color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 70%, transparent); background: var(--vermelho-suave); }
.dp-falta .dp-ic { background: color-mix(in srgb, var(--vermelho) 14%, transparent); }
.dp-falta .dp-selo { background: var(--vermelho); }
.dp-opcional { color: var(--suave); border-color: var(--linha-forte, #cbd5e1); border-style: dashed; background: none; }
.dp-opcional .dp-ic { background: color-mix(in srgb, var(--suave) 10%, transparent); }
span.dp-doc { cursor: default; }   /* só informa (sem envio, ou da fábrica para quem não é Administrador) */
.dp-falta:hover, .dp-opcional:hover { box-shadow: 0 0 0 .2rem color-mix(in srgb, currentColor 16%, transparent); }
.dp-remover { align-self: center; display: inline-flex; align-items: center; gap: .25rem; min-height: 1.9rem; padding: .15rem .55rem; border: 0;
  border-radius: 8px; background: none; color: var(--suave); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.dp-remover:hover, .dp-remover:focus-visible { background: var(--vermelho-suave); color: var(--vermelho); }
/* Portal do Cliente: documento que o cliente não pode tirar (CRLV com o pedido em produção, procuração que confere) */
.dp-travado { align-self: center; display: inline-flex; align-items: center; gap: .25rem; min-height: 1.9rem; padding: .15rem .55rem;
  color: var(--suave); font-size: .78rem; font-weight: 600; cursor: help; }
.dp-novo { animation: dp-chegou 1.6s ease-out; }
@keyframes dp-chegou { from { box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--verde) 55%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }
/* resultado de cada envio, no alto do modal (o mais novo primeiro) */
.dp-resultados:empty { display: none; }
.dp-chassi { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; }
/* enviando: o cartão fica ocupado; arquivo arrastado em cima de um documento que falta (computador) */
.dp-doc.dp-enviando { cursor: progress; opacity: .7; }
.dp-doc.dp-enviando .dp-ic { animation: dp-pulso 1s ease-in-out infinite; }
@keyframes dp-pulso { 50% { transform: scale(.88); } }
.dp-doc.dp-arrastando { box-shadow: 0 0 0 .22rem var(--azul-600); border-color: var(--azul-600); border-style: solid; }
.dp-lote { display: inline-flex; align-items: center; gap: .4rem; }
.dp-lote[hidden] { display: none; }
/* confirmação do atendente (foto do chassi; traseira não confirmada), por cima do conteúdo do modal */
.dp-confirma { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1rem;
  background: color-mix(in srgb, #0b1220 55%, transparent); }
.dp-confirma[hidden] { display: none; }
.dp-confirma-caixa { width: min(30rem, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem;
  border-radius: 16px; background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35); }
.dp-confirma-tit { margin: 0; }
.dp-confirma-foto { width: 100%; max-height: 42vh; object-fit: contain; border-radius: 10px; background: #000; }
.dp-confirma-arquivo { color: var(--suave); font-size: .78rem; overflow-wrap: anywhere; }
.dp-confirma-destaque { display: block; padding: .55rem .7rem; border-radius: 10px; background: var(--azul-50); color: var(--azul-600);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.25rem; letter-spacing: .08em; text-align: center; overflow-wrap: anywhere; }
/* declaração de quem confere: "Eu, <atendente>, conferi..." — vale ao clicar em "Conferir e Anexar" */
.dp-confirma-declara { margin: 0; padding: .6rem .75rem; border-left: 4px solid var(--azul-600); border-radius: 8px;
  background: color-mix(in srgb, var(--azul-600) 8%, transparent); font-weight: 600; line-height: 1.4; }
.dp-confirma-declara:empty { display: none; }
.dp-confirma-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.dp-confirma-acoes .btn { min-height: 2.75rem; }
.dp-resultados { margin: 0 0 .75rem; padding: 0; list-style: none; font-size: .85rem; }
.dp-resultados li { padding: .45rem .7rem; border-radius: 9px; margin-top: .35rem; }
.dp-andamento { background: var(--azul-50); color: var(--azul-600); }
.dp-ok-msg { background: var(--verde-suave); color: var(--verde-texto); }
.dp-erro { background: var(--vermelho-suave); color: var(--vermelho); }
/* celular (iPhone): folha que sobe da base, alvos de toque de 44 px, duas colunas de documentos */
@media (max-width: 575.98px) {
  .modal-docs .modal-dialog { margin: 0; min-height: 100%; align-items: flex-end; }
  .modal-docs.fade .modal-dialog { transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .modal-docs.show .modal-dialog { transform: none; }
  .modal-docs .modal-content { max-height: 92dvh; border-radius: 20px 20px 0 0; }
  .modal-docs .modal-header { padding-top: 1.2rem; }
  .modal-docs .dp-alca { display: block; position: absolute; top: .45rem; left: 50%; width: 2.6rem; height: .3rem; margin-left: -1.3rem;
    border-radius: 999px; background: var(--linha-forte, #cbd5e1); }
  .modal-docs .btn-close { width: 2.75rem; height: 2.75rem; margin: -.5rem -.5rem -.5rem auto; }
  .modal-docs .modal-body { padding: .85rem; }
  .modal-docs .modal-footer { padding: .6rem .85rem max(.6rem, env(safe-area-inset-bottom)); }
  .modal-docs .modal-footer .btn { flex: 1; min-height: 2.75rem; }
  .dp-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-doc { min-height: 6.8rem; }
  .dp-remover { min-height: 2.75rem; }
  .dp-placa { padding: .7rem; }
  .dp-progresso { max-width: none; flex-basis: 100%; }
  .doc-btn, .pcd-acoes .btn { min-height: 2.75rem; }   /* celular: toque de 44px em todos os botões do card */
  .dp-confirma { padding: .6rem; }
  .dp-confirma-acoes .btn { flex: 1 1 8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-doc, .doc-btn, .dp-progresso-barra > span, .modal-docs.fade .modal-dialog { transition: none; }
  .dp-novo, .dp-doc.dp-enviando .dp-ic { animation: none; }
}
/* fechamento do Novo pedido: "Finalizar e Imprimir" logo abaixo do "Lançar sem imprimir" (a prioridade) */
.btn-imprimir-pedido { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding-top: .6rem; padding-bottom: .6rem; font-weight: 600; }
.btn-finalizar { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.barra-total .btn { display: inline-flex; align-items: center; gap: .4rem; }
/* coluna Pagamento: "faturado" e "dar baixa" com ícone, no mesmo alinhamento */
.pag-col { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }   /* selo em cima, forma embaixo */
.pag-info { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.pag-info .ic { flex: none; }
.pag-baixa { font-weight: 600; text-decoration: none; }
.pag-baixa:hover, .pag-baixa:focus-visible { text-decoration: underline; }
.item-tipo { flex: none; width: 8.5rem; line-height: 1.3; }
.acoes-pedido { white-space: nowrap; }
.acoes-pedido .btn-group .btn { padding: .22rem .5rem; font-size: .8rem; }
.btn-warning { --bs-btn-bg: #e8a317; --bs-btn-border-color: #e8a317; --bs-btn-color: #2b1d00; --bs-btn-hover-bg: #d4930f; --bs-btn-hover-border-color: #d4930f; --bs-btn-hover-color: #2b1d00; --bs-btn-active-bg: #bf850d; --bs-btn-active-border-color: #bf850d; }
.btn-secondary { --bs-btn-bg: #5b6b82; --bs-btn-border-color: #5b6b82; --bs-btn-hover-bg: #4a586d; --bs-btn-hover-border-color: #4a586d; --bs-btn-active-bg: #3d4a5e; --bs-btn-active-border-color: #3d4a5e; }
.btn-group > .btn-outline-secondary { border-color: var(--linha-forte); }
.acoes-pedido .btn-group { display: flex; flex-wrap: wrap; gap: .25rem; }
.acoes-pedido .btn-group > .btn { flex: none; border-radius: 6px !important; margin: 0 !important; }
/* Status do pedido: grade 2 × 2 de largura fixa em qualquer tela. Solto (flex que quebra), o grupo ficava torto
   quando o pedido estava "Aguardando" (Imprimir + Excluir + 4 botões + cancelar) com o menu lateral aberto. */
.acoes-pedido { width: 13.5rem; min-width: 13.5rem; white-space: normal; }
.acoes-pedido .btn-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.acoes-pedido .btn-group > .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acoes-pedido > .btn { margin-right: .2rem; }
/* com o menu aberto a página para em 1240 px: a fila (tabela larga) e o Financeiro (painéis, listas e calendário,
   cheios de cartões lado a lado) usam a largura que houver, como com o menu recolhido. Em 1080p com o menu aberto
   sobram ~1600 px; presos em 1240 os cartões do Financeiro ficavam estreitos demais. */
@media (min-width: 1200px) { .page:has(.fila-tabela), .page-financeiro { max-width: 2400px; } }
.item-tipo { width: 6.5rem; }
.item-placa { width: 6.6rem; }
.tipo-sep { display: none; }
/* fila: cabeçalho "Pedido" clicável (ordem mais novos / mais antigos) */
.th-ordem { color: inherit; text-decoration: none; white-space: nowrap; display: inline-block; padding-block: .15rem; }
.th-ordem .ic { vertical-align: -2px; }
.th-ordem:hover, .th-ordem:focus-visible { color: var(--azul-600); text-decoration: underline; }
.th-ordem-txt { display: block; font-size: .75rem; font-weight: 500; color: var(--suave); }
/* Notebook (992–1499 px, ex.: 1280 e 1366): a tabela da fila precisava de ~1100 px e escondia a coluna
   Status atrás de uma rolagem lateral. Aqui a categoria/formato desce para baixo dos dados do veículo
   e os botões de status ficam em grade 2 × 2. Com o menu aberto, cabe sem rolar a partir de ~1150 px;
   mais estreito que isso a tabela ainda rola dentro da própria caixa (bem menos que antes). */
@media (min-width: 992px) and (max-width: 1499.98px) {   /* com o menu lateral aberto */
  .fila-tabela > tbody > tr > td, .fila-tabela thead th { padding-inline: .3rem; }   /* fila e Portal do Cliente */
  #fila-corpo > tr > td:nth-child(2) { white-space: normal !important; }   /* vence o .text-nowrap: "#402 · 13:12 · Ana" pode quebrar */
  .item-linha { display: grid; grid-template-columns: auto 6.6rem minmax(8rem, 1fr); column-gap: .85rem; row-gap: .1rem; }
  .item-linha > .sel-item, .item-linha > .item-placa, .item-suporte::before { grid-row: span 2; }
  .item-linha > .item-tipo { grid-column: 3; width: auto; }
  .tipo-quebra { display: none; }
  .tipo-sep { display: inline; }
  .acoes-pedido { width: 12.5rem; min-width: 12.5rem; }
  .acoes-pedido .btn-group .btn { padding-inline: .25rem; }
}

/* ---------- menu lateral recolhível (só no computador; no celular/tablet o menu é uma gaveta) ---------- */
.sidebar { transition: flex-basis .25s ease, width .25s ease, padding .25s ease; z-index: 20; }
.page { transition: max-width .25s ease; }
.sidebar .nav-link { gap: 0; overflow: hidden; white-space: nowrap; }
.sidebar .nav-txt { margin-left: .75rem; max-width: 14rem; overflow: hidden; transition: max-width .25s ease, margin .25s ease, opacity .15s ease; }
.sidebar .lnk-txt { margin-left: .3rem; }
.sidebar .atendente a, .sidebar .atendente .sair-btn { gap: 0; }

.menu-toggle {
  position: absolute; top: 5.1rem; right: -14px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: #fff; color: var(--azul-700); border: 1px solid var(--linha-forte);
  box-shadow: 0 2px 8px rgba(11, 30, 77, .28); transition: transform .25s ease, background-color .15s;
}
/* no computador o botão fica FIXO na tela, na borda do menu: assim a rolagem interna do menu (telas
   baixas, overflow-y: auto) não corta a metade dele que fica para fora */
@media (min-width: 992px) {
  .menu-toggle { position: fixed; left: calc(var(--sidebar-w) - 14px); right: auto; z-index: 30;
    transition: left .25s ease, transform .25s ease, background-color .15s; }
}
.menu-toggle:hover { background: #eaf1ff; }
.menu-toggle:focus-visible { outline: 3px solid rgba(29, 78, 216, .55); outline-offset: 2px; }

html.menu-recolhido { --sidebar-w: 76px; }
html.menu-recolhido .menu-toggle { transform: rotate(180deg); }
html.menu-recolhido .page { max-width: 2400px; }
html.menu-recolhido .content { padding-left: 1.75rem; padding-right: 1.75rem; }
html.menu-recolhido .sidebar { padding-left: .6rem; padding-right: .6rem; }
html.menu-recolhido .sidebar .marca-menu { margin: 0 0 1.5rem; padding: .2rem 0 .9rem; }
html.menu-recolhido .sidebar .marca-logo { display: none; }
html.menu-recolhido .sidebar .marca-simbolo { display: block; }
html.menu-recolhido .sidebar .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
html.menu-recolhido .sidebar .nav-txt { max-width: 0; margin-left: 0; opacity: 0; }
html.menu-recolhido .sidebar .atendente { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .9rem 0 0; }
html.menu-recolhido .sidebar .atendente-nome, html.menu-recolhido .sidebar .atendente-rotulo, html.menu-recolhido .sidebar .lnk-txt { display: none; }
html.menu-recolhido .sidebar .atendente-links { flex-direction: column; align-items: center; gap: .55rem; margin: .2rem 0 0; }
html.menu-recolhido .sidebar .atendente-links a, html.menu-recolhido .sidebar .sair-btn { padding: .4rem; border-radius: 8px; }
html.menu-recolhido .sidebar .atendente-links a:hover, html.menu-recolhido .sidebar .sair-btn:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }

/* ---------- menu em gaveta (celular e tablet, abaixo de 992 px) ----------
   O menu lateral sai da tela e só aparece pelo botão ☰: desliza da esquerda sobre um fundo translúcido
   e fecha ao escolher uma opção, tocar no fundo ou apertar Esc (static/app.js). O "recolhido" do
   computador não vale aqui: na gaveta o menu aparece sempre completo, com os nomes. */
.menu-gaveta-btn, .menu-fechar, .menu-fundo { display: none; }
@media (max-width: 991.98px) {
  .shell { display: block; }
  .menu-toggle { display: none; }
  .menu-gaveta-btn {
    display: inline-flex; align-items: center; justify-content: center; position: fixed; top: .75rem; left: .75rem; z-index: 1030;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; cursor: pointer;
    background: var(--marca-azul); color: #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, .28);
    transition: background-color .15s, transform .15s;
  }
  .menu-gaveta-btn:hover { background: var(--azul-700); }
  .menu-gaveta-btn:active { transform: scale(.96); }
  .menu-gaveta-btn:focus-visible { outline: 3px solid #93b4ff; outline-offset: 2px; }
  .menu-fundo {
    display: block; position: fixed; inset: 0; z-index: 1040; background: rgba(15, 23, 42, .5);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
  }
  html.menu-aberto .menu-fundo { opacity: 1; visibility: visible; transition: opacity .25s ease; }
  html.menu-aberto, html.menu-aberto body { overflow: hidden; }   /* a página atrás não rola */

  .sidebar, html.menu-recolhido .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1050; width: min(18rem, 86vw); height: 100vh; height: 100dvh;
    padding: 1.1rem .85rem 1rem; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); visibility: hidden; box-shadow: none;
    transition: transform .25s ease, visibility 0s linear .25s, box-shadow .25s ease;
  }
  html.menu-aberto .sidebar { transform: none; visibility: visible; box-shadow: 8px 0 32px rgba(15, 23, 42, .35); transition: transform .25s ease, box-shadow .25s ease; }
  .menu-fechar {
    display: inline-flex; align-items: center; justify-content: center; position: absolute; top: .7rem; right: .6rem;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, .8); cursor: pointer;
  }
  .menu-fechar:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  .menu-fechar:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .sidebar .marca-menu { justify-content: flex-start; margin-right: 3rem; }
  .sidebar .nav-link { min-height: 48px; }

  /* recolhido no computador -> na gaveta mostra tudo de novo */
  html.menu-recolhido .page { max-width: 1240px; }
  html.menu-recolhido .content { padding: 4.4rem 1rem 2.5rem; }
  html.menu-recolhido .sidebar .marca-menu { margin: 0 3rem 1.5rem .2rem; padding: .35rem .25rem .9rem; }
  html.menu-recolhido .sidebar .marca-logo { display: block; }
  html.menu-recolhido .sidebar .marca-simbolo { display: none; }
  html.menu-recolhido .sidebar .nav-link { justify-content: flex-start; padding: .65rem .85rem; }
  html.menu-recolhido .sidebar .nav-txt { max-width: 14rem; margin-left: .75rem; opacity: 1; }
  html.menu-recolhido .sidebar .atendente { display: grid; padding: .9rem .6rem 0; align-items: center; }
  html.menu-recolhido .sidebar .atendente-nome, html.menu-recolhido .sidebar .atendente-rotulo, html.menu-recolhido .sidebar .lnk-txt { display: initial; }
  html.menu-recolhido .sidebar .atendente-links { flex-direction: row; align-items: center; gap: 1rem; margin: .6rem 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .page, .sidebar .nav-txt, .menu-toggle, .menu-fundo, .menu-gaveta-btn { transition: none !important; }
}
@media print { .sidebar, .menu-toggle, .menu-gaveta-btn, .menu-fundo { display: none !important; } }

/* Resumo do pedido: soma dos itens + taxa − desconto */
.resumo-ajustes { margin-top: .25rem; }
.resumo-ajustes > div { display: flex; justify-content: space-between; gap: .75rem; padding: .1rem 0; }
.resumo-ajustes dt { font-weight: 400; color: var(--bs-secondary-color, #6c757d); }
.resumo-ajustes dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resumo-ajustes > div[hidden], .resumo-ajustes[hidden] { display: none; }

/* ---------- Novo pedido: PDV de tela única (cliente · itens · fechamento) ---------- */
.pdv .card-titulo { margin-bottom: .85rem; }
.pdv .card-titulo .contador { margin-left: auto; background: var(--azul-600); color: #fff; border-radius: 999px; min-width: 1.7rem; padding: 0 .55rem; font: 700 .95rem/1.7rem "Barlow", sans-serif; text-align: center; }
.pdv kbd { background: #eef2f9; color: var(--tinta); border: 1px solid var(--linha-forte); border-bottom-width: 2px; border-radius: 5px; padding: .02rem .35rem; font: 600 .78rem "Barlow", sans-serif; }

/* bloco 1 */
.atendimento { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .75rem; }
.atendimento-rotulo { font-weight: 600; color: var(--suave); margin-right: .35rem; }
.seg-pill { min-height: 2.5rem; border: 1.5px solid var(--linha-forte); background: #fff; color: var(--tinta); border-radius: 999px; padding: .32rem .95rem; font-weight: 600; line-height: 1.2; transition: background-color .12s, border-color .12s, color .12s; }
.seg-pill:hover:not(:disabled):not(.ativo) { border-color: var(--azul-600); background: var(--azul-50); }
.seg-pill.ativo { background: var(--azul-600); border-color: var(--azul-600); color: #fff; }
.seg-pill:disabled { opacity: .4; cursor: not-allowed; }
.seg-pill:focus-visible, .produto:focus-visible { outline: 3px solid rgba(29, 78, 216, .45); outline-offset: 2px; }
/* Quantidade (Par / Unidade) em botões lado a lado, da altura de um campo grande */
.formato-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; container-type: inline-size; }
.formato-opcao { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .3rem .6rem; min-width: 0;
  border: 1.5px solid var(--linha-forte); border-radius: 10px; background: #fff; color: var(--tinta); text-align: left;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.formato-opcao .ic { flex: none; color: var(--suave); transition: color .15s ease; }
.formato-txt { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.formato-txt strong { font-weight: 700; }
/* coluna estreita (tablet, ou a coluna de 1/3 no computador): ícone em cima do texto, sem quebrar "2 placas" */
@container (max-width: 250px) {
  .formato-opcao { flex-direction: column; gap: .1rem; padding: .35rem .25rem; }
  .formato-opcao .ic { width: 24px; height: 24px; }
  .formato-txt { align-items: center; text-align: center; }
}
.formato-txt small { font-size: max(12px, .8em); color: var(--suave); }
.formato-opcao:hover:not(.ativo) { border-color: var(--azul-600); background: var(--azul-50); }
.formato-opcao:hover:not(.ativo) .ic { color: var(--azul-600); }
.formato-opcao.ativo { background: var(--azul-700); border-color: var(--azul-700); color: #fff; box-shadow: 0 2px 0 rgba(10, 27, 66, .35); }
.formato-opcao.ativo .ic, .formato-opcao.ativo small { color: #fff; }
.formato-opcao:focus-visible { outline: 3px solid rgba(29, 78, 216, .45); outline-offset: 2px; }
.formato-seg.is-invalid .formato-opcao { border-color: var(--bs-form-invalid-border-color, #dc3545); }
@media (prefers-reduced-motion: reduce) { .formato-opcao, .formato-opcao .ic { transition: none; } }
.linha-cliente { display: flex; gap: .6rem; align-items: stretch; }
.cliente-rapido { margin-top: .75rem; padding: .9rem 1rem 1rem; border: 1.5px dashed #9db6e8; border-radius: var(--raio); background: var(--azul-50); }

/* bloco 2 */
.produtos-linha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .35rem; }
.produtos { display: flex; flex-wrap: wrap; gap: .45rem; }
.produto { min-height: 2.75rem; border: 1.5px solid var(--linha-forte); background: #fff; color: var(--tinta); border-radius: 10px; padding: .4rem .85rem; font-weight: 600; transition: background-color .12s, border-color .12s, color .12s; }
.produto:hover:not(.ativo) { border-color: var(--azul-600); background: var(--azul-50); }
.produto.ativo { background: var(--azul-700); border-color: var(--azul-700); color: #fff; box-shadow: 0 2px 0 rgba(10, 27, 66, .35); }
.produto-suporte { border-style: dashed; }
.produto-suporte.ativo { border-style: solid; background: #8a5a00; border-color: #8a5a00; }
.pdv .produtos-linha .placa-previa { margin: 0; padding: 0; border: 0; }
.pdv .produtos-linha .placa-previa .placa-mini { min-width: 0; font-size: 1.7rem; }
.pdv .produtos-linha .placa-previa .placa-mini.placa-moto { width: 5rem; }
.pdv .produtos-linha .placa-previa .placa-mini.placa-reduzida { font-size: 1.4rem; }
.acao-adicionar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .9rem; }
.acao-adicionar .btn { min-width: 15rem; }
/* novo pedido: leitura do PDF do veículo (static/leitor_pdf.js) */
.leitor-pdf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin: 0 0 .75rem; padding: .55rem .75rem;
  border: 1px dashed var(--linha-forte); border-radius: var(--raio-sm); background: var(--azul-50); }
.leitor-pdf-topo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; flex-basis: 100%; }
.leitor-pdf-contador { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--azul-700); background: var(--azul-100);
  border-radius: 999px; padding: .1rem .6rem; font-variant-numeric: tabular-nums; }
/* o que o PDF trouxe para o veículo em uso: tipo, categoria e sugestão de formato */
.leitor-pdf-deteccao { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.leitor-pdf-deteccao .rot { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.leitor-pdf-deteccao .aviso { flex-basis: 100%; }
.chip-det { display: inline-flex; align-items: baseline; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .85rem;
  background: var(--superficie); border: 1px solid var(--linha-forte); }
.chip-det small { color: var(--suave); }
.chip-det-falta { border-color: var(--ambar); background: var(--ambar-suave); }
/* dados presos pelo CRLV: borda âmbar avisa que não dá para trocar */
.form-select.campo-travado, .form-control.campo-travado { border-color: var(--ambar); box-shadow: 0 0 0 1px var(--ambar); cursor: not-allowed; }
/* fila de importação: um veículo por linha */
.fila-pdf { flex-basis: 100%; list-style: none; margin: .1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem;
  max-height: 16rem; overflow-y: auto; }
.fila-pdf-item { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) auto auto; align-items: center; gap: .25rem .6rem;
  padding: .35rem .55rem; border-radius: var(--raio-sm); background: var(--superficie); border: 1px solid var(--linha); }
.fila-pdf-placa { font-family: var(--fonte-placa); font-weight: normal; letter-spacing: .04em; }
.fila-pdf-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fila-pdf-tipo { font-size: .875rem; font-weight: 600; }
.fila-pdf-arquivo { font-size: .75rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-pdf-estado { font-size: .75rem; font-weight: 600; color: var(--suave); white-space: nowrap; }
.fila-pdf-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.fila-pdf-acoes .btn { white-space: nowrap; }   /* "Ver Registro" não quebra dentro do botão */
.fila-pdf-acoes .btn-link { padding-inline: .35rem; }
@media (pointer: coarse) { .fila-pdf-acoes .btn { min-height: 44px; } }   /* toque: alvo de 44 px */
.fila-pdf-item.atual { border-color: var(--azul-600); box-shadow: 0 0 0 1px var(--azul-600); background: var(--azul-50); }
.fila-pdf-item.atual .fila-pdf-estado { color: var(--azul-600); }
.fila-pdf-item.carrinho { background: var(--verde-suave); border-color: transparent; }
.fila-pdf-item.carrinho .fila-pdf-estado { color: var(--verde-texto); }
.fila-pdf-item.lendo { color: var(--suave); }
.fila-pdf-item.erro { border-color: var(--vermelho); background: var(--vermelho-suave); }
.fila-pdf-item.lendo .fila-pdf-placa, .fila-pdf-item.erro .fila-pdf-placa { font-family: inherit; font-weight: 600; font-size: .8rem; }
/* Registro de Placa: anexado ao CRLV (verde) ou, sem par / ambíguo, linha própria com aviso */
.fila-pdf-registro { font-size: .75rem; color: var(--suave); }
.fila-pdf-registro.ok { color: var(--verde-texto); font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; }
/* aviso do ambíguo sobre o fundo vermelho-claro: o vermelho comum não chega a 4,5:1 */
.fila-pdf-item.registro.ambiguo .text-danger { color: var(--bs-danger-text-emphasis) !important; }
.fila-pdf-item.registro.fila { border-style: dashed; border-color: var(--ambar); }
.fila-pdf-item.registro.ambiguo.fila { border-style: solid; border-color: var(--vermelho); background: var(--vermelho-suave); }
@media (max-width: 575.98px) {
  .fila-pdf-item { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .fila-pdf-estado, .fila-pdf-acoes { grid-column: 2; }
}
.selo-pdf { display: inline-block; margin-left: .35rem; padding: 0 .35rem; border-radius: 4px; font-size: .65rem; font-weight: 700;
  letter-spacing: .05em; vertical-align: middle; color: var(--azul-700); background: var(--azul-100); }
.compositor.arrastando-pdf { outline: 3px dashed var(--azul-600); outline-offset: 4px; background: var(--azul-50); }
.campo-lido { animation: campo-lido 2.2s ease-out; }
@keyframes campo-lido { 0%, 30% { box-shadow: 0 0 0 .25rem rgba(14, 159, 110, .35); border-color: var(--verde); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .campo-lido { animation: none; } }

/* fila de pedidos: atualização automática e andamento da estampagem */
.fila-ao-vivo { display: inline-flex; align-items: center; gap: .35rem; }
.fila-ao-vivo .ponto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(14, 159, 110, .18); }
.fila-ao-vivo.erro .ponto { background: var(--vermelho); box-shadow: none; }
#fila-corpo tr.linha-atualizada > td { animation: fila-mudou 2.4s ease-out; }
@keyframes fila-mudou { 0%, 35% { background-color: var(--ambar-suave); } 100% { background-color: transparent; } }
.progresso-oficina { display: flex; align-items: center; gap: .45rem; color: var(--azul-700); font-weight: 600; }
.progresso-oficina .barra { width: 3.2rem; height: .4rem; border-radius: 999px; background: var(--azul-100); overflow: hidden; }
.progresso-oficina .barra > span { display: block; height: 100%; background: var(--azul-600); }
@media (prefers-reduced-motion: reduce) { #fila-corpo tr.linha-atualizada > td { animation: none; } }
.suporte-chip { display: inline-block; background: var(--ambar-suave); color: #6b4500; border: 1px solid #ecd28a; border-radius: 8px; padding: .22rem .65rem; font-weight: 700; }
.pdv .carrinho { margin-top: 1rem; }
.pdv .carrinho[hidden], .pdv .carrinho-vazio[hidden] { display: none; }
.pdv .carrinho-vazio { margin-top: 1rem; }

/* bloco 3 */
/* Fechamento sem rolagem própria: num monitor 1366×768 sobra ~650 px no navegador e o card (com troco) passa de
   900 px; com rolagem por dentro apareciam duas barras (a vertical roubava largura e criava a horizontal).
   Agora ele rola junto com a página e para quando o fim dele (o botão Finalizar) chega ao rodapé da tela:
   --fech-top = 1rem se cabe na tela; senão, negativo (static/pedido.js). */
.fechamento { position: sticky; top: var(--fech-top, 1rem); min-width: 0; }
.fechamento .card-body { padding: 1.2rem 1.25rem; }
.calculo-pdv { display: grid; gap: .55rem; }
.calculo-pdv .lin { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
/* taxa Detran marcada: lembrete do PDF do Processo (informativo, não bloqueia) */
.calculo-pdv .lin-detran { flex-wrap: wrap; align-items: flex-start; padding: .5rem .6rem; margin: 0 -.6rem;
  border-radius: var(--raio-sm); border-left: 4px solid transparent; transition: background-color .15s, border-color .15s; }
.calculo-pdv .lin-detran.ativa { background: var(--azul-50); border-left-color: var(--azul-600); }
.detran-switch { display: flex; align-items: flex-start; gap: .5rem; padding-left: 0; flex: 1 1 0; min-width: 0; }
.detran-switch .form-check-input { float: none; margin: .15rem 0 0; flex: none; }
.detran-titulo { display: block; font-weight: 700; line-height: 1.25; }
.detran-sub { display: block; font-size: .8rem; color: var(--bs-secondary-color); line-height: 1.3; }
.calculo-pdv .detran-valor { color: var(--bs-secondary-color); font-weight: 600; padding-top: .1rem; }
.calculo-pdv .lin-detran.ativa .detran-valor { color: var(--azul-700); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .calculo-pdv .lin-detran { transition: none; } }
.detran-lembrete { flex-basis: 100%; display: flex; gap: .4rem; align-items: flex-start; font-size: .85rem; line-height: 1.35;
  padding: .4rem .55rem; border-radius: var(--raio-sm); background: var(--ambar-suave); color: var(--bs-warning-text-emphasis); }
.detran-lembrete[hidden] { display: none; }
.detran-lembrete .ic { flex: none; margin-top: .1rem; }
.calculo-pdv .rot { font-weight: 600; margin: 0; }
.calculo-pdv .val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calculo-pdv .campo-valor { width: 10.5rem; flex: none; }
.calculo-pdv .lin-descricao { display: block; }
.calculo-pdv [hidden] { display: none; }
.total-liquido { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: .9rem 0 .35rem; padding: .7rem .9rem; border-radius: var(--raio); background: var(--azul-50); border: 1px solid #cddcf8; border-left: 6px solid var(--azul-600); }
.total-liquido > span { font-weight: 700; color: var(--azul-700); }
.total-liquido > strong { white-space: nowrap; font-family: "Barlow Condensed", sans-serif; font-size: 2.6rem; line-height: 1.05; color: var(--azul-700); font-variant-numeric: tabular-nums; }
.pagamento-pdv { border: 0; padding: 0; margin: .9rem 0 0; min-width: 0; }
.pagamento-pdv legend { float: none; width: auto; font-size: .95rem; font-weight: 600; color: var(--suave); padding: 0; margin-bottom: .35rem; }
.pag-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.pag-opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.pag-opcoes label { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; text-align: center; padding: .5rem .3rem; border: 1.5px solid var(--linha-forte); border-radius: 10px; background: #fff; font-weight: 600; cursor: pointer; line-height: 1.15; }
.pag-opcoes input:checked + label { background: var(--azul-600); border-color: var(--azul-600); color: #fff; }
.pag-opcoes input:disabled + label { opacity: .45; cursor: not-allowed; }
.pag-opcoes input:focus-visible + label { outline: 3px solid rgba(29, 78, 216, .45); outline-offset: 2px; }
/* troco (pagamento em dinheiro): valor recebido, atalhos de nota, troco e como devolver (dinheiro, PIX, dividir) */
.troco-pdv { margin-top: .6rem; padding: .6rem .7rem; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie-2, #f8fafc); }
.troco-pdv[hidden], #troco-como[hidden], .troco-divisao[hidden] { display: none; }
.troco-notas { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.troco-notas .btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; font-weight: 600; }
.troco-linha { margin-top: .45rem; font-size: 1rem; }
.troco-linha strong { font-size: 1.15rem; color: var(--verde-texto); }
.troco-linha.falta { color: var(--vermelho); font-weight: 600; }
.troco-modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin-top: .45rem; }
.troco-modos input { position: absolute; opacity: 0; pointer-events: none; }
.troco-modos label { display: flex; align-items: center; justify-content: center; min-height: 2.25rem; padding: .3rem; text-align: center;
  border: 1.5px solid var(--linha-forte); border-radius: 8px; background: #fff; font-weight: 600; font-size: .9rem; cursor: pointer; line-height: 1.1; }
.troco-modos input:checked + label { background: var(--azul-600); border-color: var(--azul-600); color: #fff; }
.troco-modos input:disabled + label { opacity: .45; cursor: not-allowed; }
.troco-modos input:focus-visible + label { outline: 3px solid rgba(29, 78, 216, .45); outline-offset: 2px; }
.troco-divisao { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: end; margin-top: .5rem; }
.troco-dinheiro { font-weight: 700; font-size: 1rem; padding: .2rem 0; white-space: nowrap; }
.btn-finalizar { padding-top: .95rem; padding-bottom: .95rem; font-size: 1.25rem; box-shadow: 0 3px 0 rgba(10, 27, 66, .35); }
.barra-total { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; background: #fff; border-top: 1px solid var(--linha-forte); box-shadow: 0 -6px 18px rgba(16, 35, 77, .12); }
.barra-total strong { font-family: "Barlow Condensed", sans-serif; font-size: 1.9rem; line-height: 1; color: var(--azul-700); }
/* telas baixas (notebook 1366×768 e afins): o fechamento mais enxuto, para caber o máximo sem rolar */
@media (min-width: 1200px) and (max-height: 820px) {
  .fechamento .card-body { padding: .9rem 1rem; }
  .fechamento .card-titulo { margin-bottom: .6rem; }
  .calculo-pdv { gap: .4rem; }
  .total-liquido { margin: .6rem 0 .25rem; padding: .5rem .8rem; }
  .total-liquido > strong { font-size: 2.1rem; }
  .pagamento-pdv { margin-top: .6rem; }
  .pag-opcoes label { min-height: 2.35rem; padding: .35rem .3rem; }
  .troco-pdv { margin-top: .45rem; padding: .5rem .6rem; }
  .btn-finalizar { padding-top: .7rem; padding-bottom: .7rem; font-size: 1.1rem; }
  .fechamento .d-grid.mt-3 { margin-top: .75rem !important; }
}
@media (max-width: 1199.98px) {
  .fechamento { position: static; }
  .pdv { padding-bottom: 5.5rem; }
}
@media (max-width: 575.98px) {
  .linha-cliente { flex-direction: column; }
  .acao-adicionar .btn { width: 100%; }
}

.resumo-reduzida { color: #c2410c; }   /* mesmo laranja do selo PLACA REDUZIDA */

/* tipo de atendimento automático / exceção de balcão */
.atendimento-info { margin: -.2rem 0 .7rem; padding: .4rem .7rem; border-radius: var(--raio-sm); background: var(--verde-suave); color: #0b5d42; font-size: .95rem; border-left: 4px solid var(--verde); }
.atendimento-info.excecao { background: var(--ambar-suave); color: #6b4500; border-left-color: var(--ambar); }
.atendimento-info .btn-link { font-weight: 600; }

/* forma de pagamento sugerida pelo cadastro */
.resumo-pagamento { margin: .1rem 0 .35rem; font-size: 1rem; }
.sugestao-pag:empty { display: none; }
.sugestao-pag { color: #0b5d42; background: var(--verde-suave); border-radius: 6px; padding: .3rem .55rem; margin-top: .4rem; }

/* ---------- Novo pedido: passo 2 (itens) travado até escolher o cliente ---------- */
.bloco-bloqueado .card-titulo { color: var(--suave); }
.bloco-bloqueado .card-titulo .passo { background: var(--linha-forte); color: var(--suave); }
.itens-bloqueio { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem 1.1rem;
  border: 2px dashed var(--linha-forte); border-radius: var(--raio); background: #fafbfe; color: var(--suave); }
.itens-bloqueio[hidden] { display: none; }
.itens-bloqueio > div { flex: 1 1 16rem; }
.itens-bloqueio strong { display: block; color: var(--tinta); font-size: 1.05rem; }
.itens-bloqueio-ic { display: inline-grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--azul-100); color: var(--azul-700); }
.itens-bloqueio .btn { min-height: 2.5rem; }

/* ---------- Novo pedido: passo 1 recolhe depois de escolher o cliente (accordion) ---------- */
#bloco-cliente .bloco-topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
#bloco-cliente .bloco-topo .card-titulo { margin: 0; }
.cliente-editar { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding-inline: .9rem; flex: none; }
.cliente-editar[hidden], .cliente-editar[aria-expanded="true"] .ic { display: none; }   /* lápis só no "Editar" */
/* faixa de resumo: só aparece recolhido */
.cliente-resumo { display: none; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: .5rem 0 0 2.35rem; }
.cliente-resumo strong { font-size: 1.12rem; color: var(--tinta); }
.resumo-cli-doc, .resumo-cli-meta { font-size: .9rem; color: var(--suave); }
.resumo-cli-doc:empty { display: none; }
.resumo-cli-meta { flex-basis: 100%; }
#bloco-cliente.recolhido .cliente-resumo { display: flex; }
#bloco-cliente.recolhido .bloco-topo { margin-bottom: 0; }
#bloco-cliente.recolhido .card-body { padding-block: .9rem 1rem; }
#bloco-cliente.recolhido .card-titulo .passo { background: #0b6b4a; }   /* verde escuro: 6,6:1 com o número branco */
/* altura animada sem medir em JS: grid de 1fr -> 0fr; o conteúdo só é cortado recolhido ou animando */
.recolhivel { display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows .28s cubic-bezier(.2, .7, .2, 1), opacity .2s ease; }
.recolhivel > .recolhivel-dentro { min-height: 0; }
.recolhivel.animando > .recolhivel-dentro, .recolhido .recolhivel > .recolhivel-dentro { overflow: hidden; }
.recolhido .recolhivel { grid-template-rows: 0fr; opacity: 0; visibility: hidden;   /* fora do Tab quando fechado */
  transition: grid-template-rows .22s cubic-bezier(.4, 0, .6, 1), opacity .15s ease, visibility 0s .22s; }
@media (max-width: 575.98px) {
  .cliente-resumo { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .recolhivel, .recolhido .recolhivel { transition: none; }
}

/* ---------- Notebook (992–1439 px de largura, ex.: 1366 × 768 e 1280 × 720/800) ----------
   Nessas telas o sistema ficava "grande demais": o menu lateral não cabia na altura (o "Sair" sumia
   embaixo), as tabelas viravam linhas altas e apertadas e o fechamento do pedido quebrava os textos.
   Aqui tudo fica ~12% mais compacto (o mesmo efeito de um zoom de 90% no navegador, mas automático):
   o Bootstrap e este arquivo medem quase tudo em rem, então basta reduzir o tamanho base da letra.
   O que é medido em px (largura do menu, espaçamentos do conteúdo) é ajustado à mão logo abaixo.
   Só na tela: impressões e PDFs continuam com o tamanho normal. */
@media screen and (min-width: 992px) and (max-width: 1439.98px) {
  html { font-size: 14px; }
  :root { --sidebar-w: 220px; }
  .content { padding: 1.25rem 1.5rem 2.5rem; }
  .page { max-width: 1320px; }
  .page h1, h1.h3 { font-size: 1.7rem; }
  .sidebar { padding: 1rem .7rem .8rem; }
  .marca-menu { margin-bottom: 1rem; padding-bottom: .7rem; }
  .marca-menu .marca-logo { max-width: 11.5rem; }
  .sidebar .nav-link { padding: .55rem .75rem; }
  .hub-tabs { margin-bottom: 1.15rem !important; }
  .hub-tabs .nav-link { padding: .6rem .9rem; }
  .card-body { padding: 1rem 1.1rem; }
  /* tabelas: menos altura por linha, cabem mais registros na tela */
  .table > :not(caption) > * > * { padding-top: .45rem; padding-bottom: .45rem; }
  /* menu recolhido continua com a mesma largura de ícones */
  html.menu-recolhido { --sidebar-w: 68px; }
  html.menu-recolhido .content { padding-left: 1.25rem; padding-right: 1.25rem; }
  /* com a letra base em 14px, os textos de .7–.8rem ficariam abaixo de 12px: mínimo de leitura */
  .th-ordem-txt, .btn-sm, .atendente-rotulo, .fila-pdf-arquivo,
  .fila-pdf-estado, .fila-pdf-registro, .pref-txt, .sidebar .atendente-rotulo, .table .btn, .acoes-pedido .btn-group > .btn,
  .badge { font-size: 12px; }
  /* o mesmo piso de 12px para os textos pequenos das outras telas (observações, cabeçalhos de tabela,
     indicadores da Produção, teclas de atalho) — max() mantém maior o que já passa de 12px */
  small, .small { font-size: max(12px, .875em); }
  .table > thead th, html .tabela-painel thead th, html .var, .pdv kbd { font-size: 12px; }   /* html: vence o painel.css, carregado depois */
}

/* ---------- Telas baixas (altura de até ~800 px, ex.: 1366 × 768 com a barra do navegador) ----------
   O menu lateral tem altura da tela: se os itens não cabem, ele rola por dentro em vez de esconder
   o usuário, "Minha senha" e "Sair". Espaçamentos verticais também diminuem. */
@media screen and (min-width: 992px) and (max-height: 820px) {
  .sidebar { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent; }
  .sidebar .nav { gap: .05rem; }
  .sidebar .nav-link { padding-top: .45rem; padding-bottom: .45rem; }
  .marca-menu { margin-bottom: .75rem; padding-top: .15rem; padding-bottom: .6rem; }
  .sidebar .atendente { padding-top: .6rem; }
  .sidebar .atendente-links { margin-top: .4rem; }
  .menu-toggle { top: 4.8rem; }   /* botão de recolher centrado na linha abaixo do logotipo */
}
@media screen and (min-width: 992px) and (max-width: 1439.98px) {
  .menu-toggle { top: 3.9rem; }   /* notebook: o logotipo é menor, o botão sobe junto (vale também para telas baixas) */
}

/* ---------- Ficha do cliente: Portal do Cliente (templates/_acesso_portal.html) ----------
   Um bloco por login (titular/preposto, senha, ativo e as permissões do preposto) e a lista de empresas
   representadas: busca no banco e a lista só das escolhidas (cada uma com o botão de tirar). */
.acesso-linha { display: grid; grid-template-columns: minmax(12rem, 1.2fr) minmax(12rem, 1fr) minmax(10rem, 1fr) auto minmax(8rem, .5fr); gap: .5rem 1rem; align-items: end;
  border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: .65rem .8rem; background: var(--superficie); }
.acesso-linha.acesso-inativo { opacity: .7; }
.acesso-quem .badge { margin-left: .35rem; vertical-align: middle; }
.acesso-ativo { margin-bottom: .35rem; }
.acesso-detalhe { grid-column: 1 / -1; }
.acesso-permissoes { grid-column: 1 / -1; border-top: 1px dashed var(--linha); padding-top: .5rem; margin: 0; }
/* empresas que o preposto atende (as representadas do cliente marcadas para ele) */
.acesso-atende { grid-column: 1 / -1; border-top: 1px dashed var(--linha); padding-top: .5rem; margin: .25rem 0 0; }
.acesso-atende legend { float: none; width: auto; }
.representadas { border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--superficie); padding: .6rem; }
.representadas-topo { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.representadas-busca { flex: 1 1 18rem; max-width: 30rem; }
.representadas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .35rem; margin: 0; padding: 0; list-style: none; }
.representadas-lista:empty { display: none; }
.representada { display: flex; gap: .55rem; align-items: center; padding: .4rem .4rem .4rem .55rem; border: 1px solid var(--azul-600);
  border-radius: var(--raio-sm); background: var(--azul-50); min-width: 0; }
.representada-ic { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px;
  color: var(--azul-600); background: color-mix(in srgb, var(--azul-600) 12%, transparent); }
.representada-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.representada-tirar { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 8px;
  background: none; color: var(--suave); cursor: pointer; }
.representada-tirar:hover, .representada-tirar:focus-visible { background: var(--vermelho-suave); color: var(--vermelho); }
@media (max-width: 767.98px) { .acesso-linha { grid-template-columns: 1fr; } }

/* Pedido do Portal do Cliente: selo, faixa lateral na fila e aviso fixo do topo (base.html) */
.selo-portal { display: inline-block; background: #6d28d9; color: #fff; border-radius: .3rem; padding: .05rem .45rem;
  font: 700 .7rem/1.4 system-ui, sans-serif; letter-spacing: .06em; vertical-align: middle; }
.fila-tabela tr.pedido-portal > td:first-child { box-shadow: inset 4px 0 0 #6d28d9; }
.fila-tabela tr.pedido-portal:not(.linha-encerrada) > td { background-color: #f5f3ff; }
/* aviso do topo em vermelho (pede ação do balcão); o selo dentro dele acompanha */
.aviso-portal { background: var(--vermelho-suave); border: 1px solid #f2b6bf; color: #8c1527; }
.aviso-portal .selo-portal { background: #b91c32; }
.btn-portal { background: #b91c32; border-color: #b91c32; color: #fff; }
.btn-portal:hover, .btn-portal:focus { background: #991b2b; border-color: #991b2b; color: #fff; }

/* Status do pedido em CARDS (fila): grade 2 × 2; o atual preenchido na cor do status, os já passados com ✓ */
.st-form { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.st-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; width: 100%; }
.st-card { --st-cor: var(--bs-secondary, #5b6b82); display: flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: .3rem .45rem;
  border: 1.5px solid var(--linha-forte, #c5cdd9); border-left: 4px solid var(--st-cor); border-radius: 8px; background: #fff; color: var(--tinta, #10233f);
  font: 600 .76rem/1.15 "Barlow", system-ui, sans-serif; text-align: left; cursor: pointer; transition: box-shadow .15s, transform .1s, background .15s; }
.st-card:hover:not(:disabled) { box-shadow: 0 3px 10px rgba(16, 35, 77, .14); transform: translateY(-1px); }
.st-card:focus-visible { outline: 3px solid rgba(29, 78, 216, .45); outline-offset: 1px; }
.st-card:disabled { opacity: .45; cursor: not-allowed; }
.st-card { min-width: 0; }
.st-nome { min-width: 0; overflow-wrap: normal; }
.acoes-pedido:has(.st-cards) { width: 16rem; min-width: 16rem; }
.st-n { flex: none; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--bs-tertiary-bg, #eef1f6); font-size: .75rem; font-weight: 700; }
.st-warning { --st-cor: var(--ambar, #e8a317); }
.st-primary { --st-cor: var(--azul-600, #1d4ed8); }
.st-success { --st-cor: var(--verde, #15803d); }
.st-secondary { --st-cor: #5b6b82; }
.st-card.st-feito { color: var(--suave, #5b6472); }
.st-card.st-feito .st-n { background: var(--st-cor); color: #fff; }
.st-card.st-atual { background: var(--st-cor); border-color: var(--st-cor); color: #fff; box-shadow: 0 2px 8px rgba(16, 35, 77, .2); }
.st-card.st-atual.st-warning { color: #2b1d00; }
.st-card.st-atual .st-n { background: rgba(255, 255, 255, .9); color: #10233f; }
.st-cancelar { margin-left: auto; }
/* lista compacta: cards baixos, em uma linha quando há espaço */
.st-compacto .st-card { min-height: 2rem; padding: .2rem .35rem; font-size: .72rem; }
.st-compacto .st-n { width: 1.2rem; height: 1.2rem; font-size: .68rem; }
@media (min-width: 1500px) { .fila-modo-lista .st-compacto { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fila-modo-lista .acoes-pedido { width: 30rem; min-width: 30rem; } }

/* Modo lista da fila: a placa grande e os ícones dos documentos */
.lista-placa { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .2rem 0; }
.placa-chip.placa-lista { font-size: 1.55rem; }
/* nome do cliente clicável (abre a ficha) */
.link-cliente { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.link-cliente:hover, .link-cliente:focus-visible { color: var(--azul-600, #1d4ed8); text-decoration-style: solid; }
/* ficha do cliente (janela da fila) */
.ficha-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.ficha-nome { font: 700 1.3rem/1.2 "Barlow Condensed", sans-serif; }
.ficha-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem 1rem; margin: 0; }
.ficha-dados dt { font-size: .75rem; font-weight: 600; color: var(--suave, #5b6472); text-transform: uppercase; letter-spacing: .03em; }
.ficha-dados dd { margin: 0; overflow-wrap: anywhere; }
.ficha-largo { grid-column: 1 / -1; }
.ficha-obs { white-space: pre-line; }
.ficha-pedidos li { padding: .25rem 0; border-bottom: 1px solid var(--linha, #e1e5ec); }

/* Busca de cliente das telas de consulta (templates/_busca_cliente.html), no visual da busca do Novo pedido */
.busca-cliente { position: relative; }
.busca-cliente-ic { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--suave, #5b6472); pointer-events: none; display: inline-flex; }
.busca-cliente .form-control { padding-left: 2.1rem; }
.bc-lista { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; min-width: 16rem; max-height: 320px; overflow-y: auto;
  border-radius: var(--raio-sm); box-shadow: var(--sombra-alta); border: 1px solid var(--linha); margin-top: .25rem; }
.bc-lista .list-group-item { border-color: var(--linha); padding: .55rem .85rem; }

/* aviso do portal (base.html) zerado: o d-flex do Bootstrap (display:flex !important) anularia o atributo hidden */
.aviso-portal[hidden] { display: none !important; }