/* =====================================================================
Aplicativo Trio — folha de estilo comum
Mesma identidade visual do protótipo aprovado em 08/08/2026.
===================================================================== */
:root{
--brand:#90332A; --brand-dark:#6E241D; --brand-light:#F7EDEB;
--bg:#F4F5F7; --card:#FFFFFF; --ink:#1A1D21; --ink-2:#5C6470; --ink-3:#8E97A3;
--line:#E4E7EB;
--blue:#1F6FEB; --blue-bg:#E8F0FE;
--amber:#B45309; --amber-bg:#FEF3C7;
--green:#15803D; --green-bg:#DCFCE7;
--red:#B91C1C; --red-bg:#FEE2E2;
--radius:14px;
--shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45;
padding-bottom:40px;
}
button,input,select,textarea{font-family:inherit;font-size:inherit}
/* ---------- Cabeçalho ---------- */
header.app{
background:var(--brand);color:#fff;padding:16px;
display:flex;align-items:center;gap:12px;
padding-top:calc(16px + env(safe-area-inset-top));
}
header.app .who{flex:1;min-width:0}
header.app .marca-topo{display:block;height:15px;width:auto;margin-bottom:5px;opacity:.95}
header.app h1{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
header.app .sub{font-size:12.5px;opacity:.82;margin-top:1px}
.wrap{max-width:560px;margin:0 auto;padding:14px}
.wrap.wide{max-width:1400px}
/* ---------- Blocos ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.sec-title{font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin:20px 4px 8px}
.sec-title:first-child{margin-top:4px}
/* ---------- Campos ---------- */
label.f{display:block;margin-bottom:14px}
label.f:last-child{margin-bottom:0}
label.f .lb{display:block;font-size:13px;font-weight:650;color:var(--ink-2);margin-bottom:5px}
label.f .lb .req{color:var(--brand)}
label.f .hint{font-size:12px;color:var(--ink-3);font-weight:400;margin-top:4px}
input.i,select.i,textarea.i{
width:100%;padding:11px 12px;border:1px solid #D3D8DF;border-radius:10px;
background:#fff;color:var(--ink);outline:none;
}
input.i:focus,select.i:focus,textarea.i:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-light)}
input.i:disabled,select.i:disabled,textarea.i:disabled{background:#F1F3F5;color:var(--ink-3)}
textarea.i{min-height:76px;resize:vertical}
select.i{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 10px center;padding-right:34px}
.erro-campo{border-color:var(--red) !important}
/* Temperatura fora da faixa NÃO é erro de preenchimento: o número está
certo, o produto é que veio fora. Vermelho o estoquista lê como
"recusado" e fica tentando consertar um valor que não tem defeito
nenhum — daí o âmbar. Foi confusão real em 17/09/2026. */
.aviso-campo{border-color:var(--amber) !important}
.msg-campo.ambar{color:var(--amber)}
.msg-campo{font-size:12px;color:var(--red);font-weight:600;margin-top:4px;display:none}
.msg-campo.on{display:block}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* ---------- Botões ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:7px;
padding:12px 18px;border-radius:11px;border:1px solid transparent;
font-weight:650;cursor:pointer;background:var(--brand);color:#fff;
}
.btn:active{transform:translateY(1px)}
.btn.block{display:flex;width:100%}
.btn.ghost{background:#fff;color:var(--ink);border-color:#D3D8DF}
.btn.green{background:var(--green)}
.btn.lg{padding:15px 18px;font-size:16px}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* ---------- Chips de categoria ---------- */
.chips{display:flex;gap:9px}
.chip{
flex:1;padding:13px 10px;border-radius:12px;border:1.5px solid #D3D8DF;background:#fff;
font-size:14px;font-weight:650;color:var(--ink-2);cursor:pointer;text-align:center;
}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.chip .d{display:block;font-size:11.5px;font-weight:500;opacity:.7;margin-top:2px}
/* ---------- Etiquetas ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700}
.pill.sol{background:var(--amber-bg);color:var(--amber)}
.pill.and{background:var(--blue-bg);color:var(--blue)}
.pill.con{background:var(--green-bg);color:var(--green)}
.pill.can{background:var(--red-bg);color:var(--red)}
.pill.urg{background:var(--red-bg);color:var(--red)}
/* ---------- Avisos ---------- */
.aviso{padding:12px 14px;border-radius:11px;font-size:13.5px;margin-bottom:14px;display:none}
.aviso.on{display:block}
.aviso.erro{background:var(--red-bg);color:var(--red);border:1px solid #F5C2C2}
.aviso.info{background:var(--blue-bg);color:var(--blue);border:1px solid #C9DCFB}
.aviso.alerta{background:var(--amber-bg);color:var(--amber);border:1px solid #F3DFA6}
/* ---------- Confirmação ---------- */
.ok-tela{text-align:center;padding:26px 18px}
.ok-tela .marca{
width:66px;height:66px;border-radius:50%;background:var(--green-bg);color:var(--green);
display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 16px;
}
.ok-tela h2{margin:0 0 6px;font-size:19px}
.ok-tela p{margin:0 0 18px;color:var(--ink-2);font-size:14px}
.protocolo{
background:var(--brand-light);border:1.5px dashed var(--brand);border-radius:12px;
padding:16px;margin-bottom:18px;
}
.protocolo .rot{font-size:11.5px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.06em}
.protocolo .num{font-size:30px;font-weight:800;color:var(--brand-dark);letter-spacing:-.02em;margin-top:3px}
.resumo{text-align:left;font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:14px}
.resumo div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.resumo div b{color:var(--ink);font-weight:650;text-align:right}
/* ---------- Carregando ---------- */
.carregando{text-align:center;padding:40px 20px;color:var(--ink-3);font-size:14px}
.girando{
width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--brand);
border-radius:50%;margin:0 auto 12px;animation:gira .7s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
.rodape{text-align:center;font-size:12px;color:var(--ink-3);padding:8px 14px 0}
.escondido{display:none !important}
/* =====================================================================
Tela de operação (motorista e carregador)
===================================================================== */
header.app .avatar{
width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;flex:none;
}
header.app .sair{
background:rgba(255,255,255,.15);border:0;color:#fff;font-size:12.5px;font-weight:650;
padding:8px 12px;border-radius:9px;cursor:pointer;flex:none;
}
/* ---------- Abas ---------- */
.abas{display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;-webkit-overflow-scrolling:touch}
.abas::-webkit-scrollbar{display:none}
/* Muitas abas: quebram em linhas em vez de sumirem para fora da tela */
.abas.varias{flex-wrap:wrap;overflow:visible;row-gap:8px}
.abas.varias .aba{flex:none}
.aba{
flex:none;padding:8px 14px;border-radius:999px;border:1px solid #D3D8DF;background:#fff;
font-size:13.5px;font-weight:650;color:var(--ink-2);cursor:pointer;white-space:nowrap;
}
.aba.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.aba .n{opacity:.6;margin-left:4px;font-weight:600}
/* ---------- Cartão de demanda ---------- */
.dcard{
background:#fff;border:1px solid var(--line);border-left:4px solid var(--amber);
border-radius:12px;padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow);
}
.dcard.and{border-left-color:var(--blue)}
.dcard.minha{border-left-color:var(--blue);background:#FBFDFF}
.dcard.con{border-left-color:var(--green);opacity:.75}
.dcard.atrasada{border-left-color:var(--red)}
.dcard .topo{display:flex;align-items:center;gap:7px;margin-bottom:8px;flex-wrap:wrap}
.dcard .num{font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.dcard .quando{margin-left:auto;font-size:12.5px;color:var(--ink-3);font-weight:600}
/* ---------- Rota: de onde sai, para onde vai ----------
O rótulo vem antes do nome e fica alinhado à direita, então as duas
pontas formam uma coluna só e o olho desce reto. */
.rota{display:grid;gap:3px}
.rota .pt{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:baseline}
.rota .pt i{
font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;color:var(--ink-3);text-align:right;line-height:1.5;
}
.dcard .rota{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
/* Na tabela a rota continua sendo o que identifica a linha: mesmo peso
que o .forte tinha quando era uma linha só. */
table.tab .rota .pt{font-weight:650}
.dcard .meta{font-size:13px;color:var(--ink-2);margin-top:5px}
.dcard .meta b{color:var(--ink);font-weight:650}
.dcard .quem{
font-size:12.5px;color:var(--blue);font-weight:650;margin-top:8px;
background:var(--blue-bg);padding:6px 10px;border-radius:8px;display:inline-block;
}
.dcard .acoes{display:flex;gap:8px;margin-top:12px}
.dcard .acoes .btn{flex:1;padding:11px 12px}
.vazio{text-align:center;padding:44px 20px;color:var(--ink-3)}
.vazio .emoji{font-size:30px;margin-bottom:8px;opacity:.5}
.vazio b{display:block;color:var(--ink-2);font-size:15px;margin-bottom:3px}
.barra-status{
display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);
padding:0 4px 10px;
}
.barra-status .ponto{width:7px;height:7px;border-radius:50%;background:var(--green)}
.barra-status .ponto.off{background:var(--red)}
.barra-status button{
margin-left:auto;background:none;border:0;color:var(--brand);font-weight:650;
font-size:12.5px;cursor:pointer;padding:4px;
}
/* ---------- Folha de detalhe ---------- */
.folha-fundo{
position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:50;
display:flex;align-items:flex-end;justify-content:center;
}
.folha{
background:#fff;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
border-radius:18px 18px 0 0;padding:18px 18px calc(22px + env(safe-area-inset-bottom));
animation:sobe .22s ease-out;
}
@keyframes sobe{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.folha .puxador{width:38px;height:4px;border-radius:2px;background:#D3D8DF;margin:0 auto 16px}
.folha h2{margin:0 0 3px;font-size:18px}
.folha .sub{color:var(--ink-3);font-size:12.5px;margin-bottom:16px}
.det{border-top:1px solid var(--line);padding:10px 0;display:flex;gap:14px;font-size:14px}
.det .r{color:var(--ink-2);min-width:104px;flex:none}
.det .v{font-weight:600;text-align:right;margin-left:auto}
.linha-tempo{border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.linha-tempo .ev{display:flex;gap:10px;font-size:13px;color:var(--ink-2);padding:3px 0}
.linha-tempo .ev b{color:var(--ink);font-weight:650}
.linha-tempo .ev .h{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* =====================================================================
Painel da liderança
===================================================================== */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:720px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;box-shadow:var(--shadow)}
.kpi .r{font-size:11.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.kpi .v{font-size:27px;font-weight:800;letter-spacing:-.02em;margin-top:3px;line-height:1.1}
.kpi .d{font-size:12px;color:var(--ink-3);margin-top:2px}
.kpi.amber .v{color:var(--amber)}
.kpi.blue .v{color:var(--blue)}
.kpi.green .v{color:var(--green)}
.filtros{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin-bottom:14px;box-shadow:var(--shadow)}
.filtros .linha{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:720px){.filtros .linha{grid-template-columns:repeat(4,1fr)}}
.filtros label.f{margin-bottom:0}
.filtros .acoes{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.filtros .acoes .btn{flex:1;min-width:130px;padding:10px 14px;font-size:14px}
.tabela-caixa{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow-x:auto}
table.tab{border-collapse:collapse;width:100%;font-size:13px;min-width:700px}
table.tab th{
text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
font-weight:700;padding:8px 9px;border-bottom:1px solid var(--line);white-space:nowrap;
background:#FAFBFC;position:sticky;top:0;
}
table.tab td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.35}
table.tab tr:last-child td{border-bottom:0}
table.tab tbody tr{cursor:pointer}
table.tab tbody tr:hover{background:#FAFBFC}
table.tab .n{font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:650;white-space:nowrap}
table.tab .forte{font-weight:650}
table.tab .fraco{color:var(--ink-2)}
table.tab .ver-fotos{
color:var(--brand);font-weight:700;white-space:nowrap;
text-decoration:underline;text-underline-offset:3px;
}
.contagem{font-size:12.5px;color:var(--ink-3);padding:10px 4px 0;text-align:right}
/* ---------- Paginação da tabela ----------
Fica colada embaixo da grade. No celular empilha, porque cinco botões
e um seletor não cabem lado a lado numa tela de mão. */
.paginacao{
display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:12px 4px 0;
}
.paginacao .pg-info{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.paginacao .pg-botoes{display:flex;align-items:center;gap:6px}
.paginacao .pg-botoes .btn{padding:8px 12px;font-size:13px;flex:none}
.paginacao .pg-botoes .btn[disabled]{opacity:.4;cursor:default}
.paginacao .pg-atual{
font-size:13px;font-weight:700;color:var(--ink-2);padding:0 6px;
font-variant-numeric:tabular-nums;white-space:nowrap;
}
.paginacao .pg-tam{
display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);white-space:nowrap;
}
.paginacao .pg-tam .i{padding:7px 30px 7px 10px;font-size:13px;width:auto;min-width:74px}
@media (max-width:640px){
.paginacao{justify-content:center}
.paginacao .pg-info{order:3;width:100%;text-align:center}
}
/* ---------- Bloco de antecedência ---------- */
.analise{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin-bottom:14px;box-shadow:var(--shadow)}
.analise h3{margin:0 0 2px;font-size:14.5px}
.analise .nota{font-size:12.5px;color:var(--ink-3);margin-bottom:14px}
.analise .resumos{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:16px}
.analise .resumos div .r{font-size:11.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.analise .resumos div .v{font-size:21px;font-weight:750;letter-spacing:-.01em}
.faixa{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:13px}
.faixa .rot{width:104px;flex:none;color:var(--ink-2)}
.faixa .trilho{flex:1;background:#EEF1F4;border-radius:5px;height:20px;overflow:hidden}
/* display:block é obrigatório aqui. A .barra é um , e em elemento
em linha o navegador ignora width, height e min-width — a barra ficava
invisível e a faixa parecia sempre vazia. A .trilho escapava disso por
ser filha de um flex, que blocifica os filhos; a .barra, não. */
.faixa .barra{display:block;height:100%;background:var(--brand);border-radius:5px;min-width:2px;transition:width .25s}
.faixa .barra.bom{background:var(--green)}
.faixa .barra.alerta{background:var(--amber)}
.faixa .barra.ruim{background:var(--red)}
.faixa .qtd{width:76px;flex:none;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.faixa .qtd b{color:var(--ink)}
/* Subtítulo dentro de um card de análise, quando ele traz mais de um
grupo de faixas — "Por categoria" e "Por departamento". */
.analise .sub-bloco{
font-size:11.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;
letter-spacing:.05em;margin:18px 0 9px;
}
/* Custo por departamento: nome de departamento é mais comprido que
"8 dias ou +", e o valor traz reais e contagem. As duas pontas
precisam de mais espaço que as faixas de antecedência. */
#c-departamentos .faixa .rot{width:148px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#c-departamentos .faixa .qtd{width:120px}
/* =====================================================================
Gaveta lateral de navegação
Abre pelo avatar ou pelo botão Menu. Substituiu a folha que subia de
baixo: com três módulos, a lista ficou longa demais para aquele
formato, e gaveta é o que se espera de um sistema de gestão.
===================================================================== */
header.app .avatar{cursor:pointer}
header.app .avatar:hover{background:rgba(255,255,255,.28)}
.gaveta-fundo{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:60;display:flex}
.gaveta{
background:#fff;width:284px;max-width:84vw;height:100%;overflow-y:auto;
box-shadow:2px 0 18px rgba(16,24,40,.18);animation:entraGaveta .2s ease-out;
display:flex;flex-direction:column;
}
@keyframes entraGaveta{from{transform:translateX(-28px);opacity:.4}to{transform:none;opacity:1}}
.gaveta .topo{
background:var(--brand);color:#fff;
padding:calc(20px + env(safe-area-inset-top)) 18px 18px;
}
.gaveta .topo .av{
width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.2);
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;margin-bottom:11px;
}
.gaveta .topo .nome{font-size:16px;font-weight:700;letter-spacing:-.01em}
.gaveta .topo .papel{font-size:12.5px;opacity:.85;margin-top:1px}
/* O departamento é um botão: abre e fecha a lista de telas. As telas
ficam sempre no HTML e são escondidas por CSS, então abrir não
redesenha nada. */
.gaveta .depto + .depto{border-top:1px solid var(--line)}
.gaveta button.grupo{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;
font-size:11.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;
letter-spacing:.06em;padding:15px 18px;
}
.gaveta button.grupo:hover{background:#FAFBFC}
.gaveta .depto.aberto button.grupo{color:var(--ink)}
.gaveta .seta{
width:7px;height:7px;flex:none;margin:-3px 2px 0 0;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg);transition:transform .18s ease;
}
.gaveta .depto.aberto .seta{transform:rotate(-135deg);margin-top:3px}
.gaveta .itens{display:none;padding-bottom:6px}
.gaveta .depto.aberto .itens{display:block}
/* O .item dos Checklists é global e vaza para cá: cantos arredondados,
sombra e 10px de margem embaixo. Num cartão de checklist isso é certo;
no menu, é o que fazia cada linha ocupar o dobro do necessário. Zerado
de propósito — não apague, ou a gaveta incha de novo. */
.gaveta a.item{
display:block;padding:10px 18px 10px 27px;color:var(--ink);text-decoration:none;
font-size:14.5px;background:none;border:0;border-left:3px solid transparent;
border-radius:0;box-shadow:none;margin:0;
}
.gaveta a.item:hover{background:#FAFBFC}
.gaveta a.item.aqui{
border-left-color:var(--brand);color:var(--brand);
font-weight:700;background:var(--brand-light);
}
.gaveta .fim{
margin-top:auto;border-top:1px solid var(--line);
padding:14px 18px calc(18px + env(safe-area-inset-bottom));
}
.gaveta .fim button{
width:100%;padding:11px;border-radius:10px;border:1px solid #D3D8DF;
background:#fff;color:var(--ink);font-size:14px;font-weight:650;cursor:pointer;
}
/* ---------- Entregas por dia ----------
Um cartão por data de entrega, que abre e fecha. Com trinta itens numa
data, cartão por item vira rolagem infinita — e quem está com a nota
fiscal na mão precisa bater o olho na lista inteira. */
.dia{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden;
}
.dia.atrasada{border-color:#EDC9C9}
.dia-topo{
display:flex;align-items:center;gap:10px;
padding:10px 14px 10px 4px;
}
.dia.aberta .dia-topo{border-bottom:1px solid var(--line)}
/* Só a área do texto abre e fecha. O "Receber tudo" é botão irmão: botão
dentro de botão é HTML inválido e o navegador desmonta a estrutura. */
.dia-abrir{
display:flex;align-items:center;gap:10px;flex:1;min-width:0;
background:none;border:0;padding:4px 12px;cursor:pointer;text-align:left;
font-family:inherit;font-size:inherit;color:var(--ink);border-radius:8px;
}
.dia-abrir:hover{background:#FAFBFC}
.dia-abrir .seta{color:var(--ink-3);font-size:12px;width:12px;flex:none}
.dia-data{font-weight:700;font-size:15px;flex:none}
.dia.atrasada .dia-data{color:var(--red)}
.dia-conta{flex:1;font-size:12.5px;color:var(--ink-3);min-width:0}
.dia-itens{padding:4px 0}
/* A linha do item: nome e quantidade à esquerda, ações à direita. */
.li{
display:flex;align-items:center;gap:10px;
padding:9px 16px;border-bottom:1px solid #F1F3F5;
}
.li:last-child{border-bottom:0}
.li.ok{background:#FAFDFB}
.li-txt{flex:1;min-width:0}
.li-nome{font-size:14px;font-weight:650;line-height:1.3}
.li.ok .li-nome{color:var(--ink-2)}
.li-sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.li-acoes{display:flex;gap:6px;flex:none}
.mini{
padding:7px 11px;border-radius:8px;border:1px solid #D3D8DF;background:#fff;
color:var(--ink-2);font-size:12.5px;font-weight:650;cursor:pointer;
font-family:inherit;white-space:nowrap;
}
.mini:hover{background:#FAFBFC}
.mini.ok{background:var(--green);border-color:var(--green);color:#fff}
.mini.ok:hover{filter:brightness(.94)}
.mini:disabled{opacity:.5;cursor:default}
@media (max-width:560px){
.li{flex-wrap:wrap}
.li-acoes{width:100%;justify-content:flex-end}
.dia-conta{width:100%;order:3}
}
/* ---------- Carona de carga ----------
Uma moldura em volta das demandas do mesmo trajeto. Sem barra de cor
na borda: o que agrupa visualmente é o fundo e o cabeçalho. */
.carona{
background:var(--brand-light);border:1px solid #E8CFCB;border-radius:var(--radius);
padding:12px;margin-bottom:14px;
}
.carona .dcard{margin-bottom:10px}
.carona .dcard:last-child{margin-bottom:0}
.carona-topo{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin:2px 2px 12px;
}
.carona-rota{flex:1;min-width:180px;font-size:14px;font-weight:700;color:var(--brand)}
.carona-rota .carona-det{
display:block;font-size:12.5px;font-weight:400;color:var(--ink-2);margin-top:3px;
}
.carona-topo .btn{flex:none;padding:9px 14px;font-size:13.5px}
/* ---------- Faixa de ambiente de teste ----------
Só aparece quando o config.js é o de teste. Fica no fluxo da página,
acima do cabeçalho, empurrando o conteúdo — nunca cobre um botão. */
#faixa-teste{
background:#FDE68A;color:#78350F;
font-size:12px;font-weight:800;letter-spacing:.04em;
text-align:center;padding:8px 12px;
padding-top:calc(8px + env(safe-area-inset-top));
border-bottom:1px solid #F0C64F;
}
/* Com a faixa presente, o cabeçalho não precisa reservar o topo do
aparelho de novo — a faixa já reservou. */
#faixa-teste + header.app{padding-top:16px}
/* =====================================================================
Facilities — chamados de manutenção
===================================================================== */
/* Tela de entrada do aplicativo público: boas-vindas e a escolha do
assunto. Dois cartões grandes lado a lado em vez de um menu — quem chega
está no celular, com pressa, e muitas vezes é a primeira vez. */
.hub{text-align:center;padding:26px 8px 20px}
.hub h1{margin:0;font-size:21px;font-weight:750;letter-spacing:-.01em;color:var(--ink)}
.hub p{margin:6px 0 0;font-size:14px;color:var(--ink-2)}
.modulos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modulos.empilhado{grid-template-columns:1fr}
.modulo{
display:block;width:100%;text-align:left;background:var(--card);
border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
padding:18px 16px;cursor:pointer;text-decoration:none;color:inherit;font:inherit;
}
.modulo:active{transform:scale(.985)}
.modulo .t{display:block;font-size:17px;font-weight:750;color:var(--brand-dark)}
.modulo .d{display:block;font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.4}
/* Voltar para a escolha de assunto. Discreto de propósito: é saída, não
convite — quem chegou no lugar certo não deve ser puxado para trás. */
.voltar{
background:none;border:0;padding:6px 2px;margin-bottom:6px;
font-size:13.5px;font-weight:650;color:var(--ink-2);cursor:pointer;font-family:inherit;
}
.voltar:active{color:var(--brand)}
/* Miniaturas das fotos anexadas */
.fotos{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.fotos:empty{margin-top:0}
.foto-min{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;
border:1px solid var(--line);background:#F1F3F5}
.foto-min img{width:100%;height:100%;object-fit:cover;display:block}
.foto-min .x{
position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;
border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:15px;
line-height:1;cursor:pointer;padding:0;
}
/* Fotos já gravadas, abertas por link temporário */
.galeria{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.galeria a{display:block;width:76px;height:76px;border-radius:10px;overflow:hidden;
border:1px solid var(--line)}
.galeria img{width:100%;height:100%;object-fit:cover;display:block}
.galeria .vazio-foto{font-size:12.5px;color:var(--ink-3)}
/* Etiqueta de status do chamado. As cores não são decoração: verde é
acabou, âmbar é esperando alguém de fora, azul é andando, vermelho é
parado por decisão. Quem bate o olho na lista lê a cor antes da palavra. */
.st{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;
border-radius:999px;white-space:nowrap}
.st-aberto {background:var(--red-bg); color:var(--red)}
.st-analise {background:var(--amber-bg); color:var(--amber)}
.st-orcamento {background:var(--amber-bg); color:var(--amber)}
.st-aprovado {background:var(--blue-bg); color:var(--blue)}
.st-reprovado {background:#EEF0F3; color:var(--ink-2)}
.st-andamento {background:var(--blue-bg); color:var(--blue)}
.st-concluido {background:var(--green-bg); color:var(--green)}
.st-cancelado {background:#EEF0F3; color:var(--ink-3)}
/* Prioridade: só aparece quando foge do normal */
.prio{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;
border-radius:6px;margin-left:6px}
.prio-alta{background:var(--amber-bg);color:var(--amber)}
.prio-emergencia{background:var(--red-bg);color:var(--red)}
.prio-baixa{background:#EEF0F3;color:var(--ink-3)}
/* Cartão de chamado nas listas */
.ch{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);padding:13px 14px;margin-bottom:10px;cursor:pointer}
.ch:active{transform:scale(.997)}
.ch .topo{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ch .num{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.ch .topo .st{margin-left:auto}
.ch .titulo{font-size:14.5px;font-weight:650;color:var(--ink);line-height:1.35}
.ch .onde{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.ch .pe{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);margin-top:7px}
/* O histórico do chamado carrega observação, e a linha do tempo original
era de uma linha só. Quebrar em vez de espremer: a observação é a parte
que explica o resto ("orçamento reprovado, valor acima do teto"). */
.linha-tempo .ev{flex-wrap:wrap}
.linha-tempo .ev .obs{flex-basis:100%;order:3;font-size:12.5px;color:var(--ink-3);
margin-top:2px;line-height:1.4}
/* Anexo no histórico do chamado — o PDF do orçamento, a nota do serviço */
.linha-tempo .ev .anexo{
display:inline-block;color:var(--brand-dark);font-weight:650;
text-decoration:underline;text-underline-offset:2px;
}
/* =====================================================================
Contagem de estoque
Feita para ser usada em pé, com uma mão, na frente da prateleira: a
linha inteira é clicável e o número aparece grande do lado direito.
===================================================================== */
.progresso{margin-bottom:14px}
.progresso .trilho{height:8px;border-radius:5px;background:#E4E7EB;overflow:hidden}
.progresso .barra{display:block;height:100%;background:var(--green);border-radius:5px;
min-width:2px;transition:width .25s}
.progresso .txt{font-size:12.5px;color:var(--ink-2);margin-top:6px;text-align:center}
.ci{display:flex;align-items:center;gap:12px;background:var(--card);
border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
padding:12px 14px;margin-bottom:8px;cursor:pointer}
.ci:active{transform:scale(.997)}
.ci.ok{border-color:#CBE7D3;background:#FBFEFC}
.ci.lancado{opacity:.55}
.ci-txt{flex:1;min-width:0}
.ci-nome{font-size:14.5px;font-weight:650;color:var(--ink);line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-sub{font-size:12px;color:var(--ink-3);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-num{flex:none;font-size:18px;font-weight:750;color:var(--ink);
font-variant-numeric:tabular-nums;min-width:58px;text-align:right}
.ci-num.grande{font-size:22px}
/* Contado muito fora do mês passado: âmbar, não vermelho — é um pedido
de conferência, não um erro. */
.ci-num.destoa{color:var(--amber)}
.ci-marca{flex:none;width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line);
background:#fff;font-size:17px;font-weight:800;color:var(--green);cursor:pointer;padding:0}
.ci.lancado .ci-marca{background:var(--green-bg);border-color:#BFE6CC}
/* O campo de digitar a quantidade: grande o bastante para conferir de
longe o que foi digitado antes de salvar. */
input.i.grandao{font-size:30px;font-weight:750;text-align:center;padding:14px 12px;
font-variant-numeric:tabular-nums}
/* ---- Contagem livre: campo com microfone, sugestões e linhas ---- */
.com-voz{display:flex;gap:8px;align-items:stretch}
.com-voz input.i{flex:1}
.mic{flex:none;width:48px;border:1px solid var(--line);border-radius:10px;background:#fff;
font-size:20px;cursor:pointer;padding:0;line-height:1}
.mic.ouvindo{background:var(--red-bg);border-color:#F0AFAF;animation:pulsa 1.2s infinite}
@keyframes pulsa{50%{opacity:.55}}
.sugestoes{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sugestoes:empty{margin-top:0}
.sug{text-align:left;background:var(--brand-light);border:1px solid #E7D3D0;border-radius:10px;
padding:9px 11px;font-size:13.5px;font-weight:650;color:var(--brand-dark);cursor:pointer;
font-family:inherit}
.sug .cod{display:block;font-size:11.5px;font-weight:500;color:var(--ink-2);margin-top:2px}
/* Nome que aparece duas vezes no mesmo grupo: pode ser real (duas
prateleiras) ou lançamento repetido. A tela marca, quem conta decide. */
.ci.repetido{border-color:#F0D8A8;background:#FFFDF7}
.btn.perigo{background:var(--red);color:#fff;border-color:var(--red)}
/* Duas fotos da etiqueta, lado a lado desde o começo. Cada botão mostra
o próprio estado: o que já foi lido fica marcado, para o estoquista ver
de relance o que falta. */
.duas-fotos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.duas-fotos .btn{display:flex;flex-direction:column;gap:3px;text-align:center;
padding:14px 10px;line-height:1.25}
.duas-fotos .rot{font-size:14px;font-weight:750}
.duas-fotos .rot em{font-style:normal;font-weight:500;opacity:.75;font-size:12px}
.duas-fotos .est{font-size:11.5px;font-weight:500;opacity:.85}
.duas-fotos .btn.feita{background:var(--green);border-color:var(--green);color:#fff}
.duas-fotos .btn.ghost.feita{color:#fff}
/* =====================================================================
Checklists
O item ocupa a largura toda e as duas respostas são botões grandes:
quem responde está de pé, com uma mão, às vezes com luva.
===================================================================== */
.item{background:var(--card);border:1px solid var(--line);border-radius:12px;
box-shadow:var(--shadow);padding:13px 14px;margin-bottom:10px}
.item.ok{border-color:#CBE7D3;background:#FBFEFC}
.item.nc{border-color:#F0C2C2;background:#FFFCFC}
.item-txt{font-size:14.5px;font-weight:650;color:var(--ink);line-height:1.35}
.item-txt .opc{font-size:11.5px;font-weight:500;color:var(--ink-3)}
.item-ajuda{font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.respostas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.resp{padding:12px 8px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
font-size:13.5px;font-weight:650;cursor:pointer;font-family:inherit;color:var(--ink-2)}
.resp.bom.on{background:var(--green-bg);border-color:#A8DCBB;color:var(--green)}
.resp.ruim.on{background:var(--red-bg);border-color:#F0AFAF;color:var(--red)}
.item .i{margin-top:10px}
.item-foto{display:flex;align-items:center;gap:10px;margin-top:10px}
.item-foto .btn{flex:1;padding:10px;font-size:13px}
.item-foto .btn.feita{background:var(--green-bg);border-color:#A8DCBB;color:var(--green)}
.item-foto .falta{font-size:11.5px;color:var(--red);font-weight:650}
/* ---- Montagem do modelo de checklist ---- */
.item-modelo{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);
padding:10px 0}
.item-modelo:first-child{border-top:0}
.im-txt{flex:1;min-width:0;cursor:pointer}
.im-nome{font-size:14px;font-weight:650;color:var(--ink);line-height:1.3}
.im-sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.im-btn{flex:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
background:#fff;font-size:15px;cursor:pointer;padding:0;color:var(--ink-2)}
.im-btn:disabled{opacity:.35;cursor:default}
.dias{display:flex;gap:6px;flex-wrap:wrap}
.dia-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
border-radius:8px;padding:7px 10px;font-size:13px;background:#fff;cursor:pointer}
.marca{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);
font-weight:500;margin-top:6px;cursor:pointer}
/* ===================================================================
Visão geral — o dashboard gerencial (visao-geral.html)
Os mesmos quatro feitios de bloco do painel de TV, mas em tema claro
e dimensionados para a mão. A grade cai para uma coluna no celular
sem media query: minmax com percentual resolve.
=================================================================== */
.recorte{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:11px 14px;margin-bottom:14px;font-size:14px;display:flex;
align-items:baseline;gap:7px;flex-wrap:wrap}
.recorte .rot{color:var(--ink-3);font-size:12.5px}
.recorte .carimbo{margin-left:auto;color:var(--ink-3);font-size:11.5px}
.db-area{font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;
letter-spacing:.07em;margin:18px 0 8px}
.db-area:first-child{margin-top:0}
.db-grade{display:grid;gap:11px;
grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.db-bloco{background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);padding:13px 15px;box-shadow:var(--shadow)}
.db-bloco h3{margin:0 0 9px;font-size:12.5px;font-weight:650;color:var(--ink-2)}
.db-numero{font-size:40px;font-weight:800;line-height:1;color:var(--ink);
font-variant-numeric:tabular-nums}
.db-abaixo{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.db-chips{display:flex;flex-wrap:wrap;gap:8px}
.db-chip{flex:1 1 auto;min-width:76px;border-radius:10px;padding:9px 11px;
background:var(--bg);border-left:3px solid var(--ink-3)}
.db-chip .v{font-size:23px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.db-chip .n{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.db-chip.cor-verde{border-left-color:var(--green);background:var(--green-bg)}
.db-chip.cor-ambar{border-left-color:var(--amber);background:var(--amber-bg)}
.db-chip.cor-vermelho{border-left-color:var(--red);background:var(--red-bg)}
.db-chip.cor-azul{border-left-color:var(--blue);background:var(--blue-bg)}
.db-chip.cor-cinza{border-left-color:var(--ink-3)}
.db-barras{display:flex;flex-direction:column;gap:7px}
.db-barra{display:grid;grid-template-columns:82px 1fr auto;align-items:center;
gap:9px;font-size:13px}
.db-barra .nome{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-barra .trilho{background:var(--bg);border-radius:999px;height:9px}
.db-barra .cheio{background:var(--brand);height:100%;border-radius:999px;min-width:3px}
.db-barra .v{font-weight:700;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.db-lista{display:flex;flex-direction:column}
.db-linha{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:baseline;
font-size:13px;padding:6px 0;border-bottom:1px solid var(--line)}
.db-linha:last-child{border-bottom:none}
.db-linha .esq{font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.db-linha .meio{color:var(--ink-3)}
.db-linha .dir{color:var(--ink);text-align:right;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.db-vazio{color:var(--ink-3);font-size:13px;font-style:italic}
/* Caixas de acesso no cadastro de pessoa (admin.html) */
.acesso-grupo{margin-bottom:14px}
.acesso-grupo .lb{display:block;font-size:13px;font-weight:650;color:var(--ink-2);
margin-bottom:6px}
.acesso-caixas{display:flex;flex-wrap:wrap;gap:7px}
.acesso-caixas label{display:flex;align-items:center;gap:6px;font-size:13px;
background:var(--bg);border:1px solid var(--line);border-radius:9px;
padding:7px 11px;cursor:pointer}
.acesso-caixas label:has(input:checked){background:var(--brand-light);
border-color:var(--brand);color:var(--brand-dark);font-weight:600}
/* De quem é o número deste bloco (visao-geral.html) */
.db-recorte{font-size:11.5px;color:var(--ink-3);margin:-5px 0 9px;
display:inline-block;background:var(--bg);border:1px solid var(--line);
border-radius:999px;padding:2px 9px}