/* O que é de UMA tela só: grade de colunas de cada lista e a porta de entrada. */

/* ── Início ───────────────────────────────────────────────────────────── */
.depositos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.deposito { position: relative; overflow: hidden; display: grid; gap: 4px; padding: 20px 18px 16px; background: var(--superficie); border-radius: var(--raio-grande); border: 1px solid color-mix(in srgb, var(--borda) 70%, transparent); box-shadow: var(--sombra); color: inherit; text-decoration: none; transition: transform var(--duracao), box-shadow var(--duracao); }
.deposito::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--cor-viva); }
.deposito:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.deposito__nome { display: flex; align-items: center; gap: 8px; font: 800 .78rem/1.2 var(--fonte); letter-spacing: .09em; text-transform: uppercase; color: var(--cor); }
.deposito__n { font: 800 1.75rem/1.1 var(--fonte); font-variant-numeric: tabular-nums; }
.deposito__n small { font: 600 var(--t-2)/1 var(--fonte); color: var(--texto-2); }
.deposito__base { color: var(--texto-2); font-size: var(--t-1); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.deposito__seta { margin-top: 6px; color: var(--cor); font-weight: 800; font-size: var(--t-1); display: inline-flex; align-items: center; gap: 4px; }
.deposito__seta .icone { width: 16px; height: 16px; }

/* ── grades das listas (computador); no celular cada tela diz quem ocupa a linha inteira ── */
.linhas--nota     { --colunas: 30px minmax(200px, 1.6fr) 104px minmax(170px, 1.15fr) 158px minmax(140px, 1fr); }
.linhas--separar  { --colunas: minmax(200px, 1.5fr) 104px 118px 160px 52px minmax(130px, 1fr); }
.linhas--saldo    { --colunas: minmax(210px, 1.8fr) 124px 110px 110px 120px 92px; }
.linhas--contagem { --colunas: minmax(210px, 1.8fr) 140px 180px 176px; }
.linhas--req      { --colunas: minmax(200px, 1.6fr) 104px 110px 110px 168px minmax(110px, .9fr); }
.linhas--nova     { --colunas: minmax(200px, 1.5fr) 110px 168px minmax(140px, 1.2fr) 48px; }
.linhas--mov      { --colunas: 92px 104px minmax(0, 1.2fr) minmax(0, 1.4fr) 100px 96px minmax(0, .75fr) minmax(0, .8fr); }
.linhas--decididas{ --colunas: 140px minmax(180px, 1.4fr) 90px minmax(200px, 1.4fr) minmax(110px, .8fr); }
.linhas--semana   { --colunas: minmax(200px, 1.6fr) 108px 108px 108px 116px 124px; }
.linhas--recebimento { --colunas: 96px minmax(210px, 1.6fr) 104px 140px minmax(150px, 1fr) minmax(110px, .8fr); }
.linhas--relatorio { --colunas: minmax(200px, 1.8fr) 130px minmax(150px, .9fr); }
.par { display: contents; }
.entra .etiqueta { margin-right: 6px; }
.entra small { display: block; margin-top: 3px; line-height: 1.35; }
.linha a { color: var(--marca); font-weight: 700; }
.mov-mais { color: var(--estoque); } .mov-menos { color: var(--erro); }
.validade { white-space: nowrap; }
.validade-contada input { width: 100%; }

.pendencia { display: grid; gap: 10px; padding: 16px 18px 16px 16px; background: var(--superficie); border-radius: var(--raio-grande); border: 1px solid color-mix(in srgb, var(--borda) 70%, transparent); border-left: 6px solid var(--cor-viva); box-shadow: var(--sombra); }
.pendencia__topo { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; color: var(--texto-2); font-size: var(--t-1); }
.pendencia__texto { font: 700 1.0625rem/1.35 var(--fonte); }
.pendencia__base { color: var(--texto-2); font-size: var(--t-1); }
.pendencia form { padding-top: 10px; border-top: 1px dashed var(--borda); }

/* ── porta de entrada ─────────────────────────────────────────────────── */
.porta { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; color: var(--sobre-marca); background:
  radial-gradient(900px 500px at 15% 0%, rgb(255 255 255 / .14), transparent 65%),
  linear-gradient(140deg, var(--vinho-1) 0%, var(--vinho-2) 48%, var(--tinta) 100%); position: relative; }
.porta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 26px); }
.porta__cartao { position: relative; width: min(420px, 100%); padding: 30px 28px 26px; border-radius: 22px; background: var(--superficie); color: var(--texto); box-shadow: 0 30px 70px rgb(0 0 0 / .45); text-align: center; }
.porta__cartao > * + * { margin-top: 14px; }
.porta__logo { width: 132px; height: auto; margin: 0 auto; }
.porta__titulo { margin: 14px 0 0; font: 800 1.5rem/1.15 var(--fonte); letter-spacing: -.015em; }
.porta__sub { margin: 4px 0 0; color: var(--texto-2); font-size: var(--t-1); }
.porta form { text-align: left; display: grid; gap: 12px; margin-top: 18px; }
.porta .botao--principal { width: 100%; }
.porta__portal { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--toque); color: var(--marca); font-weight: 700; text-decoration: none; }

@media (max-width: 820px) {
  .linhas--nota     { --colunas-celular: minmax(0, .75fr) minmax(0, 1.25fr); }
  .linhas--nota .linha > .ordem { display: none; }
  .linhas--nota .linha > .entra { grid-column: 1 / -1; }
  .linhas--nota .linha > .faturado, .linhas--nota .linha > .recebido { order: 1; }
  .linhas--nota .linha > .faturado { padding-bottom: 13px; }
  .linhas--nota .linha > .motivo { order: 2; }
  .linhas--separar  { --colunas-celular: minmax(0, 1fr) minmax(0, 1fr); }
  .linhas--separar .par { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
  .linhas--saldo    { --colunas-celular: repeat(3, minmax(0, 1fr)); }
  .linhas--saldo .linha > .acao { grid-column: 1 / -1; }
  .linhas--saldo .linha > .acao .botao { width: 100%; }
  .linhas--contagem { --colunas-celular: minmax(0, .8fr) minmax(0, 1.2fr); }
  .linhas--req      { --colunas-celular: minmax(0, 1fr) minmax(0, 1fr); }
  .linhas--nova     { --colunas-celular: minmax(0, 1fr) auto; }
  .linhas--nova .linha > .sugerido, .linhas--nova .linha > .origem { grid-column: 1 / -1; }
  .linhas--mov      { --colunas-celular: minmax(0, 1fr) minmax(0, 1fr); }
  .linhas--decididas{ --colunas-celular: minmax(0, 1fr) minmax(0, 1fr); }
  .linhas--semana   { --colunas-celular: repeat(3, minmax(0, 1fr)); }
  .linhas--recebimento, .linhas--relatorio { --colunas-celular: minmax(0, 1fr) minmax(0, 1fr); }
  .porta__cartao { padding: 26px 20px 22px; }
}

/* ── Relatórios: abas, manchete e indicadores em linha (o número com a cor do veredito, a base e o que fazer ao lado) ── */
.abas--relatorios .aba { font-size: var(--t-1); }
.relatorio-manchete__titulo { margin: 0; font: 800 1.25rem/1.3 var(--fonte); letter-spacing: -.005em; }
.relatorio-manchete__sub { margin: 6px 0 0; color: var(--texto-2); }
.relatorio-ler { margin: 0 2px; max-width: 78ch; }
.relatorio-avisos { padding: 0 2px; color: var(--texto-2); font-size: var(--t-1); }
.relatorio-avisos summary { display: inline-flex; align-items: center; min-height: var(--toque); cursor: pointer; color: var(--marca); font-weight: 700; }
.relatorio-avisos ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.relatorio > * + * { margin-top: 18px; }
.grupo-indicadores .secao-titulo { display: flex; align-items: center; gap: 8px; }
.indicadores { background: var(--superficie); border-radius: var(--raio-grande); border: 1px solid color-mix(in srgb, var(--borda) 70%, transparent); box-shadow: var(--sombra); overflow: hidden; }
.indicador { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 6px 22px; align-items: center; padding: 16px 18px 16px 16px; border-left: 6px solid var(--cor-viva); }
.indicador + .indicador { border-top: 1px solid var(--borda); }
.indicador__n { font: 800 1.625rem/1.1 var(--fonte); font-variant-numeric: tabular-nums; color: var(--cor); overflow-wrap: anywhere; }
.indicador--vazio { border-left-color: var(--rascunho-viva); }
.indicador--vazio .indicador__n { color: var(--rascunho-viva); }
.indicador__texto { display: grid; gap: 2px; min-width: 0; }
.indicador__texto b { font: 800 1.0625rem/1.3 var(--fonte); }
.indicador__base { color: var(--texto); font-size: var(--t-1); }
.indicador__ler { color: var(--texto-2); font-size: var(--t-1); }
.indicador__melhorar { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; color: var(--cor); font-weight: 700; font-size: var(--t-1); }
.indicador__melhorar .icone { width: 16px; height: 16px; margin-top: 2px; }
.faixa { display: block; }
@media (max-width: 820px) {
  .indicador { grid-template-columns: 1fr; padding: 14px 14px 14px 12px; }
  .indicador__n { font-size: 1.5rem; }
  .abas--relatorios { display: grid; grid-template-columns: 1fr 1fr; }
  .linhas--semana .linha > .linha__nome, .linhas--recebimento .linha > .linha__nome { grid-column: 1 / -1; }
}