/* app.css — Design System Fresh Food (tokens copiados do portal) + telas da app de Metas */
:root {
  --ff-green:#1a7a4a; --ff-green-dark:#145c37; --ff-green-mid:#2ea866; --ff-green-light:#e8f5ee;
  --ff-yellow:#f5c842; --ff-red:#dc3545; --ff-red-light:#fdecea;
  --ff-bg:#f4f6f8; --ff-border:#dde1e7; --ff-text:#1a1f2e; --ff-text-muted:#6b7280; --ff-white:#ffffff;
  --ff-warn-bg:#fff3cd; --ff-warn-fg:#856404; --ff-amber-bg:#fff3e0; --ff-amber-fg:#b45309;
  --ff-blue-bg:#e8f0ff; --ff-blue-fg:#2563eb; --ff-amber-bar:#f5a623; --ff-blue-bar:#4a90d9;
  --ff-primary:var(--ff-green); --ff-danger:var(--ff-red); --ff-surface:var(--ff-white);
  --ff-surface-tinted:var(--ff-green-light); --ff-link:var(--ff-green); --ff-accent:var(--ff-yellow);
  --ff-font:'Segoe UI',system-ui,sans-serif;
  --ff-text-2xs:10px; --ff-text-xs:11px; --ff-text-base:14px; --ff-text-4xl:26px;
  --ff-weight-semibold:600; --ff-weight-bold:700; --ff-weight-extra:800; --ff-tracking-label:.5px;
  --ff-space-1:4px; --ff-space-2:8px; --ff-space-3:12px; --ff-space-4:16px; --ff-space-5:20px; --ff-space-6:24px; --ff-space-12:48px;
  --ff-radius:8px; --ff-radius-md:10px; --ff-radius-lg:12px; --ff-radius-xl:16px; --ff-radius-pill:20px;
  --ff-shadow-card:0 1px 3px rgba(0,0,0,.06); --ff-shadow-hover:0 4px 12px rgba(0,0,0,.08); --ff-shadow-modal:0 12px 40px rgba(0,0,0,.18);
  --ff-border-width:1px; --ff-border-width-input:1.5px; --ff-border-accent:3px; --ff-border-metric:4px;
  --ff-transition-fast:.12s; --ff-transition:.15s; --ff-transition-slow:.25s;
  --ff-sidebar-w:220px; --ff-content-pad:28px; --ff-portal-max:1100px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ff-bg); color: var(--ff-text); font: var(--ff-text-base)/1.45 var(--ff-font); }
.hidden { display: none !important; }
.portal { max-width: 1280px; margin: 0 auto; padding: var(--ff-content-pad); }
h1 { font-size: var(--ff-text-4xl); font-weight: var(--ff-weight-bold); margin: 0; }
h2 { font-size: 17px; font-weight: var(--ff-weight-bold); margin: 0 0 var(--ff-space-1); }
h3.sub { font-size: 14px; margin: var(--ff-space-6) 0 var(--ff-space-2); }
.micro { font-size: var(--ff-text-xs); text-transform: uppercase; letter-spacing: var(--ff-tracking-label); color: var(--ff-text-muted); font-weight: var(--ff-weight-semibold); }
.carregando { color: var(--ff-text-muted); padding: var(--ff-space-12); text-align: center; }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ff-space-4); flex-wrap: wrap; margin-bottom: var(--ff-space-5); }
.header-actions { display: flex; align-items: center; gap: var(--ff-space-2); flex-wrap: wrap; }

.card { background: var(--ff-surface); border: var(--ff-border-width) solid var(--ff-border); border-radius: var(--ff-radius-md); box-shadow: var(--ff-shadow-card); padding: var(--ff-space-5); margin-bottom: var(--ff-space-4); }
.card-desc { color: var(--ff-text-muted); margin: 0 0 var(--ff-space-3); max-width: 760px; }
.card-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ff-space-4); flex-wrap: wrap; }
.aviso-sessao { max-width: 480px; margin: 10vh auto; text-align: center; }

button, .btn-primary, .btn-secondary { font: inherit; cursor: pointer; border-radius: var(--ff-radius); padding: 9px 16px; border: var(--ff-border-width-input) solid transparent; font-weight: var(--ff-weight-semibold); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background var(--ff-transition), border-color var(--ff-transition); }
.btn-primary { background: var(--ff-green); color: var(--ff-white); }
.btn-primary:hover { background: var(--ff-green-dark); }
.btn-secondary { background: var(--ff-white); color: var(--ff-green); border-color: var(--ff-green); }
.btn-secondary:hover { background: var(--ff-green-light); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ff-green-mid); outline-offset: 1px; }

.select-sm, .input-busca, .campo input, textarea, .grade input, .grade select, .form-grade input {
  font: inherit; border: var(--ff-border-width-input) solid var(--ff-border); border-radius: var(--ff-radius); background: var(--ff-white); color: var(--ff-text); padding: 6px 10px;
}
.select-sm:focus, .input-busca:focus, textarea:focus, .grade input:focus, .grade select:focus, .form-grade input:focus { border-color: var(--ff-green); outline: none; }
.input-busca { min-width: 220px; }
textarea { width: 100%; resize: vertical; line-height: 1.5; }

.badge { border-radius: var(--ff-radius-pill); padding: 3px 10px; font-size: 12px; font-weight: var(--ff-weight-bold); background: var(--ff-warn-bg); color: var(--ff-warn-fg); }
.badge.fechado { background: var(--ff-green-light); color: var(--ff-green-dark); }

.resumo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--ff-space-3); margin-bottom: var(--ff-space-4); }
.metrica { background: var(--ff-surface); border: var(--ff-border-width) solid var(--ff-border); border-left: var(--ff-border-metric) solid var(--ff-green); border-radius: var(--ff-radius-md); padding: var(--ff-space-3) var(--ff-space-4); box-shadow: var(--ff-shadow-card); }
.metrica .valor { font-size: 22px; font-weight: var(--ff-weight-extra); margin-top: 2px; }
.metrica .det { color: var(--ff-text-muted); font-size: 12px; }
.metrica.aviso { border-left-color: var(--ff-amber-bar); }
.metrica.alerta { border-left-color: var(--ff-red); }

.abas { display: flex; gap: 2px; border-bottom: var(--ff-border-width) solid var(--ff-border); margin-bottom: var(--ff-space-4); overflow-x: auto; }
.abas button { background: none; border: none; border-bottom: var(--ff-border-accent) solid transparent; border-radius: 0; color: var(--ff-text-muted); padding: 10px 14px; white-space: nowrap; }
.abas button.ativa { color: var(--ff-green); border-bottom-color: var(--ff-green); }

.filtros { display: flex; gap: var(--ff-space-4); align-items: center; flex-wrap: wrap; margin: var(--ff-space-2) 0 var(--ff-space-3); }
.check { display: inline-flex; gap: 6px; align-items: center; color: var(--ff-text-muted); font-size: 13px; cursor: pointer; }
.progresso { min-width: 220px; }
.progresso .barra { height: 8px; background: var(--ff-border); border-radius: var(--ff-radius-pill); overflow: hidden; margin-top: 6px; }
.progresso .barra span { display: block; height: 100%; background: var(--ff-green); }

.tabela-rola { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--ff-border-width) solid var(--ff-border); border-radius: var(--ff-radius); }
.grade { width: 100%; border-collapse: collapse; font-size: 13px; }
.grade th { position: sticky; top: 0; background: #f9fafb; text-align: left; font-size: var(--ff-text-xs); text-transform: uppercase; letter-spacing: var(--ff-tracking-label); color: var(--ff-text-muted); font-weight: var(--ff-weight-semibold); padding: 8px; border-bottom: var(--ff-border-width) solid var(--ff-border); white-space: nowrap; }
.grade td { padding: 5px 8px; border-bottom: var(--ff-border-width) solid var(--ff-border); vertical-align: middle; white-space: nowrap; }
.grade tr:last-child td { border-bottom: 0; }
.grade .n { text-align: right; font-variant-numeric: tabular-nums; }
.grade input.num { width: 78px; text-align: right; padding: 4px 6px; }
.grade input.din { width: 104px; text-align: right; padding: 4px 6px; }
.grade input.obs { width: 200px; padding: 4px 6px; }
.grade input.dias { width: 52px; text-align: right; padding: 4px 6px; }
.grade select { padding: 4px 6px; }
.grade input.erro { border-color: var(--ff-red); background: var(--ff-red-light); }
.grade input.ok { border-color: var(--ff-green-mid); }
.grade tr.fora td { color: var(--ff-text-muted); background: #fafafa; }
.grade tr.falta td:first-child { box-shadow: inset 3px 0 0 var(--ff-amber-bar); }
.grade tr.clicavel { cursor: pointer; }
.grade tr.clicavel:hover td { background: var(--ff-green-light); }
.grade tr.total td { font-weight: var(--ff-weight-bold); background: #f9fafb; }
.grade .forte { font-weight: var(--ff-weight-bold); }
.grade .neg { color: var(--ff-red); }
.grade .loja-nome { font-weight: var(--ff-weight-semibold); }
.grade .cod { color: var(--ff-text-muted); font-size: 11px; }

.tag { display: inline-block; font-size: 10px; font-weight: var(--ff-weight-bold); border-radius: var(--ff-radius-pill); padding: 1px 7px; margin-left: 4px; vertical-align: middle; }
.tag-nova { background: var(--ff-blue-bg); color: var(--ff-blue-fg); }
.tag-realoc { background: var(--ff-amber-bg); color: var(--ff-amber-fg); }
.tag-piso { background: var(--ff-green-light); color: var(--ff-green-dark); }
.tag-manual { background: var(--ff-warn-bg); color: var(--ff-warn-fg); }

.faixa { border-radius: var(--ff-radius); padding: 10px 14px; margin-bottom: var(--ff-space-3); font-size: 13px; }
.faixa.aviso { background: var(--ff-warn-bg); color: var(--ff-warn-fg); }
.faixa.info { background: var(--ff-blue-bg); color: var(--ff-blue-fg); }
.faixa.erro { background: var(--ff-red-light); color: var(--ff-red); }
.faixa ul { margin: 6px 0 0; padding-left: 18px; }

.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ff-space-4); margin-top: var(--ff-space-3); }
.form-grade label { display: flex; flex-direction: column; gap: 4px; }
.form-grade .ajuda { color: var(--ff-text-muted); font-size: 12px; }
.faixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ff-space-4); }
.faixas ul { margin: 6px 0 0; padding-left: 18px; color: var(--ff-text); }
.zona-fechar { border-top: var(--ff-border-width) solid var(--ff-border); margin-top: var(--ff-space-6); padding-top: var(--ff-space-2); }

.linha-botoes { display: flex; gap: var(--ff-space-2); align-items: center; justify-content: flex-end; margin-top: var(--ff-space-3); flex-wrap: wrap; }
.editor-texto .linha-botoes { justify-content: flex-start; }
.salvo { color: var(--ff-text-muted); font-size: 12px; }

.modal { border: none; border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-modal); padding: var(--ff-space-6); max-width: 440px; width: calc(100% - 32px); }
.modal-largo { max-width: 720px; }
.modal::backdrop { background: rgba(26,31,46,.35); }
.campo { display: flex; flex-direction: column; gap: 4px; margin: var(--ff-space-3) 0; }
.erro-form { color: var(--ff-red); min-height: 1em; margin: 0; font-size: 13px; }
.conta { width: 100%; border-collapse: collapse; margin: var(--ff-space-2) 0 var(--ff-space-4); font-size: 13px; }
.conta td { padding: 5px 0; border-bottom: 1px dashed var(--ff-border); }
.conta td.n { text-align: right; font-variant-numeric: tabular-nums; }
.conta tr.res td { font-weight: var(--ff-weight-bold); border-bottom: 0; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ff-text); color: var(--ff-white); padding: 10px 16px; border-radius: var(--ff-radius); opacity: 0; transition: all var(--ff-transition-slow); pointer-events: none; z-index: 50; max-width: calc(100% - 32px); }
.toast.mostra { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.erro { background: var(--ff-red); }

.leitor .so-editor { display: none !important; }

@media (max-width: 768px) {
  .portal { padding: 16px; }
  h1 { font-size: 22px; }
  .page-header { align-items: flex-start; }
  .input-busca { min-width: 0; width: 100%; }
  .filtros { flex-direction: column; align-items: stretch; }
}

@media print {
  body { background: #fff; }
  .portal { padding: 0; max-width: none; }
  #conteudo > *:not(#aba-documento), #aba-documento > .editor-texto, .toast, dialog, #carregando { display: none !important; }
  #aba-documento { display: block !important; }
}