/* Custeio Zelo — estilos ESPECÍFICOS deste app.
   Tokens, base (body/campos/botões) e componentes (.btn/.card/.tbl/.alert…) vêm do
   zelo-ds.css, carregado ANTES deste arquivo. Aqui fica só o que é do Custeio. */

:root {
    /* Texto discreto (mesma escolha local dos Painéis; no Portal --cinza é borda). */
    --cinza: #5c6b6c;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { margin: 0 0 6px; }
.sub { color: var(--cinza); margin: 0 0 18px; }
.opc { color: var(--cinza); font-weight: 400; font-size: 12.5px; }
/* Titulo de secao dentro de card (um tamanho SO — antes cada tela inventava o seu) */
.sec-titulo { font-size: 16px; margin: 0 0 8px; padding: 0 2px; }
/* Nota de rodape de formulario/tabela */
.nota { color: var(--cinza); font-size: 12.5px; margin: 0; }
/* Link de voltar no topo das telas de detalhe */
.voltar { margin: 0 0 6px; }

/* Cabeçalho (barra do topo) */
header.topo { background: #fff; border-bottom: 1px solid var(--borda); }
.topo .wrap { max-width: 1120px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.marca { font-weight: 700; color: var(--teal); display: inline-flex; align-items: center; gap: 8px; }
.marca__dot { display: inline-grid; place-items: center; width: 23px; height: 23px; background: var(--teal); color: #fff; border-radius: var(--raio-sm); font-size: 13px; font-weight: 700; }
/* O cliente em contexto, sempre à vista: a defesa contra "lancei no cliente errado". */
.ctx { background: var(--teal-leve); color: var(--teal); border: 1px solid var(--borda); border-radius: var(--raio-pill); padding: 3px 12px; font-size: 13px; font-weight: 700; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo nav { display: flex; gap: 6px; }
.topo nav a { padding: 7px 11px; border-radius: var(--raio-pill); color: var(--texto); }
.topo nav a:hover { background: var(--hover); text-decoration: none; }
.topo nav a.on { font-weight: 700; color: var(--teal); background: var(--teal-leve); }
.topo .quem { margin-left: auto; color: var(--cinza); font-size: 13px; }
.topo form { margin: 0; }

/* Miolo: mais largo que os irmãos (1120px) — catálogo é tabela densa. */
main { max-width: 1120px; margin: 0 auto; padding: 26px 20px; }

.card { margin: 0 0 16px; }
.card--tabela { padding: 14px 14px 10px; }

/* Título + ação principal na mesma linha */
.titulo-acoes { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* Grade de clientes (escolha) */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.grid--clientes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cliente-card { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; color: var(--texto); }
.cliente-card:hover { text-decoration: none; border-color: var(--teal); }
.cliente-card strong { font-size: 16px; }

/* KPI (detalhe do insumo) */
.kpi { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: 16px; }
.kpi .rot { color: var(--cinza); font-size: 13px; }
.kpi .val { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Números em coluna: prumo. Em custeio, número torto mina a confiança. */
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Etiqueta / pílula (regra da casa: cinza = morto/neutro, verde = sucesso) */
.pill { display: inline-block; background: #eef4f4; border: 1px solid var(--borda); border-radius: var(--raio-pill); padding: 2px 10px; font-size: 12px; color: var(--cinza); }
.pill--ok      { background: var(--ok-fundo, #e7f1ef);   border-color: #cfe3da; color: #1f7a4d; }
.pill--ruim    { background: var(--erro-fundo, #fceeed); border-color: #f5c2bd; color: #b3261e; }
/* Ambar mais escuro que o do DS: #b07d1e sobre o fundo claro reprovava contraste (3,1:1). */
.pill--atencao { background: #f7eed9;                    border-color: #e8d6b0; color: #7d5a12; }

/* Item selecionado numa fileira de pills (mes do retrato): peso + borda, nao so cor. */
.pill--atual { border: 2px solid var(--teal, #0C4448); color: var(--teal, #0C4448); font-weight: 700; background: var(--teal-leve, #e4eeee); }

/* Curva ABC: A e "os que mais valem" — destaque, nunca vermelho (vermelho = problema). */
.pill--abc-a { background: var(--teal-leve, #e4eeee); border-color: #b8d0d0; color: var(--teal, #0C4448); font-weight: 700; }
.pill--abc-b { background: #eef4f4; border-color: var(--borda); color: var(--texto, #22333b); }
.pill--abc-c { background: transparent; border-color: var(--borda); color: var(--cinza); }

/* Selo de FRESCOR da cotação — compromisso do plano: toda tela diz de quando é o preço. */
.frescor { font-size: 13px; white-space: nowrap; font-weight: 600; }
.frescor--ok      { color: #1f7a4d; }
.frescor--atencao { color: #7d5a12; }
.frescor--ruim    { color: var(--erro, #b3261e); }

/* Listra de farol na 1a celula da tela de Precos: no celular as ultimas colunas
   (o farol!) somem atras da rolagem — a listra mantem o veredito sempre a vista. */
.risco--ok td:first-child      { box-shadow: inset 3px 0 0 #1f7a4d; }
.risco--atencao td:first-child { box-shadow: inset 3px 0 0 #b07d1e; }
.risco--ruim td:first-child    { box-shadow: inset 3px 0 0 #b3261e; }

/* Linha de item descontinuado/usuário desativado: presente, mas visivelmente morto. */
.linha--morta td { color: var(--cinza); }
.linha--morta a { color: var(--cinza); }

/* Contagem de inventário: item já resolvido ganha fundo suave (o olho pula pro que falta). */
.linha--resolvida td { background: #f2f7f5; }
.tbl--contagem select { max-width: 140px; }

/* O DS veste input POR TIPO (text/date/number…) e deixa de fora o type=search e
   os inputs sem type das telas de lote — que ficavam com a cara crua do navegador,
   destoando dos selects na mesma linha. Mesmo visual, largura natural (são campos
   de linha, não de formulário largo). */
input[type="search"], input:not([type]) {
    padding: 9px 12px; font: inherit; color: var(--texto);
    background: var(--branco, #fff); border: 1.5px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    transition: border-color .12s, box-shadow .12s;
}

/* Formulários em linha (filtros, cotação rápida) */
.form-linha { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filtros { margin: 0 0 14px; }
.check-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--texto); font-weight: 400; margin: 0; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; margin-top: 4px; }

/* Escolha de unidade no cadastro de insumo: caixas clicáveis, não um select seco. */
.radios { display: grid; gap: 8px; margin-top: 4px; }
.radio-caixa { display: flex; gap: 10px; align-items: baseline; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; cursor: pointer; font-weight: 400; margin: 0; }
.radio-caixa:has(input:checked) { border-color: var(--teal); background: var(--teal-leve); }
.radio-caixa strong { min-width: 28px; }
.radio-caixa span { color: var(--cinza); font-size: 13px; }

/* Campo "por apresentação" no lote */
.lote-por { display: inline-flex; gap: 8px; align-items: center; }

/* Rótulos de formulário (bloco, discretos) */
label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 400; color: var(--cinza); }

/* Caixa de erro (mesmo nome usado nos irmãos) */
.erro { background: var(--erro-fundo, #fceeed); border: 1px solid #f5c2bd; color: #9a4a45; border-radius: var(--raio-sm); padding: 9px 12px; margin: 0 0 12px; }

/* Alerta de ATENÇÃO (âmbar) — o DS só tem ok/erro. */
.alert--atencao { background: #f7eed9; border-color: #e8d6b0; color: #7d5a12; }

/* Faixa de dev */
.devbar { background: #eef4f4; border: 1px solid var(--borda); color: var(--cinza); border-radius: var(--raio); padding: 8px 12px; font-size: 13px; margin-bottom: 16px; }

/* Tabela rolável no celular */
.rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rolavel table { min-width: 560px; }

ul.clean { margin: 6px 0 0; padding-left: 18px; }
ul.clean li { margin: 6px 0; }

.sub-cel { color: var(--cinza); font-size: 12.5px; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* ————— Telas estreitas ————— */
@media (max-width: 860px) {
    .topo .wrap { padding: 10px 14px; gap: 8px 12px; }
    /* O menu vira um trilho de dedo: uma linha só, rola de lado — nunca quebra
       em 3 linhas comendo um terço da tela do celular. */
    .topo nav { order: 9; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; }
    .topo nav::-webkit-scrollbar { display: none; }
    .topo nav a { white-space: nowrap; }
    /* Quem esta logado ja sabe quem e — em tela estreita o nome custava uma linha. */
    .topo .quem { display: none; }
    .topo form { margin-left: auto; }
    main { padding: 18px 14px; }
}

@media (max-width: 640px) {
    /* Cotações em lote e contagem de inventário são usadas DE PÉ, no celular.
       Em tela estreita a tabela empilha em cartões: a coluna de digitar nunca
       pode ficar escondida atrás de rolagem lateral. */
    .rolavel .tbl--lote, .rolavel .tbl--contagem { min-width: 0; }
    .tbl--lote thead, .tbl--contagem thead { display: none; }
    .tbl--lote, .tbl--lote tbody, .tbl--contagem, .tbl--contagem tbody { display: block; }
    .tbl--lote tr, .tbl--contagem tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 4px; border-bottom: 1px solid var(--borda); }
    .tbl--lote td, .tbl--contagem td { display: block; padding: 0; border: 0; }
    .tbl--lote tr > td:nth-child(1) { grid-area: 1 / 1; font-weight: 600; }
    .tbl--lote tr > td:nth-child(3) { grid-area: 1 / 2; justify-self: end; }
    .tbl--lote tr > td:nth-child(2) { grid-area: 2 / 1; text-align: left; align-self: center; }
    .tbl--lote tr > td:nth-child(4) { grid-area: 2 / 2; justify-self: end; }
    .tbl--contagem tr > td:nth-child(1) { grid-area: 1 / 1; }
    .tbl--contagem tr > td:nth-child(5) { grid-area: 1 / 2; justify-self: end; }
    .tbl--contagem tr > td:nth-child(2) { grid-area: 2 / 1; white-space: nowrap; }
    .tbl--contagem tr > td:nth-child(3) { grid-area: 3 / 1; white-space: nowrap; }
    .tbl--contagem tr > td:nth-child(3)::before { content: '+ '; color: var(--cinza); }
    .tbl--contagem tr > td:nth-child(4) { grid-area: 2 / 2 / 4 / 3; align-self: center; justify-self: end; }
    /* Empilhado, o fundo de "item resolvido" pinta o cartão inteiro. */
    .linha--resolvida td { background: none; }
    .linha--resolvida { background: #f2f7f5; }
    /* Dedo no estoque: o checkbox "zero" precisa de alvo de toque decente. */
    .tbl--contagem .check-inline { padding: 8px 4px; }
    .tbl--contagem .check-inline input[type="checkbox"] { width: 22px; height: 22px; }
}