/* Mesma base visual do Painel DDTank (ddtank-337-painel/site/estilo.css): tokens, topo, botões, campos, avisos. */
:root {
  --fundo: #f5f3ee;
  --fundo-2: #ffffff;
  --superficie: #ffffff;
  --superficie-2: #f1eee7;
  --borda: #e3ded3;
  --borda-forte: #cfc7b8;
  --texto: #1d1f27;
  --texto-2: #5b5f6b;
  --texto-3: #8a8d96;
  --destaque: #b7791f;
  --destaque-suave: #f6e7c9;
  --sombra: 0 1px 2px rgb(30 25 10 / 6%), 0 4px 16px rgb(30 25 10 / 6%);
  --sombra-alta: 0 12px 48px rgb(20 15 5 / 22%);
  --q1: #8a909a; --q2: #2f9e6a; --q3: #2f7fd6; --q4: #8b5cf6; --q5: #e07b1a;
  --q6: #dc3d4b; --q7: #c99a06; --q8: #d6409f; --q9: #0e9aa7;
  --raio: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0e111b;
    --fundo-2: #121626;
    --superficie: #161b2c;
    --superficie-2: #1d2337;
    --borda: #262d45;
    --borda-forte: #36405f;
    --texto: #eceef5;
    --texto-2: #a5abbe;
    --texto-3: #6f7690;
    --destaque: #f0b65a;
    --destaque-suave: #3a2f1a;
    --sombra: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 20px rgb(0 0 0 / 25%);
    --sombra-alta: 0 16px 60px rgb(0 0 0 / 55%);
    --q1: #a9afba; --q2: #4fd08f; --q3: #5aa8ff; --q4: #b48bff; --q5: #ffa04d;
    --q6: #ff6474; --q7: #ffd24a; --q8: #ff7fcf; --q9: #3fdbe6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #0e111b;
  --fundo-2: #121626;
  --superficie: #161b2c;
  --superficie-2: #1d2337;
  --borda: #262d45;
  --borda-forte: #36405f;
  --texto: #eceef5;
  --texto-2: #a5abbe;
  --texto-3: #6f7690;
  --destaque: #f0b65a;
  --destaque-suave: #3a2f1a;
  --sombra: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 20px rgb(0 0 0 / 25%);
  --sombra-alta: 0 16px 60px rgb(0 0 0 / 55%);
  --q1: #a9afba; --q2: #4fd08f; --q3: #5aa8ff; --q4: #b48bff; --q5: #ffa04d;
  --q6: #ff6474; --q7: #ffd24a; --q8: #ff7fcf; --q9: #3fdbe6;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* espaço da barra de rolagem sempre reservado: trocar de filtro não empurra a tela para o lado */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
[hidden] { display: none !important; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fundo) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--borda);
}
.topo-linha {
  max-width: 1600px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
}
.marca {
  display: flex; align-items: center; gap: 10px;
  color: var(--texto); text-decoration: none;
  font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 19px; letter-spacing: -.01em;
  white-space: nowrap;
}
.marca img { border-radius: 8px; }
.busca {
  flex: 1; max-width: 640px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: var(--sombra);
  transition: border-color .15s, box-shadow .15s;
}
.busca:focus-within { border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-suave); }
.busca svg { color: var(--texto-3); }
.busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 15px; }
.busca input::-webkit-search-cancel-button { cursor: pointer; }
.busca kbd {
  font: 500 12px Inter, sans-serif; color: var(--texto-3);
  border: 1px solid var(--borda); border-radius: 6px; padding: 1px 7px;
}
.icone-botao {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie);
  color: var(--texto-2); cursor: pointer;
}
.icone-botao:hover { color: var(--texto); border-color: var(--borda-forte); }

.link { border: 0; background: none; color: var(--destaque); cursor: pointer; font-weight: 500; padding: 4px; }
.link:hover { text-decoration: underline; }
.contagem { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--fundo-2);
  font-size: 13px; font-weight: 500; color: var(--texto-2); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { border-color: var(--borda-forte); color: var(--texto); }
.chip[aria-pressed="true"], .chip[data-estado="sim"] {
  background: var(--destaque-suave); border-color: var(--destaque); color: var(--texto);
}
.segmentado {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 10px; padding: 3px; gap: 2px;
}
.segmentado button {
  border: 0; background: none; border-radius: 7px; padding: 6px 2px; font-size: 13px; font-weight: 500;
  color: var(--texto-2); cursor: pointer;
}
.segmentado button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.botao {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); cursor: pointer; font-weight: 500;
}
.selo {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--destaque); color: #1b1408; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center;
}
.estado:empty { display: none; }
.estado {
  display: grid; place-items: center; text-align: center; gap: 10px;
  padding: 72px 20px; color: var(--texto-2);
}
.estado h2 { margin: 0; font: 600 22px Fraunces, Georgia, serif; color: var(--texto); }
.estado p { margin: 0; max-width: 46ch; }
.girando {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--borda); border-top-color: var(--destaque);
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.esqueleto { list-style: none; height: 196px; border-radius: var(--raio); background: linear-gradient(100deg, var(--superficie) 30%, var(--superficie-2) 50%, var(--superficie) 70%); background-size: 300% 100%; animation: brilho 1.4s ease infinite; border: 1px solid var(--borda); }
/* ---------- detalhe ---------- */
.detalhe {
  width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 900px);
  padding: 0; border: 1px solid var(--borda); border-radius: 20px;
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta);
}
.detalhe::backdrop { background: rgb(8 10 18 / 55%); backdrop-filter: blur(4px); }
.detalhe[open] { display: flex; flex-direction: column; animation: surge .18s ease; }
@keyframes surge { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}

/* ---------- entrar ---------- */
.pagina-entrar {
  min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(60% 50% at 50% 0%, var(--destaque-suave), transparent 70%),
    var(--fundo);
}
.entrar { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; }
.entrar-cartao {
  width: min(380px, 100%); display: grid; gap: 14px;
  padding: 32px 28px 28px; border-radius: 20px;
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-alta);
}
.entrar-cartao img { justify-self: center; border-radius: 14px; }
.entrar-cartao h1 { margin: 4px 0 0; text-align: center; font: 600 24px Fraunces, Georgia, serif; letter-spacing: -.01em; }
.entrar-sub { margin: -8px 0 6px; text-align: center; color: var(--texto-2); font-size: 14px; }
.campo { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.campo input {
  height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--borda);
  background: var(--fundo-2); outline: 0; font-size: 15px; color: var(--texto);
}
.campo input:focus { border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-suave); }
.entrar-erro { margin: 0; color: var(--q6); font-size: 13.5px; }
.entrar-botao {
  height: 46px; margin-top: 4px; border: 0; border-radius: 11px; cursor: pointer;
  background: var(--destaque); color: #1b1408; font-weight: 600; font-size: 15px;
}
.entrar-botao:hover { filter: brightness(1.06); }
.entrar-botao:disabled { opacity: .65; cursor: progress; }

/* ---------- abas e topo ---------- */
.abas { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--superficie-2); border: 1px solid var(--borda); }
.abas a {
  padding: 6px 14px; border-radius: 8px; color: var(--texto-2); text-decoration: none; font-weight: 500; font-size: 14px;
}
.abas a:hover { color: var(--texto); }
.abas a[aria-current="page"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.usuario-nome {
  font-size: 13px; color: var(--texto-2); padding: 0 4px; white-space: nowrap;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.usuario-nome::before { content: "● "; color: var(--q2); font-size: 10px; vertical-align: 1px; }

.botao.primario { background: var(--destaque); border-color: var(--destaque); color: #1b1408; font-weight: 600; }
.botao.primario:hover { filter: brightness(1.06); }
.botao.perigo { background: var(--q6); border-color: var(--q6); color: #fff; font-weight: 600; }
.botao.perigo-suave { color: var(--q6); }
.botao.perigo-suave:hover { border-color: var(--q6); }
.botao:hover { border-color: var(--borda-forte); }
.seletor {
  height: 40px; padding: 0 30px 0 12px; border-radius: 10px; border: 1px solid var(--borda); width: 100%;
  background: var(--fundo-2) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23888%22%3E%3Cpath d=%22m7 10 5 5 5-5Z%22/%3E%3C/svg%3E") no-repeat right 8px center / 18px;
  appearance: none; color: var(--texto); cursor: pointer; font-size: 14px; outline: 0;
}
.seletor:focus { border-color: var(--destaque); }
/* "Escolha o …" (opção vazia desabilitada) com a mesma cor do placeholder dos campos de texto */
.seletor:has(option[value=""][disabled]:checked) { color: var(--texto-3); font-weight: 400; }
.seletor option { color: var(--texto); font-weight: 400; }
.campo input::placeholder { color: var(--texto-3); opacity: 1; }
/* ---------- avisos e confirmação ---------- */
.avisos { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 32px); }
.aviso {
  display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 12px;
  background: var(--texto); color: var(--fundo); box-shadow: var(--sombra-alta); font-size: 14px;
  animation: surge .18s ease; transition: opacity .3s;
}
.aviso .link { color: #f0b65a; font-weight: 600; white-space: nowrap; }
.aviso.saindo { opacity: 0; }
.confirmacao {
  width: min(420px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--borda); border-radius: 18px;
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta);
}
.confirmacao::backdrop { background: rgb(8 10 18 / 55%); }
.confirmacao h2 { margin: 0 0 8px; font: 600 20px Fraunces, Georgia, serif; }
.confirmacao p { margin: 0 0 20px; color: var(--texto-2); font-size: 14px; }
.confirmacao-botoes { display: flex; justify-content: flex-end; gap: 8px; }

/* ======================================================================== Códigos DDTank */
.espaco { flex: 1; }
code, .cod { font: 500 13px/1.4 "JetBrains Mono", ui-monospace, Consolas, monospace; }
.vazio { margin: 0; padding: 28px 12px; text-align: center; color: var(--texto-3); font-size: 14px; list-style: none; }
.coluna-topo { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.coluna-topo h1 { margin: 0; font: 600 28px Fraunces, Georgia, serif; letter-spacing: -.01em; }
.coluna-topo .botao { margin-left: auto; align-self: center; }
.filtros-linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filtros-linha .seletor { width: auto; min-width: 220px; height: 38px; background-color: var(--superficie); }
.botao:disabled { opacity: .5; cursor: default; }
.girando.pequeno { width: 18px; height: 18px; border-width: 2px; }

.estado-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; vertical-align: middle;
  font: 600 11.5px Inter, sans-serif; letter-spacing: 0; white-space: nowrap;
  background: var(--superficie-2); color: var(--texto-2);
}
.estado-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.estado-chip.ativo { background: color-mix(in srgb, var(--q2) 15%, transparent); color: var(--q2); }
.estado-chip.entregue { background: var(--destaque-suave); color: var(--destaque); }

/* ---------- eventos: lista + detalhe ---------- */
.vista-eventos {
  max-width: 1600px; margin: 0 auto; padding: 20px 24px 64px;
  display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: start;
}
.vista-eventos[hidden] { display: none; }
.eventos-coluna { position: sticky; top: 89px; max-height: calc(100vh - 109px); display: flex; flex-direction: column; }
.eventos-lista { list-style: none; margin: 0; padding: 2px; display: grid; gap: 8px; overflow-y: auto; scrollbar-width: thin; }
.ev-linha {
  display: grid; gap: 8px; width: 100%; padding: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra);
  transition: border-color .12s;
}
.ev-linha:hover { border-color: var(--borda-forte); }
.ev-linha[aria-current="true"] { border-color: var(--destaque); box-shadow: var(--sombra), 0 0 0 1px var(--destaque); }
.ev-linha.encerrado { opacity: .62; }
.ev-linha-topo { display: flex; align-items: center; gap: 8px; }
.ev-nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medidor { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.medidor span { display: block; height: 100%; border-radius: inherit; background: var(--destaque); }
.ev-linha.baixo .medidor span { background: var(--q6); }
.ev-numeros { font-size: 12.5px; color: var(--texto-3); }
.ev-numeros b { color: var(--texto); font-weight: 600; }
.ev-linha.baixo .ev-numeros b { color: var(--q6); }

.evento {
  min-width: 0; padding: 22px 24px 28px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.evento > .estado { padding: 80px 20px; }
.evento > .estado svg { width: 36px; height: 36px; color: var(--texto-3); }
.ev-cabeca { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.ev-cabeca .voltar { display: none; }
.ev-titulo { flex: 1; min-width: 220px; }
.ev-rotulo { font-size: 12.5px; color: var(--texto-3); }
.ev-titulo h2 { margin: 2px 0 0; font: 600 26px/1.25 Fraunces, Georgia, serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ev-titulo h2 .estado-chip { margin-left: 6px; position: relative; top: -3px; }
.ev-acoes { display: flex; gap: 8px; }
.faixa-aviso {
  margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 13.5px;
  background: var(--superficie-2); color: var(--texto-2);
}
.faixa-aviso.alerta { background: color-mix(in srgb, var(--q6) 12%, transparent); color: var(--texto); }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.numero-cartao { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--fundo-2); }
.numero-cartao span { display: block; font-size: 12px; color: var(--texto-3); }
.numero-cartao strong { font-size: 24px; font-weight: 600; }
.numero-cartao.destaque { border-color: color-mix(in srgb, var(--destaque) 50%, var(--borda)); background: color-mix(in srgb, var(--destaque-suave) 55%, var(--fundo-2)); }
.secao h3 {
  display: flex; align-items: baseline; gap: 8px;
  margin: 26px 0 10px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-3);
}
.secao h3 .contagem { text-transform: none; letter-spacing: 0; }

/* prévia da mensagem, no jeito do Discord */
.previa-mensagem {
  padding: 12px 14px; border-radius: 10px; border-left: 3px solid var(--destaque);
  background: var(--superficie-2); color: var(--texto); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.previa-mensagem pre {
  margin: 6px 0; padding: 8px 10px; border-radius: 6px; white-space: pre-wrap;
  background: var(--fundo); border: 1px solid var(--borda); font: 500 13px "JetBrains Mono", ui-monospace, Consolas, monospace;
}
.previa-mensagem code { padding: 1px 4px; border-radius: 4px; background: var(--fundo); }
.mencao { padding: 0 3px; border-radius: 4px; font-weight: 500; background: color-mix(in srgb, #5865f2 22%, transparent); color: color-mix(in srgb, #5865f2 70%, var(--texto)); }

/* importação */
.soltar {
  display: grid; justify-items: center; gap: 4px; padding: 22px 16px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--borda-forte); border-radius: 12px; background: var(--fundo-2); color: var(--texto-2);
  transition: border-color .12s, background .12s;
}
.soltar:hover, .soltar.sobre { border-color: var(--destaque); background: color-mix(in srgb, var(--destaque-suave) 45%, var(--fundo-2)); }
.soltar svg { width: 28px; height: 28px; color: var(--destaque); }
.soltar b { color: var(--texto); font-weight: 600; }
.soltar small { color: var(--texto-3); font-size: 12.5px; max-width: 52ch; }
.importacao {
  display: grid; gap: 10px; margin-top: 12px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--destaque); background: color-mix(in srgb, var(--destaque-suave) 35%, var(--superficie));
}
.importacao:has(.girando) { display: flex; align-items: center; gap: 10px; border-color: var(--borda); background: var(--fundo-2); color: var(--texto-2); }
.importacao.erro { border-color: var(--q6); background: color-mix(in srgb, var(--q6) 10%, var(--superficie)); }
.importacao.erro p { margin: 0; }
.importacao-arquivo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.importacao-arquivo svg { color: var(--texto-3); }
.importacao-arquivo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importacao-novos { margin: 0; font-size: 15px; }
.importacao-novos strong { font-size: 20px; }
.importacao-fora { margin: 0; padding-left: 18px; color: var(--texto-2); font-size: 13.5px; }
.importacao-botoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* lotes */
.lotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lote { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo-2); }
.lote > svg { color: var(--texto-3); }
.lote-texto { flex: 1; min-width: 0; display: grid; }
.lote-texto b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-texto small, .lote-numeros small { color: var(--texto-3); font-size: 12px; }
.lote-numeros { display: grid; justify-items: end; white-space: nowrap; }
.lote-remover { width: 34px; height: 34px; color: var(--texto-3); }
.lote-remover:hover { color: var(--q6); border-color: var(--q6); }
.lote-remover svg { width: 17px; height: 17px; }

/* códigos */
.estados { grid-template-columns: repeat(3, auto); }
.estados button { padding: 6px 12px; }
.busca.busca-codigos { flex: 1 1 220px; max-width: none; margin: 0; height: 40px; box-shadow: none; }
.codigos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.codigo { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--borda); }
.codigo:first-child { border-top: 0; }
.codigo:nth-child(even) { background: color-mix(in srgb, var(--superficie-2) 45%, transparent); }
.codigo .cod { min-width: 0; overflow-wrap: anywhere; }
.codigo.entregue .cod { color: var(--texto-2); }
.copiar { border: 1px solid var(--borda); background: none; border-radius: 7px; font-size: 11.5px; padding: 2px 7px; color: var(--texto-2); cursor: pointer; flex: none; }
.copiar:hover { color: var(--texto); border-color: var(--borda-forte); }
.codigo-entrega { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; font-size: 13px; color: var(--texto-2); text-align: right; }
.codigo-entrega b { color: var(--texto); font-weight: 600; }
.codigo-entrega small { color: var(--texto-3); font-size: 12px; }
/* altura mínima: trocar entre Disponíveis e Entregues não faz a página encolher e pular */
[data-codigos] { min-height: 520px; }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; min-height: 34px; }
.codigos + .paginacao { margin: 8px 0 0; }
.paginacao-botoes { display: flex; align-items: center; gap: 4px; }
.paginacao-botoes .contagem { min-width: 56px; text-align: center; }
.paginacao .icone-botao { width: 34px; height: 34px; font-size: 17px; line-height: 1; }
.paginacao .icone-botao:disabled { opacity: .4; cursor: default; }

/* ---------- janela de criar/editar evento ---------- */
.janela {
  width: min(560px, calc(100vw - 32px)); max-height: min(90vh, 860px); padding: 0;
  border: 1px solid var(--borda); border-radius: 18px; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta);
}
.janela::backdrop { background: rgb(8 10 18 / 55%); backdrop-filter: blur(4px); }
.janela[open] { animation: surge .18s ease; }
.janela form { display: grid; gap: 14px; padding: 22px; }
.janela h2 { margin: 0; font: 600 20px Fraunces, Georgia, serif; overflow-wrap: anywhere; }
.janela .dica { margin: -6px 0 0; font-size: 12.5px; line-height: 1.6; }
.janela .dica code { padding: 1px 4px; border-radius: 4px; background: var(--superficie-2); color: var(--texto-2); font-size: 12px; }
.janela .dica .link { padding: 0; font-size: 12.5px; }
.campo textarea {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); resize: vertical; min-height: 120px;
  background: var(--fundo-2); outline: 0; font: 14px/1.5 Inter, sans-serif; color: var(--texto);
}
.campo textarea:focus { border-color: var(--destaque); box-shadow: 0 0 0 3px var(--destaque-suave); }
.previa-titulo { margin-bottom: -8px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-3); }

/* ---------- registro ---------- */
.vista-registro { max-width: 1100px; margin: 0 auto; padding: 20px 24px 64px; }
.vista-registro[hidden] { display: none; }
.busca.busca-larga { max-width: none; margin: 0 0 12px; }
.tipos { grid-template-columns: repeat(4, auto); }
.tipos button { padding: 6px 14px; }
.dia + .dia { margin-top: 22px; }
.dia h2 {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-2);
}
.dia h2 .contagem { text-transform: none; letter-spacing: 0; }
.registro-linhas { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra); overflow: hidden; }
.registro-linha {
  display: grid; grid-template-columns: 48px 72px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--borda); font-size: 14px;
}
.registro-linha:first-child { border-top: 0; }
.registro-hora { color: var(--texto-3); font-size: 13px; }
.registro-tipo { justify-self: start; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--superficie-2); color: var(--texto-2); }
.tipo-entrega .registro-tipo { background: var(--destaque-suave); color: var(--destaque); }
.tipo-importacao .registro-tipo, .tipo-lote-removido .registro-tipo { background: color-mix(in srgb, var(--q3) 14%, transparent); color: var(--q3); }
.registro-frase { min-width: 0; overflow-wrap: anywhere; color: var(--texto-2); }
.registro-frase b { color: var(--texto); font-weight: 600; }
.registro-frase .cod { padding: 1px 5px; border-radius: 5px; background: var(--superficie-2); color: var(--texto); }
.registro-frase small { color: var(--texto-3); }
.chip-evento { justify-self: end; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--superficie-2); color: var(--texto-2); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.botao.mais { display: flex; margin: 18px auto 0; }

@media (max-width: 960px) {
  .topo-linha { padding: 10px 16px; gap: 10px; }
  .marca span { display: none; }
  .usuario-nome { display: none; }
  .vista-eventos { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 48px; }
  .eventos-coluna { position: static; max-height: none; }
  body.evento-aberto .eventos-coluna { display: none; }
  body:not(.evento-aberto) .evento { display: none; }
  .ev-cabeca .voltar { display: grid; }
  .evento { padding: 16px; }
  .vista-registro { padding: 14px 16px 48px; }
  .registro-linha { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; }
  .registro-tipo { grid-column: 2; grid-row: 1; }
  .registro-frase { grid-column: 1 / -1; }
  .chip-evento { grid-column: 1 / -1; justify-self: start; }
  .filtros-linha .seletor { width: 100%; }
}
@media (max-width: 560px) {
  .coluna-topo h1 { font-size: 24px; }
  .numeros { gap: 6px; }
  .numero-cartao { padding: 10px; }
  .numero-cartao strong { font-size: 19px; }
  .ev-acoes { width: 100%; }
  .ev-acoes .botao { flex: 1; justify-content: center; }
  .codigo { flex-wrap: wrap; }
  .codigo-entrega { margin-left: 0; justify-content: flex-start; text-align: left; width: 100%; }
  .tipos, .estados { width: 100%; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .lote { flex-wrap: wrap; }
}

/* ---------- entrega à mão ---------- */
.copiar.entregar { color: var(--destaque); border-color: color-mix(in srgb, var(--destaque) 45%, var(--borda)); font-weight: 600; }
.copiar.entregar:hover { background: var(--destaque-suave); color: var(--texto); }
.etapa { display: grid; gap: 14px; }
.etapa[hidden] { display: none; }
.entrega-resumo { margin: -6px 0 0; color: var(--texto-2); font-size: 14px; overflow-wrap: anywhere; }
.entrega-resumo code { padding: 1px 6px; border-radius: 5px; background: var(--superficie-2); color: var(--texto); }
.janela .etapa .dica { margin: 0; }
.faixa-aviso.ok { margin: 0; background: color-mix(in srgb, var(--q2) 14%, transparent); color: var(--texto); }
.campo .opcional { margin-left: 4px; font-weight: 400; color: var(--texto-3); }
.sem-jogador { color: var(--texto-3); }