/* Painel da Lívia com o SEED Design System (IGR-069, fatia 2: camada visual comum).
   Este arquivo consome SO os tokens de static/seed-tokens.css (carregado antes, em base.html): nenhuma cor hexadecimal
   aqui. O tema claro/escuro vem dos proprios tokens: [data-theme] (escolha feita no botao "Tema", tema.js) ou, sem
   escolha, prefers-color-scheme. Mobile primeiro (375 px, sem rolagem horizontal da pagina). Sem estilo embutido (CSP).
   Sem marca da SEED: o painel usa o DS (tokens e componentes), o nome que aparece e "Lívia". */
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--seed-surface-subtle); color: var(--seed-text-primary); font-family: var(--seed-font-sans);
  font-size: var(--seed-txt-corpo-size); line-height: var(--seed-txt-corpo-lh); font-weight: var(--seed-txt-corpo-weight); }
/* link na casca (surface-subtle): text-brand-strong, que passa de 4,5:1 sobre ela (text-link mediu 4,23:1) */
a { color: var(--seed-text-brand-strong); text-underline-offset: 2px; }
a:hover { color: var(--seed-text-primary); }
h1 { font-size: var(--seed-txt-titulo-tela-size); line-height: var(--seed-txt-titulo-tela-lh); font-weight: var(--seed-txt-titulo-tela-weight);
  letter-spacing: var(--seed-txt-titulo-tela-ls); margin: var(--seed-sp-2) 0 var(--seed-sp-4); overflow-wrap: anywhere; }
h2 { font-size: var(--seed-txt-titulo-secao-size); line-height: var(--seed-txt-titulo-secao-lh); font-weight: var(--seed-txt-titulo-secao-weight);
  margin: var(--seed-sp-6) 0 var(--seed-sp-2); }
h3 { font-size: var(--seed-txt-corpo-size); font-weight: var(--seed-fw-bold); margin: var(--seed-sp-2) 0; }
p { margin: 0 0 var(--seed-sp-3); }
code { background: var(--seed-surface-sunken); color: var(--seed-text-primary); padding: 0 var(--seed-sp-1); border-radius: var(--seed-radius-2);
  font-family: var(--seed-font-mono); font-size: var(--seed-txt-rotulo-size); }

/* Barra de topo: o "chrome" nao segue o tema (SH15, §46): gradiente de marca nos dois temas, tinta branca. */
.topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--seed-sp-2) var(--seed-sp-4); padding: var(--seed-sp-2) var(--seed-sp-4);
  background: var(--seed-rail-background); color: var(--seed-text-on-brand-deep); position: sticky; top: 0; z-index: 5; }
.marca { font-weight: var(--seed-fw-bold); text-decoration: none; font-size: var(--seed-fs-h4); letter-spacing: var(--seed-txt-titulo-tela-ls);
  color: var(--seed-text-on-brand-deep); }
.marca:hover { color: var(--seed-text-on-brand-deep); }
.nav { display: flex; gap: var(--seed-sp-1); flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.nav a { padding: 0 var(--seed-sp-3); border-radius: var(--seed-radius-full); text-decoration: none; color: var(--seed-text-on-brand-deep);
  min-height: var(--seed-button-height-md); display: inline-flex; align-items: center; font-weight: var(--seed-fw-medium); }
.nav a:hover { color: var(--seed-rail-pill-text); background: var(--seed-rail-pill-hover); }
.nav a[aria-current="page"] { background: var(--seed-rail-pill-bg); color: var(--seed-rail-pill-text); font-weight: var(--seed-fw-bold); }
.acoes-topo { display: flex; gap: var(--seed-sp-2); align-items: center; margin-left: auto; }
.acoes-topo form.inline { margin: 0; }
.conteudo { max-width: 72rem; margin: 0 auto; padding: var(--seed-sp-4); }

/* Botoes (§1): primario, secundario, destrutivo; altura de toque 44 px (button-height-md). */
.btn, .btn-sec, .btn-perigo, .btn-tema { font: inherit; font-weight: var(--seed-button-font-weight); min-height: var(--seed-button-height-md);
  padding: 0 var(--seed-sp-4); border-radius: var(--seed-button-radius); border: 1px solid transparent; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--seed-button-gap); }
.btn { background: var(--seed-action-primary); color: var(--seed-text-on-action-primary); border-color: var(--seed-action-primary); }
.btn:hover { background: var(--seed-action-primary-hover); border-color: var(--seed-action-primary-hover); color: var(--seed-text-on-action-primary); }
.btn:active { background: var(--seed-action-primary-active); border-color: var(--seed-action-primary-active); }
.btn-sec { background: var(--seed-action-secondary-bg); color: var(--seed-button-secondary-text); border-color: var(--seed-button-secondary-border); }
.btn-sec:hover { background: var(--seed-action-secondary-bg-hover); color: var(--seed-button-secondary-text); }
.btn-sec:active { background: var(--seed-action-secondary-bg-active); }
.btn-perigo { background: var(--seed-action-destructive); color: var(--seed-text-on-action-destructive); border-color: var(--seed-action-destructive); }
.btn-perigo:hover { background: var(--seed-action-destructive-hover); border-color: var(--seed-action-destructive-hover); color: var(--seed-text-on-action-destructive); }
.btn-perigo:active { background: var(--seed-action-destructive-active); border-color: var(--seed-action-destructive-active); }
/* "Tema" e "Sair" vivem sobre a barra de topo (que nao muda com o tema): contorno claro, fundo transparente. */
.topo .btn-tema, .topo .btn-sec { background: transparent; color: var(--seed-text-on-brand-deep); border-color: var(--seed-text-on-brand-deep); }
.topo .btn-tema:hover, .topo .btn-sec:hover { background: var(--seed-rail-pill-hover); color: var(--seed-rail-pill-text); border-color: var(--seed-rail-pill-hover); }
.btn-tema { background: var(--seed-action-secondary-bg); color: var(--seed-button-secondary-text); border-color: var(--seed-button-secondary-border); }
/* Foco visivel (§0): anel duplo do DS; o outline transparente mantem o foco em modo de alto contraste. */
button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--seed-focus-ring); }
form.inline { display: inline-block; margin: 0 var(--seed-sp-2) var(--seed-sp-2) 0; }

/* Cartao (§26) e aviso (feedback). */
.cartao { background: var(--seed-card-bg); border: 1px solid var(--seed-card-border); border-radius: var(--seed-card-radius);
  box-shadow: var(--seed-shadow-raised); padding: var(--seed-sp-4); margin: var(--seed-sp-4) 0; }
.cartao > :last-child { margin-bottom: 0; }
.cartao > h2:first-child { margin-top: 0; }
.estreito { max-width: 26rem; margin-left: auto; margin-right: auto; }
.aviso { background: var(--seed-feedback-warning-bg); color: var(--seed-feedback-warning-text); border: 1px solid var(--seed-feedback-warning-border);
  border-radius: var(--seed-radius-4); padding: var(--seed-sp-3) var(--seed-sp-4); }
.aviso.erro { background: var(--seed-feedback-danger-bg); color: var(--seed-feedback-danger-text); border-color: var(--seed-feedback-danger-border); }
.vazio, .nota, .id { color: var(--seed-text-muted); }
.nota { font-size: var(--seed-txt-rotulo-size); }
.id { font-size: var(--seed-txt-rotulo-size); font-weight: var(--seed-fw-regular); font-family: var(--seed-font-mono); }

/* Campo (§2). 16 px no celular evita o zoom automatico do iOS ao focar. */
label { display: block; margin: var(--seed-sp-3) 0 var(--seed-field-gap); font-size: var(--seed-txt-rotulo-size);
  font-weight: var(--seed-txt-rotulo-weight); color: var(--seed-field-label); }
input[type=password], input[type=text], select, textarea { width: 100%; font: inherit; font-size: var(--seed-fs-field-touch);
  padding: 0 var(--seed-sp-3); border: 1px solid var(--seed-field-border); border-radius: var(--seed-field-radius);
  background: var(--seed-field-bg); color: var(--seed-field-value); min-height: var(--seed-field-height-md); }
textarea { padding: var(--seed-sp-3); }
input:hover, select:hover, textarea:hover { border-color: var(--seed-field-border-hover); }
::placeholder { color: var(--seed-field-placeholder); }
.cartao form .btn, .cartao form .btn-sec { margin-top: var(--seed-sp-3); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Etiquetas (chips) de estado. */
.chips { display: flex; flex-wrap: wrap; gap: var(--seed-sp-1) var(--seed-sp-2); margin: var(--seed-sp-1) 0 var(--seed-sp-2); }
.chip { font-size: var(--seed-txt-rotulo-size); font-weight: var(--seed-txt-rotulo-weight); line-height: var(--seed-txt-rotulo-lh);
  padding: var(--seed-sp-1) var(--seed-sp-2); border-radius: var(--seed-radius-full); background: var(--seed-surface-sunken);
  color: var(--seed-text-secondary); border: 1px solid var(--seed-border-default); }
.chip.ok { background: var(--seed-feedback-success-bg); color: var(--seed-feedback-success-text); border-color: var(--seed-feedback-success-border); }
.chip.alerta { background: var(--seed-feedback-warning-bg); color: var(--seed-feedback-warning-text); border-color: var(--seed-feedback-warning-border); }
.chip.erro { background: var(--seed-feedback-danger-bg); color: var(--seed-feedback-danger-text); border-color: var(--seed-feedback-danger-border); }
.erro-txt { color: var(--seed-feedback-danger-text); }

/* Filtros (pilulas) e listas. */
.filtros { display: flex; gap: var(--seed-sp-2); flex-wrap: wrap; }
.filtros a { padding: 0 var(--seed-sp-4); border: 1px solid var(--seed-border-strong); border-radius: var(--seed-radius-full); text-decoration: none;
  min-height: var(--seed-button-height-md); display: inline-flex; align-items: center; color: var(--seed-text-primary); background: var(--seed-surface-raised); }
.filtros a:hover { background: var(--seed-action-secondary-bg-hover); }
.filtros a[aria-current="true"] { background: var(--seed-action-primary); color: var(--seed-text-on-action-primary); border-color: var(--seed-action-primary); font-weight: var(--seed-fw-bold); }
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--seed-sp-2); }
.lista.compacta li { padding: var(--seed-sp-1) 0; }
.item-conversa { display: grid; gap: var(--seed-sp-1); background: var(--seed-card-bg); border: 1px solid var(--seed-card-border);
  border-radius: var(--seed-card-radius); box-shadow: var(--seed-shadow-raised); padding: var(--seed-sp-3) var(--seed-sp-4);
  text-decoration: none; color: var(--seed-text-primary); min-width: 0; }
.item-conversa:hover { border-color: var(--seed-border-strong); }
.item-conversa .previa { color: var(--seed-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-conversa .hora { font-size: var(--seed-txt-rotulo-size); color: var(--seed-text-muted); }
.item-lote { display: flex; justify-content: space-between; align-items: center; gap: var(--seed-sp-3); flex-wrap: wrap; background: var(--seed-card-bg);
  border: 1px solid var(--seed-card-border); border-radius: var(--seed-card-radius); box-shadow: var(--seed-shadow-raised); padding: var(--seed-sp-3) var(--seed-sp-4); }

/* Historico da conversa: entrada e saida diferem por alinhamento, superficie e canto de 2 px, nunca so por cor (CH5, §55). */
.mensagens { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--seed-sp-2); }
.msg { max-width: 92%; padding: var(--seed-sp-2) var(--seed-sp-3); border-radius: var(--seed-radius-4); border: 1px solid var(--seed-border-default); min-width: 0; }
.msg.entrada { background: var(--seed-surface-raised); justify-self: start; border-top-left-radius: var(--seed-radius-1); }
.msg.saida { background: var(--seed-surface-brand-subtle); border-color: var(--seed-feedback-success-border); justify-self: end; border-top-right-radius: var(--seed-radius-1); }
.msg.rascunho { border-style: dashed; border-width: 2px; border-color: var(--seed-feedback-warning-border); background: var(--seed-feedback-warning-bg);
  color: var(--seed-feedback-warning-text); max-width: 100%; justify-self: stretch; }
.msg .meta { font-size: var(--seed-txt-rotulo-size); color: var(--seed-text-muted); margin-bottom: var(--seed-sp-1); }
.msg.rascunho .meta { color: var(--seed-feedback-warning-text); }
.msg .texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.rascunho-acoes { margin-top: var(--seed-sp-3); }
.rascunho-acoes label { color: var(--seed-feedback-warning-text); }

/* Funil: colunas em quadro rolavel (a rolagem e do quadro, nao da pagina) e tabela de estatisticas (§28/§29 do canon nao
   cobrem tabela de dados deste porte: so tokens de superficie, borda e texto). */
.quadro { display: flex; gap: var(--seed-sp-3); overflow-x: auto; padding-bottom: var(--seed-sp-2); scroll-snap-type: x proximity; }
.coluna { flex: 0 0 min(17rem, 82vw); background: var(--seed-surface-sunken); border: 1px solid var(--seed-border-subtle);
  border-radius: var(--seed-card-radius); padding: var(--seed-sp-2); scroll-snap-align: start; }
.coluna.saida { border-style: dashed; border-color: var(--seed-border-strong); }
.coluna h3 { display: flex; justify-content: space-between; align-items: center; gap: var(--seed-sp-2); }
.contagem { background: var(--seed-surface-raised); color: var(--seed-text-secondary); border: 1px solid var(--seed-border-default);
  border-radius: var(--seed-radius-full); padding: 0 var(--seed-sp-2); font-size: var(--seed-txt-rotulo-size); }
.card { border: 1px solid var(--seed-card-border); border-radius: var(--seed-radius-4); box-shadow: var(--seed-shadow-raised);
  padding: var(--seed-sp-2) var(--seed-sp-3); margin: var(--seed-sp-2) 0; background: var(--seed-card-bg); }
.mover { display: grid; grid-template-columns: 1fr auto; gap: var(--seed-sp-2); margin-top: var(--seed-sp-2); }
.filtro-produto { display: grid; grid-template-columns: 1fr auto; gap: var(--seed-sp-2); align-items: end; max-width: 24rem; }
.filtro-produto label { grid-column: 1 / -1; margin-bottom: 0; }
.tabela-rolagem { overflow-x: auto; background: var(--seed-card-bg); border: 1px solid var(--seed-card-border); border-radius: var(--seed-card-radius); }
.tabela { border-collapse: collapse; width: 100%; min-width: 30rem; }
.tabela th, .tabela td { text-align: left; padding: var(--seed-sp-2) var(--seed-sp-3); border-bottom: 1px solid var(--seed-border-subtle); }
.tabela th { background: var(--seed-surface-sunken); color: var(--seed-text-secondary); font-size: var(--seed-txt-rotulo-size); font-weight: var(--seed-txt-rotulo-weight); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tr.saida td { color: var(--seed-text-muted); }

/* Painel: metricas, gasto contra o teto, faixa de parada. */
.grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--seed-sp-3); margin: var(--seed-sp-4) 0; }
.metrica { background: var(--seed-card-bg); border: 1px solid var(--seed-card-border); border-radius: var(--seed-card-radius);
  box-shadow: var(--seed-shadow-raised); padding: var(--seed-sp-3) var(--seed-sp-4); display: grid; align-content: start; text-decoration: none;
  color: var(--seed-text-secondary); min-width: 0; }
a.metrica:hover { border-color: var(--seed-border-strong); }
.metrica .num { font-size: var(--seed-fs-h3); line-height: var(--seed-lh-heading); font-weight: var(--seed-fw-bold); color: var(--seed-text-primary); }
.gasto { margin: var(--seed-sp-3) 0; }
.gasto-linha { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--seed-sp-1); }
progress { width: 100%; height: var(--seed-sp-3); border: 0; border-radius: var(--seed-radius-full); overflow: hidden; background: var(--seed-surface-sunken);
  accent-color: var(--seed-action-primary); }
progress::-webkit-progress-bar { background: var(--seed-surface-sunken); }
progress::-webkit-progress-value { background: var(--seed-action-primary); }
progress::-moz-progress-bar { background: var(--seed-action-primary); }
.faixa-parada { background: var(--seed-feedback-danger-bg); border-color: var(--seed-feedback-danger-border); color: var(--seed-feedback-danger-text); }

@media (min-width: 700px) {
  .grade { grid-template-columns: repeat(4, 1fr); }
  .coluna { flex-basis: 15rem; }
  .conteudo { padding: var(--seed-sp-6); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }