/* 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-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 ---------- */
.hub-tabs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: .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;
  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; }

/* ---------- 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; }
.table-responsive { 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: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; }
.aviso-placa { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid #f2b6bf; border-left: 6px solid var(--vermelho); background: var(--vermelho-suave); color: #6e1020; border-radius: var(--raio-sm); padding: .8rem 1rem; margin-top: .8rem; }
.aviso-placa .ic { color: var(--vermelho); margin-top: .15rem; }
.aviso-placa strong { color: #8c1527; }
.aviso-placa .corpo > div + div { margin-top: .15rem; }
.aviso-placa .corpo > div:last-child { color: #7a3a45; font-size: .92rem; }
.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-placa { flex: none; width: 7.2rem; }
.item-dados { flex: 1 1 11rem; min-width: 9rem; line-height: 1.3; }
.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; }
.item-tipo { width: 6.5rem; }
.item-placa { width: 6.6rem; }

/* ---------- 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;
}
.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; }
.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; }
.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 { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.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; }
.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; }
.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); }
@media (max-width: 1199.98px) {
  .fechamento { position: static; max-height: none; }
  .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; }