:root {
  --navy: #000066;
  --navy-claro: #ebebfa;
  --laranja: #F26836;
  --laranja-esc: #d9531f;
  --laranja-claro: #fff1eb;
  --bg: #f4f6fa;
  --card: #fff;
  --txt: #1a1c2e;
  --txt-2: #475467;
  --sub: #667085;
  --borda: #e6e8ef;
  --borda-forte: #d0d5dd;
  --verde: #067647;
  --vermelho: #d92d20;
  --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .07);
  --sombra-alta: 0 12px 32px -4px rgba(16, 24, 40, .14), 0 4px 8px -2px rgba(16, 24, 40, .06);
  --raio: 12px;
  --topo: 64px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 14px/1.5 Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100vh;
}
a { color: var(--laranja-esc); }
.ico { width: 18px; height: 18px; flex-shrink: 0; }
.so-cel { display: none !important; }
.fundo-menu { display: none; }

/* Menu lateral */
.sidebar {
  background: var(--navy);
  position: sticky; top: 0; height: 100vh; z-index: 40;
  display: flex; flex-direction: column; gap: 20px;
  padding: 20px 12px 16px;
}
.marca { padding: 0 8px; }
.marca img { width: 100%; max-width: 180px; display: block; }
#menu { display: flex; flex-direction: column; gap: 2px; }
#menu a {
  display: flex; align-items: center; gap: 12px;
  color: #b4b4e4; text-decoration: none; font-weight: 500;
  padding: 10px 12px; border-radius: 8px;
  transition: background .15s, color .15s;
}
#menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
#menu a.ativo { background: rgba(255, 255, 255, .11); color: #fff; box-shadow: inset 3px 0 0 var(--laranja); }
#menu a.ativo .ico { color: var(--laranja); }
.sidebar-rodape { margin-top: auto; display: flex; align-items: center; gap: 8px; color: #8585c2; font-size: 12px; padding: 0 12px; }
.sidebar-rodape .ico { width: 15px; height: 15px; }

/* Barra superior */
.area { min-width: 0; display: flex; flex-direction: column; }
.barra-topo {
  position: sticky; top: 0; z-index: 30;
  height: var(--topo);
  display: flex; align-items: center; gap: 12px;
  padding: 0 32px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}
.busca-global { position: relative; flex: 1; max-width: 560px; }
.busca-global > .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sub); pointer-events: none; }
.busca-global input { padding-left: 40px; background: var(--bg); border-color: transparent; box-shadow: none; }
.busca-global input:focus { background: #fff; }
.atalho { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 600 11px/18px Inter, system-ui, sans-serif; color: var(--sub); border: 1px solid var(--borda-forte); border-radius: 5px; padding: 0 6px; background: #fff; pointer-events: none; }
.busca-global input:focus ~ .atalho { display: none; }
.barra-topo .nova { margin-left: auto; }
.btn-topo { border: none; background: none; color: inherit; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.btn-topo .ico { width: 22px; height: 22px; }
.resultados {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-alta); padding: 6px; max-height: min(70vh, 520px); overflow: auto; z-index: 50;
}
.res-grupo { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sub); padding: 10px 10px 4px; }
.res { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; }
.res > .ico { color: var(--sub); }
.res-txt { min-width: 0; flex: 1; }
.res-txt b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-txt .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res:hover, .res.foco { background: var(--bg); }
.res-vazio { padding: 18px; text-align: center; color: var(--sub); }

main { padding: 28px 32px 64px; width: 100%; max-width: 1320px; }

/* Títulos */
.topo { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 22px; }
h1 { font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 14px; letter-spacing: -.005em; }
h3 { font-size: 14px; font-weight: 600; margin: 20px 0 2px; }
.topo .sub { margin: 4px 0 0; }
.voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--sub); text-decoration: none; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.voltar .ico { width: 16px; height: 16px; }
.voltar:hover { color: var(--laranja-esc); }
.sub { color: var(--sub); font-size: 13px; }
.com-ico { display: flex; align-items: center; gap: 8px; margin: 0; }
.com-ico .ico { color: var(--verde); }
.txt-vermelho { color: var(--vermelho) !important; }
.txt-verde { color: var(--verde) !important; }
.txt-laranja { color: var(--laranja-esc); font-weight: 600; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.espaco { flex: 1; }

/* Cartões */
.card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; margin-bottom: 16px; }
.card p:first-of-type { margin-top: 0; }
.card-topo { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
.card-topo h2 { margin: 0; }
.card-topo a { font-size: 13px; font-weight: 600; text-decoration: none; }
.card-topo a:hover { text-decoration: underline; }
.card-lista { padding: 0; overflow: clip; }
.card-lista > .card-topo { padding: 18px 20px 0; }
.card-lista > .vazio { padding: 36px 20px; }
.grade { display: grid; gap: 16px; margin-bottom: 16px; }
.grade > .card { margin-bottom: 0; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grade-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }

/* Indicadores */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start;
  color: inherit; text-decoration: none; transition: box-shadow .15s, border-color .15s;
}
a.kpi:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-alta); }
.kpi-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.kpi-ico .ico { width: 20px; height: 20px; }
.kpi-txt { min-width: 0; }
.kpi-rot { display: block; color: var(--sub); font-size: 13px; font-weight: 500; }
.kpi b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi small { display: block; color: var(--sub); font-size: 12px; margin-top: 2px; }
.kpi.alerta b { color: var(--vermelho); }
.c-azul { background: var(--navy-claro); color: var(--navy); }
.c-laranja { background: var(--laranja-claro); color: var(--laranja-esc); }
.c-verde { background: #e3f6ec; color: var(--verde); }
.c-vermelho { background: #fdeceb; color: var(--vermelho); }
.c-roxo { background: #f1ebfd; color: #6b3fd1; }

/* Gráfico de barras */
.grafico { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; height: 230px; }
.g-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.g-valor { font-size: 12px; font-weight: 600; color: var(--txt-2); white-space: nowrap; min-height: 18px; }
.g-trilho { flex: 1; width: 100%; max-width: 64px; display: flex; align-items: flex-end; border-radius: 8px 8px 0 0; background: linear-gradient(to top, #f2f3f8, #f8f9fc); }
.g-barra { width: 100%; background: var(--navy); border-radius: 8px 8px 0 0; transition: height .5s; }
.g-col.atual .g-barra { background: var(--laranja); }
.g-col.atual .g-mes { color: var(--txt); font-weight: 600; }
.g-mes { font-size: 12px; color: var(--sub); text-transform: capitalize; }

.linha-status { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.linha-status:last-child { border-bottom: none; }
.linha-status .badge { min-width: 108px; }
.linha-status.total { color: var(--sub); }
.mini-barra { flex: 1; height: 6px; border-radius: 3px; background: #f0f1f5; overflow: hidden; }
.mini-barra i { display: block; height: 100%; border-radius: 3px; background: currentColor; }
.aviso { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--laranja-claro); border: 1px solid #fbd0bd; color: #8a3412; padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; }
.aviso > span { flex: 1; }

/* Boas-vindas */
.boas-vindas { max-width: 720px; padding: 28px; }
.bv-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--laranja-claro); color: var(--laranja-esc); display: grid; place-items: center; margin-bottom: 14px; }
.bv-ico .ico { width: 24px; height: 24px; }
.boas-vindas h2 { font-size: 18px; }
.passos { padding-left: 20px; margin: 0 0 16px; color: var(--txt-2); }
.passos li { margin-bottom: 6px; }
.passos b { color: var(--txt); }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--borda-forte); background: #fff; color: var(--txt);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05); transition: background .15s, border-color .15s;
  flex-direction: row; font-size: 14px;
}
.btn:hover { background: #f9fafb; }
.btn .ico { width: 16px; height: 16px; }
.btn-laranja { background: var(--laranja); border-color: var(--laranja); color: #fff; }
.btn-laranja:hover { background: var(--laranja-esc); border-color: var(--laranja-esc); }
.btn-fantasma { border-color: transparent; background: none; box-shadow: none; }
.btn-perigo { color: var(--vermelho); }
.btn-perigo:hover { background: #fef3f2; }
.btn-txt { border-color: transparent; background: none; box-shadow: none; color: var(--laranja-esc); padding: 0 2px; height: 34px; }
.btn-txt:hover { background: none; text-decoration: underline; }
.btn-mini { height: 30px; padding: 0 10px; font-size: 13px; gap: 6px; }
.btn-mini .ico { width: 14px; height: 14px; }
.x { border: none; background: none; color: var(--sub); cursor: pointer; padding: 6px; border-radius: 6px; display: inline-grid; place-items: center; }
.x .ico { width: 16px; height: 16px; }
.x:hover { color: var(--vermelho); background: #fef3f2; }

/* Abas, busca e filtros */
.abas { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; }
.aba {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  border: none; background: none; font: inherit; font-weight: 500; color: var(--sub); cursor: pointer;
  padding: 14px 10px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.aba:hover { color: var(--txt); }
.aba.ativo { color: var(--navy); font-weight: 600; border-bottom-color: var(--laranja); }
.cont { background: #f0f1f5; color: var(--sub); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 600; line-height: 20px; }
.aba.ativo .cont { background: var(--navy); color: #fff; }
.ferramentas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--borda); }
.campo-busca { display: block; position: relative; flex: 1; max-width: 380px; }
.campo-busca .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sub); width: 16px; height: 16px; }
.campo-busca input { padding-left: 36px; }
.filtros-periodo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--borda-forte); background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--txt-2); }
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip.ativo { background: var(--navy); border-color: var(--navy); color: #fff; }
.periodo { display: flex; gap: 10px; flex-wrap: wrap; }
.periodo label { flex-direction: row; align-items: center; gap: 8px; }
.periodo input { width: auto; height: 36px; }

/* Tabelas (cabeçalho fixo embaixo da barra superior) */
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabela th {
  position: sticky; top: var(--topo); z-index: 2;
  background: #f9fafb; text-align: left; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--sub);
  padding: 10px 12px; border-bottom: 1px solid var(--borda);
}
.card-lista .tabela th { border-top: 1px solid var(--borda); }
.card-lista > .card-topo { margin-bottom: 14px; }
.ferramentas + div .tabela th, .ferramentas + .tabela-wrap .tabela th { border-top: none; }
.tabela td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela th:first-child, .tabela td:first-child { padding-left: 20px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 20px; }
.tabela .sub { margin-top: 1px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela th.num { text-align: right; }
.clicavel { cursor: pointer; }
.clicavel:hover td { background: #fafbfd; }
.linha-alerta td { background: #fffaf8; }
.acoes-linha { text-align: right; white-space: nowrap; }
.acoes-linha .btn + .btn { margin-left: 4px; }
.pessoa { display: flex; align-items: center; gap: 12px; }
.pessoa.grande h1 { font-size: 22px; }
.pessoa.grande .avatar { width: 48px; height: 48px; font-size: 16px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy-claro); color: var(--navy); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex-shrink: 0; letter-spacing: .02em; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 0 10px 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 22px;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
h1 .badge { font-size: 13px; letter-spacing: 0; }
.s-orcamento { background-color: #f2f4f7; color: #475467; }
.s-aprovado { background-color: #eef0ff; color: #3538cd; }
.s-producao { background-color: #fff1eb; color: #c4410c; }
.s-pronto { background-color: #f4ebff; color: #6941c6; }
.s-entregue { background-color: #ecfdf3; color: #067647; }
.s-cancelado { background-color: #fef3f2; color: #b42318; }
.mini-barra .s-aprovado { color: #6172f3; } .mini-barra .s-producao { color: var(--laranja); } .mini-barra .s-pronto { color: #9e77ed; }
.m-entrada { background: #ecfdf3; color: #067647; }
.m-os { background: var(--navy-claro); color: var(--navy); }
.m-saida { background: #fff1eb; color: #c4410c; }
.m-perda { background: #fef3f2; color: #b42318; }
.tag { display: inline-flex; align-items: center; gap: 4px; background: var(--navy-claro); color: var(--navy); border-radius: 4px; padding: 0 6px; font-weight: 600; font-size: 11px; line-height: 18px; }
.tag .ico { width: 12px; height: 12px; }

.vazio { text-align: center; color: var(--sub); padding: 32px 16px; }
.vazio-ico { width: 52px; height: 52px; border-radius: 50%; background: #f2f4f7; color: #98a2b3; display: grid; place-items: center; margin: 0 auto 12px; }
.vazio-ico .ico { width: 24px; height: 24px; }
.vazio p { margin: 0 auto 14px; max-width: 420px; }
.vazio p:last-child { margin-bottom: 0; }

/* Formulários */
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: #344054; }
input, select, textarea {
  font: inherit; font-size: 14px; color: var(--txt); background: #fff;
  border: 1px solid var(--borda-forte); border-radius: 8px;
  height: 40px; padding: 0 12px; width: 100%;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
textarea { height: auto; padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(242, 104, 54, .16); }
input::placeholder, textarea::placeholder { color: #98a2b3; }
input.num { text-align: right; }
/* Data no iPhone: o Safari dá uma largura mínima própria ao campo (passava da borda) e centraliza o texto. Aqui fica igual aos outros. */
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
@supports (-webkit-touch-callout: none) {
  /* O Safari deixa a data vazia em branco: mostra uma dica (o app.js mantém o atributo value em dia). */
  input[type="date"] { line-height: 38px; }
  input[type="date"][value=""]::before { content: 'Toque para escolher'; color: #98a2b3; }
}
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.campos-1 { grid-template-columns: 1fr; }
.col-2 { grid-column: span 2; }
.linha { display: flex; gap: 8px; }
.dados { display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; margin: 0; }
.dados dt { color: var(--sub); font-size: 13px; }
.dados dd { margin: 0; overflow-wrap: anywhere; }

/* OS */
.os-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.tabela-form { width: 100%; border-collapse: collapse; }
.tabela-form th { font-size: 12px; font-weight: 600; color: var(--sub); text-align: left; padding: 0 6px 6px 0; }
.tabela-form th.num { text-align: right; }
.tabela-form td { padding: 4px 6px 4px 0; vertical-align: top; }
.tabela-itens td:nth-child(2) { width: 84px; }
.tabela-itens td:nth-child(3) { width: 124px; }
.tabela-itens .subtotal { width: 110px; font-weight: 600; padding-top: 13px; }
.tabela-itens td:last-child { width: 36px; padding-top: 6px; }
.vinculo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); margin-top: 5px; }
.vinculo:empty { display: none; }
.nota { display: flex; gap: 10px; align-items: flex-start; background: #f9fafb; border: 1px dashed var(--borda-forte); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--txt-2); margin: 12px 0 0; }
.nota:empty { display: none; }
.nota .ico { color: var(--navy); margin-top: 1px; }
.r-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; color: var(--txt-2); }
.r-linha b { color: var(--txt); font-variant-numeric: tabular-nums; }
.r-linha input { width: 130px; height: 34px; }
.r-total { border-top: 1px solid var(--borda); margin-top: 6px; padding-top: 12px; color: var(--txt); font-weight: 600; }
.r-total b { font-size: 22px; letter-spacing: -.02em; }
.r-saldo b { color: var(--laranja-esc); }
.pag { display: grid; grid-template-columns: 1fr 1fr 32px; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.pag:first-child { padding-top: 0; }
.pag select { grid-column: 1 / 3; }
.pag .x { grid-column: 3; grid-row: 1; }

/* Itens do pedido: base + bordados */
.item { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px 10px; margin-bottom: 10px; background: #fcfcfe; }
.item-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.seg { display: inline-flex; background: #eef0f5; border-radius: 8px; padding: 3px; }
.seg button { border: none; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--sub); padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.seg button.ativo { background: #fff; color: var(--navy); box-shadow: var(--sombra); }
.item-campos { display: grid; grid-template-columns: minmax(0, 1fr) 90px 140px; gap: 10px; }
.item-campos.sem-base { grid-template-columns: minmax(0, 1fr) 90px; }
.bordados { margin-top: 10px; display: grid; gap: 6px; }
.bord { display: grid; grid-template-columns: minmax(0, 1fr) 120px 32px; gap: 6px; align-items: center; }
.bord input { height: 34px; }
.chips-bord { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-add { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--borda-forte); background: #fff; color: var(--txt-2); border-radius: 999px; padding: 4px 10px 4px 8px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.chip-add .ico { width: 14px; height: 14px; color: var(--laranja-esc); }
.chip-add small { color: var(--sub); font-size: 12px; }
.chip-add:hover { border-color: var(--laranja); color: var(--laranja-esc); background: var(--laranja-claro); }
.item-total { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--borda); }
.item-total b { color: var(--txt); font-variant-numeric: tabular-nums; }
.item-total .subtotal { font-size: 15px; }
.tag-peca { background: #f1ebfd; color: #6b3fd1; }
.tabela-bord { display: grid; gap: 6px; margin-bottom: 6px; }
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 120px 32px; gap: 6px; align-items: center; }
.pos input { height: 36px; }
.trava { color: var(--navy); font-weight: 600; font-size: 13px; }
.trava .ico { color: var(--navy); }
.erro { color: var(--vermelho); font-size: 13px; font-weight: 500; margin: 8px 0 0; }
.aviso-info { background: var(--navy-claro); border-color: #cfcff0; color: var(--navy); }
.doc-bord { font-size: 11px; color: #444; margin-top: 1px; }

/* Status direto na lista */
.sel-status {
  appearance: none; -webkit-appearance: none; width: auto; height: 26px; border: none; box-shadow: none; cursor: pointer;
  border-radius: 999px; padding: 0 26px 0 10px; font-size: 12px; font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.sel-status:hover { filter: brightness(.96); }
.sel-status:focus { box-shadow: 0 0 0 3px rgba(242, 104, 54, .2); }
.sel-status option { background: #fff; color: var(--txt); }

/* Filtros de data e visão lista/kanban */
.seg-visao button { display: inline-flex; align-items: center; gap: 6px; height: 32px; }
.seg-visao .ico { width: 15px; height: 15px; }
.filtro-data { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.filtro-data select { width: auto; height: 34px; font-size: 13px; }
.filtro-data .periodo input { height: 34px; }
.check { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
.check input { width: 16px; height: 16px; box-shadow: none; accent-color: var(--navy); }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(var(--colunas), minmax(200px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kb-col { background: #eceef4; border-radius: var(--raio); padding: 10px; min-height: 160px; transition: background .15s, box-shadow .15s; }
.kb-col.alvo { background: var(--laranja-claro); box-shadow: inset 0 0 0 2px var(--laranja); }
.kb-topo { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.kb-topo .cont { background: #fff; }
.kb-soma { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--txt-2); white-space: nowrap; }
.kb-lista { display: grid; gap: 8px; }
.kb-card { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; box-shadow: var(--sombra); cursor: grab; display: grid; gap: 3px; font-size: 13px; }
.kb-card:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-alta); }
.kb-card.arrastando { opacity: .45; cursor: grabbing; }
.kb-l1 { display: flex; align-items: center; gap: 6px; }
.kb-total { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.kb-cli { font-weight: 600; font-size: 14px; }
.kb-itens { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-l3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; margin-top: 4px; font-size: 12px; }
.kb-col, .kb-lista, .kb-card { min-width: 0; }
.kb-l3 .ico { width: 13px; height: 13px; }
.kb-l3 .com-ico { gap: 4px; }
.kb-card .sel-status { display: none; margin-top: 6px; }
.kb-vazio { text-align: center; color: var(--sub); font-size: 12px; margin: 16px 0; }
.tag-atraso { background: #fef3f2; color: #b42318; }
@media (hover: none) { .kb-card .sel-status { display: inline-block; } } /* no toque não dá pra arrastar: muda pelo seletor */

/* Busca de cliente no pedido */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label { display: block; }
.combo { position: relative; flex: 1; min-width: 0; }
.combo > .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sub); width: 16px; height: 16px; pointer-events: none; }
.combo input { padding-left: 36px; }
.combo-lista { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra-alta); padding: 4px; max-height: 320px; overflow: auto; }
.combo-op { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.combo-op .avatar { width: 30px; height: 30px; font-size: 11px; }
.combo-op b { display: block; font-weight: 600; }
.combo-op .sub { display: block; font-size: 12px; }
.combo-op.foco, .combo-op:hover { background: var(--bg); }
.combo-novo { color: var(--laranja-esc); border-top: 1px solid var(--borda); border-radius: 0 0 8px 8px; }
.combo-novo .ico { width: 16px; height: 16px; margin: 0 7px; }
.combo-vazio { padding: 12px; color: var(--sub); text-align: center; }

/* Receber e comprovante */
.receber { display: inline-flex; align-items: center; gap: 10px; }
.btn-receber { color: var(--verde); border-color: #abefc6; background: #ecfdf3; }
.btn-receber:hover { background: #d1fadf; }
.pago { display: inline-flex; align-items: center; gap: 4px; color: var(--verde); font-weight: 600; font-size: 13px; }
.pago .ico { width: 15px; height: 15px; }
.kb-receber { border: 1px solid #abefc6; background: #ecfdf3; color: var(--verde); font: inherit; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; cursor: pointer; white-space: nowrap; }
.kb-receber:hover { background: #d1fadf; }
.comp-btn { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: none; background: none; padding: 2px 0; font: inherit; font-size: 13px; color: var(--sub); cursor: pointer; }
.comp-btn .ico { width: 14px; height: 14px; }
.comp-btn:hover { color: var(--laranja-esc); }
.comp-btn.tem { color: var(--verde); font-weight: 600; }
.rotulo { font-size: 13px; font-weight: 500; color: #344054; }
.comp-nome { display: flex; align-items: center; gap: 4px; color: var(--verde); }
.comp-nome .ico { width: 14px; height: 14px; }
p.r-linha { margin: 16px 0 0; }

/* Janela Receber: total, já pago, falta */
.rec-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 10px; }
.rec-resumo div { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.rec-resumo span { display: block; font-size: 12px; color: var(--sub); font-weight: 500; }
.rec-resumo b { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-resumo .rec-falta { background: var(--laranja-claro); }
.rec-resumo .rec-falta b { color: var(--laranja-esc); font-size: 19px; }
.rec-pagos { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--borda); border-radius: 10px; }
.rec-pagos li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; font-size: 13px; border-bottom: 1px solid var(--borda); }
.rec-pagos li:last-child { border-bottom: none; }
.rec-pagos .ico { width: 13px; height: 13px; vertical-align: -2px; color: var(--verde); }
.rec-nenhum { margin: 0 0 12px; }
.valor-grande { font-size: 22px !important; font-weight: 700; height: 52px !important; }
.rec-depois { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.rec-depois .ico { width: 18px; height: 18px; }
.rec-depois.resta { background: var(--laranja-claro); color: #8a3412; }
.rec-depois.quitado { background: #ecfdf3; color: var(--verde); }
.rec-depois.passa { background: #fef3f2; color: var(--vermelho); }
.nota-sinal:not(:empty) { margin-top: 10px; }
.barra-acao { display: none; }

/* Enviar no WhatsApp */
.status-acoes { display: inline-flex; align-items: center; gap: 6px; }
.btn-whats { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid #abefc6; background: #ecfdf3; color: var(--verde); cursor: pointer; flex-shrink: 0; }
.btn-whats .ico { width: 16px; height: 16px; }
.btn-whats:hover { background: #d1fadf; }
.kb-l1 .btn-whats { width: 26px; height: 26px; margin-left: 2px; }
.btn-zap { color: var(--verde); border-color: #abefc6; }
.btn-zap:hover { background: #ecfdf3; }

/* Nuvem: login, usuários, envio e conexão */
body.tela-login { display: block; background: var(--navy); }
body.tela-login .sidebar, body.tela-login .barra-topo, body.tela-login .fundo-menu { display: none !important; }
body.tela-login main { max-width: none; padding: 0; }
.login { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 24px 16px; }
.login-logo { width: 220px; max-width: 70vw; }
.login-card { width: min(380px, calc(100vw - 32px)); padding: 26px 22px; display: grid; gap: 14px; margin: 0; }
.login-card h1 { font-size: 22px; }
.login-card .sub { margin: 0; }
.btn-grande { min-height: 50px; font-size: 16px; width: 100%; }
.sidebar-rodape { gap: 10px; }
.sidebar-rodape .avatar { width: 32px; height: 32px; background: rgba(255, 255, 255, .12); color: #fff; }
.eu { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.eu b { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eu small { color: #8d8dc4; font-size: 11px; }
.btn-sair { border: 1px solid rgba(255, 255, 255, .2); background: none; color: #d4d4f2; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.btn-sair:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.pad { padding: 0 20px; }
.usuario { display: grid; grid-template-columns: auto minmax(0, 1fr) 140px auto; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--borda); }
.usuario.inativo { opacity: .55; }
.u-txt { display: flex; flex-direction: column; min-width: 0; }
.u-txt .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario select { height: 34px; }
.u-acoes { display: flex; gap: 6px; }
.card.destaque { border-color: #fbd0bd; background: var(--laranja-claro); }
.enviar, .so-dono { padding: 20px; }
.opcao { display: grid; gap: 6px; margin-top: 14px; }
.opcao .sub { margin: 0; }
.opcao .btn-txt { justify-self: start; }
#conexao { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: #b42318; color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 6px 12px; }
#conexao[hidden] { display: none; }

/* Mockup no PDF */
.no-pdf { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; border: none; border-top: 1px solid var(--borda); background: #fff; color: var(--sub); font: inherit; font-size: 12px; font-weight: 600; padding: 6px; cursor: pointer; }
.no-pdf .ico { width: 13px; height: 13px; }
.no-pdf.ativo { background: #ecfdf3; color: var(--verde); }
.doc-resumo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; margin-top: 12px; break-inside: avoid; }
.doc-resumo .doc-totais { margin: 0; width: auto; }
.doc-mockups b { display: block; margin-bottom: 6px; }
.doc-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.doc-mockups.n1 .doc-grade { grid-template-columns: 1fr; }
.doc-grade img, .doc-mockups-resto img { width: 100%; object-fit: contain; border: 1px solid #ccc; border-radius: 4px; background: #fff; height: calc(38mm * var(--k, 1)); }
.doc-mockups.n1 .doc-grade img { height: calc(75mm * var(--k, 1)); }
.doc-mockups.n2 .doc-grade img { height: calc(55mm * var(--k, 1)); }
.doc-mockups-resto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.doc-mockups-resto img { height: calc(50mm * var(--k, 1)); break-inside: avoid; }

/* Instalar no celular e notificações */
.passos-instalar { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.passo { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.passo-n { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; }
.passo .sub { margin: 2px 0 0; }
.desenho { display: block; width: 100%; max-width: 320px; margin-top: 8px; border-radius: 10px; box-shadow: var(--sombra); }
.aviso-ok { background: #ecfdf3; border-color: #abefc6; color: var(--verde); }
.trava-ok { color: var(--verde); font-weight: 600; }
.avisos-lista { display: grid; gap: 2px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); }
.convite-app .x { margin-left: auto; }

/* Anexos */
.anexos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-bottom: 14px; }
.anexo { position: relative; margin: 0; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: #f9fafb; }
.anexo .abrir { display: block; width: 100%; aspect-ratio: 1; border: none; padding: 0; background: none; cursor: zoom-in; }
.anexo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anexo-pdf { height: 100%; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--vermelho); font-weight: 700; font-size: 12px; }
.anexo-pdf .ico { width: 34px; height: 34px; }
.anexo figcaption { font-size: 12px; color: var(--txt-2); padding: 6px 8px; border-top: 1px solid var(--borda); background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anexo figcaption i { display: block; color: var(--laranja-esc); font-style: normal; font-weight: 600; }
.anexo .x { position: absolute; top: 6px; right: 6px; background: rgba(255, 255, 255, .92); box-shadow: var(--sombra); }
.anexos-vazio { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; }
.visor { padding: 16px 20px 20px; }
.visor-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.visor img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; }
.visor iframe { width: 100%; height: 70vh; border: 1px solid var(--borda); border-radius: 8px; }

/* Catálogo */
.rec { display: grid; grid-template-columns: minmax(0, 1fr) 100px 32px; gap: 8px; align-items: center; margin-top: 8px; }
#receita:empty { display: none; }

/* Modal e aviso */
dialog { border: none; border-radius: 16px; padding: 0; width: min(580px, calc(100vw - 32px)); box-shadow: 0 24px 64px rgba(0, 0, 40, .28); color: var(--txt); }
dialog.largo { width: min(960px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(10, 12, 40, .5); backdrop-filter: blur(2px); }
dialog form { padding: 24px; }
.modal-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.modal-topo h2 { margin: 0; font-size: 18px; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 100;
  background: var(--txt); color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: var(--sombra-alta);
  font-weight: 500; max-width: calc(100vw - 32px); opacity: 0; pointer-events: none; transition: .2s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Tablet */
@media (max-width: 1100px) {
  .os-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .grade-12 { grid-template-columns: 1fr; }
}

/* Celular */
@media (max-width: 860px) {
  :root { --topo: 56px; }
  body { display: block; }
  .so-cel { display: inline-grid !important; }
  .so-desk { display: none !important; }
  input, select, textarea { font-size: 16px; } /* evita o zoom automático no iPhone */

  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; height: 100%; transform: translateX(-100%); transition: transform .22s ease; }
  body.menu-aberto .sidebar { transform: none; box-shadow: var(--sombra-alta); }
  .fundo-menu { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(10, 12, 40, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.menu-aberto .fundo-menu { opacity: 1; pointer-events: auto; }

  .barra-topo { padding: 0 8px 0 4px; gap: 4px; background: var(--navy); border: none; color: #fff; backdrop-filter: none; }
  /* App instalado no iPhone: o azul vai até o topo e o conteúdo fica abaixo do relógio/notch. */
  .barra-topo { padding-top: env(safe-area-inset-top); height: calc(var(--topo) + env(safe-area-inset-top)); }
  .tabela th { top: calc(var(--topo) + env(safe-area-inset-top)); }
  .sidebar { padding-top: calc(18px + env(safe-area-inset-top)); }
  .resultados { top: calc(var(--topo) + env(safe-area-inset-top)); }
  .marca-topo img { height: 34px; display: block; }
  .busca-global { display: none; }
  .barra-topo .nova { width: 40px; padding: 0; margin-left: 4px; }
  .barra-topo .nova .ico { width: 20px; height: 20px; }
  #abrirBusca { margin-left: auto; }
  #fecharBusca { display: none !important; }
  body.busca-aberta .busca-global { display: block; flex: 1; max-width: none; }
  body.busca-aberta .busca-global input { background: #fff; }
  body.busca-aberta :is(#abrirMenu, .marca-topo, #abrirBusca, .nova) { display: none !important; }
  body.busca-aberta #fecharBusca { display: inline-grid !important; }
  .resultados { position: fixed; top: var(--topo); left: 8px; right: 8px; max-height: calc(100vh - var(--topo) - 16px); }

  main { padding: 18px 14px 48px; }
  h1 { font-size: 21px; }
  .topo { margin-bottom: 16px; }
  .topo > .acoes { width: 100%; }
  .card { padding: 16px; }
  .card-lista { padding: 0; }
  .card-lista > .card-topo { padding: 16px 16px 0; }
  .ferramentas { padding: 12px 16px; }
  .campo-busca { max-width: none; }
  .abas { padding: 0 6px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px; gap: 10px; flex-direction: column; }
  .kpi-ico { width: 32px; height: 32px; border-radius: 8px; }
  .kpi-ico .ico { width: 17px; height: 17px; }
  .kpi b { font-size: 18px; }
  .grade-2, .grade-21, .grade-12, .os-grid { grid-template-columns: 1fr; }
  .os-grid { gap: 0; }
  .campos { grid-template-columns: 1fr; }
  .col-2 { grid-column: auto; }
  .grafico { height: 190px; gap: 6px; }
  .g-valor { font-size: 10px; }
  .dados { grid-template-columns: 1fr; gap: 2px; }
  .dados dd { margin-bottom: 10px; }
  .filtros-periodo { padding: 12px; }
  .periodo, .periodo label { width: 100%; }
  .periodo input { flex: 1; }
  .tabela th:first-child, .tabela td:first-child { padding-left: 16px; }
  .tabela th:last-child, .tabela td:last-child { padding-right: 16px; }
  .tabela-wrap { overflow-x: auto; }
  .tabela-wrap .tabela th { position: static; } /* dentro de área que rola de lado, o cabeçalho fixo se desloca */
  .tabela-mov thead { display: none; }
  .tabela-mov tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
  .tabela-mov tbody tr:last-child { border-bottom: none; }
  .tabela-mov td { border: none !important; padding: 0 !important; }
  .tabela-mov td:nth-child(1) { order: 3; color: var(--sub); font-size: 13px; }
  .tabela-mov td:nth-child(2) { order: 1; font-weight: 600; }
  .tabela-mov td:nth-child(4) { order: 2; font-weight: 600; }
  .tabela-mov td:nth-child(3) { order: 4; text-align: right; }
  .tabela-mov td:nth-child(5) { order: 5; grid-column: 1 / -1; font-size: 13px; }

  .item { padding: 10px; }
  .item-campos { grid-template-columns: 1fr 1fr; }
  .item-campos .item-desc { grid-column: 1 / -1; }
  .item-campos.sem-base { grid-template-columns: 1fr 1fr; }
  .bord { grid-template-columns: minmax(0, 1fr) 96px 32px; }
  .pos { grid-template-columns: minmax(0, 1fr) 96px 32px; }
  .topo > .acoes .trava { width: 100%; }
  /* Itens da OS em blocos */
  .tabela-itens thead { display: none; }
  .tabela-itens tr { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--borda); align-items: center; }
  .tabela-itens td { width: auto !important; padding: 0 !important; }
  .tabela-itens td:first-child { grid-column: 1 / -1; }

  /* Listas de OS e estoque viram cartões, pra nada ficar escondido à direita. */
  .tabela-os thead, .tabela-estoque thead, .tabela-catalogo thead { display: none; }
  .tabela-os tr, .tabela-estoque tr, .tabela-catalogo tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
  .tabela-os tbody tr:last-child, .tabela-estoque tbody tr:last-child, .tabela-catalogo tbody tr:last-child { border-bottom: none; }
  .tabela-os td, .tabela-estoque td, .tabela-catalogo td { border: none !important; padding: 2px 0 !important; background: none !important; }
  .tabela-os tr.clicavel:hover { background: #fafbfd; }
  .tabela-estoque tr.linha-alerta { background: #fffaf8; }
  .tabela-os td:nth-child(1) { order: 1; }
  .tabela-os td:nth-child(4) { order: 2; text-align: right; }
  .kanban { grid-template-columns: repeat(var(--colunas), 82vw); scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 8px; }
  .kb-col { scroll-snap-align: center; }
  .filtro-data { width: 100%; }
  .filtro-data .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .chip { white-space: nowrap; }
  .seg-visao { order: -1; }
  .tabela-os td:nth-child(2) { order: 3; }
  .tabela-os td:nth-child(5) { order: 4; font-weight: 600; }
  .tabela-os td:nth-child(3) { order: 5; }
  .tabela-os td:nth-child(6) { order: 6; color: var(--laranja-esc); font-weight: 600; grid-column: 1 / -1; text-align: left; margin-top: 4px; }
  .tabela-os td:nth-child(3)::before { content: 'Entrega '; color: var(--sub); }
  .tabela-os td:nth-child(6)::before { content: 'falta '; color: var(--sub); font-weight: 400; }
  .tabela-os .sem-saldo { display: none; }
  .tabela-os td.pago-td::before { content: none; }
  .receber { gap: 8px; }
  .tabela-estoque td:nth-child(3), .tabela-estoque td:nth-child(4), .tabela-estoque td:nth-child(5) { display: none; }
  .tabela-estoque .acoes-linha { grid-column: 1 / -1; text-align: left; padding-top: 8px !important; }
  .tabela-catalogo td:nth-child(2) { order: 3; grid-column: 1 / -1; font-size: 13px; }
  .tabela-catalogo td:nth-child(4), .tabela-catalogo td:nth-child(5) { display: none; }
  .tabela-clientes th:nth-child(3), .tabela-clientes td:nth-child(3),
  .tabela-clientes th:nth-child(5), .tabela-clientes td:nth-child(5) { display: none; }
  .tabela-clientes th:nth-child(2), .tabela-clientes td:nth-child(2) { display: none; }
}

/* Celular: uso no balcão, com uma mão (alvos de 44px, ações embaixo, sem zoom nos campos) */
@media (max-width: 860px) {
  input, select { height: 48px; }
  .btn { min-height: 44px; }
  .btn-mini { min-height: 40px; padding: 0 12px; }
  .btn-txt { min-height: 44px; }
  .btn-topo { width: 44px; height: 44px; }
  .x { min-width: 44px; min-height: 44px; }
  .chip { min-height: 40px; padding: 0 16px; }
  .chip-add { min-height: 40px; padding: 0 14px 0 10px; }
  .seg button { min-height: 40px; padding: 0 14px; }
  .sel-status { height: 40px; font-size: 16px; padding: 0 30px 0 12px; } /* 16px: no iPhone, menos que isso dá zoom ao tocar */
  .comp-btn { min-height: 40px; }
  .kb-receber { min-height: 44px; padding: 4px 14px; font-size: 14px; }
  .btn-whats, .kb-l1 .btn-whats { width: 44px; height: 44px; }
  .no-pdf { min-height: 40px; font-size: 13px; }
  .usuario { grid-template-columns: auto minmax(0, 1fr); padding: 12px 16px; }
  .usuario select, .u-acoes { grid-column: 1 / -1; }
  .usuario select { height: 44px; }
  .pad { padding: 0 16px; }
  .btn-whats .ico { width: 20px; height: 20px; }
  .filtro-data select { font-size: 16px; }
  .periodo input { height: 44px; }
  .voltar { min-height: 44px; margin-bottom: 0; }
  .check { min-height: 44px; }
  .check input { width: 22px; height: 22px; }
  .aba { padding: 14px 12px; }
  .r-linha input { height: 44px; width: 140px; }
  .bord input, .pos input { height: 44px; }
  .periodo label { flex: 1; }
  .filtro-data select { height: 40px; }
  .tabela-os .receber .btn { min-height: 40px; }

  /* Barra fixa no pé do pedido: total, quanto falta, Receber e Salvar ao alcance do polegar */
  .barra-acao {
    display: flex; align-items: center; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: #fff; border-top: 1px solid var(--borda); box-shadow: 0 -6px 20px rgba(16, 24, 40, .08);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .ba-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; color: var(--sub); line-height: 1.3; }
  .ba-info b { color: var(--txt); font-size: 15px; }
  #bFalta b { color: var(--laranja-esc); }
  .barra-acao .btn { min-height: 48px; padding: 0 16px; }
  #toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  main:has(.barra-acao) { padding-bottom: 96px; }
  .topo > .acoes #salvar { display: none; }

  /* Janelas sobem de baixo (folha), botões grandes no pé */
  dialog { margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: 18px 18px 0 0; }
  dialog.largo { width: 100vw; }
  dialog form { padding: 18px 16px calc(12px + env(safe-area-inset-bottom)); }
  .modal-acoes { position: sticky; bottom: 0; background: #fff; margin: 16px -16px 0; padding: 10px 16px 0; border-top: 1px solid var(--borda); }
  .modal-acoes .btn { flex: 1; min-height: 50px; }
  .modal-acoes .espaco { display: none; }
  .rec-resumo { gap: 6px; }
  .rec-resumo div { padding: 8px; }
  .rec-resumo b { font-size: 15px; }
  .rec-resumo .rec-falta b { font-size: 16px; }
  .form-receber .campos { grid-template-columns: 1fr 1fr; }
  .form-receber .col-2 { grid-column: 1 / -1; }
  .form-receber .campo { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  main { padding-left: 12px; padding-right: 12px; }
  .kanban { margin: 0 -12px; padding: 0 12px 8px; }
  .kpis { gap: 8px; }
  .kpi b { font-size: 16px; }
  .rec-resumo b { font-size: 14px; }
  .barra-acao .btn { padding: 0 12px; }
}

/* Revisão do celular (16/10): largura cheia, grades alinhadas, nada cortado e sem espaço sobrando.
   Vem por último pra valer por cima das regras de celular acima. */
@media (max-width: 860px) {
  main { padding: 16px 14px 32px; }
  .topo { margin-bottom: 14px; gap: 12px; }
  .topo > div:first-child { width: 100%; }

  /* Botões do topo: grade de 2 colunas em largura cheia; se sobrar um sozinho, ele ocupa a linha toda. */
  .topo > .acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .topo > .acoes > * { width: 100%; min-width: 0; justify-content: center; }
  .topo > .acoes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .topo > .acoes > #salvar { display: none; }
  .topo > .acoes:has(> #salvar:last-child) > :nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
  .topo > .acoes > .seg-visao { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; order: 0; }
  .topo > .acoes:has(> .seg-visao) > :last-child { grid-column: auto; }
  .seg-visao button { justify-content: center; }
  .topo > .acoes > .trava { grid-column: 1 / -1; justify-content: flex-start; }
  .topo > .acoes > .btn-fantasma { border-color: var(--borda-forte); background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }

  /* Botões dentro dos cartões dividem a linha por igual; botão de salvar de formulário em largura cheia. */
  .card .acoes > .btn, .card .acoes > label.btn { flex: 1 1 140px; justify-content: center; }
  .campos > .col-2 > .btn, .campos > div > .btn-laranja { width: 100%; }
  .card-topo { margin-bottom: 12px; }

  /* Abas: deslizam de lado, com um esmaecido na borda pra mostrar que tem mais. */
  .abas { padding: 0 8px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .aba { padding: 12px 8px; gap: 6px; }

  /* Filtro de datas: grade alinhada (nada cortado) e o "pela data" em largura cheia. */
  .ferramentas { gap: 10px; }
  .filtro-data { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
  .filtro-data .chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; overflow: visible; width: 100%; -webkit-mask-image: none; mask-image: none; }
  .filtro-data .chip { display: flex; align-items: center; justify-content: center; padding: 0 6px; min-height: 40px; }
  .filtro-data .chip:last-child { grid-column: span 2; }
  .filtro-data select { width: 100%; }
  .filtro-data .periodo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .filtro-data .periodo label { flex-direction: column; align-items: stretch; gap: 4px; }
  .filtros-periodo .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
  .filtros-periodo .chip { display: flex; align-items: center; justify-content: center; min-height: 40px; }
  .filtros-periodo .periodo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .filtros-periodo .periodo label { flex-direction: column; align-items: stretch; gap: 4px; }
  .periodo input, .periodo label { width: 100%; min-width: 0; }
  .periodo input { height: 44px; flex: none; }
  /* Convite pra instalar: texto em cima, botão embaixo, X no canto */
  .convite-app { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 6px 10px; }
  .convite-app > .btn { grid-column: 2; justify-self: start; }
  .convite-app > .x { grid-column: 3; grid-row: 1; margin: -10px -10px 0 0; }

  /* Cartão do pedido: nº + status + WhatsApp / cliente em largura cheia / entrega e total / falta ou pago. */
  .tabela-os tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num status status" "cli cli cli" "prazo prazo total" "saldo saldo saldo"; row-gap: 6px; column-gap: 10px; padding: 14px 16px; }
  .tabela-os td { order: 0 !important; }
  .tabela-os td:nth-child(1) { grid-area: num; align-self: center; font-size: 16px; }
  .tabela-os td:nth-child(2) { grid-area: cli; font-weight: 600; }
  .tabela-os td:nth-child(2) .sub { font-weight: 400; margin-top: 2px; }
  .tabela-os td:nth-child(3) { grid-area: prazo; align-self: end; }
  .tabela-os td:nth-child(4) { grid-area: status; text-align: right; }
  .tabela-os td:nth-child(5) { grid-area: total; text-align: right; align-self: end; font-size: 16px; font-weight: 700; }
  .tabela-os td:nth-child(6) { grid-area: saldo; margin-top: 2px; }
  .tabela-os td:nth-child(6) .receber { display: flex; width: 100%; justify-content: space-between; align-items: center; }
  .tabela-os td:nth-child(6)::before { content: none; }
  .tabela-os .valor-falta::before { content: 'falta '; color: var(--sub); font-weight: 400; }
  .tabela-os td:nth-child(3) .sub { display: inline; margin-left: 6px; }
  .tabela-os .status-acoes { gap: 8px; }
  .tabela-os .sel-status { height: 40px; max-width: 170px; }

  /* Painel: indicadores mais compactos; o que sobrar sozinho ocupa a linha toda (sem meia tela vazia). */
  .kpis { gap: 10px; }
  .kpi { padding: 12px 14px; gap: 8px; }
  .kpi small { line-height: 1.3; }
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
  .grafico { height: 170px; }
  .g-trilho { background: none; }

  /* Pedido e cliente */
  .item-total { row-gap: 6px; }
  .pag select { grid-column: 1 / -1; }
  .r-linha input { width: 150px; }
  .pessoa.grande { align-items: flex-start; }
  .dados { grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; }
  .dados dd { margin-bottom: 0; }
}

/* Impressão */
#print, .so-print { display: none; }
@media print {
  @page { margin: 14mm; }
  body { display: block; background: #fff; }
  .sidebar, .barra-topo, .no-print, #toast, dialog, .fundo-menu { display: none !important; }
  .so-print { display: block; }
  main { padding: 0; max-width: none; }
  .card, .kpi { break-inside: avoid; box-shadow: none; border-color: #ccc; }
  .tabela th { position: static; }
  body.print-doc .area { display: none; }
  body.print-doc #print { display: block; }
}
.doc { font-size: 13px; color: #000; }
.doc-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--navy); color: #fff; padding: 14px 18px; border-radius: 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-topo img { height: 56px; }
.doc-empresa { text-align: right; font-size: 12px; }
.doc-titulo { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--laranja); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-titulo h1 { font-size: 20px; }
.doc-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.doc table { width: 100%; border-collapse: collapse; }
.doc th { text-align: left; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid #000; padding: 6px; }
.doc td { border-bottom: 1px solid #ccc; padding: 4px 6px; }
.doc th.num { text-align: right; }
.doc-totais { margin: 12px 0 0 auto; width: 260px; }
.doc-totais div { display: flex; justify-content: space-between; padding: 3px 6px; }
.doc-totais .forte { font-weight: 700; font-size: 15px; border-top: 1px solid #000; padding-top: 6px; }
.doc-caixa { margin-top: 12px; border: 1px solid #bbb; border-radius: 6px; padding: 10px 12px; break-inside: avoid; }
.doc-caixa p { margin: 6px 0 0; }
.doc-caixa span { font-weight: 600; }
.doc-assin { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 52px; break-inside: avoid; text-align: center; }
.doc-assin div { border-top: 1px solid #000; padding-top: 6px; }