/* Auto Center Hudema — interface da oficina.
   Identidade: preto e branco da logo Hudema; amarelo de sinalização só na ação principal
   e no item ativo; cor de estado (ok / atenção / crítico) só onde há estado.
   Tipos: Barlow Condensed (títulos e números), Inter (texto), IBM Plex Mono (placas e valores). */

@font-face { font-family: 'Barlow Condensed'; src: url('../assets/fontes/BarlowCondensed-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../assets/fontes/BarlowCondensed-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../assets/fontes/BarlowCondensed-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fontes/inter.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../assets/fontes/plexmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../assets/fontes/plexmono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --canvas: #F3F2EE; --sup: #FFFFFF; --sup-2: #FAF9F6; --rebaixado: #E9E7E1;
  --texto: #0E0E10; --suave: #3B3D42; --sutil: #63666C;
  --borda: #DEDBD3; --borda-forte: #B5B2AA;
  --tinta: #0E0E10; --tinta-hover: #2A2B2F; --tinta-contraste: #FFFFFF;
  --sinal: #F5C518; --sinal-hover: #E3B40A; --sinal-texto: #0E0E10;
  --ok: #137A52; --ok-suave: #E1F2E9; --at: #9A4D00; --at-suave: #FBEBD3;
  --cr: #B42318; --cr-suave: #FCE6E3; --in: #2B4ACB; --in-suave: #E8ECFC;
  --trilho: #0B0B0C; --trilho-texto: #F4F3EF; --trilho-sutil: #A3A5AB; --trilho-linha: #24252A;
  --placa-azul: #1E36AC; --carro: #E4E2DC; --carro-linha: #6A6D73;
  --sombra: 0 1px 2px rgb(14 14 16 / .06), 0 4px 16px rgb(14 14 16 / .05);
  --sombra-alta: 0 12px 40px rgb(14 14 16 / .18);
  --f-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-texto: Inter, 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
  --r: 12px; --r-p: 8px; --r-pp: 6px;
  --t-rapida: 140ms; --t-media: 220ms; --curva: cubic-bezier(.2, .7, .2, 1);
  --barra-movel: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) {
  --canvas: #0D0D0F; --sup: #161619; --sup-2: #1C1C20; --rebaixado: #08080A;
  --texto: #F2F1EC; --suave: #CFD0D4; --sutil: #9C9EA5; --borda: #2A2B30; --borda-forte: #4A4C53;
  --tinta: #F2F1EC; --tinta-hover: #FFFFFF; --tinta-contraste: #0E0E10;
  --ok: #45C08B; --ok-suave: #0F2A1F; --at: #F2A541; --at-suave: #2E1F08; --cr: #F47A6C; --cr-suave: #34120E; --in: #93A6FF; --in-suave: #141C45;
  --carro: #24252A; --carro-linha: #9C9EA5;
  --sombra: 0 1px 2px rgb(0 0 0 / .4); --sombra-alta: 0 12px 40px rgb(0 0 0 / .6);
  color-scheme: dark;
} }
:root[data-tema="escuro"] {
  --canvas: #0D0D0F; --sup: #161619; --sup-2: #1C1C20; --rebaixado: #08080A;
  --texto: #F2F1EC; --suave: #CFD0D4; --sutil: #9C9EA5; --borda: #2A2B30; --borda-forte: #4A4C53;
  --tinta: #F2F1EC; --tinta-hover: #FFFFFF; --tinta-contraste: #0E0E10;
  --ok: #45C08B; --ok-suave: #0F2A1F; --at: #F2A541; --at-suave: #2E1F08; --cr: #F47A6C; --cr-suave: #34120E; --in: #93A6FF; --in-suave: #141C45;
  --carro: #24252A; --carro-linha: #9C9EA5;
  --sombra: 0 1px 2px rgb(0 0 0 / .4); --sombra-alta: 0 12px 40px rgb(0 0 0 / .6);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--texto); font: 400 15px/1.5 var(--f-texto); -webkit-font-smoothing: antialiased; min-block-size: 100svh; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.05; letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.25rem); text-transform: uppercase; letter-spacing: .015em; }
h2 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .03em; }
h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: .02em; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--sinal); color: var(--sinal-texto); }
img { max-inline-size: 100%; display: block; }
[hidden] { display: none !important; }
.mono, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.sutil { color: var(--sutil); }
.suave { color: var(--suave); }
.peq { font-size: .85rem; }
.pular { position: absolute; inset-inline-start: -999px; inset-block-start: 8px; background: var(--sinal); color: var(--sinal-texto); padding: 8px 14px; border-radius: var(--r-p); z-index: 100; font-weight: 600; }
.pular:focus { inset-inline-start: 8px; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ casca */
.casca { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-block-size: 100svh; }
.trilho { position: sticky; inset-block-start: 0; block-size: 100svh; background: var(--trilho); color: var(--trilho-texto); display: flex; flex-direction: column; padding: 22px 14px 16px; gap: 22px; }
.trilho__marca { display: flex; flex-direction: column; gap: 8px; padding: 2px 8px 0; text-decoration: none; }
.trilho__marca img { inline-size: 100%; block-size: auto; }
.trilho__marca span { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--trilho-sutil); text-align: center; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-p); color: var(--trilho-sutil); text-decoration: none; font-weight: 500; transition: background var(--t-rapida), color var(--t-rapida); }
.nav a:hover { color: var(--trilho-texto); background: #ffffff10; }
.nav a[aria-current="page"] { color: var(--trilho-texto); background: #ffffff16; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: -14px; inset-block: 8px; inline-size: 4px; border-radius: 0 4px 4px 0; background: var(--sinal); }
.nav svg { inline-size: 20px; block-size: 20px; flex: none; }
.nav .contador { margin-inline-start: auto; font: 500 .75rem var(--f-mono); background: #ffffff1a; color: var(--trilho-texto); border-radius: 99px; padding: 1px 8px; }
.nav__sep { block-size: 1px; background: var(--trilho-linha); margin: 8px 6px; }
.trilho__pe { margin-block-start: auto; display: flex; flex-direction: column; gap: 10px; border-block-start: 1px solid var(--trilho-linha); padding: 14px 6px 0; }
.conta { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
.avatar { inline-size: 34px; block-size: 34px; border-radius: 50%; display: grid; place-items: center; background: #ffffff1c; font: 700 .95rem var(--f-display); flex: none; color: var(--trilho-texto); }
.conta div { min-inline-size: 0; display: flex; flex-direction: column; line-height: 1.25; }
.conta b { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta span { font-size: .75rem; color: var(--trilho-sutil); }
.trilho .btn-fantasma { color: var(--trilho-sutil); border-color: var(--trilho-linha); }
.trilho .btn-fantasma:hover { color: var(--trilho-texto); border-color: var(--trilho-sutil); background: transparent; }

.palco { min-inline-size: 0; display: flex; flex-direction: column; }
.barra-topo { position: sticky; inset-block-start: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 2.6vw, 36px); background: color-mix(in srgb, var(--canvas) 86%, transparent); backdrop-filter: blur(10px); border-block-end: 1px solid var(--borda); }
.barra-topo__logo { display: none; }
.busca-gatilho { flex: 1 1 auto; max-inline-size: 460px; display: flex; align-items: center; gap: 10px; min-block-size: 42px; padding: 0 12px; border: 1px solid var(--borda-forte); border-radius: var(--r-p); background: var(--sup); color: var(--sutil); text-align: start; transition: border-color var(--t-rapida); }
.busca-gatilho:hover { border-color: var(--texto); }
.busca-gatilho svg { inline-size: 18px; block-size: 18px; flex: none; }
.busca-gatilho span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tecla { font: 500 .72rem var(--f-mono); border: 1px solid var(--borda); border-radius: 5px; padding: 1px 6px; color: var(--sutil); background: var(--sup-2); }
.barra-topo .espaco { flex: 1; }
.demo-faixa { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 6px 16px; background: var(--sinal); color: var(--sinal-texto); font-size: .8rem; font-weight: 600; text-align: center; }
.demo-faixa button { background: transparent; border: 1px solid #0e0e1055; border-radius: 99px; padding: 1px 10px; font-size: .78rem; font-weight: 600; }
.demo-faixa button:hover { background: #0e0e1012; }
main.principal { inline-size: 100%; max-inline-size: 1480px; margin-inline: auto; padding: clamp(18px, 2.4vw, 32px) clamp(16px, 2.6vw, 36px) 64px; display: flex; flex-direction: column; gap: 20px; }
.abas-movel { display: none; }

/* ------------------------------------------------------------------ cabeçalho de página */
.cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.cabeca__texto { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.sobre { font: 600 .78rem var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--sutil); }
.cabeca__sub { color: var(--suave); }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--sutil); text-decoration: none; font-size: .88rem; font-weight: 500; }
.voltar:hover { color: var(--texto); }
.voltar svg { inline-size: 16px; block-size: 16px; }

/* ------------------------------------------------------------------ botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; padding: 0 16px; border-radius: var(--r-p); border: 1px solid var(--borda-forte); background: var(--sup); color: var(--texto); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; transition: background var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida), box-shadow var(--t-rapida); }
.btn:hover { border-color: var(--texto); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { inline-size: 18px; block-size: 18px; flex: none; }
.btn-tinta { background: var(--tinta); border-color: var(--tinta); color: var(--tinta-contraste); }
.btn-tinta:hover { background: var(--tinta-hover); border-color: var(--tinta-hover); }
.btn-sinal { background: var(--sinal); border-color: var(--sinal); color: var(--sinal-texto); box-shadow: inset 0 -2px 0 #0e0e1022; }
.btn-sinal:hover { background: var(--sinal-hover); border-color: var(--sinal-hover); }
.btn-fantasma { background: transparent; border-color: var(--borda); }
.btn-perigo { color: var(--cr); border-color: color-mix(in srgb, var(--cr) 45%, transparent); background: transparent; }
.btn-perigo:hover { border-color: var(--cr); background: var(--cr-suave); }
.btn-wa { background: #0E7A40; border-color: #0E7A40; color: #fff; }
.btn-wa:hover { background: #0B6534; border-color: #0B6534; }
.btn-p { min-block-size: 36px; padding: 0 12px; font-size: .85rem; }
.btn-bloco { inline-size: 100%; }
.btn-icone { inline-size: 44px; padding: 0; }
.btn-icone.btn-p { inline-size: 36px; }

/* ------------------------------------------------------------------ superfícies */
.painel { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--r); padding: clamp(16px, 1.6vw, 22px); box-shadow: var(--sombra); min-inline-size: 0; }
.painel__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-end: 14px; }
.painel__topo h2 { font-size: 1.15rem; }
.grade { display: grid; gap: 16px; }
.grade > * { min-inline-size: 0; }
.duas { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); align-items: start; }
.metades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pilha { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }
.pilha-p { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }
.linha { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.linha-esq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-inline-size: 0; }
.lista > * + * { border-block-start: 1px solid var(--borda); }
.lista > * { padding-block: 12px; }
.lista > :first-child { padding-block-start: 0; }
.lista > :last-child { padding-block-end: 0; }
.vazio { padding: 28px 16px; text-align: center; color: var(--sutil); border: 1px dashed var(--borda-forte); border-radius: var(--r-p); background: var(--sup-2); }
.vazio b { display: block; color: var(--texto); font-family: var(--f-display); font-size: 1.1rem; letter-spacing: .02em; text-transform: uppercase; margin-block-end: 4px; }
.nota { font-size: .8rem; color: var(--sutil); }
.carregando { display: grid; place-items: center; min-block-size: 40vh; color: var(--sutil); }
.esqueleto { background: linear-gradient(90deg, var(--rebaixado) 0 40%, var(--sup-2) 50%, var(--rebaixado) 60% 100%) 0 0 / 300% 100%; border-radius: var(--r-p); animation: brilho 1.4s linear infinite; }
@keyframes brilho { to { background-position: -150% 0; } }

/* ------------------------------------------------------------------ chips, placa */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; border-radius: 99px; padding: 3px 10px; white-space: nowrap; line-height: 1.4; background: var(--rebaixado); color: var(--suave); }
.chip::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip.ok { color: var(--ok); background: var(--ok-suave); } .chip.at { color: var(--at); background: var(--at-suave); }
.chip.cr { color: var(--cr); background: var(--cr-suave); } .chip.in { color: var(--in); background: var(--in-suave); }
.chip.sem::before { display: none; }
.st { display: inline-flex; align-items: center; gap: 7px; font: 600 .78rem var(--f-texto); padding: 4px 11px; border-radius: 99px; border: 1px solid var(--borda-forte); white-space: nowrap; }
.st::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 2px; background: currentColor; }
.st-orcamento { color: var(--suave); } .st-aguardando { color: var(--at); border-color: color-mix(in srgb, var(--at) 40%, transparent); }
.st-execucao { color: var(--in); border-color: color-mix(in srgb, var(--in) 40%, transparent); } .st-pronto { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.st-entregue { color: var(--sutil); } .st-cancelada { color: var(--cr); border-color: color-mix(in srgb, var(--cr) 40%, transparent); }

.placa { display: inline-flex; flex-direction: column; border: 1.5px solid #111315; border-radius: 4px; overflow: hidden; background: #fff; color: #111315; line-height: 1; flex: none; box-shadow: 0 1px 0 #0000001a; }
.placa i { display: flex; align-items: center; justify-content: space-between; block-size: 6px; background: var(--placa-azul); }
.placa b { font: 500 .84rem var(--f-mono); letter-spacing: .09em; padding: 3px 7px 4px; }
.placa.g { border-width: 2px; border-radius: 6px; } .placa.g i { block-size: 10px; } .placa.g b { font-size: 1.35rem; padding: 6px 14px 7px; letter-spacing: .1em; }

/* ------------------------------------------------------------------ formulários */
.campo { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.campo > label, .rotulo { font-size: .8rem; font-weight: 600; color: var(--suave); }
.entrada, .campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .campo select, .campo textarea { min-block-size: 44px; inline-size: 100%; border: 1px solid var(--borda-forte); border-radius: var(--r-p); background: var(--sup); padding: 9px 12px; transition: border-color var(--t-rapida), box-shadow var(--t-rapida); }
.campo textarea { resize: vertical; min-block-size: 84px; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus { outline: none; border-color: var(--texto); box-shadow: 0 0 0 3px color-mix(in srgb, var(--texto) 14%, transparent); }
.campo .ajuda { font-size: .78rem; color: var(--sutil); }
.campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.erro-form { color: var(--cr); font-size: .88rem; font-weight: 500; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--borda-forte); border-radius: var(--r-p); overflow: hidden; background: var(--sup); }
.seg button { border: 0; background: transparent; min-block-size: 40px; padding: 0 14px; font-size: .85rem; font-weight: 600; color: var(--suave); border-inline-start: 1px solid var(--borda); transition: background var(--t-rapida), color var(--t-rapida); }
.seg button:first-child { border-inline-start: 0; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--tinta); color: var(--tinta-contraste); }
.estado-seg button[aria-pressed="true"][data-v="ok"] { background: var(--ok); color: #fff; }
.estado-seg button[aria-pressed="true"][data-v="at"] { background: var(--at); color: #fff; }
.estado-seg button[aria-pressed="true"][data-v="tr"] { background: var(--cr); color: #fff; }
:root[data-tema="escuro"] .estado-seg button[aria-pressed="true"] { color: #0E0E10; }
.marcadores { display: flex; flex-wrap: wrap; gap: 8px; }
.marcador { position: relative; display: inline-flex; align-items: center; gap: 8px; min-block-size: 40px; padding: 0 14px; border: 1px solid var(--borda-forte); border-radius: 99px; background: var(--sup); font-weight: 500; font-size: .88rem; cursor: pointer; user-select: none; transition: background var(--t-rapida), border-color var(--t-rapida); }
.marcador input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.marcador:has(input:checked) { background: var(--tinta); color: var(--tinta-contraste); border-color: var(--tinta); }
.marcador:has(input:focus-visible) { outline: 2.5px solid var(--tinta); outline-offset: 2px; }
.marcador svg { inline-size: 16px; block-size: 16px; }

/* ------------------------------------------------------------------ KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { position: relative; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--r); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--sombra); text-decoration: none; color: inherit; transition: border-color var(--t-rapida), transform var(--t-rapida); }
a.kpi:hover { border-color: var(--borda-forte); transform: translateY(-1px); }
.kpi b { font: 700 clamp(1.7rem, 1.3rem + 1.1vw, 2.3rem)/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.kpi span { font-size: .82rem; color: var(--sutil); font-weight: 500; }
.kpi.cr b { color: var(--cr); } .kpi.at b { color: var(--at); } .kpi.ok b { color: var(--ok); }
.kpi.destaque { background: var(--trilho); border-color: var(--trilho); color: var(--trilho-texto); }
.kpi.destaque span { color: var(--trilho-sutil); }

/* ------------------------------------------------------------------ pátio */
.patio { display: grid; grid-template-columns: repeat(5, minmax(196px, 1fr)); gap: 12px; overflow-x: auto; padding-block-end: 6px; scroll-snap-type: x proximity; }
.coluna { background: var(--rebaixado); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 10px; min-inline-size: 0; scroll-snap-align: start; }
.coluna > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 2px; }
.coluna > header h2 { font-size: .98rem; letter-spacing: .05em; }
.coluna > header .n { font: 500 .8rem var(--f-mono); color: var(--sutil); background: var(--sup); border-radius: 99px; padding: 1px 9px; }
.coluna .vazio { padding: 18px 10px; font-size: .82rem; }
.cartao { display: flex; flex-direction: column; gap: 9px; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--r-p); padding: 12px; text-decoration: none; color: inherit; box-shadow: var(--sombra); transition: border-color var(--t-rapida), transform var(--t-rapida), box-shadow var(--t-rapida); }
.cartao:hover { border-color: var(--borda-forte); transform: translateY(-1px); box-shadow: 0 6px 20px rgb(14 14 16 / .09); }
.cartao.cr { box-shadow: inset 3px 0 0 var(--cr), var(--sombra); } .cartao.at { box-shadow: inset 3px 0 0 var(--at), var(--sombra); }
.cartao__mod { font-weight: 600; line-height: 1.3; }
.cartao__ser { font-size: .84rem; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cartao__pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--sutil); }
.cartao__pe .num { color: var(--texto); font-weight: 500; }
.cartao .flags { display: flex; flex-wrap: wrap; gap: 4px; }
.cartao .flags .chip { font-size: .7rem; padding: 2px 8px; }
.patio-abas { display: none; }

/* alertas */
.alerta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.alerta__ico { inline-size: 34px; block-size: 34px; border-radius: 10px; display: grid; place-items: center; }
.alerta__ico svg { inline-size: 18px; block-size: 18px; }
.alerta.cr .alerta__ico { background: var(--cr-suave); color: var(--cr); } .alerta.at .alerta__ico { background: var(--at-suave); color: var(--at); } .alerta.in .alerta__ico { background: var(--in-suave); color: var(--in); }
.alerta b { display: block; font-weight: 600; font-size: .9rem; line-height: 1.3; }
.alerta span { font-size: .8rem; color: var(--sutil); }

/* ------------------------------------------------------------------ OS */
.etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.etapa { display: flex; flex-direction: column; gap: 3px; padding-block-start: 10px; border-block-start: 4px solid var(--borda); font-size: .8rem; color: var(--sutil); min-inline-size: 0; }
.etapa b { font-weight: 600; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapa span { font: 400 .74rem var(--f-mono); }
.etapa.feita { border-color: var(--texto); color: var(--suave); }
.etapa.atual { border-color: var(--sinal); color: var(--texto); }
.etapa.atual b::after { content: " ●"; color: var(--sinal-hover); }
.proximo { display: flex; flex-direction: column; gap: 14px; background: var(--trilho); color: var(--trilho-texto); border-color: #2A2B30; }
.proximo .sobre { color: var(--trilho-sutil); }
.proximo h2 { font-size: 1.5rem; }
.proximo p { color: #D3D4D8; font-size: .9rem; }
.proximo .btn:not(.btn-sinal):not(.btn-wa) { background: transparent; color: var(--trilho-texto); border-color: #4A4C53; }
.proximo .btn:not(.btn-sinal):not(.btn-wa):hover { border-color: var(--trilho-texto); }
.proximo .acoes { gap: 8px; }
.proximo .acoes .btn { flex: 1 1 auto; }
.proximo .msg-wa { background: #ffffff0d; border: 1px dashed #4A4C53; border-radius: var(--r-p); padding: 12px; font-size: .84rem; white-space: pre-line; overflow-wrap: anywhere; color: #E4E4E7; }
.proximo .nota { color: var(--trilho-sutil); }
.abas { display: flex; gap: 4px; border-block-end: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; }
.abas button { position: relative; border: 0; background: none; padding: 12px 14px; font-weight: 600; color: var(--sutil); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.abas button:hover { color: var(--texto); }
.abas button[aria-selected="true"] { color: var(--texto); }
.abas button[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 10px; inset-block-end: -1px; block-size: 3px; border-radius: 3px 3px 0 0; background: var(--texto); }
.abas .n { font: 500 .72rem var(--f-mono); background: var(--rebaixado); border-radius: 99px; padding: 1px 7px; color: var(--suave); }

.tabela-wrap { overflow-x: auto; }
table { inline-size: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: start; font-weight: 600; color: var(--sutil); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; padding: 8px 10px; border-block-end: 1px solid var(--borda); white-space: nowrap; }
td { padding: 11px 10px; border-block-end: 1px solid var(--borda); vertical-align: middle; }
tbody tr:last-child td { border-block-end: 0; }
td.v, th.v { text-align: end; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-origem { display: block; font-size: .74rem; color: var(--sutil); margin-block-start: 2px; }
.item-origem.plano { color: var(--in); font-weight: 600; }
tr.recusado td { color: var(--sutil); text-decoration: line-through; text-decoration-color: var(--borda-forte); }
tr.sem-preco td.v:nth-last-child(2) { color: var(--at); font-weight: 600; }
.totais { display: grid; gap: 6px; margin-block-start: 12px; padding-block-start: 12px; border-block-start: 2px solid var(--texto); }
.totais div { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--suave); }
.totais .g { font: 700 1.6rem var(--f-display); color: var(--texto); align-items: baseline; }
.totais .g .num { font-family: var(--f-display); font-size: 1.9rem; }
.sugestao { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: var(--r-p); background: var(--in-suave); color: var(--texto); border: 1px solid color-mix(in srgb, var(--in) 30%, transparent); }
.sugestao svg { inline-size: 22px; block-size: 22px; color: var(--in); flex: none; margin-block-start: 2px; }
.sugestao ul { margin: 6px 0 10px; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; color: var(--suave); }
.sugestao ul li::before { content: "→ "; color: var(--in); }
.form-item { display: grid; grid-template-columns: 130px minmax(0, 1fr) 90px 130px auto; gap: 8px; align-items: end; margin-block-start: 14px; padding: 12px; background: var(--sup-2); border: 1px solid var(--borda); border-radius: var(--r-p); }
.edita-valor { inline-size: 110px; text-align: end; font-family: var(--f-mono); min-block-size: 36px; border: 1px solid var(--borda-forte); border-radius: var(--r-pp); padding: 4px 8px; background: var(--sup); }
.edita-valor.falta { border-color: var(--at); background: var(--at-suave); }

/* checklist */
.ck-grupo { display: flex; flex-direction: column; }
.ck-grupo + .ck-grupo { margin-block-start: 18px; }
.ck-grupo > h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block-end: 8px; border-block-end: 2px solid var(--texto); text-transform: uppercase; font-size: .98rem; letter-spacing: .05em; }
.ck-grupo > h3 .chip { text-transform: none; letter-spacing: 0; }
.ck-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-block-end: 1px solid var(--borda); }
.ck-item b { font-weight: 600; }
.ck-item .nota-ck { font-size: .8rem; color: var(--sutil); }
.ck-item .det { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ck-item .det input { min-block-size: 36px; border: 1px solid var(--borda-forte); border-radius: var(--r-pp); background: var(--sup); padding: 4px 10px; font-size: .86rem; }
.ck-item .det input.med { inline-size: 130px; font-family: var(--f-mono); }
.ck-item .det input.obs { flex: 1 1 200px; }
.ck-item.tr { background: linear-gradient(90deg, var(--cr-suave), transparent 70%); padding-inline: 10px; margin-inline: -10px; border-radius: var(--r-pp); }
.ck-progresso { block-size: 8px; background: var(--rebaixado); border-radius: 99px; overflow: hidden; display: flex; }
.ck-progresso i { display: block; block-size: 100%; transition: inline-size var(--t-media) var(--curva); }
.ck-progresso .ok { background: var(--ok); } .ck-progresso .at { background: var(--at); } .ck-progresso .tr { background: var(--cr); }

/* entrada: desenho do carro, fotos e assinatura */
.carro-wrap { position: relative; max-inline-size: 260px; margin-inline: auto; touch-action: manipulation; }
.carro-wrap svg { inline-size: 100%; block-size: auto; display: block; }
.carro-wrap.edita svg { cursor: crosshair; }
.pino circle { stroke: var(--sup); stroke-width: 2.5; }
.combustivel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.combustivel button { min-block-size: 44px; border: 1px solid var(--borda-forte); background: var(--sup); border-radius: 6px; font: 500 .76rem var(--f-mono); color: var(--suave); }
.combustivel button.cheio { background: var(--tinta); color: var(--tinta-contraste); border-color: var(--tinta); }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.foto { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-p); overflow: hidden; background: var(--rebaixado); border: 1px solid var(--borda); }
.foto img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.foto figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 14px 8px 6px; font-size: .72rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .72)); }
.foto button { position: absolute; inset: 0; border: 0; background: none; padding: 0; }
.foto-nova { position: relative; aspect-ratio: 4 / 3; border: 1.5px dashed var(--borda-forte); border-radius: var(--r-p); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--suave); background: var(--sup-2); cursor: pointer; text-align: center; padding: 6px; transition: border-color var(--t-rapida), background var(--t-rapida); }
.foto-nova:hover { border-color: var(--texto); }
.foto-nova input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.foto-nova svg { inline-size: 22px; block-size: 22px; }
.foto-nova:has(input:focus-visible) { outline: 2.5px solid var(--tinta); outline-offset: 2px; }
.foto.enviando::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .35); }
.assinatura { inline-size: 100%; block-size: 170px; border: 1px solid var(--borda-forte); border-radius: var(--r-p); background: var(--sup); touch-action: none; display: block; background-image: linear-gradient(transparent calc(100% - 46px), var(--borda) calc(100% - 46px), var(--borda) calc(100% - 45px), transparent calc(100% - 45px)); }
.assinatura-img { max-block-size: 120px; background: #fff; border-radius: var(--r-p); border: 1px solid var(--borda); padding: 6px; }
.placa-entrada { display: flex; flex-direction: column; border: 3px solid #111315; border-radius: 12px; overflow: hidden; background: #fff; max-inline-size: 360px; box-shadow: var(--sombra); }
.placa-entrada i { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; block-size: 26px; background: var(--placa-azul); color: #fff; font: 700 .7rem var(--f-texto); letter-spacing: .14em; font-style: normal; }
.placa-entrada input { border: 0; background: transparent; color: #111315; text-align: center; font: 500 clamp(2rem, 1.4rem + 3vw, 2.9rem) var(--f-mono); letter-spacing: .12em; padding: 10px 8px 12px; text-transform: uppercase; inline-size: 100%; min-inline-size: 0; }
.placa-entrada input:focus { outline: none; }
.placa-entrada:focus-within { box-shadow: 0 0 0 4px var(--sinal); }
.ficha-v { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ficha-v dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, auto)); gap: 4px 26px; flex: 1; min-inline-size: 0; }
.ficha-v dt { font-size: .74rem; color: var(--sutil); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ficha-v dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.capa { inline-size: 132px; aspect-ratio: 4 / 3; border-radius: var(--r-p); overflow: hidden; background: var(--rebaixado); display: grid; place-items: center; color: var(--sutil); flex: none; }
.capa img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.capa svg { inline-size: 40px; block-size: 40px; }
.barra-acao { position: sticky; inset-block-end: 0; z-index: 15; display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; padding: 12px clamp(16px, 2.6vw, 36px); margin: 0 calc(-1 * clamp(16px, 2.6vw, 36px)) -64px; background: color-mix(in srgb, var(--sup) 92%, transparent); backdrop-filter: blur(10px); border-block-start: 1px solid var(--borda); }
.barra-acao .resumo { margin-inline-end: auto; font-size: .86rem; color: var(--suave); }

/* plano do fabricante e histórico */
.plano-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 2px 12px; align-items: start; }
.plano-item .chip { justify-self: start; margin-block-start: 1px; }
.plano-item .det { grid-column: 2; font-size: .8rem; color: var(--sutil); }
.tempo { position: relative; padding-inline-start: 24px; display: flex; flex-direction: column; gap: 18px; }
.tempo::before { content: ""; position: absolute; inset-inline-start: 6px; inset-block: 6px; inline-size: 2px; background: var(--borda); }
.ev { position: relative; }
.ev::before { content: ""; position: absolute; inset-inline-start: -23px; inset-block-start: 5px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--sup); border: 2px solid var(--borda-forte); }
.ev.forte::before { background: var(--texto); border-color: var(--texto); }
.ev .q { font: 400 .76rem var(--f-mono); color: var(--sutil); }
.ev ul { margin-block-start: 6px; display: flex; flex-direction: column; gap: 2px; font-size: .86rem; color: var(--suave); }
.ev ul li::before { content: "· "; }
.ev a { text-decoration: none; }
.ev a:hover b { text-decoration: underline; }

/* caixa */
.forma { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 9px; border-block-start: 1px solid var(--borda); }
.forma:first-of-type { border-block-start: 0; }
.total-g { font: 700 clamp(2.1rem, 1.6rem + 1.6vw, 2.8rem)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.v-neg { color: var(--cr); }

/* gráfico de barras dos indicadores */
.barras { display: flex; align-items: flex-end; gap: 3px; block-size: 180px; padding-block-start: 10px; border-block-end: 1px solid var(--borda-forte); }
.barras > div { flex: 1; min-inline-size: 0; background: var(--texto); border-radius: 3px 3px 0 0; position: relative; min-block-size: 1px; transition: opacity var(--t-rapida); }
.barras > div.zero { background: var(--borda); }
.barras > div:hover { opacity: .75; }
.barras-rotulos { display: flex; justify-content: space-between; font: 400 .72rem var(--f-mono); color: var(--sutil); margin-block-start: 6px; }
.rank { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.rank .trilha { grid-column: 1 / -1; block-size: 6px; background: var(--rebaixado); border-radius: 99px; overflow: hidden; }
.rank .trilha i { display: block; block-size: 100%; background: var(--texto); border-radius: 99px; }

/* ------------------------------------------------------------------ diálogo, busca, toast */
dialog { border: 0; padding: 0; border-radius: var(--r); background: var(--sup); color: var(--texto); box-shadow: var(--sombra-alta); inline-size: min(560px, calc(100vw - 24px)); max-block-size: calc(100svh - 32px); }
dialog::backdrop { background: rgb(8 8 10 / .55); backdrop-filter: blur(3px); }
dialog[open] { animation: surgir var(--t-media) var(--curva); }
@keyframes surgir { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.dlg { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.dlg__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dlg__topo h2 { font-size: 1.35rem; }
.dlg__acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.busca-dlg { inline-size: min(640px, calc(100vw - 24px)); margin-block-start: 10vh; }
.busca-dlg .entrada-busca { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-block-end: 1px solid var(--borda); }
.busca-dlg .entrada-busca svg { inline-size: 20px; block-size: 20px; color: var(--sutil); flex: none; }
.busca-dlg input { flex: 1; border: 0; background: none; font-size: 1.05rem; min-block-size: 52px; outline: none; min-inline-size: 0; }
.resultados { max-block-size: 60svh; overflow-y: auto; padding: 8px; }
.resultado { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-p); text-decoration: none; color: inherit; }
.resultado:hover, .resultado[aria-selected="true"] { background: var(--rebaixado); }
.resultado div { flex: 1; min-inline-size: 0; }
.resultado b { display: block; font-weight: 600; }
.resultado span { font-size: .82rem; color: var(--sutil); }
.toast { position: fixed; z-index: 90; inset-inline-start: 50%; inset-block-end: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-inline-size: min(460px, calc(100vw - 24px)); padding: 12px 18px; border-radius: 99px; background: var(--tinta); color: var(--tinta-contraste); font-weight: 500; font-size: .9rem; box-shadow: var(--sombra-alta); animation: surgir var(--t-media) var(--curva); }
.toast--erro { background: var(--cr); color: #fff; border-radius: var(--r-p); }
.toast svg { inline-size: 18px; block-size: 18px; flex: none; }

/* ------------------------------------------------------------------ entrada (login) */
.login { min-block-size: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.login__marca { position: relative; overflow: hidden; background: var(--trilho); color: var(--trilho-texto); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(28px, 5vw, 64px); }
.login__marca::after { content: ""; position: absolute; inset: auto -10% -30% auto; inline-size: 70%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #ffffff10; box-shadow: 0 0 0 60px #ffffff05, 0 0 0 120px #ffffff04; pointer-events: none; }
.login__marca img { inline-size: min(380px, 80%); }
.login__tese { font: 700 clamp(2.2rem, 1.5rem + 2.8vw, 3.8rem)/.98 var(--f-display); text-transform: uppercase; letter-spacing: .005em; max-inline-size: 14ch; }
.login__tese em { font-style: normal; color: var(--sinal); }
.login__lista { display: grid; gap: 10px; color: #CFD0D4; font-size: .95rem; max-inline-size: 44ch; }
.login__lista li { display: flex; gap: 10px; }
.login__lista li::before { content: ""; inline-size: 14px; block-size: 3px; background: var(--sinal); margin-block-start: .7em; flex: none; }
.login__pe { font-size: .78rem; color: var(--trilho-sutil); }
.login__form { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 56px) 20px; }
.login__form > div { inline-size: min(440px, 100%); display: flex; flex-direction: column; gap: 18px; }
.perfil { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; inline-size: 100%; text-align: start; padding: 16px; border: 1px solid var(--borda); border-radius: var(--r); background: var(--sup); transition: border-color var(--t-rapida), transform var(--t-rapida), box-shadow var(--t-rapida); }
.perfil:hover { border-color: var(--texto); transform: translateY(-1px); box-shadow: var(--sombra); }
.perfil .avatar { background: var(--tinta); color: var(--tinta-contraste); inline-size: 44px; block-size: 44px; font-size: 1.15rem; }
.perfil b { display: block; font-weight: 700; font-family: var(--f-display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em; }
.perfil span { font-size: .84rem; color: var(--sutil); }
.perfil > svg { inline-size: 20px; block-size: 20px; color: var(--sutil); }

/* ------------------------------------------------------------------ página pública do orçamento */
.publico { max-inline-size: 760px; margin-inline: auto; padding: 0 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.publico__topo { background: var(--trilho); color: var(--trilho-texto); margin: 0 -16px; padding: 22px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.publico__topo img { inline-size: 170px; }
.publico__topo span { font-size: .78rem; color: var(--trilho-sutil); text-align: end; }
.escolha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-block-end: 1px solid var(--borda); cursor: pointer; }
.escolha input { inline-size: 22px; block-size: 22px; accent-color: var(--tinta); }
.escolha .v { font-family: var(--f-mono); white-space: nowrap; }

/* ------------------------------------------------------------------ responsivo */
@media (max-width: 1180px) {
  .duas { grid-template-columns: minmax(0, 1fr); }
  .form-item { grid-template-columns: 1fr 1fr; }
  .form-item .campo:nth-child(2) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .casca { grid-template-columns: minmax(0, 1fr); }
  .trilho { display: none; }
  .barra-topo { padding: 10px 16px; gap: 10px; }
  .barra-topo__logo { display: block; inline-size: 92px; flex: none; }
  .barra-topo__logo img { inline-size: 100%; }
  :root:not([data-tema="escuro"]) .barra-topo__logo img.claro { display: block; }
  .busca-gatilho .tecla, .barra-topo .so-pc { display: none; }
  main.principal { padding: 16px 16px calc(var(--barra-movel) + 32px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
  .abas-movel { display: flex; position: fixed; z-index: 30; inset-inline: 0; inset-block-end: 0; background: var(--trilho); padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-right)); justify-content: space-around; align-items: stretch; box-shadow: 0 -4px 20px rgb(0 0 0 / .2); }
  .abas-movel a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-block-size: 52px; color: var(--trilho-sutil); text-decoration: none; font-size: .68rem; font-weight: 600; border-radius: var(--r-p); position: relative; }
  .abas-movel a[aria-current="page"] { color: var(--trilho-texto); }
  .abas-movel a[aria-current="page"]::before { content: ""; position: absolute; inset-block-start: -6px; inline-size: 28px; block-size: 3px; border-radius: 0 0 3px 3px; background: var(--sinal); }
  .abas-movel svg { inline-size: 22px; block-size: 22px; }
  .abas-movel a.receber { flex: 0 0 auto; inline-size: 60px; }
  .abas-movel a.receber span.bola { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--sinal); color: var(--sinal-texto); margin-block-start: -16px; box-shadow: 0 6px 16px rgb(0 0 0 / .35); }
  .abas-movel a.receber::before { display: none; }
  .barra-acao { inset-block-end: calc(var(--barra-movel) + env(safe-area-inset-bottom, 0px)); margin: 0 -16px calc(-1 * (var(--barra-movel) + 32px)); padding: 10px 16px; }
  .metades { grid-template-columns: minmax(0, 1fr); }
  .login { grid-template-columns: minmax(0, 1fr); }
  .login__marca { gap: 22px; padding-block-end: 36px; }
  .login__lista, .login__pe { display: none; }
  .etapas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .etapa span { display: none; }
  .etapa b { font-size: .7rem; }
  .patio { display: none; }
  .patio-abas { display: flex; flex-direction: column; gap: 10px; }
  .patio-abas .seg { display: flex; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .patio-abas .seg button { flex: 1 0 auto; }
  .ficha-v .capa { inline-size: 100%; }
  .form-item { grid-template-columns: minmax(0, 1fr); }
  .form-item .campo:nth-child(2) { grid-column: auto; }
  .toast { inset-block-end: calc(var(--barra-movel) + 20px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  h1 { font-size: 1.85rem; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px; }
  .ck-item { grid-template-columns: minmax(0, 1fr); }
  .ck-item .estado-seg { display: grid; grid-template-columns: repeat(3, 1fr); }
  .tabela-itens thead { display: none; }
  .tabela-itens tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-block-end: 1px solid var(--borda); }
  .tabela-itens td { border: 0; padding: 0; }
  .tabela-itens td:first-child { grid-column: 1 / -1; }
  .tabela-itens td.qtd::before { content: "Qtd "; color: var(--sutil); font-size: .78rem; }
  .tabela-itens td.unit:not(:has(input)) { display: none; }
  .tabela-itens td.unit:has(input) { grid-column: 1; }
  .dlg { padding: 18px; }
  .acoes .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .trilho, .barra-topo, .abas-movel, .demo-faixa, .barra-acao, .acoes, .proximo, .abas, .nao-imprime { display: none !important; }
  .casca { display: block; } body { background: #fff; color: #000; }
  .painel { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .so-impressao { display: block !important; }
}
.so-impressao { display: none; }
.movel-sair { display: none; }
@media (max-width: 900px) { .movel-sair { display: inline-flex; } }
.busca-gatilho { min-inline-size: 0; }
.so-movel { display: none; }
@media (max-width: 900px) {
  .so-movel { display: inline; }
  .demo-faixa .so-pc { display: none; }
  .demo-faixa { flex-wrap: nowrap; padding-block: 5px; }
  .busca-gatilho span { font-size: .9rem; }
}
.so-estreito { display: none; }
@media (max-width: 1180px) { .so-estreito { display: block; } .so-largo { display: none; } }