/* ==========================================================
   UaiPedidos — PAINEL (estabelecimento + admin)
   Visual espelhado do painel interno do Frescor: dark + dourado,
   SEM sombras (profundidade por bordas), drawer em pílulas, cantos
   suaves. + estilos da aba Conversas (WhatsApp Web) e do Editor de blocos.
   Requer o CSS do Quasar carregado antes. Quasar em modo dark.
   ========================================================== */

:root {
  --g-preto:   #0D0D0D;   /* fundo base */
  --g-ouro:    #F2B807;   /* dourado — assinatura/destaque */
  --g-azul:    #0511F2;
  --surface:   #1F2027;
  --surface-2: #2A2B33;
  --borda:       rgba(255,255,255,.10);
  --borda-forte: rgba(31,116,191,.45);
  --texto:       #F3F4F6;
  --texto-suave: rgba(255,255,255,.64);

  --q-primary:   #4D82FF;   /* azul de frente (sobrescrito pela cor da loja) */
  --q-accent:    #F2B807;
  --q-dark:      #1F2027;
  --q-dark-page: #0D0D0D;
  --q-positive:  #17B877;
  --q-negative:  #F2444E;
  --q-warning:   #F27F1B;
  --radius: 14px;
}

html, body { background: var(--g-preto); color: var(--texto); }
body { font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif; }

/* ===== SEM SOMBRAS (elimina halo no dark) ===== */
.q-card,.q-btn,.q-btn-group,.q-menu,.q-banner,.q-header,.q-drawer,.q-footer,.q-table,.q-table__card,
.q-bar,.q-notification,.q-tooltip,.q-expansion-item,.q-uploader,.q-item,.q-chip,.q-dialog__inner > *,
.shadow-1,.shadow-2,.shadow-3,.shadow-4,.shadow-5,.shadow-6,.shadow-7,.shadow-8,.shadow-9,.shadow-10 { box-shadow: none !important; }
.q-menu,.q-dialog__inner > .q-card,.q-notification { border: 1px solid var(--borda-forte); }

/* ===== Drawer (rail lateral em pílulas) ===== */
.q-drawer { background: #17181D !important; border-right: 1px solid var(--borda) !important; }
.coluna-drawer { display:flex; flex-direction:column; height:100%; }
.drawer-top { min-height: 84px; display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 12px; border-bottom:1px solid var(--borda); position:relative; }
.drawer-top .logo-nome { font-weight:800; font-size:18px; letter-spacing:-.02em; }
.drawer-top .logo-nome b { color: var(--g-ouro); }
.drawer-nav { flex:1; overflow-y:auto; padding:10px 0; }
.item-nav { border-radius: 999px; margin: 4px 12px; min-height: 46px; color: var(--texto-suave); }
.item-nav .q-icon { color: var(--texto-suave); }
.item-nav:hover { background: color-mix(in srgb, var(--q-primary) 12%, transparent); }
.item-nav.ativo { background: color-mix(in srgb, var(--q-primary) 22%, transparent); color:#fff; font-weight:700; }
.item-nav.ativo .q-icon { color: var(--q-primary); }
.item-nav .q-badge { font-weight:800; }
.dot-chat { width:8px; height:8px; border-radius:50%; background: var(--q-negative); display:inline-block; animation: pulseDot 1.4s infinite; }
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.35} }
.drawer-nav .nav-header { color: var(--g-ouro) !important; text-transform:uppercase; letter-spacing:1.1px; font-size:11px; font-weight:800; padding:12px 24px 4px; }
.drawer-perfil { border-top:1px solid var(--borda); padding:10px; }

/* ===== Página / seções ===== */
.pagina-conteudo { padding: 22px; }
@media (min-width:1024px){ .pagina-conteudo{ padding: 30px; } }
.cabecalho-secao { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.sec-titulo { font-size:22px; font-weight:800; letter-spacing:-.2px; }
.sec-titulo::before { content:''; display:inline-block; width:5px; height:22px; border-radius:4px; background:var(--g-ouro); margin-right:10px; vertical-align:-3px; }
.sec-sub { font-size:13px; color:var(--texto-suave); margin-top:2px; }

.card-cfg { background:var(--surface); border:1px solid var(--borda); border-radius:16px; padding:20px; }
.q-card { background:var(--surface); border:1px solid var(--borda); border-radius:var(--radius); }
.q-btn { border-radius:11px; font-weight:700; text-transform:none; letter-spacing:0; }
.q-btn.bg-ouro { background:var(--g-ouro) !important; color:#111 !important; }
.q-tab--active { color: var(--g-ouro) !important; }
.q-tab__indicator { background: var(--g-ouro) !important; height:3px; }
.muted { color: var(--texto-suave); }
.text-ouro { color: var(--g-ouro) !important; }

/* KPIs */
.kpi { background:var(--surface); border:1px solid var(--borda); border-radius:var(--radius); padding:16px 18px; }
.kpi .kpi-label { font-size:11px; font-weight:700; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.05em; }
.kpi .kpi-value { font-size:26px; font-weight:800; margin-top:4px; }
.kpi .kpi-sub { font-size:12px; color:var(--texto-suave); }

/* Chips de status (pílula tint) */
.chip-st { font-size:11px; font-weight:800; border-radius:999px; padding:3px 10px; display:inline-flex; align-items:center; gap:4px; }
.chip-ok{ background:rgba(23,184,119,.16); color:#2BD695; }
.chip-warn{ background:rgba(242,127,27,.16); color:#F7A24B; }
.chip-info{ background:rgba(77,130,255,.16); color:#8FB0FF; }
.chip-err{ background:rgba(242,68,78,.16); color:#FF7A82; }
.chip-neutro{ background:rgba(255,255,255,.08); color:var(--texto-suave); }

/* Barras / scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(128,138,157,.45) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:rgba(128,138,157,.45); border-radius:8px; }

/* ==========================================================
   CONVERSAS — inbox estilo WhatsApp Web (2 painéis + drawer)
   ========================================================== */
.conv-wrap { display:flex; height: calc(100dvh - 0px); border:1px solid var(--borda); border-radius:16px; overflow:hidden; background:var(--surface); }
.conv-list { width: 340px; flex:0 0 340px; border-right:1px solid var(--borda); display:flex; flex-direction:column; background:#17181D; }
.conv-list-head { padding:14px 16px; border-bottom:1px solid var(--borda); }
.conv-filtros { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid var(--borda); }
.conv-filtro { flex:1; text-align:center; font-size:12px; font-weight:700; padding:7px 6px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--texto-suave); cursor:pointer; user-select:none; }
.conv-filtro.on { background: var(--q-primary); color:#fff; }
.conv-filtro .cnt { display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:rgba(0,0,0,.25); font-size:10px; margin-left:4px; }
.conv-items { flex:1; overflow-y:auto; }
.conv-item { display:flex; gap:10px; padding:11px 14px; border-left:3px solid transparent; cursor:pointer; }
.conv-item:hover { background: rgba(255,255,255,.04); }
.conv-item.on { background: rgba(77,130,255,.12); border-left-color: var(--q-primary); }
.conv-ava { width:44px; height:44px; border-radius:50%; background:var(--surface-2); flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--texto-suave); }
.conv-meta { min-width:0; flex:1; }
.conv-nome { font-weight:700; font-size:14px; display:flex; justify-content:space-between; gap:8px; }
.conv-hora { font-size:11px; color:var(--texto-suave); font-weight:500; flex:0 0 auto; }
.conv-prev { font-size:13px; color:var(--texto-suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-badge { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--q-positive); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.conv-lock { font-size:10px; font-weight:800; color:#FF7A82; background:rgba(242,68,78,.12); border:1px solid rgba(242,68,78,.3); border-radius:6px; padding:1px 6px; }

.conv-chat { flex:1; display:flex; flex-direction:column; min-width:0; }
.conv-chat-head { padding:10px 16px; border-bottom:1px solid var(--borda); display:flex; align-items:center; gap:10px; background:#17181D; }
.conv-thread { flex:1; overflow-y:auto; padding:18px 16px; background:#0b141a;
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 0); background-size:22px 22px; }
.msg-row { display:flex; margin-bottom:8px; }
.msg-row.out { justify-content:flex-end; }
.msg-bubble { max-width:72%; padding:7px 10px 5px; border-radius:8px; font-size:14px; line-height:1.35; position:relative; }
.msg-bubble.in { background:#202c33; color:#e9edef; border-top-left-radius:2px; }
.msg-bubble.out { background:#005c4b; color:#e9edef; border-top-right-radius:2px; }
.msg-bubble .hora { font-size:10px; color:rgba(255,255,255,.5); float:right; margin:6px 0 0 10px; }
.msg-bubble.nota { background:#3a3320; color:#f5e6a8; border:1px solid #6b5f2f; max-width:100%; text-align:center; font-size:12px; }
.conv-composer { padding:10px 12px; border-top:1px solid var(--borda); display:flex; gap:8px; align-items:flex-end; background:#17181D; }
.conv-empty { flex:1; display:flex; align-items:center; justify-content:center; color:var(--texto-suave); flex-direction:column; gap:8px; }

@media (max-width:820px){
  .conv-list { width:100%; flex-basis:100%; }
  .conv-list.hide-mobile { display:none; }
  .conv-chat.hide-mobile { display:none; }
}

/* ==========================================================
   EDITOR DE FLUXO EM BLOCOS (grafo SVG + blocos HTML)
   ========================================================== */
.ed-wrap { display:flex; height: calc(100dvh - 0px); border:1px solid var(--borda); border-radius:16px; overflow:hidden; background:var(--surface); }
.ed-rail { width:250px; flex:0 0 250px; border-right:1px solid var(--borda); background:#17181D; display:flex; flex-direction:column; }
.ed-rail-sec { padding:12px 14px; border-bottom:1px solid var(--borda); }
.ed-rail-sec .tit { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--g-ouro); margin-bottom:8px; }
.ed-tool { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; border:1px solid var(--borda); margin-bottom:7px; cursor:grab; background:var(--surface); font-size:13px; font-weight:600; }
.ed-tool:hover { border-color: var(--borda-forte); }
.ed-tool .dot { width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.ed-canvas-wrap { flex:1; position:relative; overflow:hidden; background:#101216;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 0); background-size:24px 24px; }
.ed-canvas { position:absolute; inset:0; }
.ed-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ed-block { position:absolute; border-radius:12px; border:1px solid var(--borda); background:var(--surface); overflow:hidden; user-select:none; }
.ed-block.sel { border-color: var(--g-ouro); box-shadow:0 0 0 2px rgba(242,184,7,.3) !important; }
.ed-block .ed-head { display:flex; align-items:center; gap:8px; padding:8px 10px; font-weight:700; font-size:13px; color:#fff; cursor:move; }
.ed-block .ed-body { padding:8px 10px; font-size:12px; color:var(--texto-suave); max-height:120px; overflow:hidden; }
.ed-port { position:absolute; width:13px; height:13px; border-radius:50%; background:var(--surface-2); border:2px solid var(--q-primary); cursor:crosshair; }
.ed-port.r { right:-8px; top:calc(50% - 7px); }
.ed-port.l { left:-8px; top:calc(50% - 7px); }
.ed-props { width:340px; flex:0 0 340px; border-left:1px solid var(--borda); background:#17181D; overflow-y:auto; padding:16px; }
.ed-props .tit { font-weight:800; margin-bottom:12px; }
.ed-toolbar { position:absolute; top:12px; left:12px; z-index:5; display:flex; gap:8px; }
.ed-subblock { border:1px solid var(--borda); border-radius:10px; padding:8px; margin-bottom:8px; background:var(--surface); }

/* ==========================================================
   TEMA CLARO  (html.tema-claro)  — alterna com o botão do painel
   ========================================================== */
html.tema-claro, html.tema-claro body { background: #F4F5F7; color: #1B1B1F; }
html.tema-claro {
  --g-preto:   #F4F5F7;
  --surface:   #FFFFFF;
  --surface-2: #EDEFF3;
  --borda:       rgba(23,23,23,.12);
  --borda-forte: rgba(77,130,255,.40);
  --texto:       #1B1B1F;
  --texto-suave: rgba(27,27,31,.60);
  --q-dark:      #FFFFFF;
  --q-dark-page: #F4F5F7;
}
html.tema-claro .q-drawer { background:#FFFFFF !important; }
html.tema-claro .drawer-top,
html.tema-claro .drawer-perfil { border-color: var(--borda); }
html.tema-claro .item-nav { color:#4b5563; }
html.tema-claro .item-nav .q-icon { color:#6b7280; }
html.tema-claro .item-nav.ativo { color:#111; }
html.tema-claro .card-cfg, html.tema-claro .q-card, html.tema-claro .kpi { background:#FFFFFF; }

/* Conversas — claro (WhatsApp Web light) */
html.tema-claro .conv-wrap, html.tema-claro .conv-list,
html.tema-claro .conv-chat-head, html.tema-claro .conv-composer { background:#FFFFFF; }
html.tema-claro .conv-thread { background:#efeae2; background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 0); }
html.tema-claro .msg-bubble.in { background:#FFFFFF; color:#111b21; }
html.tema-claro .msg-bubble.out { background:#d9fdd3; color:#111b21; }
html.tema-claro .msg-bubble .hora { color:rgba(0,0,0,.45); }
html.tema-claro .msg-bubble.nota { background:#fff9e6; color:#7c6f00; border-color:#ffe9a8; }
html.tema-claro .conv-item:hover { background:#f5f6f6; }
html.tema-claro .conv-item.on { background:#f0f2f5; }
html.tema-claro .conv-ava { background:#e6e8ec; color:#5b6470; }

/* Editor — claro */
html.tema-claro .ed-wrap, html.tema-claro .ed-rail, html.tema-claro .ed-props,
html.tema-claro .ed-block, html.tema-claro .ed-tool, html.tema-claro .ed-subblock { background:#FFFFFF; }
html.tema-claro .ed-canvas-wrap { background:#eef0f3; background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 0); }

/* ==========================================================
   CARDÁPIO + PEDIDOS — layout espelhado do painel do Frescor
   (grid categorias+produtos, thumbnails, chips, split de pedidos)
   Adaptado para os tokens dark+dourado do painel do Iago.
   ========================================================== */

/* ---- rótulo pequeno (overline) ---- */
.overline { font-size:11px; font-weight:800; letter-spacing:1.2px; color:var(--texto-suave); text-transform:uppercase; }

/* ---- seletor segmentado em pílula com indicador deslizante ---- */
.seg { position:relative; display:inline-grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--borda); border-radius:999px; padding:3px; background:var(--surface); }
.seg-ind { position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px);
  border-radius:999px; background:var(--q-primary); pointer-events:none;
  transition:transform .28s cubic-bezier(.4,0,.2,1); }
.seg.seg--right .seg-ind { transform:translateX(100%); }
.seg-opt { position:relative; z-index:1; appearance:none; border:none; background:transparent;
  cursor:pointer; font:inherit; font-size:13px; font-weight:700; color:var(--texto-suave);
  height:32px; padding:0 20px; white-space:nowrap; border-radius:999px;
  transition:color .25s ease; -webkit-tap-highlight-color:transparent; }
.seg-opt.ativo { color:#fff; }

/* ---- linha de busca: input e botão na mesma régua de 40px ---- */
.linha-busca { display:flex; align-items:stretch; gap:12px; }
.linha-busca .q-field { flex:1; min-width:0; }
.linha-busca .q-btn { height:40px; flex:none; white-space:nowrap; }
@media (max-width:599px){ .linha-busca { flex-direction:column; } }

/* ---- status como chips suaves (compartilha cores com .chip-ok/.chip-neutro) ---- */
.chip-status { font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; }
.chip-falta { color:#F7A24B; background:rgba(242,127,27,.16); }

/* ---- filtros em pílula ---- */
.chip-f { appearance:none; -webkit-appearance:none; border:1px solid var(--borda); background:var(--surface);
  color:var(--texto-suave); font:inherit; font-size:12.5px; font-weight:700; padding:5px 13px;
  border-radius:999px; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent; }
.chip-f:hover { background:color-mix(in srgb, var(--q-primary) 12%, transparent); }
.chip-f.ativo { background:var(--q-primary); border-color:var(--q-primary); color:#fff; }
.chip-f.mini { font-size:11.5px; padding:4px 11px; }

/* ==========================================================
   CATÁLOGO — painel de categorias (sticky) + lista de produtos
   ========================================================== */
.cardapio-grid { display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start; }
@media (max-width:899px){ .cardapio-grid { grid-template-columns:1fr; } }
.painel-cats { padding:14px; position:sticky; top:16px; max-height:calc(100dvh - 170px); overflow-y:auto; }
.lista-prods, .lista-comps { max-height:calc(100dvh - 260px); overflow-y:auto; padding:2px 8px 2px 2px; overscroll-behavior:contain; }
.painel-cats, .lista-prods, .lista-comps { scrollbar-width:thin; scrollbar-color:var(--borda) transparent; }
.painel-cats::-webkit-scrollbar, .lista-prods::-webkit-scrollbar, .lista-comps::-webkit-scrollbar { width:8px; }
.painel-cats::-webkit-scrollbar-thumb, .lista-prods::-webkit-scrollbar-thumb, .lista-comps::-webkit-scrollbar-thumb { background:var(--borda); border-radius:4px; }
@media (max-width:899px){
  .painel-cats { position:static; max-height:300px; }
  .lista-prods, .lista-comps { max-height:calc(100dvh - 340px); }
}
.cat-item { display:flex; align-items:center; gap:4px; padding:6px 8px; border-radius:10px; cursor:pointer;
  min-height:40px; transition:background .15s ease; -webkit-tap-highlight-color:transparent; }
.cat-item:hover { background:color-mix(in srgb, var(--q-primary) 12%, transparent); }
.cat-item.sel { background:color-mix(in srgb, var(--q-primary) 22%, transparent); }
.cat-item.sel .cat-nome { font-weight:800; color:var(--texto); }
.cat-nome { font-size:13.5px; font-weight:600; min-width:0; }
.cat-qtd { font-size:12px; color:var(--texto-suave); margin:0 4px; flex:none; }
.cat-acoes { opacity:0; transition:opacity .15s ease; flex:none; }
.cat-item:hover .cat-acoes, .cat-item.sel .cat-acoes { opacity:1; }
@media (hover:none){ .cat-acoes { opacity:1; } }

/* arrastar para reordenar */
.alca { cursor:grab; flex:none; }
.arrastando { opacity:.35; }
.drop-alvo { outline:2px dashed var(--q-primary); outline-offset:-2px; }

/* linhas de produto */
.prod-linha { display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:10px;
  border:1px solid var(--borda); border-radius:14px; background:var(--surface); }
.prod-info { flex:1 1 auto; min-width:0; }
.prod-nome { font-size:14px; font-weight:700; min-width:0; }
.prod-preco { font-size:13px; font-weight:600; opacity:.85; }

/* thumbnail quadriculado + lápis sobreposto */
.prod-thumb { position:relative; width:56px; height:56px; flex:none; border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: repeating-conic-gradient(#8b9099 0 25%, #b9bec6 0 50%) 0 0 / 10px 10px; }
.prod-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.prod-thumb.mini { width:40px; height:40px; border-radius:8px; }
.thumb-edit { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .15s ease; }
.prod-thumb:hover .thumb-edit, .thumb-edit.sempre { opacity:1; }

/* complementos: grupos em cartões com opções */
.mod-item { border:1px solid var(--borda); border-radius:14px; margin-bottom:12px; overflow:hidden; background:var(--surface); }
.mod-corpo { padding:0 14px 14px; }

/* ==========================================================
   PEDIDOS — lista (estilo conversa) + painel lateral de detalhe
   ========================================================== */
.ped-split { display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:16px;
  height:calc(100dvh - 210px); min-height:420px; }
.ped-col { display:flex; flex-direction:column; min-height:0; padding:0; overflow:hidden; }
.ped-topo { flex:none; padding:12px 12px 10px; border-bottom:1px solid var(--borda);
  display:flex; flex-direction:column; gap:10px; }
.ped-chips { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:thin; scrollbar-color:var(--borda) transparent; -webkit-overflow-scrolling:touch; }
.ped-chips::-webkit-scrollbar { height:5px; }
.ped-chips::-webkit-scrollbar-thumb { background:var(--borda); border-radius:3px; }
.ped-chips .chip-f { flex:none; }
.ped-rolagem { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--borda) transparent; }
.ped-rolagem::-webkit-scrollbar { width:8px; }
.ped-rolagem::-webkit-scrollbar-thumb { background:var(--borda); border-radius:4px; }

.ped-chat { display:flex; align-items:center; gap:11px; padding:11px 14px; cursor:pointer;
  border-bottom:1px solid var(--borda); transition:background .15s ease; -webkit-tap-highlight-color:transparent; }
.ped-chat:hover { background:color-mix(in srgb, var(--q-primary) 8%, transparent); }
.ped-chat.sel { background:color-mix(in srgb, var(--q-primary) 16%, transparent); }
.ped-avatar { width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:800; font-size:15px; letter-spacing:.5px; }
.ped-avatar.grande { width:52px; height:52px; font-size:17px; }
.ped-chat-meio { flex:1 1 auto; min-width:0; }
.ped-l1 { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.ped-nome { font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ped-hora { font-size:11.5px; color:var(--texto-suave); flex:none; }
.ped-l2 { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:3px; }
.ped-previa { font-size:12.5px; color:var(--texto-suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ped-tags { display:flex; align-items:center; gap:6px; flex:none; }
.ped-ponto { width:10px; height:10px; border-radius:50%; display:inline-block; }
.ped-l3 { display:flex; align-items:center; gap:4px; margin-top:3px; font-size:12px; color:var(--texto-suave); }

.ped-det-hdr { flex:none; display:flex; align-items:center; gap:12px; padding:13px 16px;
  border-bottom:1px solid var(--borda); flex-wrap:wrap; }
.ped-hdr-info { min-width:0; flex:1 1 auto; }
.ped-hdr-nome { font-size:17px; font-weight:800; letter-spacing:-.2px; }
.ped-hdr-sub { font-size:12.5px; color:var(--texto-suave); margin-top:1px; }
.ped-det-corpo { flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px;
  overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--borda) transparent; }
.ped-det-corpo::-webkit-scrollbar { width:8px; }
.ped-det-corpo::-webkit-scrollbar-thumb { background:var(--borda); border-radius:4px; }
.ped-det-titulo { font-size:17px; font-weight:800; letter-spacing:-.2px; margin-bottom:14px; }
.ped-det-quando { display:block; font-weight:500; font-size:12px; color:var(--texto-suave); letter-spacing:0; margin-top:2px; }
.ped-caixa { border:1px solid var(--borda); border-radius:12px; padding:12px 14px; }
.ped-item { border-bottom:1px dashed var(--borda); padding:8px 0; font-size:13.5px; }
.ped-item:last-child { border-bottom:none; }
.ped-item .item-nome { font-weight:700; font-size:13.5px; }
.ped-item-preco { flex:none; font-weight:700; font-size:13px; opacity:.85; }
.ped-opcao { color:var(--texto-suave); font-size:12.5px; padding-left:18px; }
.ped-obs { font-style:italic; color:var(--texto-suave); font-size:12.5px; padding-left:18px; }
.ped-resumo { font-size:13.5px; display:flex; flex-direction:column; gap:4px; }
.ped-resumo .lin { display:flex; justify-content:space-between; gap:12px; }
.ped-resumo .lin > span:first-child { color:var(--texto-suave); }
.ped-resumo .lin.tot { border-top:1px solid var(--borda); padding-top:8px; margin-top:5px; font-weight:800; font-size:15.5px; }
.ped-resumo .lin.tot > span:first-child { color:inherit; }
.pag-linha { border:1px solid var(--borda); border-radius:12px; padding:9px 12px; margin-bottom:8px; }
.ped-det-acoes { flex:none; display:flex; justify-content:flex-end; align-items:center; gap:8px;
  flex-wrap:wrap; padding:12px 14px; border-top:1px solid var(--borda); }
.ped-det-acoes .q-btn { min-height:38px; border-radius:10px; }
.acoes-grupo { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.acoes-div { flex:none; width:1px; height:24px; background:var(--borda); margin:0 4px; }
.ped-vazio { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-align:center; color:var(--texto-suave); padding:40px 20px; }
.ped-vazio.alto { flex:1 1 auto; }
.ped-vazio .vz-t { font-weight:800; font-size:15px; color:var(--texto); }
.ped-vazio .vz-s { font-size:13px; max-width:280px; line-height:1.5; }
.soh-mobile { display:none; }
.ped-timeline-pt { width:9px; height:9px; border-radius:50%; background:var(--q-primary); flex:0 0 auto; margin-top:5px; }

@media (max-width:899px){
  .ped-split { grid-template-columns:1fr; height:calc(100dvh - 240px); }
  .ped-split .ped-col-det { display:none; }
  .ped-split.aberto .ped-col-lista { display:none; }
  .ped-split.aberto .ped-col-det { display:flex; }
  .soh-mobile { display:inline-flex; }
}

/* ---- ajustes de tema claro para os blocos novos ---- */
html.tema-claro .chip-falta { color:#B26A00; background:rgba(255,152,0,.14); }
html.tema-claro .prod-linha, html.tema-claro .mod-item, html.tema-claro .painel-cats { background:#FFFFFF; }