/* Painéis 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 Painéis. */

:root {
    /* "Cinza" do Painéis = cor de TEXTO discreto. Fica LOCAL de propósito: no
       Portal --cinza significa "borda", então não pode virar token global. */
    --cinza: #5c6b6c;
}

/* Links: sem sublinhado, só no hover (comportamento próprio do Painéis). */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { margin: 0 0 6px; }
.sub { color: var(--cinza); margin: 0 0 22px; }

/* Cabeçalho (barra do topo) */
header.topo { background: #fff; border-bottom: 1px solid var(--borda); }
.topo .wrap { max-width: 980px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; 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; }
.topo nav { display: flex; gap: 6px; }
/* Links do menu com área de toque decente e item ATIVO que se enxerga de longe
   (pílula teal-leve + peso) — "onde estou?" é a pergunta que um menu responde. */
.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 */
main { max-width: 980px; margin: 0 auto; padding: 26px 20px; }

/* Cartão: o visual vem do DS (.card); aqui só o espaço entre cartões empilhados. */
.card { margin: 0 0 16px; }

/* KPIs e grade de indicadores */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.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: 24px; font-weight: 700; margin-top: 4px; }

/* Números positivos / negativos */
.ok { color: #1f7a4d; font-weight: 600; }
.ruim { color: #9a4a45; font-weight: 600; }

/* Código (o .mono já vem do DS; aqui o elemento <code>) */
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Tabelas: TODA tabela de tela usa a .tbl do design system (dentro de .rolavel).
   O fallback de <table> crua foi removido de propósito — sem ele, uma tabela
   esquecida sem classe aparece visivelmente "pelada" e é corrigida na hora. */

/* Célula de número: alinhada à direita e com algarismos tabulares (colunas de
   valores ficam em prumo — em painel financeiro, número torto mina a confiança). */
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Etiqueta / pílula */
.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); }

/* Pílula COM estado. Regra da casa: cinza é "morto/neutro" — nunca erro nem sucesso.
   Compostas (.pill.ok) para vencerem a cor da .pill acima; --variantes para HTML novo. */
.pill.ok,      .pill--ok      { background: var(--ok-fundo, #e7f1ef);   border-color: #cfe3da; color: #1f7a4d; }
.pill.ruim,    .pill--ruim    { background: var(--erro-fundo, #fceeed); border-color: #f5c2bd; color: #b3261e; }
.pill.atencao, .pill--atencao { background: #f7eed9;                    border-color: #e8d6b0; color: var(--ambar, #b07d1e); }

/* Submit invisível colocado como PRIMEIRO botão de formulários-grade: o Enter cai
   nele e o servidor só redesenha — em vez de disparar o primeiro botão de ação
   (era assim que um Enter distraído apagava o orçamento digitado). */
.submit-neutro { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

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

/* Listas limpas */
ul.clean { margin: 6px 0 0; padding-left: 18px; }
ul.clean li { margin: 3px 0; }

/* Rótulos de formulário do Painéis (bloco, discretos) — sobrepõem o label do DS. */
label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 400; color: var(--cinza); }

/* Caixa de erro do login (o DS tem .alert--erro; aqui mantemos o nome .erro usado nas telas). */
.erro { background: var(--erro-fundo); border: 1px solid #f5c2bd; color: #9a4a45; border-radius: var(--raio-sm); padding: 9px 12px; margin: 0 0 12px; }

/* (A regra COMPAT que pintava TODO .btn de teal saiu em ago/2026: as telas migraram
   para .btn--primary explícito na ação principal. Quando tudo é primário, nada é —
   agora o .btn puro é o secundário branco do design system, como nos outros apps.) */

/* ============================================================================
   FLUXO DE ENVIO À PROVA DE ERRO (jul/2026): cards de dataset com estado claro,
   painel de conferência antes de gravar e guia passo a passo de exportação.
   Só tokens do DS (com fallback); o zelo-ds.css é vendorizado — não editar lá. */

/* Alerta de ATENÇÃO (âmbar) — o DS só tem ok/erro. Mesmo par do status "aguardando". */
.alert--atencao { background: #f7eed9; border-color: #e8d6b0; color: var(--ambar, #b07d1e); }

/* ---- Card de dataset (tela de importação) ---- */
.ds-card { scroll-margin-top: 80px; }                 /* âncora #ds-<nome> não cola no topo */
.ds-card__topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ds-card__resumo { color: var(--cinza); font-size: 13.5px; margin: 6px 0 0; }
.ds-status { display: inline-block; margin-left: auto; padding: 3px 11px; border-radius: var(--raio-pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ds-status--nunca      { background: #eef2f2; color: #5c6b6c; }
.ds-status--aguardando { background: #f7eed9; color: var(--ambar, #b07d1e); }
.ds-status--fila       { background: #e6f0fa; color: var(--azul, #1d5a8a); }
.ds-status--ok         { background: var(--ok-fundo, #e7f1ef); color: var(--teal-escuro, #08322f); }
.ds-status--erro       { background: var(--erro-fundo, #fceeed); color: var(--erro, #b3261e); }
/* Borda esquerda acompanha o estado (dá pra ver de longe o que precisa de ação). */
.ds-card--erro       { border-left: 4px solid var(--erro, #b3261e); }
.ds-card--aguardando { border-left: 4px solid var(--ambar, #b07d1e); }
.ds-card--fila       { border-left: 4px solid var(--azul, #1d5a8a); }

/* ---- "Até onde fomos": até qual data já está no painel + de onde partir ---- */
.ds-proximo { margin: 10px 0 0; font-size: 13.5px; color: var(--teal-escuro, #08322f); background: #eef5f2; border: 1px solid #cfe3da; border-radius: var(--raio-sm, 8px); padding: 8px 12px; }
.ds-proximo--vazio { background: #f4f6f6; border-color: var(--borda); color: var(--cinza); }

/* ---- Painel de CONFERÊNCIA (confira antes de gravar) ---- */
.conferencia { margin-top: 12px; border: 1px solid #e8d6b0; background: #fdf8ee; border-radius: var(--raio-sm, 8px); padding: 12px 14px; }
.conferencia--calma { border-color: var(--borda); background: #f6fafa; }
.conferencia h3 { margin: 0 0 6px; font-size: 15px; color: var(--teal-escuro, #08322f); }
.conferencia .avisos { margin: 8px 0; padding: 0; list-style: none; }
.conferencia .avisos li { background: #f7eed9; border: 1px solid #e8d6b0; color: #7a5a12; border-radius: var(--raio-sm, 8px); padding: 8px 10px; margin: 6px 0; font-size: 13.5px; }
.conferencia .mudancas { font-size: 13.5px; margin: 6px 0; }
.conferencia .mudancas strong { color: var(--teal-escuro, #08322f); }
.conferencia__acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ---- Guia passo a passo (como exportar o arquivo) ---- */
.guia { margin-top: 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm, 8px); background: #fafcfc; }
.guia summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--teal-escuro, #08322f); list-style: none; }
.guia summary::-webkit-details-marker { display: none; }
.guia summary::before { content: '▸ '; }
.guia[open] summary::before { content: '▾ '; }
.guia__fonte { display: block; font-weight: 400; font-size: 12.5px; color: var(--cinza); margin-top: 2px; }
.guia__corpo { padding: 4px 16px 14px; border-top: 1px solid var(--borda); }
.guia__sistema { font-size: 13px; color: var(--cinza); margin: 8px 0 0; }
.guia__periodo { font-size: 13px; color: var(--teal-escuro, #08322f); background: #eef5f2; border: 1px solid #cfe3da; border-radius: var(--raio-sm, 8px); padding: 6px 10px; margin: 8px 0 0; }
.guia__passos { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; }
.guia__passos li { margin: 6px 0; }
.guia__dica    { display: block; font-size: 13px; color: var(--cinza); }
.guia__atencao { display: block; font-size: 13px; color: var(--ambar, #b07d1e); font-weight: 600; }
.guia__img { display: block; margin: 8px 0 4px; max-width: 420px; width: 100%; border: 1px solid var(--borda); border-radius: var(--raio-sm, 8px); cursor: zoom-in; }
.guia__colunas { font-size: 13px; color: var(--cinza); margin: 12px 0 0; }

/* ---- Frescor na lista de dashboards ---- */
.frescor { font-size: 13px; white-space: nowrap; }
.frescor--ok         { color: #1f7a4d; }
.frescor--vazio      { color: var(--cinza); }
.frescor--parcial    { color: var(--ambar, #b07d1e); font-weight: 600; }
.frescor--aguardando { color: var(--ambar, #b07d1e); font-weight: 600; }
.frescor--erro       { color: var(--erro, #b3261e); font-weight: 600; }