/* Katu — folha de estilo do backoffice.
   O PDV tem a sua (pdv.css): lá a prioridade é densidade e velocidade, aqui é leitura.
   As cores vêm de marca.php como variáveis, então a mesma folha serve às três portas. */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` só vence quando a nossa folha não declara `display` para o elemento. Declarar
   isto de saída evita a armadilha antes de ela existir. */
[hidden] { display: none !important; }

:root {
  --tinta: #16211D;
  --tinta-fraca: #5C6B65;
  --linha: #DEE6E2;
  /* borda de campo mais firme que a de divisória: campo que não se vê não convida a digitar */
  --borda-campo: #D2DED8;
  --fundo: #F4F7F5;
  --papel: #FFFFFF;
  --erro: #C0392B;
  --alerta: #B7791F;
  --sucesso: #1E7A4B;
  --raio: 10px;
  /* altura única de TODO controle — input, select e botão. É o que faz uma linha de
     formulário parecer desenhada em vez de montada por acidente. */
  --alt: 40px;
  --sombra: 0 1px 2px rgba(18,54,44,.06), 0 4px 16px rgba(18,54,44,.05);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body { margin: 0; padding: 0; }
body {
  font: 15px/1.55 var(--fonte);
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento-escuro); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .6rem; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; }
p { margin: 0 0 .8rem; }
code { font: 13px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace;
       background: var(--fundo); padding: .1em .35em; border-radius: 4px; }

.ico { vertical-align: -.18em; flex: none; }

/* ---------- marca ---------- */
.marca { display: inline-flex; align-items: center; gap: .5rem; }
.marca-txt { font-size: calc(var(--h) * .62); font-weight: 500; letter-spacing: -.02em;
             color: var(--verde); white-space: nowrap; }
.marca-txt b { font-weight: 700; }

/* ---------- estrutura ---------- */
.topo {
  background: var(--verde); color: #fff;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.1rem; height: 56px; position: sticky; top: 0; z-index: 30;
}
.topo .marca-txt { color: #fff; }
.topo .espaco { flex: 1; }
.topo a { color: rgba(255,255,255,.85); }
.topo a:hover { color: #fff; text-decoration: none; }

.quem { display: flex; align-items: center; gap: .55rem; font-size: .86rem; color: rgba(255,255,255,.85); }
.quem b { color: #fff; font-weight: 600; }
.selo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  background: var(--acento); color: #fff; padding: .18rem .45rem; border-radius: 4px;
}

.corpo { display: flex; align-items: flex-start; min-height: calc(100vh - 56px); }

.menu {
  width: 210px; flex: none; padding: 1rem .6rem; position: sticky; top: 56px;
  align-self: flex-start; max-height: calc(100vh - 56px); overflow-y: auto;
}
.menu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem; border-radius: 8px; margin-bottom: 1px;
  color: var(--tinta-fraca); font-size: .9rem; font-weight: 500;
}
.menu a:hover { background: rgba(18,54,44,.05); color: var(--tinta); text-decoration: none; }
.menu a.ativo { background: var(--verde); color: #fff; }
.menu a.ativo .ico { color: var(--acento); }
.menu .grupo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-fraca); font-weight: 700; padding: 1rem .65rem .3rem; opacity: .65;
}

.conteudo { flex: 1; padding: 1.4rem 1.6rem 3rem; min-width: 0; max-width: 1180px; }

/* ---------- cartões ---------- */
.card {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 1.35rem 1.4rem; margin-bottom: 1rem;
  box-shadow: var(--sombra);
}
.card > :last-child { margin-bottom: 0; }

/* o título do cartão ganha uma régua: separa "sobre o que é este bloco" do conteúdo sem
   precisar de mais espaço em branco, que é o que fazia a tela parecer vazia */
.card > h2:first-child, .card > h2 {
  font-size: 1.02rem; letter-spacing: -.005em; padding-bottom: .7rem;
  border-bottom: 1px solid var(--linha); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.card > h2 + .ajuda { margin-top: -.4rem; margin-bottom: 1.1rem; }
.card > h3 { font-size: .92rem; text-transform: uppercase; letter-spacing: .06em;
             color: var(--tinta-fraca); margin: 1.5rem 0 .8rem; }

.ajuda { color: var(--tinta-fraca); font-size: .87rem; line-height: 1.55; }

.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.metrica .rotulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-fraca); font-weight: 700;
}
.metrica .valor { font-size: 1.7rem; font-weight: 680; letter-spacing: -.025em; margin-top: .15rem; }

/* ---------- avisos ---------- */
.aviso {
  padding: .7rem .9rem; border-radius: 8px; margin-bottom: .8rem;
  border-left: 3px solid var(--tinta-fraca); background: var(--fundo); font-size: .9rem;
}
.aviso.ok    { border-color: var(--sucesso); background: #EDF7F1; }
.aviso.erro  { border-color: var(--erro);    background: #FCF0EE; }
.aviso.atencao { border-color: var(--alerta); background: #FDF6E7; }

.tag {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: .16rem .45rem;
  border-radius: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.tag.ok   { background: #DCF0E5; color: var(--sucesso); }
.tag.pend { background: #FBEEDB; color: var(--alerta); }
.tag.off  { background: #EEF1F0; color: var(--tinta-fraca); }

/* ---------- formulários ----------
   O seletor NÃO pode ser por type. A maioria dos campos do sistema é escrita como
   <input name="nome"> — sem type, porque o padrão do HTML já é text. Listar
   input[type=text] deixava 60% dos campos com a aparência crua do navegador, ao lado de
   um <select> estilizado. Aqui a regra pega todo input de digitar e exclui os que têm
   forma própria (caixa de marcar, arquivo, botão). */

.campo { margin-bottom: 1rem; }
.campo > label {
  display: block; font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  color: var(--tinta); margin-bottom: .35rem;
}
.campo > label .req { color: var(--acento-escuro); font-weight: 700; }

input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),
select,
textarea {
  display: block; width: 100%; height: var(--alt);
  padding: 0 .75rem; font: inherit; font-size: .94rem; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--borda-campo); border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(18,54,44,.04);
  transition: border-color .12s ease, box-shadow .12s ease;
  -webkit-appearance: none; appearance: none;
}
textarea { height: auto; min-height: calc(var(--alt) * 2); padding: .6rem .75rem; resize: vertical; }

/* o select nativo tem altura e seta próprias, e é isso que fazia ele não combinar com o
   resto. Zerando a aparência e desenhando a seta, os dois viram o mesmo controle. */
select {
  padding-right: 2.2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235C6B65' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
}

input:hover:not(:disabled):not([readonly]),
select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: #C7D4CD; }

input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 16%, transparent);
}
input::placeholder, textarea::placeholder { color: #9BAAA3; }

input:disabled, input[readonly], select:disabled, textarea:disabled {
  background: var(--fundo); color: var(--tinta-fraca); cursor: not-allowed; box-shadow: none;
}

/* dinheiro e quantidade alinham pela direita, com dígito de largura fixa: coluna de
   números que dança a cada tecla é o que faz uma tela parecer amadora */
input[inputmode=decimal], input[inputmode=numeric] {
  text-align: right; font-variant-numeric: tabular-nums;
}

/* caixa de marcar merece alvo grande: no balcão ninguém acerta 13px */
input[type=checkbox], input[type=radio] {
  width: 1.05rem; height: 1.05rem; accent-color: var(--acento);
  margin: 0 .1rem 0 0; cursor: pointer; flex: none;
}
label:has(input[type=checkbox]), label:has(input[type=radio]) { cursor: pointer; }

/* o input de arquivo nativo é a peça mais feia de qualquer formulário */
input[type=file] {
  width: 100%; max-width: 380px; font: inherit; font-size: .9rem; color: var(--tinta-fraca);
}
input[type=file]::file-selector-button {
  margin-right: .7rem; padding: .45rem .9rem; font: inherit; font-size: .88rem;
  font-weight: 600; cursor: pointer; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--borda-campo); border-radius: 7px;
}
input[type=file]::file-selector-button:hover { background: var(--fundo); border-color: #C7D4CD; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: var(--alt); padding: 0 1.05rem; font: inherit; font-size: .92rem;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--borda-campo); background: var(--papel); color: var(--tinta);
  border-radius: 8px; transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--fundo); border-color: #C7D4CD; text-decoration: none; }
.btn:active { transform: translateY(.5px); }

.btn-primario {
  background: var(--acento); border-color: var(--acento); color: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--acento) 30%, transparent);
}
.btn-primario:hover { background: var(--acento-escuro); border-color: var(--acento-escuro); }
.btn-escuro { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-escuro:hover { background: #0C271F; border-color: #0C271F; }

/* ação secundária ao lado de um campo — some no visual até ser precisa */
.btn-fantasma {
  border-color: transparent; background: transparent; color: var(--tinta-fraca);
  font-weight: 500; padding: 0 .7rem;
}
.btn-fantasma:hover { background: var(--fundo); border-color: var(--linha); color: var(--erro); }

/* Desligado não é meio-apagado: laranja a 50% parece botão quebrado, não botão indisponível */
.btn:disabled, .btn[disabled] {
  background: var(--fundo); border-color: var(--linha); color: #A3B2AB;
  cursor: not-allowed; box-shadow: none; opacity: 1;
}
.btn:disabled:hover { background: var(--fundo); border-color: var(--linha); }

/* linha de campo + ação, alinhados pela base */
.linha-acao { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.linha-acao .campo { margin-bottom: 0; }

/* ---------- tabelas ---------- */
.rolar { overflow-x: auto; }
.tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tab th, .tab td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--linha); }
.tab th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-fraca); font-weight: 700; white-space: nowrap;
}
.tab tbody tr:hover { background: var(--fundo); }
.tab .num { text-align: right; font-variant-numeric: tabular-nums; }

.vazio { text-align: center; padding: 2.5rem 1rem; color: var(--tinta-fraca); }
.vazio .ico { color: var(--linha); margin-bottom: .5rem; }

/* ---------- fotos ---------- */
.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.col-foto { width: 42px; padding-right: 0 !important; }

.mini-foto, .selo-foto {
  display: block; border-radius: 7px; object-fit: cover; flex: none;
  background: var(--fundo);
}
.mini-foto { border: 1px solid var(--linha); }
.selo-foto {
  display: grid; place-items: center; font-weight: 700; letter-spacing: -.02em;
  user-select: none;
}

/* galeria do cadastro */
.galeria {
  display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.galeria-item {
  margin: 0; width: 120px; border: 1px solid var(--linha); border-radius: 10px;
  overflow: hidden; background: var(--papel);
}
.galeria-item.principal { border-color: var(--acento); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 22%, transparent); }
.galeria-item img { display: block; width: 120px; height: 120px; object-fit: cover; }
.galeria-item figcaption {
  display: flex; flex-direction: column; gap: .1rem; align-items: flex-start;
  padding: .35rem .4rem; border-top: 1px solid var(--linha); background: var(--fundo);
}
.galeria-item figcaption .btn { height: 26px; font-size: .78rem; padding: 0 .4rem; }
.galeria-item figcaption .tag { margin: .15rem .2rem; }

/* ---------- entrada ---------- */
.entrar-tela {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: linear-gradient(160deg, var(--verde) 0%, #0C241D 100%);
}
.entrar-caixa {
  width: 100%; max-width: 380px; background: var(--papel);
  border-radius: 14px; padding: 1.8rem; box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.entrar-caixa .marca { margin-bottom: 1.3rem; }

@media (max-width: 820px) {
  .menu {
    position: static; width: 100%; max-height: none; display: flex; gap: .3rem;
    overflow-x: auto; padding: .5rem; border-bottom: 1px solid var(--linha); background: var(--papel);
  }
  .menu .grupo { display: none; }
  .menu a { white-space: nowrap; }
  .corpo { flex-direction: column; }
  .conteudo { padding: 1rem; }
}