/* Interface operacional do cotador, baseada no mockup Celular.dc.html. */
:root {
  --brand:#640101; --brand-hover:#7a0a0a; --brand-active:#4a0303;
  --brand-50:#fbf3f3; --bg:#f4f3f1; --surface:#fff; --surface-2:#faf9f8;
  --surface-3:#f1efec; --border:#e4e1dc; --border-strong:#c9c4bc;
  --text:#1b1917; --text-2:#5a554f; --text-3:#8b857d;
  --focus:0 0 0 3px rgba(100,1,1,.18); --r:8px; --r-lg:12px;
  --shadow-sm:0 1px 2px rgba(27,25,23,.06);
  --bordo:var(--brand); --bordo-fundo:var(--brand); --bordo-escuro:var(--brand-active);
  --papel:var(--surface-2); --cartao:var(--surface); --linha:var(--border);
  --tinta:var(--text); --tinta-suave:var(--text-2);
}
html { -webkit-text-size-adjust:100%; scroll-padding-top:78px; }
body { background:var(--bg); background-image:none; color:var(--text);
  font-family:"IBM Plex Sans","Segoe UI",sans-serif; font-size:15px; }
h1,h2,h3,.disp,.marca,.p-num,.btn-go,.btn-baixar,.btn-refazer,.btn-acao,.btn-sn {
  font-family:"IBM Plex Sans","Segoe UI",sans-serif; }
button,input,select,textarea { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:none; box-shadow:var(--focus); }

.topo { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.96);
  color:var(--text); border:0; border-bottom:1px solid var(--border); backdrop-filter:blur(12px); }
.topo-in { height:64px; max-width:1080px; margin:0 auto; padding:0 24px; display:flex;
  align-items:center; justify-content:space-between; gap:16px; flex-wrap:nowrap; }
.brand-lockup { display:flex; align-items:center; gap:14px; min-width:0; color:var(--text); text-decoration:none; }
.brand-lockup img { display:block; width:auto; height:32px; max-width:128px; object-fit:contain; }
.brand-divider { width:1px; height:28px; background:var(--border-strong); flex:0 0 1px; }
.brand-copy { display:grid; line-height:1.12; min-width:0; }
.brand-copy b { font-size:15px; font-weight:600; color:var(--brand); letter-spacing:.06em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-copy small { font-size:12px; color:var(--text-3); margin-top:3px; }
.brand-copy b > span { display:none; }
.admin-link { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 12px;
  border-radius:var(--r); color:var(--text-2); font-size:13px; font-weight:500; text-decoration:none; }
.admin-link:hover { background:var(--surface-3); text-decoration:none; }

.hero { max-width:1080px; padding:28px 24px 4px; }
.hero .eyebrow { margin:0 0 7px; color:var(--text-3); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; }
.hero h1 { font-size:clamp(25px,4vw,36px); font-weight:600; line-height:1.16; letter-spacing:-.025em; }
.hero h1 em { color:var(--text); font-style:normal; }
.hero p { max-width:64ch; margin-top:8px; color:var(--text-2); font-size:15px; line-height:1.55; }
main { max-width:1080px; padding:20px 24px 96px; gap:20px; }

.passo { padding:0; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.p-rotulo { gap:11px; margin:0; padding:16px 24px; border-bottom:1px solid var(--border); }
.p-num { width:24px; height:24px; flex-basis:24px; background:var(--brand); font-size:12px; font-weight:600; }
.p-rotulo h2 { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.card-body { padding:20px 24px; }
.field { display:grid; gap:7px; }
.field + .field { margin-top:16px; }
.field-label { font-size:13px; font-weight:500; color:var(--text-2); }
input[type=text],input[type=password],textarea,select { min-height:44px; height:44px; padding:0 13px;
  border:1px solid var(--border-strong); border-radius:var(--r); background:var(--surface);
  color:var(--text); font:inherit; font-size:16px; transition:border-color .12s,box-shadow .12s; }
textarea { height:auto; min-height:132px; padding:12px 13px; line-height:1.5; }
.portao-campos { display:grid; gap:6px; text-align:left; }
.portao-campos label { margin-top:8px; color:var(--text-2); font-size:13px; font-weight:700; }
.portao-caixa .portao-campos input { width:100%; text-align:left; font-size:16px; letter-spacing:0; }
input[type=text]:hover,input[type=password]:hover,textarea:hover,select:hover { border-color:#b3ada4; }
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus { border-color:var(--brand); box-shadow:var(--focus); }
select { appearance:none; -webkit-appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A554F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:17px; }
.field .nota { margin:0!important; text-align:left!important; }

.segmented { display:inline-flex; width:max-content; max-width:100%; padding:3px; gap:3px;
  background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r); }
.segmented button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:116px;
  height:38px; padding:0 14px; border:1px solid transparent; border-radius:6px; background:transparent;
  color:var(--text-2); font:inherit; font-size:14px; font-weight:500; cursor:pointer; }
.segmented button[aria-pressed="true"] { background:var(--surface); color:var(--text);
  border-color:var(--border); box-shadow:var(--shadow-sm); }
.segmented img { display:block; width:auto; max-width:54px; height:13px; object-fit:contain; }
.segmented img.logo-abb { height:11px; }
.representada-select { position:absolute!important; width:1px!important; height:1px!important;
  overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; }

.tiles { display:flex; gap:3px; overflow-x:auto; border-bottom:1px solid var(--border); scrollbar-width:none; }
.tiles::-webkit-scrollbar { display:none; }
.tile { appearance:none; min-width:max-content; min-height:46px; padding:0 14px; display:inline-flex;
  flex-direction:row; gap:8px; align-items:center; justify-content:center; border:0;
  border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--text-2);
  font:inherit; text-align:left; box-shadow:none; transform:none; }
.tile:hover { border-color:transparent; background:var(--surface-2); transform:none; }
.tile.ativa { border:0; border-bottom:2px solid var(--brand); background:transparent;
  box-shadow:none; color:var(--brand); }
.tile.gravando { border:0; border-bottom:2px solid var(--erro); background:var(--erro-fundo);
  box-shadow:none; color:var(--erro); }
.tile .ico { display:grid; place-items:center; width:20px; height:20px; font-size:0; line-height:1; }
.tile .ico svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.tile b { font-size:14px; font-weight:500; white-space:nowrap; }
.tile small { display:none; }
.pedido-body { padding-top:0; }
#painel-extra { margin-top:16px; }
.anexo { min-width:0; margin-top:8px; padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--r); background:var(--surface-2); font-size:13px; }
.anexo b { min-width:0; overflow-wrap:anywhere; }
.lixeira { min-height:40px; padding:6px 8px; }

.acao { align-items:stretch; gap:8px; }
.btn-go,.btn-refazer,.btn-baixar { min-height:48px; height:auto; padding:13px 20px; border:0;
  border-radius:var(--r); font-size:16px; font-weight:600; line-height:1.3; box-shadow:none; text-transform:none; }
.btn-go { background:var(--brand); }
.btn-go:hover { background:var(--brand-hover); }
.btn-go:active { transform:none; box-shadow:none; background:var(--brand-active); }
.btn-baixar { background:var(--ok); overflow-wrap:anywhere; }
.btn-baixar:active,.btn-refazer:active { transform:none; box-shadow:none; }
.nota { font-size:13px; color:var(--text-3); }
#progresso { padding:18px 20px; }
.prog-txt { margin:0; color:var(--text-2); font-size:14px; font-weight:500; }
.barra { height:4px; margin-top:12px; background:var(--surface-3); }

#resultado.tem { gap:16px; }
#resultado > .passo { padding:20px 24px; }
.res-topo h2 { font-size:18px; font-weight:600; }
.selo-ok { font-size:12px; font-weight:500; padding:4px 10px; }
.tabela-scroll { border:1px solid var(--border); border-radius:var(--r); overflow-x:auto; }
th { padding:10px 12px; background:var(--surface-2); border-bottom:1px solid var(--border);
  font-size:12px; font-weight:600; color:var(--text-3); }
td { padding:11px 12px; border-bottom:1px solid var(--border); font-size:14px; }
tbody tr:last-child td { border-bottom:0; }
.cod { font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:600; color:var(--text); }
.cod small { font-family:"IBM Plex Mono",monospace; color:var(--text-3); }
.trecho { font-size:12px; color:var(--text-3); }
.caixa { border-radius:var(--r-lg); font-size:14px; }
.caixa h3 { font-size:14px; font-weight:600; }
.btn-acao,.btn-sn { min-height:40px; height:auto; padding:8px 12px; border-width:1px;
  border-radius:var(--r); font-size:13px; font-weight:500; line-height:1.3; }
.duvida-txt { min-height:44px; height:44px; font-size:16px; }
.refazer { min-height:44px; padding:8px 12px; }
.rodape { max-width:1080px; padding:0 24px 36px; font-size:12px; }
#fb-botao,#pg-botao { min-height:44px!important; }

@media (max-width:700px) {
  html { scroll-padding-top:68px; }
  body { font-size:14px; }
  .topo-in { height:56px; padding:0 16px; }
  .brand-lockup { gap:10px; }
  .brand-lockup img { height:26px; max-width:104px; }
  .brand-divider { height:24px; }
  .brand-copy b { font-size:13px; }
  .brand-copy small { display:none; }
  .admin-link,.admin-footer-link { display:none; }
  .hero { padding:20px 16px 2px; }
  .hero h1 { font-size:25px; }
  .hero p { font-size:14px; line-height:1.48; }
  main { padding:16px 16px calc(104px + env(safe-area-inset-bottom)); gap:16px; }
  .p-rotulo { padding:14px 16px; }
  .card-body,#resultado > .passo { padding:16px; }
  .pedido-body { padding-top:0; }
  .segmented { display:flex; width:100%; }
  .segmented button { flex:1; min-width:0; height:42px; padding:0 10px; }
  .tiles { margin:0 -16px; padding:0 6px; }
  .tile { flex:1; min-width:96px; padding:0 9px; }
  .tile b { font-size:13px; }
  .acao .nota { padding:0 8px; }
  #resultado > .passo .res-topo { align-items:flex-start; }

  .tabela-scroll { overflow:visible; border:0; border-radius:0; }
  .tabela-scroll table,.tabela-scroll tbody { display:block; width:100%; }
  .tabela-scroll thead { display:none; }
  .tabela-scroll tr { display:grid; width:100%; padding:12px 14px; border:1px solid var(--border);
    border-radius:var(--r); background:var(--surface); }
  .tabela-scroll tr + tr { margin-top:10px; }
  .tabela-scroll td { display:grid; grid-template-columns:86px minmax(0,1fr); gap:10px; padding:7px 0;
    border:0; text-align:left!important; white-space:normal!important; min-width:0; overflow-wrap:anywhere; }
  .tabela-scroll td::before { font-size:11px; font-weight:600; letter-spacing:.05em;
    text-transform:uppercase; color:var(--text-3); }
  .tabela-lamesa td:nth-child(1)::before,.tabela-abb td:nth-child(1)::before { content:"Código"; }
  .tabela-lamesa td:nth-child(2)::before,.tabela-abb td:nth-child(2)::before { content:"Produto"; }
  .tabela-lamesa td:nth-child(3)::before { content:"Cor"; }
  .tabela-lamesa td:nth-child(4)::before { content:"Embalagem"; }
  .tabela-lamesa td:nth-child(5)::before { content:"Metros"; }
  .tabela-abb td:nth-child(3)::before { content:"Quantidade"; }
  .tabela-scroll td:nth-child(2) { padding-top:4px; padding-bottom:10px; }
  .tabela-scroll td.num { font-weight:600; }
  .caixa { padding:14px; }
  .caixa ul { padding-left:18px; }
  .acoes-item { display:grid; grid-template-columns:1fr; }
  .btn-acao { width:100%; justify-content:flex-start; }
  .duvida-controles { align-items:stretch; }
  .duvida-txt { flex-basis:100%; min-width:0; }
  .aviso-abb-acoes { display:grid; grid-template-columns:1fr; }
  .aviso-abb-acoes .btn-refazer,.aviso-abb-acoes .btn-sn { width:100%; min-width:0; }
  #fb-botao { right:12px!important; bottom:calc(12px + env(safe-area-inset-bottom))!important;
    padding:10px 13px!important; }
  #pg-botao { right:12px!important; bottom:calc(62px + env(safe-area-inset-bottom))!important;
    max-width:calc(100vw - 24px); }
  #fb-cartao,#pg-cartao { position:fixed!important; left:10px!important; right:10px!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important; top:auto!important; width:auto!important;
    max-width:none!important; max-height:calc(100dvh - 20px - env(safe-area-inset-bottom))!important;
    border-radius:14px!important; padding:16px!important; }
  .portao-caixa { width:min(400px, calc(100vw - 48px)); max-width:none; padding:24px; box-sizing:border-box; }
  .rodape { padding:0 16px calc(74px + env(safe-area-inset-bottom)); }
}

@media (max-width:359px) {
  .brand-divider,.brand-copy b { display:none; }
  .hero h1 { font-size:23px; }
  main { padding-left:12px; padding-right:12px; }
  .tile { min-width:88px; padding-left:6px; padding-right:6px; }
  .tile .ico { display:none; }
  .tabela-scroll td { grid-template-columns:72px minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce) {
  * { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* PWA e identificação do escritório. */
.app-actions { margin-left:auto; display:flex; align-items:center; gap:4px; }
.install-link { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px;
  padding:0 12px; border:0; border-radius:var(--r); background:var(--brand-50); color:var(--brand);
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.install-link:hover { background:#f3e0e0; }
.install-link[hidden] { display:none; }
.install-link span { font-size:18px; line-height:1; }
.pwa-modal[hidden],.pwa-offline[hidden] { display:none; }
.pwa-modal { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px;
  background:rgba(27,25,23,.58); backdrop-filter:blur(3px); }
.pwa-modal-card { position:relative; width:min(430px,100%); display:grid; grid-template-columns:72px 1fr;
  gap:18px; padding:24px; border:1px solid var(--border); border-radius:16px; background:var(--surface);
  box-shadow:0 24px 64px -24px rgba(27,25,23,.5); }
.pwa-modal-card img { width:72px; height:72px; border-radius:16px; }
.pwa-modal-card h2 { margin:2px 28px 6px 0; font-size:19px; }
.pwa-modal-card p { color:var(--text-2); font-size:14px; }
.pwa-modal-card .pwa-online { margin-top:10px; color:var(--text-3); font-size:12px; }
.pwa-fechar { position:absolute; top:10px; right:10px; width:40px; height:40px; border:0;
  border-radius:50%; background:transparent; color:var(--text-2); font-size:25px; cursor:pointer; }
.pwa-fechar:hover { background:var(--surface-3); }
.pwa-offline { position:sticky; top:64px; z-index:29; padding:9px 16px; border-bottom:1px solid var(--warning-border);
  background:var(--warning-bg); color:var(--warning); text-align:center; font-size:13px; font-weight:500; }

@media (max-width:700px) {
  .app-actions { gap:2px; }
  .install-link { min-height:40px; padding:0 9px; }
  .install-link b { font-size:12px; }
  .pwa-offline { top:56px; }
  .pwa-modal { place-items:end center; padding:10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .pwa-modal-card { grid-template-columns:56px 1fr; gap:14px; padding:20px 18px; border-radius:16px; }
  .pwa-modal-card img { width:56px; height:56px; border-radius:13px; }
}

@media (max-width:359px) {
  .install-link b { display:none; }
  .install-link { width:40px; padding:0; }
}