/* Logotipo Kin Food: símbolo (quadrado vermelho, losango e tigela) + "Kin" em Josefin Sans fina (licença OFL). */
@font-face { font-family: 'Josefin Sans'; src: url('/fonts/josefin-sans.woff2') format('woff2'); font-weight: 300 400; font-display: swap; }
:root {
  /* Identidade Kin Food: vermelho (menu vermelho-escuro, destaque vermelho), papel creme ao fundo.
     (Os nomes --azul* e --nori ficaram por compatibilidade: hoje são os vermelhos da marca.) */
  --azul: #c62828;
  --azul-escuro: #a01e1e;
  --azul-claro: #fbe4e2;
  --nori: #6e1212;
  --nori-claro: #8a1c1c;
  --fundo: #f6f3ee;
  --cartao: #ffffff;
  --texto: #221f1b;
  --mudo: #736b61;
  --borda: #e6dfd4;
  --verde: #1e7a4f;
  --verde-fundo: #e2f3e9;
  --vermelho: #b42318;
  --vermelho-fundo: #fdebea;
  --amarelo: #9a6b00;
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-titulo: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font: 14px/1.45 var(--fonte); color: var(--texto); background: var(--fundo); }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font: 600 26px/1.2 var(--fonte-titulo); margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 15px; margin: 0 0 14px; font-weight: 700; color: #3a332a; }
p { margin: 0; }

.app { display: flex; min-height: 100vh; }
.lateral {
  width: 232px; flex: 0 0 232px; background: var(--nori); color: #fff; display: flex; flex-direction: column;
  padding: 14px 10px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral a, .lateral button {
  display: flex; align-items: center; gap: 12px; color: #f7dede; padding: 9px 12px; border-radius: 10px; font-size: 13.5px;
  text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; width: 100%; text-align: left;
}
.lateral a:hover, .lateral button:hover { background: var(--nori-claro); color: #fff; text-decoration: none; }
.lateral a.ativo { background: #fff; color: var(--nori); font-weight: 700; }
.lateral .marca { margin-bottom: 18px; font-weight: 700; font-size: 16px; color: #fff; }
.lateral .marca:hover { background: none; }
.marca small { display: block; font-size: 11px; font-weight: 500; opacity: 0.75; letter-spacing: 0.02em; }
.selo {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--azul); display: inline-grid; place-items: center;
  font-weight: 800; font-size: 18px; flex: 0 0 34px;
}
.rodape-menu { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 10px; }
.rodape-menu button { padding-left: 44px; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo {
  height: 52px; background: #fff; border-bottom: 1px solid var(--borda); display: flex; align-items: center;
  justify-content: space-between; padding: 0 28px; font-size: 13px; font-weight: 500; color: var(--mudo);
}
.trilha span { color: #b8ad9f; margin: 0 6px; }
.trilha b { color: var(--texto); font-weight: 600; }
.usuario { color: var(--mudo); font-weight: 500; }
.aviso { background: #f1ece3; color: #5a5046; font-size: 12.5px; padding: 8px 28px; border-bottom: 1px solid var(--borda); }
.conteudo { padding: 26px 28px 48px; display: flex; flex-direction: column; gap: 18px; max-width: 1400px; width: 100%; }

.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cabecalho p { color: var(--mudo); }
.cabecalho .chave { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--azul); color: #fff; border: 1px solid var(--azul);
  padding: 8px 16px; border-radius: 8px; font: 600 13px var(--fonte); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.botao:hover { background: var(--azul-escuro); text-decoration: none; }
.botao.claro { background: #fff; color: var(--azul); }
.botao.claro:hover { background: #fdeceb; }
.botao.pequeno { padding: 4px 10px; font-size: 12px; }

.filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 10px; padding: 12px 14px;
}
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mudo); font-weight: 600; }
input, select {
  font: 14px var(--fonte); color: var(--texto); border: 1px solid #d9d1c4; border-radius: 9px; padding: 7px 10px; background: #fff; min-width: 0;
}
input:focus, select:focus { outline: 2px solid #f3b9b5; border-color: var(--azul); }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.cartao .rotulo { font-size: 12px; color: var(--mudo); font-weight: 600; }
.cartao strong { font-size: 22px; letter-spacing: -0.01em; }
.cartao small { color: var(--mudo); font-size: 12px; }

.painel { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; min-width: 0; }
.painel.estreito { max-width: 480px; }
.painel.alerta { border-color: #f3c3bf; background: #fff8f7; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; }
.mais { margin-top: 10px; font-size: 13px; }

.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: #f1ece3; color: #4a4137; text-align: left; font-weight: 600; padding: 9px 10px; white-space: nowrap; }
td { padding: 8px 10px; border-top: 1px solid var(--borda); vertical-align: top; }
tbody tr:hover td { background: #fbf8f3; }
tr.total td { font-weight: 700; background: #f4efe7; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vazio { color: var(--mudo); text-align: center; padding: 22px; }
.mudo { color: var(--mudo); }

.selo-situacao { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.selo-situacao.ok { background: var(--verde-fundo); color: var(--verde); }
.selo-situacao.cancelada { background: var(--vermelho-fundo); color: var(--vermelho); }

.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 18px; }
.campos span { display: block; font-size: 12px; color: var(--mudo); font-weight: 600; }
.campos strong { font-weight: 600; word-break: break-word; }

.paginacao { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.pg { padding: 5px 10px; border: 1px solid var(--borda); border-radius: 7px; background: #fff; font-size: 13px; }
.pg.atual { border: 0; color: var(--mudo); }
.pg.desab { color: #c4bbae; }

.grafico { display: block; max-height: 260px; }
.grafico rect { fill: var(--azul); }
.grafico g:hover rect { fill: var(--azul-escuro); }
.grafico text { font: 13px var(--fonte); fill: var(--mudo); }

.formulario { display: flex; flex-direction: column; gap: 12px; }
.dica { font-size: 12px; color: var(--mudo); }
.erro { color: var(--vermelho); background: var(--vermelho-fundo); padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; }
.sucesso { color: var(--verde); background: var(--verde-fundo); padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; }
hr { border: 0; border-top: 1px solid var(--borda); margin: 14px 0; }

.tela-login { min-height: 100vh; display: grid; place-items: center; background: var(--nori); padding: 16px; }
.caixa-login {
  background: #fff; border-radius: 14px; padding: 28px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 20px 50px rgba(10, 25, 90, 0.35);
}
.caixa-login .marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.caixa-login .selo { background: var(--azul); color: #fff; }
.caixa-login p { color: var(--mudo); }

.topo-menu { display: flex; align-items: center; justify-content: space-between; }
.botao-menu { display: none; }
.itens-menu { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.secao {
  font-size: 11.5px; font-weight: 600; color: #eaa9a9;
  padding: 14px 12px 6px;
}
.grupo summary {
  display: flex; align-items: center; gap: 12px; color: #f7dede; padding: 9px 12px; border-radius: 10px; font-size: 13.5px;
  cursor: pointer; list-style: none;
}
.grupo summary::-webkit-details-marker { display: none; }
.grupo summary::after { content: '›'; margin-left: auto; transition: transform 0.15s; font-size: 16px; line-height: 1; }
.grupo[open] summary::after { transform: rotate(90deg); }
.grupo summary:hover { background: var(--nori-claro); color: #fff; }
.subitens { display: flex; flex-direction: column; padding: 2px 0 6px 32px; }
.lateral .subitens a { padding: 6px 10px; font-size: 13px; }

.abas { display: flex; gap: 6px; overflow-x: auto; padding: 4px; background: #ece6dc; border-radius: 999px; width: fit-content; max-width: 100%; }
.abas a {
  padding: 7px 16px; font-size: 13px; font-weight: 600; color: #5f574d; border-radius: 999px; white-space: nowrap; text-decoration: none;
}
.abas a:hover { color: var(--texto); background: rgba(255, 255, 255, 0.6); text-decoration: none; }
.abas a.ativa { color: #fff; background: var(--nori); }

.vazio-tela { text-align: center; padding: 30px 16px; color: var(--mudo); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.vazio-tela strong { color: var(--texto); font-size: 15px; }
.colunas-zig { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 900px; }
.colunas-zig span { background: #f1ece3; color: #4a4137; border-radius: 99px; padding: 3px 10px; font-size: 12px; }
.envio { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.envio input[type=file] { padding: 6px; }
.anexos { display: flex; flex-direction: column; gap: 6px; }
.anexo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.anexo form { display: inline; }
.link-perigo { background: none; border: 0; color: var(--vermelho); cursor: pointer; font: inherit; padding: 0; }
.local { display: flex; flex-direction: column; gap: 6px; }
.selo-situacao.bloqueado { background: #fff4d6; color: #8a5a00; }

.grade-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; align-items: start; }
.grade-form .largo { grid-column: 1 / -1; }
.grade-form textarea { font: 14px var(--fonte); border: 1px solid #d9d1c4; border-radius: 9px; padding: 8px 10px; resize: vertical; }
.acoes-form { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.caixa { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--texto); padding: 8px 0; }
.com-erro input, .com-erro select, .com-erro textarea { border-color: var(--vermelho); }
.msg-erro { color: var(--vermelho); font-weight: 500; }
.linha-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.linha-form input, .linha-form select { padding: 5px 8px; font-size: 13px; }
form.excluir { margin-top: 14px; }
tr.riscado td { text-decoration: line-through; color: var(--mudo); }
.negativo { color: var(--vermelho); }
button[disabled] { opacity: 0.45; cursor: not-allowed; }

table.lista td { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

/* Seletor de período */
.periodo-embrulho { position: relative; }
.campo-periodo {
  display: inline-flex; align-items: center; gap: 8px; min-width: 230px; font: 14px var(--fonte); color: var(--texto);
  border: 1px solid #d9d1c4; border-radius: 9px; padding: 7px 12px; background: #fff; cursor: pointer; text-align: left;
}
.campo-periodo:hover { border-color: var(--azul); }
.campo-periodo[aria-expanded="true"] { outline: 2px solid #f3b9b5; border-color: var(--azul); }
.icone-cal { width: 16px; height: 16px; border: 1.6px solid var(--azul); border-radius: 3px; border-top-width: 4px; flex: 0 0 16px; }
.periodo-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 35, 90, 0.18); display: flex; min-width: 640px;
}
.periodo-pop[hidden] { display: none; }
.atalhos { display: flex; flex-direction: column; padding: 10px; border-right: 1px solid var(--borda); gap: 2px; min-width: 150px; }
.atalhos button, .grade-meses button, .nav > button, .modo button {
  background: none; border: 0; font: 13px var(--fonte); color: var(--texto); padding: 7px 10px; border-radius: 7px; cursor: pointer; text-align: left;
}
.atalhos button:hover, .grade-meses button:hover, .nav > button:hover { background: #fdeceb; color: var(--azul); }
.calendario { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.nav { display: flex; align-items: center; justify-content: space-between; }
.nav > button { font-size: 20px; line-height: 1; padding: 4px 12px; }
.modo { display: inline-flex; background: var(--fundo); border-radius: 8px; padding: 2px; }
.modo button { padding: 5px 14px; font-weight: 600; color: var(--mudo); }
.modo button.ativo { background: #fff; color: var(--azul); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.meses-lado, .anos { display: flex; gap: 22px; }
.mes-titulo { font-weight: 700; font-size: 13.5px; text-align: center; margin-bottom: 6px; }
.dias { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px 0; }
.dias .sem { font-size: 11px; color: var(--mudo); text-align: center; font-weight: 600; padding-bottom: 4px; }
.dia { width: 34px; height: 32px; border: 0; background: none; font: 13px var(--fonte); color: var(--texto); cursor: pointer; border-radius: 0; }
.dia:hover { background: #fdeceb; border-radius: 7px; }
.dia.hoje { font-weight: 800; color: var(--azul); }
.dia.entre { background: var(--azul-claro); }
.dia.ponta { background: var(--azul); color: #fff; border-radius: 7px; }
.grade-meses { display: grid; grid-template-columns: repeat(3, 70px); gap: 4px; }
.grade-meses button { text-align: center; }
.grade-meses button.ponta { background: var(--azul); color: #fff; }
.dica-periodo { font-size: 12px; color: var(--mudo); }
.rodape-periodo { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--borda); padding-top: 10px; }
.rodape-periodo .resumo { margin-right: auto; font-weight: 600; font-size: 13px; }

/* Eventos no formato do painel da Zig */
.ev-cabecalho { align-items: center; }
.ev-resumo { display: flex; flex-direction: column; gap: 18px; padding: 22px 16px; }
.ev-mes { display: flex; align-items: center; justify-content: center; gap: 28px; text-align: center; }
.ev-mes h2 { font-size: 26px; margin: 0; font-weight: 600; }
.ev-mes p { color: var(--mudo); }
.ev-mes a { font-size: 26px; color: var(--texto); text-decoration: none; padding: 0 8px; }
.ev-cartoes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ev-cartao { border: 1px solid var(--borda); border-radius: 8px; padding: 20px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ev-cartao strong { font-size: 19px; }
.ev-cartao span { color: var(--mudo); }
.ev-cartao abbr { text-decoration: none; cursor: help; }
.ev-icone { width: 52px; height: 52px; border-radius: 50%; display: inline-grid; place-items: center; color: #3a332a; flex: 0 0 auto; }
.ev-icone.azul { background: #f7ddd2; } .ev-icone.roxo { background: #e5dcef; } .ev-icone.amarelo { background: #f6e5bf; }
.ev-icone.ciano { background: #d6ebe4; } .ev-icone.verde { background: #dcefe2; }
.ev-linha { list-style: none; margin: 0; padding: 0 0 0 32px; position: relative; display: flex; flex-direction: column; gap: 14px; }
.ev-linha::before { content: ''; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: #e1e5ee; }
.ev-item { position: relative; }
.ev-ponto { position: absolute; left: -29px; top: 10px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #b4235b; background: #fff; }
.ev-ponto::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #b4235b; }
.ev-ponto.aberto { border-color: #22b573; } .ev-ponto.aberto::after { background: #22b573; }
.ev-card {
  display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #cfd5e3; border-radius: 6px; padding: 14px 0 14px 16px;
  color: var(--texto); text-decoration: none; overflow: hidden; min-height: 84px;
}
.ev-card:hover { border-color: var(--azul); text-decoration: none; }
.ev-nome { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ev-nome strong { font-size: 17px; font-weight: 600; }
.ev-nome small { flex-basis: 100%; color: var(--mudo); font-size: 14px; }
.ev-selo { background: #fde8a6; color: #8a5a00; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; }
.ev-numeros { display: flex; gap: 14px; }
.ev-numeros > div { display: flex; align-items: center; gap: 6px; min-width: 120px; }
.ev-numeros .ev-icone { width: 34px; height: 34px; }
.ev-numeros .ev-icone svg { width: 17px; height: 17px; }
.ev-numeros span { display: flex; flex-direction: column; font-size: 10.5px; color: var(--mudo); letter-spacing: 0.02em; }
.ev-numeros b { font-size: 13px; color: var(--texto); letter-spacing: 0; }
.ev-faixa {
  align-self: stretch; writing-mode: vertical-rl; background: #b4235b; color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.08em;
  display: flex; align-items: center; justify-content: center; padding: 0 9px; margin: -14px 0;
}
.ev-faixa.aberto { background: #22b573; }
.ev-voltar { margin: 0 0 -6px; }
.ev-status { font-size: 13px; color: var(--texto); }
.ev-status b { color: #3a332a; } .ev-status b.verde { color: #128a52; }
.ev-grade { display: grid; grid-template-columns: minmax(260px, 1fr) 3fr; gap: 18px; align-items: start; }
.ev-grade.dois { grid-template-columns: 1fr 1fr; }
.ev-publico h2, .ev-financeiro h2 { font-weight: 500; font-size: 17px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.ev-centro { text-align: center; color: #4a5268; margin: 6px 0 12px; }
.ev-par { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: #4a5268; }
.ev-par > div { display: flex; flex-direction: column; gap: 2px; }
.ev-par .dir { text-align: right; align-items: flex-end; }
.ev-par b { font-size: 16px; color: var(--texto); order: -1; }
.ev-par b.cor { color: #3fb6d3; font-weight: 500; order: 1; }
.ev-par.fim { border-top: 1px solid var(--borda); margin-top: 6px; padding-top: 12px; }
.ev-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 10px 0 14px; color: #4a5268; }
.ev-trio > div { display: flex; flex-direction: column; gap: 6px; }
.ev-trio .centro { align-items: center; } .ev-trio .dir { align-items: flex-end; }
.ev-trio b { color: var(--texto); font-weight: 500; }
.ev-financeiro h3 { font-size: 18px; font-weight: 500; margin: 6px 0 8px; }
.ev-receita { width: 100%; border-collapse: collapse; font-size: 13px; }
.ev-receita th { background: #f3f4f7; color: #1d2433; font-weight: 600; padding: 9px; border: 0; }
.ev-receita td { padding: 9px; border-top: 1px solid var(--borda); }
.ev-receita tr.forte td { font-weight: 700; }
.ev-receita tr.faturamento td { font-weight: 700; }
.ev-receita tr.faturamento td:first-child { text-decoration: underline; }
.grafico-linha { display: block; max-height: 300px; }
.grafico-linha .grade-linha { stroke: #edf0f5; stroke-width: 1; }
.grafico-linha .eixo { stroke: #8ab8e8; stroke-width: 2; }
.grafico-linha .curva { fill: none; stroke: #3fb6d3; stroke-width: 3; }
.grafico-linha .ponto { fill: transparent; }
.grafico-linha .ponto:hover { fill: rgba(63, 182, 211, 0.25); }
.grafico-linha text { font: 12px var(--fonte); fill: #4a5268; }
.ev-legenda { text-align: center; font-size: 12px; color: #4a5268; }
.ev-legenda .traco { display: inline-block; width: 14px; height: 3px; background: #3fb6d3; vertical-align: middle; margin-right: 6px; }
.ev-rosca { display: flex; justify-content: center; padding: 10px 0 16px; }
.ev-nada { text-align: center; font-size: 20px; color: var(--texto); padding: 24px 0; }

th a.ordenar { color: inherit; text-decoration: none; display: inline-flex; gap: 2px; white-space: nowrap; }
th a.ordenar:hover { text-decoration: underline; }
th a.ordenar.ativa { color: var(--azul); }

/* Campo de senha com o olho para mostrar/esconder */
.campo-senha { position: relative; display: flex; }
.campo-senha input { flex: 1; padding-right: 42px; width: 100%; }
.mostrar-senha {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px;
  color: var(--mudo); cursor: pointer; border-radius: 6px; display: grid; place-items: center;
}
.mostrar-senha:hover, .mostrar-senha[aria-pressed="true"] { color: var(--azul); }
.mostrar-senha:focus-visible { outline: 2px solid #f3b9b5; }

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .lateral { width: 100%; height: auto; flex: none; position: static; padding: 10px 12px; }
  .lateral .marca { margin: 0; }
  .botao-menu {
    display: inline-block; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 8px; padding: 6px 14px;
    font-weight: 600; cursor: pointer;
  }
  .itens-menu { display: none; padding-top: 8px; }
  .abrir-menu:checked + .itens-menu { display: flex; }
  .topo, .aviso { padding-left: 16px; padding-right: 16px; }
  .conteudo { padding: 16px 16px 32px; }
  .duas-colunas { grid-template-columns: 1fr; }
  .ev-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-card { flex-wrap: wrap; padding-right: 16px; }
  .ev-numeros { flex-wrap: wrap; }
  .ev-numeros > div { min-width: 130px; }
  .ev-faixa { writing-mode: horizontal-tb; flex-basis: 100%; margin: 8px -16px -14px -16px; padding: 4px; }
  .ev-grade, .ev-grade.dois { grid-template-columns: 1fr; }
  .filtros label { flex: 1 1 140px; }
  .periodo-embrulho, .campo-periodo { width: 100%; }
  .periodo-pop { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; min-width: 0; flex-direction: column; max-height: 85vh; overflow-y: auto; }
  .atalhos { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--borda); }
  .meses-lado > .mes:nth-child(2) { display: none; }
  .anos > .ano:first-child { display: none; }
  .dias { grid-template-columns: repeat(7, 1fr); }
  .dia { width: 100%; }
}
/* Vendas do Brazin: barras de comparação com o Kin */
td.comparacao { min-width: 160px; }
.barra { display: block; height: 7px; border-radius: 4px; margin: 2px 0; }
.barra.brazin { background: #d9822b; }
.barra.kin { background: var(--azul); opacity: 0.55; }
.legenda { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5b6475; margin-top: 8px; }
.legenda .barra { display: inline-block; width: 18px; margin: 0 2px 0 10px; }
.barra.l0 { width: 0; }
.barra.l5 { width: 5%; }
.barra.l10 { width: 10%; }
.barra.l15 { width: 15%; }
.barra.l20 { width: 20%; }
.barra.l25 { width: 25%; }
.barra.l30 { width: 30%; }
.barra.l35 { width: 35%; }
.barra.l40 { width: 40%; }
.barra.l45 { width: 45%; }
.barra.l50 { width: 50%; }
.barra.l55 { width: 55%; }
.barra.l60 { width: 60%; }
.barra.l65 { width: 65%; }
.barra.l70 { width: 70%; }
.barra.l75 { width: 75%; }
.barra.l80 { width: 80%; }
.barra.l85 { width: 85%; }
.barra.l90 { width: 90%; }
.barra.l95 { width: 95%; }
.barra.l100 { width: 100%; }
/* Seletor de loja no topo */
.seletor-loja { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 16px; }
.seletor-loja label { font-size: 12px; color: var(--mudo); font-weight: 600; }
.seletor-loja select { font: inherit; font-weight: 600; padding: 5px 28px 5px 10px; border: 1px solid #c9d2e6; border-radius: 8px; background: #fff; color: var(--azul); }
.aviso.aviso-loja-ativa { background: #fff4e5; color: #8a4b0b; }
.aviso-loja p { margin: 8px 0; }
.foto-produto img { max-width: 260px; width: 100%; border-radius: 10px; display: block; }

/* Complementos do produto (etapas e opções) */
.etapa-erp { border: 1px solid var(--borda); border-radius: 12px; padding: 14px; margin-bottom: 14px; background: #fcfaf7; display: grid; gap: 10px; }
.linha-etapa { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(90px, 1fr)) auto; gap: 10px; align-items: end; }
.linha-etapa label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--mudo); }
.linha-opcao { display: grid; grid-template-columns: minmax(160px, 2fr) 100px 70px 80px auto auto; gap: 8px; align-items: center; }
.linha-opcao.nova { padding-top: 4px; }
.opcoes-erp td { padding: 6px 8px; }
.etapa-erp .dica { margin: 0; color: var(--mudo); font-size: 12.5px; }
@media (max-width: 760px) { .linha-etapa, .linha-opcao { grid-template-columns: 1fr 1fr; } .linha-etapa .largo, .linha-opcao input[name=nome] { grid-column: 1 / -1; } }

/* Logotipo no menu e no login */
.lateral .marca { gap: 10px; }
.simbolo { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 4px; outline: 1px solid rgba(255, 255, 255, 0.35); outline-offset: 1px; }
.logotipo { display: grid; font: 300 26px/1 'Josefin Sans', sans-serif; letter-spacing: 0.05em; color: #fff; }
.logotipo small { font: 400 11px/1.3 'Josefin Sans', sans-serif; letter-spacing: 0.24em; text-transform: uppercase; color: #f3b9b5; opacity: 1; margin-top: 3px; }
.marca-login { display: grid; justify-items: center; gap: 12px; margin-bottom: 6px; }
.marca-login .logotipo { text-align: center; font-size: 44px; color: var(--texto); }
.marca-login .logotipo small { font-size: 18px; letter-spacing: 0.12em; text-transform: none; color: var(--azul); margin-top: 2px; }

/* Caixas do PDV */
.caixas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; }
.caixa-quadro.fechado { background: #fbf8f3; }
.caixa-quadro.vencido { border-color: #e9c46a; }
.faixa-caixas { display: flex; flex-wrap: wrap; gap: 8px; }
.faixa-caixas a { padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; text-decoration: none; border: 1px solid var(--borda); background: #fff; color: var(--texto); }
.faixa-caixas a.ok { background: var(--verde-fundo); color: var(--verde); border-color: transparent; }
.faixa-caixas a.fechado { background: var(--vermelho-fundo); color: var(--vermelho); border-color: transparent; }
@media (max-width: 760px) { .caixas-grade { grid-template-columns: 1fr; } }

/* Sobre o Sistema e aviso de versão nova */
.versao-atual { display: flex; align-items: center; gap: 14px; }
.versao-atual > div { flex: 1; min-width: 0; }
.versao-atual strong { font-size: 17px; }
.versao-atual p { margin: 2px 0 0; }
.versoes { list-style: none; margin: 0; padding: 0; }
.versoes > li { padding: 14px 0; border-top: 1px solid var(--borda); }
.versoes > li:first-child { border-top: 0; padding-top: 4px; }
.versao-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.versoes ul, .novidade ul { margin: 6px 0 0; padding-left: 20px; }
.versoes ul li, .novidade ul li { margin: 3px 0; }
.versao-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; color: var(--azul-escuro); background: var(--azul-claro); padding: 2px 8px; border-radius: 99px; }
code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: #f1ece3; padding: 1px 5px; border-radius: 4px; }
dialog.novidades { width: min(520px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: 14px; padding: 22px 24px; color: var(--texto); background: var(--cartao); }
dialog.novidades::backdrop { background: rgb(34 31 27 / 0.45); }
dialog.novidades h2 { margin: 0 0 4px; }
.novidade { padding: 12px 0; border-top: 1px solid var(--borda); }
.faixa-versao { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; background: var(--nori); color: #fff; font-weight: 600; }

/* Venda rápida do PDV: cardápio em faixas à esquerda, pedido à direita */
.venda-rapida { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.venda-rapida > div { display: grid; gap: 18px; min-width: 0; }
.faixa-canal, .faixa-categorias { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.faixa-canal a, .faixa-categorias a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--borda); background: #fff; color: var(--texto); font-weight: 600; font-size: 13px; text-decoration: none; }
.faixa-canal a { padding: 10px 20px; font-size: 15px; }
.faixa-canal a.ativa, .faixa-categorias a.ativa { background: var(--nori); border-color: var(--nori); color: #fff; }
.faixa-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.produto-faixa { margin: 0; }
.produto-faixa, .produto-faixa button { display: flex; flex-direction: column; gap: 4px; min-height: 84px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); background: #fff; color: var(--texto); text-align: left; font: inherit; text-decoration: none; }
form.produto-faixa { padding: 0; border: 0; min-height: 0; }
.produto-faixa button { width: 100%; height: 100%; cursor: pointer; }
.produto-faixa:hover, .produto-faixa button:hover { border-color: var(--azul); text-decoration: none; }
.produto-faixa span { font-weight: 600; font-size: 14px; line-height: 1.25; }
.produto-faixa b { color: var(--azul); }
.produto-faixa small { color: var(--mudo); font-size: 12px; }
.opcoes-faixa { margin: 0 0 14px; padding: 14px; border-radius: 12px; background: var(--azul-claro); }
.opcoes-faixa h3 { margin: 0 0 8px; }
.opcoes-faixa fieldset { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.opcoes-faixa legend { font-weight: 700; margin-bottom: 6px; }
.opcoes-faixa .opcao { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff; border-radius: 8px; border: 1px solid var(--borda); }
.opcoes-faixa .opcao input[inputmode] { width: 3em; }
.itens-carrinho { list-style: none; margin: 8px 0; padding: 0; }
.itens-carrinho li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.itens-carrinho li > form, .itens-carrinho li > details { grid-column: 1 / -1; }
.totais-carrinho { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 10px 0 0; }
.totais-carrinho dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totais-carrinho .total { font-size: 18px; font-weight: 700; padding-top: 4px; border-top: 1px solid var(--borda); }
fieldset.autorizacao { border: 1px dashed var(--borda); border-radius: 10px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) { .venda-rapida { grid-template-columns: 1fr; } }