/* Shell da retaguarda + telas. Os tokens moram em shared/base.css. */

/* ---------- login ---------- */

#tela-login {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
}
.login-cartao {
  width: min(380px, 100%); background: var(--etiqueta);
  border: 1px solid var(--risco); border-radius: var(--r-folha);
  padding: 32px 28px; display: flex; flex-direction: column; gap: 14px;
}
.login-cartao h1 { font-size: 21px; font-weight: 700; margin: 2px 0 8px; }
.login-erro { min-height: 18px; font-size: 13px; color: var(--falta); }
.login-tenants { display: flex; flex-direction: column; gap: 8px; }
.login-tenants .escolha {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--risco); border-radius: var(--r-controle);
  background: var(--etiqueta); cursor: pointer; font-weight: 600; font-size: 13.5px;
  text-align: left; width: 100%;
}
.login-tenants .escolha:hover { border-color: var(--marca); background: var(--fundo-marca); }
.login-tenants .escolha small { font-weight: 500; color: var(--tinta-3); text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; }

/* ---------- topo ---------- */

#topo {
  height: 58px; background: var(--etiqueta); border-bottom: 1px solid var(--risco);
  display: flex; align-items: center; gap: 26px; padding: 0 20px;
  position: sticky; top: 0; z-index: 5;
}
.topo-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
#marca-tile {
  width: 30px; height: 30px; border-radius: 7px; background: var(--marca);
  color: var(--marca-tinta); display: grid; place-items: center;
  font-size: 13px; font-weight: 700; flex: none;
}
#marca-nome { font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#topo-nav { display: flex; gap: 4px; margin-left: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#topo-nav a {
  display: inline-flex; align-items: center; height: 58px; padding: 0 12px;
  font-size: 13px; font-weight: 600; color: var(--tinta-2); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
#topo-nav a:hover { color: var(--tinta); }
#topo-nav a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--marca); }
#topo-nav a.breve { color: var(--tinta-4); cursor: default; }
#topo-nav a.breve:hover { color: var(--tinta-4); }

.topo-conta { display: flex; align-items: center; gap: 8px; }
#conta-nome { font-size: 13px; color: var(--tinta-3); white-space: nowrap; }

/* ---------- área do módulo ---------- */

#modulo { padding: 22px 24px 48px; max-width: 1240px; margin: 0 auto; }

.modulo-cabeca {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.modulo-cabeca h2 { font-size: 21px; font-weight: 700; }
.modulo-cabeca .sub { font-size: 13px; color: var(--tinta-3); margin-top: 2px; }

.barra-ferramentas {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.barra-ferramentas .campo { flex: 1; min-width: 220px; max-width: 340px; }
.barra-ferramentas .campo input { background: var(--etiqueta); }
.barra-ferramentas .conta-itens { font-size: 12.5px; color: var(--tinta-3); margin-left: auto; }

/* célula produto: nome forte, contexto abaixo */
.cel-produto b { display: block; font-weight: 600; font-size: 14px; }
.cel-produto small { color: var(--tinta-3); font-size: 12px; }
.linha-inativa td { opacity: .5; }

/* (editor lateral, linha2, editor-erro e alternador moram em shared/base.css —
   são componentes do sistema, usados também pelo caixa) */

/* ---------- números que falam (estoque) ---------- */

.num--forte { font-weight: 600; }
.num--apagado { color: var(--tinta-3); }
.num--falta { color: var(--falta); font-weight: 700; }     /* zerou: grita */
.num--atencao { color: var(--atencao); font-weight: 600; } /* reservado: âmbar */

/* ---------- extrato do item ---------- */

.extrato-resumo {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 12px 14px; background: var(--entalhe); border-radius: var(--r-cartao);
}
.extrato-resumo b { display: block; font-size: 16px; margin-top: 2px; }

.extrato { list-style: none; display: flex; flex-direction: column; }
.extrato__linha {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--risco); font-size: 13px;
}
.extrato__linha:last-child { border-bottom: 0; }
.extrato__quando { color: var(--tinta-3); font-size: 12px; }
.extrato__o-que { color: var(--tinta-2); }
.extrato__o-que b { color: var(--tinta); font-weight: 600; }
.extrato__qtd { font-weight: 600; }
.extrato__linha--mais .extrato__qtd { color: var(--ok); }
.extrato__linha--menos .extrato__qtd { color: var(--falta); }

/* ---------- abas (sub-rotas de um módulo) ---------- */

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--risco); margin: -4px 0 16px; }
.abas a {
  padding: 8px 12px 10px; font-size: 13.5px; font-weight: 600; color: var(--tinta-3);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.abas a:hover { color: var(--tinta); }
.abas a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--marca); }
.barra-ferramentas .sub { font-size: 13px; color: var(--tinta-3); }

/* ---------- ficha: componentes em linhas ---------- */

.componentes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.comp-linha { display: grid; grid-template-columns: 1fr 88px 36px 36px; gap: 6px; align-items: center; }
.comp-linha select, .comp-linha input {
  min-height: 36px; padding: 6px 9px; border-radius: var(--r-controle);
  border: 1px solid var(--risco); background: var(--entalhe);
}
.comp-linha input:focus, .comp-linha select:focus { outline: none; border-color: var(--marca); background: var(--etiqueta); }
.cel-insumos small { color: var(--tinta-3); }

/* ---------- prévia viva da fornada ---------- */

.previa { background: var(--entalhe); border-radius: var(--r-cartao); padding: 12px 14px; }
.previa__lista { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px; }
.previa__linha {
  display: grid; grid-template-columns: 1fr 84px 32px auto; gap: 8px; align-items: center;
  font-size: 13px;
}
.previa__nome { font-weight: 600; }
.previa__qtd {
  min-height: 32px; padding: 4px 8px; border-radius: var(--r-controle);
  border: 1px solid var(--risco); background: var(--etiqueta); text-align: right;
}
.previa__qtd:focus { outline: none; border-color: var(--marca); }
.previa__tem { color: var(--tinta-3); font-size: 12.5px; white-space: nowrap; }
.previa__linha--falta .previa__tem { color: var(--falta); font-weight: 700; }
.previa__linha--falta .previa__qtd { border-color: color-mix(in oklab, var(--falta) 55%, transparent); background: color-mix(in oklab, var(--falta) 6%, var(--etiqueta)); }
.previa__nasce { font-size: 13.5px; color: var(--tinta-2); padding-top: 8px; border-top: 1px solid var(--risco); }

/* ---------- vitrine (painel) ---------- */

.vitrine-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.vitrine-form, .vitrine-link { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.vitrine-url { font-family: var(--fonte-cod); font-size: 14px; color: var(--marca); word-break: break-all; }
@media (max-width: 820px) { .vitrine-grade { grid-template-columns: 1fr; } }

/* ---------- equipe ---------- */
.segredo { background: var(--fundo-marca); border: 1px solid color-mix(in oklab, var(--marca) 35%, transparent); border-radius: var(--r-cartao); padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.segredo__codigo { font-family: var(--fonte-cod); font-size: 32px; letter-spacing: .12em; }

/* ---------- relatórios ---------- */
.rel-placar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.rel-placar > div { background: var(--etiqueta); border: 1px solid var(--risco); border-radius: var(--r-cartao); padding: 12px 14px; }
.rel-placar b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0; }
.rel-placar small { color: var(--tinta-3); font-size: 12px; }
.rel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.rel-quadro { background: var(--etiqueta); border: 1px solid var(--risco); border-radius: var(--r-cartao); overflow: hidden; }
.rel-quadro > h3 { padding: 12px 14px 8px; }
.rel-quadro .grade tbody tr { cursor: default; }
.rel-quadro .grade tbody tr:hover { background: transparent; }
.rel-vazio { padding: 6px 14px 16px; color: var(--tinta-3); font-size: 13px; }
.rel-cel-barra { width: 34%; }
.rel-barra { display: block; height: 8px; border-radius: 4px; background: var(--entalhe); position: relative; overflow: hidden; }
.rel-barra::after { content: ''; position: absolute; inset: 0; width: var(--w); background: var(--marca); border-radius: 4px; }

/* ---------- foto do item ---------- */
.cel-produto__linha { display: flex; align-items: center; gap: 10px; }
.cel-foto { width: 36px; height: 36px; border-radius: 8px; overflow: hidden; flex: none; background: var(--entalhe); display: grid; place-items: center; font-weight: 700; color: var(--tinta-3); }
.cel-foto img { width: 100%; height: 100%; object-fit: cover; }
.cel-foto--vazia { font-size: 14px; }
.ed-foto { display: flex; gap: 14px; align-items: center; }
.ed-foto__caixa { width: 96px; height: 96px; border-radius: 12px; background: var(--entalhe); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--tinta-4); font-size: 12px; }
.ed-foto__caixa img { width: 100%; height: 100%; object-fit: cover; }
.ed-foto__acoes { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ed-foto__acoes .dica { font-size: 12px; color: var(--tinta-3); }

/* ---------- início ---------- */
#marca-tile.com-logo { background: var(--etiqueta); border: 1px solid var(--risco); overflow: hidden; }
#marca-tile.com-logo img { width: 100%; height: 100%; object-fit: cover; }
.in-placar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.in-placar > div { background: var(--etiqueta); border: 1px solid var(--risco); border-radius: var(--r-cartao); padding: 12px 14px; }
.in-placar b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0; }
.in-placar small { color: var(--tinta-3); font-size: 12px; }
.in-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 18px; }
.in-atalho {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 16px 14px; text-decoration: none; color: var(--tinta);
  background: var(--etiqueta); border: 1px solid var(--risco); border-radius: var(--r-folha);
  border-left: 4px solid var(--marca); transition: transform .12s, border-color .12s;
}
.in-atalho:hover { transform: translateY(-1px); border-color: var(--risco-2); }
.in-atalho b { font-size: 16px; }
.in-atalho small { color: var(--tinta-3); font-size: 12.5px; }
.in-atalho--marca { background: var(--marca); color: var(--marca-tinta); border-color: var(--marca); }
.in-atalho--marca .kicker, .in-atalho--marca small { color: color-mix(in oklab, var(--marca-tinta) 75%, transparent); }

/* ---------- configurações ---------- */
.cfg-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; align-items: start; }
.cfg-secao { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.cfg-logo { display: flex; gap: 14px; align-items: center; }
.cfg-logo__caixa { width: 84px; height: 84px; border-radius: 14px; background: var(--entalhe); display: grid; place-items: center; overflow: hidden; font-size: 26px; font-weight: 800; color: var(--marca); flex: none; }
.cfg-logo__caixa img { width: 100%; height: 100%; object-fit: cover; }
.cfg-logo__acoes { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cor-linha { display: flex; gap: 8px; align-items: center; }
.cor-linha input[type=color] { width: 46px; height: 36px; padding: 2px; border: 1px solid var(--risco); border-radius: var(--r-controle); background: var(--etiqueta); }
.cupom-previa { display: grid; place-items: start center; padding: 8px 0; }
.cupom-previa__folha { background: #fff; color: #000; font-family: 'Courier New', Courier, monospace; padding: 10px 8px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.08); }
.cupom-previa__folha b { display: block; text-align: center; margin-bottom: 4px; }
.cupom-previa__folha pre { white-space: pre-wrap; font: inherit; text-align: center; margin: 0; }
.cupom-previa__folha .linha { display: flex; justify-content: space-between; gap: 6px; }
.cupom-previa__folha .risco { border-top: 1px dashed #000; margin: 5px 0; }
.cupom-previa__folha .total { font-weight: 700; }
.cupom-previa__folha .c { text-align: center; margin-top: 4px; }

/* ---------- estações do dia da fábrica ---------- */
/* quatro estações em 2×2 no desktop (3+1 deixa a última órfã); empilha no estreito */
.estacoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 14px; }
@media (max-width: 960px) { .estacoes { grid-template-columns: 1fr; } }
.estacao { background: var(--etiqueta); border: 1px solid var(--risco); border-radius: var(--r-folha); padding: 16px 18px; border-top: 4px solid var(--estacao-cor, var(--marca)); display: flex; flex-direction: column; gap: 10px; }
.estacao--1 { --estacao-cor: #b07d2e; } .estacao--2 { --estacao-cor: var(--marca); } .estacao--3 { --estacao-cor: #5a6b7d; } .estacao--4 { --estacao-cor: var(--falta); }
.estacao header { display: flex; align-items: center; gap: 12px; }
.estacao h3 { font-size: 16px; }
.estacao__num { width: 30px; height: 30px; border-radius: 50%; background: var(--estacao-cor); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.es-form { display: flex; flex-direction: column; gap: 8px; }
.es-form .rotulo { font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.es-lista { display: flex; flex-direction: column; gap: 8px; }
.panela { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: var(--entalhe); border-radius: var(--r-cartao); }
.panela b { display: block; font-size: 14px; } .panela small { color: var(--tinta-3); font-size: 12px; }
.panela__acao { display: flex; gap: 6px; align-items: center; }
.panela__acao input { width: 56px; min-height: 36px; text-align: center; border: 1px solid var(--risco); border-radius: var(--r-controle); background: var(--etiqueta); }
.ra-origem { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; padding: 12px 14px; }
.ra-origem b { display: block; font-size: 14px; margin-top: 2px; }

@media (max-width: 720px) {
  #modulo { padding: 16px 12px 40px; }
  .grade .some-estreito { display: none; }
}