/* Painel admin — cores: preto, branco e azul (#0852ad). */
:root {
  --preto: #000;
  --superficie: #121212;
  --superficie-2: #1b1b1c;
  --linha: #2c2c2e;
  --grafite: #404040;
  --cinza: #9a9b9f;
  --branco: #f5f5f5;
  --laranja: #0852ad;
  --laranja-forte: #2f7fe0;
  --laranja-fundo: rgba(47, 127, 224, .14);
  --perigo: #ff5a4e;
  --ok: #49d17d;
  --corte: 14px;
  --fonte-titulo: "Russo One", "Arial Black", Impact, sans-serif;
  --fonte: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--preto); color: var(--branco);
  font: 400 16px/1.55 var(--fonte); letter-spacing: .01em;
}
a { color: var(--laranja-forte); }
code { font-family: var(--fonte); font-weight: 600; color: #a9cdff; word-break: break-all; }
small { font-size: .8em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--laranja); color: #fff; padding: 8px 14px; z-index: 50; }
.pular:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--laranja-forte); outline-offset: 3px; }
.ico { width: 22px; height: 22px; flex: none; }

/* Fundo: grade técnica + os dois tacos cruzados da logo, bem apagados */
.fundo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60vmax 40vmax at 85% -10%, rgba(47,127,224,.16), transparent 60%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 36px 36px,
    var(--preto);
}
.fundo::before, .fundo::after { content: ""; position: absolute; top: 50%; left: 50%; width: 150vmax; height: 7vmax;
  background: linear-gradient(90deg, transparent, rgba(47,127,224,.07) 30%, rgba(47,127,224,.07) 70%, transparent);
  border-block: 1px solid rgba(47,127,224,.10); }
.fundo::before { transform: translate(-50%, -50%) rotate(38deg); }
.fundo::after { transform: translate(-50%, -50%) rotate(-38deg); }

/* ───────── Menu lateral ───────── */
.trilho { position: fixed; inset: 0 auto 0 0; width: 252px; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 14px; background: rgba(8,8,8,.92); border-right: 1px solid var(--linha); backdrop-filter: blur(8px); z-index: 20; }
.marca { display: block; padding: 4px 0 14px; text-align: center; }
.marca img { width: 110px; height: auto; filter: drop-shadow(0 0 18px rgba(47,127,224,.25)); }
.trilho ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.trilho a:not(.marca) { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--cinza);
  text-decoration: none; font-weight: 600; border-left: 3px solid transparent; transition: color .15s, background .15s; }
.trilho a:not(.marca):hover { color: var(--branco); background: var(--superficie-2); }
.trilho a.ativo { color: var(--branco); background: linear-gradient(90deg, var(--laranja-fundo), transparent);
  border-left-color: var(--laranja); }
.trilho a.ativo .ico { color: var(--laranja); filter: drop-shadow(0 0 6px rgba(47,127,224,.6)); }
.quem { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px; background: var(--superficie); border: 1px solid var(--linha);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.quem strong { display: block; font-size: .95rem; }
.quem small { color: var(--laranja); }
.quem form { margin: 0; }
.sair { background: none; border: 1px solid var(--linha); color: var(--cinza); padding: 8px; cursor: pointer; display: grid; }
.sair:hover { color: var(--perigo); border-color: var(--perigo); }
.barra-movel { display: none; }

/* ───────── Área principal ───────── */
.palco { margin-left: 252px; padding: 36px clamp(18px, 4vw, 48px) 24px; max-width: 1240px; }
.cabeca { margin-bottom: 26px; }
.cabeca h1 { font: 400 clamp(1.8rem, 3.2vw, 2.6rem)/1.1 var(--fonte-titulo); margin: 0 0 6px; letter-spacing: .01em; }
.cabeca h1::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 12px;
  background: var(--laranja); box-shadow: 0 0 14px rgba(47,127,224,.7); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.cabeca p { margin: 10px 0 0; color: var(--cinza); max-width: 70ch; }
.rodape { margin-top: 40px; color: var(--grafite); font-size: .8rem; }

/* Placas (painéis com cantos cortados, como o escudo da logo) */
.placa { position: relative; background: linear-gradient(180deg, rgba(27,27,28,.92), rgba(16,16,16,.92));
  border: 1px solid var(--linha); padding: 22px clamp(16px, 2.4vw, 26px); margin-bottom: 20px;
  clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte)); }
.placa::before { content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 46px; pointer-events: none;
  background: linear-gradient(135deg, var(--laranja) 0 2px, transparent 2px) ,
              linear-gradient(var(--laranja), var(--laranja)) 14px 0 / 32px 2px no-repeat,
              linear-gradient(var(--laranja), var(--laranja)) 0 14px / 2px 32px no-repeat; }
.placa.destaque { border-color: var(--laranja); box-shadow: inset 0 0 40px rgba(47,127,224,.08); }
.placa h2 { font: 400 1.2rem/1.2 var(--fonte-titulo); margin: 0 0 16px; display: flex; align-items: baseline; gap: 10px; }
.placa h2 small { font-family: var(--fonte); font-weight: 700; color: var(--laranja); font-size: .85rem;
  border: 1px solid rgba(47,127,224,.4); padding: 1px 8px; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 20px; }
.vazio { color: var(--cinza); margin: 0; }
.dica { color: var(--cinza); font-size: .92rem; }
.fraco { color: var(--cinza); }
.fim-placa { margin-top: 18px; }
.link-mais { display: inline-block; margin-top: 12px; font-weight: 600; }

/* Placar da visão geral */
.placares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; margin-bottom: 22px; }
.placar { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 16px; text-decoration: none; color: var(--branco);
  background: var(--superficie); border: 1px solid var(--linha); position: relative; transition: border-color .15s, transform .15s;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.placar:hover { border-color: var(--laranja); transform: translateY(-2px); }
.placar::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: var(--laranja); }
.placar .num { font: 400 2.6rem/1 var(--fonte-titulo); color: var(--branco); text-shadow: 0 0 22px rgba(47,127,224,.35); }
.placar .num-texto { font-size: 1.5rem; padding: 9px 0 6px; }
.placar .rot { color: var(--cinza); font-weight: 600; }

/* Lista que o app recebe */
.fila { list-style: none; counter-reset: f; margin: 0; padding: 0; display: grid; gap: 8px; }
.fila li { counter-increment: f; display: grid; grid-template-columns: 34px 1fr; grid-template-areas: "n nome" "n url";
  align-items: center; padding: 10px 12px; background: rgba(0,0,0,.4); border-left: 2px solid var(--grafite); }
.fila li::before { content: counter(f); grid-area: n; font: 400 1.05rem var(--fonte-titulo); color: var(--laranja); }
.fila .nome { grid-area: nome; font-weight: 700; }
.fila code { grid-area: url; font-size: .88rem; color: var(--cinza); font-weight: 500; }
.aviso-previa { padding: 12px 14px; background: rgba(0,0,0,.4); border-left: 2px solid var(--laranja); margin-bottom: 10px; }
.aviso-previa h3 { margin: 0 0 4px; font-size: 1rem; }
.aviso-previa p { margin: 0; color: #cfcfd2; }
.links-api { display: grid; gap: 8px; }
.links-api div { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 10px 12px; background: rgba(0,0,0,.45); border: 1px dashed var(--linha); }
.links-api span { color: var(--cinza); min-width: 90px; font-weight: 600; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--linha); display: grid; gap: 10px; }
.linha-tempo li { position: relative; color: #d6d6d8; }
.linha-tempo li::before { content: ""; position: absolute; left: -18px; top: .55em; width: 7px; height: 7px; background: var(--laranja); transform: rotate(45deg); }
.linha-tempo time { color: var(--cinza); margin-right: 10px; font-variant-numeric: tabular-nums; }

/* ───────── Formulários ───────── */
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; color: #dcdcde; }
.form-linha { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: end; }
.form-linha .largo { grid-column: span 2; }
input, textarea, select { width: 100%; font: 500 1rem var(--fonte); color: var(--branco); background: #0a0a0a;
  border: 1px solid var(--grafite); padding: 11px 13px; border-radius: 0; transition: border-color .15s, box-shadow .15s; }
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(47,127,224,.22), 0 0 18px rgba(47,127,224,.18); }
input::placeholder, textarea::placeholder { color: #5d5d61; }
.campo-codigo { font: 400 1.8rem var(--fonte-titulo); letter-spacing: .3em; text-align: center; }
.acoes-form { display: flex; flex-wrap: wrap; gap: 10px; }
.contador { justify-self: end; font-size: .8rem; color: var(--cinza); margin-top: -8px; }
.form-mini { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.form-mini input { width: 120px; padding: 7px 9px; font-size: .9rem; }

/* Botões com corte diagonal */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 .98rem var(--fonte);
  padding: 11px 20px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .15s, color .15s, box-shadow .15s, filter .15s; }
.btn-cheio { background: var(--laranja); color: #fff; }
.btn-cheio:hover { background: var(--laranja-forte); filter: drop-shadow(0 0 10px rgba(47,127,224,.55)); }
.btn-linha { background: transparent; color: var(--branco); border-color: var(--grafite); }
.btn-linha:hover { border-color: var(--laranja); color: var(--laranja-forte); }
.btn-perigo { background: transparent; color: var(--perigo); border-color: rgba(255,90,78,.45); }
.btn-perigo:hover { background: var(--perigo); color: #000; }
.btn-pequeno { padding: 6px 12px; font-size: .86rem; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }

/* Interruptor ativo/pausado */
.chave { display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; color: var(--cinza); font: 600 .9rem var(--fonte); cursor: pointer; padding: 4px 0; }
.chave span { width: 38px; height: 20px; border: 1px solid var(--grafite); background: #0a0a0a; position: relative; transition: .2s; }
.chave span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--grafite); transition: .2s; }
.chave.ligada { color: var(--branco); }
.chave.ligada span { border-color: var(--laranja); box-shadow: 0 0 10px rgba(47,127,224,.35); }
.chave.ligada span::after { left: 21px; background: var(--laranja); }

/* ───────── Tabelas ───────── */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: .8rem; color: var(--cinza); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--laranja); }
.tabela td { padding: 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:hover { background: rgba(47,127,224,.04); }
.tabela tr.pausado td:not(.acoes) { opacity: .5; }
.tabela tr.alerta td { color: #ffb4ad; }
.tabela-densa td { padding: 8px 12px; font-size: .92rem; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.tabela .acoes, .cartao-aviso footer { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.tabela td.acoes { display: table-cell; }
.tabela td.acoes > * { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.tabela form { margin: 0; }
.corta { max-width: 320px; overflow-wrap: anywhere; }
.selo { display: inline-block; font-size: .78rem; font-weight: 700; padding: 1px 8px; border: 1px solid var(--grafite); color: var(--cinza); }

/* Menu de ações da equipe */
.menu-acoes { position: relative; text-align: left; }
.menu-acoes summary { list-style: none; }
.menu-acoes summary::-webkit-details-marker { display: none; }
.caixa-acoes { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 280px; display: grid; gap: 14px;
  padding: 14px; background: #0c0c0c; border: 1px solid var(--laranja); box-shadow: 0 18px 40px rgba(0,0,0,.7); white-space: normal; }
.caixa-acoes form { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.caixa-acoes form:last-child { border-bottom: 0; padding-bottom: 0; }
.caixa-acoes label { display: grid; gap: 4px; font-size: .8rem; color: var(--cinza); }
.caixa-acoes input { padding: 7px 9px; font-size: .9rem; }

/* Cartões de aviso */
.cartoes-aviso { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.cartao-aviso { display: flex; flex-direction: column; background: rgba(0,0,0,.45); border: 1px solid var(--linha); border-top: 2px solid var(--laranja); padding: 16px; }
.cartao-aviso.pausado { border-top-color: var(--grafite); }
.cartao-aviso.pausado h3, .cartao-aviso.pausado p { opacity: .5; }
.cartao-aviso header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cartao-aviso h3 { margin: 0; font-size: 1.05rem; }
.cartao-aviso time { color: var(--cinza); font-size: .82rem; white-space: nowrap; }
.cartao-aviso p { color: #cfcfd2; flex: 1; margin: 10px 0 14px; overflow-wrap: anywhere; }
.cartao-aviso footer form { margin: 0; }
.cartao-aviso footer form:first-child { margin-right: auto; }

.paginas { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 16px; color: var(--cinza); }

/* ───────── Mensagens ───────── */
.msg { padding: 12px 16px; margin-bottom: 16px; border-left: 3px solid; background: var(--superficie); font-weight: 500; }
.msg-ok { border-color: var(--ok); }
.msg-erro { border-color: var(--perigo); background: rgba(255,90,78,.08); }
.msg-info { border-color: var(--laranja); background: var(--laranja-fundo); }
.ok-texto { color: var(--ok); }

/* ───────── Telas de entrada (login, 2FA, instalação) ───────── */
.tela-entrada { display: grid; place-items: center; padding: 28px 16px; }
.cartao-entrada { width: min(100%, 440px); padding: 30px clamp(20px, 5vw, 36px) 28px; background: rgba(12,12,12,.88);
  border: 1px solid var(--linha); backdrop-filter: blur(6px); position: relative;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.cartao-entrada::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, var(--laranja) 0 1.5px, transparent 1.5px) top left / 22px 22px no-repeat,
              linear-gradient(315deg, var(--laranja) 0 1.5px, transparent 1.5px) bottom right / 22px 22px no-repeat; }
.logo-entrada { display: block; width: 140px; height: auto; margin: -6px auto 14px;
  filter: drop-shadow(0 0 0 rgba(47,127,224,0)); animation: acender 1.6s ease-out .1s both; }
@keyframes acender {
  0% { opacity: 0; transform: scale(.92); filter: drop-shadow(0 0 0 rgba(47,127,224,0)); }
  60% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 34px rgba(47,127,224,.75)); }
  100% { filter: drop-shadow(0 0 16px rgba(47,127,224,.3)); }
}
.cartao-entrada h1 { font: 400 1.5rem/1.2 var(--fonte-titulo); text-align: center; margin: 0 0 6px; }
.cartao-entrada .sub { text-align: center; color: var(--cinza); margin: 0 0 20px; }
.cartao-entrada .form { margin-top: 18px; }
.cartao-entrada .btn-cheio { width: 100%; padding: 13px; font-size: 1.05rem; }
.rodape-entrada { text-align: center; color: var(--cinza); font-size: .9rem; margin: 18px 0 0; }
.checagem { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; font-size: .92rem; }
.checagem li { padding-left: 24px; position: relative; overflow-wrap: anywhere; }
.checagem li::before { position: absolute; left: 0; font-weight: 700; }
.checagem .ok::before { content: "✓"; color: var(--ok); }
.checagem .falha { color: #ffb4ad; } .checagem .falha::before { content: "✕"; color: var(--perigo); }
.checagem .alerta::before { content: "!"; color: var(--laranja); left: 4px; }
.passos { padding-left: 20px; color: #d6d6d8; display: grid; gap: 6px; }
.qr { width: 220px; height: 220px; margin: 16px auto; background: #fff; padding: 12px; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--laranja), 0 0 28px rgba(47,127,224,.35); color: #000; font-size: .85rem; text-align: center; }
.qr svg, .qr img { width: 100%; height: 100%; display: block; }
.chave-manual { text-align: center; color: var(--cinza); font-size: .9rem; }
.chave-manual summary { cursor: pointer; }
.chave-manual code { display: block; margin-top: 8px; font-size: 1.05rem; letter-spacing: .06em; }
.codigos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; padding: 0; margin: 16px 0; }
.codigos li { text-align: center; padding: 8px; background: #0a0a0a; border: 1px dashed var(--grafite); }
.codigos code { font-size: 1.05rem; letter-spacing: .04em; }
.cartao-entrada > .btn { width: 100%; }

/* ───────── Celular ───────── */
@media (max-width: 900px) {
  .barra-movel { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
    padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); background: rgba(0,0,0,.92); border-bottom: 1px solid var(--linha);
    font: 400 1.05rem var(--fonte-titulo); }
  .botao-menu { margin-left: auto; background: none; border: 1px solid var(--grafite); color: var(--branco); padding: 7px; display: grid; cursor: pointer; }
  .trilho { transform: translateX(-100%); transition: transform .25s ease; width: min(84vw, 290px); box-shadow: 20px 0 60px rgba(0,0,0,.8); }
  .trilho.aberto { transform: none; }
  .palco { margin-left: 0; padding-top: 22px; }
  .form-linha .largo { grid-column: auto; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { padding: 10px 0; border-bottom: 1px solid var(--linha); }
  .tabela td { border: 0; padding: 4px 0; display: flex; gap: 12px; justify-content: space-between; align-items: center; }
  .tabela td[data-r]::before { content: attr(data-r); color: var(--cinza); font-size: .8rem; font-weight: 600; flex: none; }
  .tabela td.acoes { display: flex; justify-content: flex-start; flex-wrap: wrap; padding-top: 10px; }
  .tabela td.acoes > * { margin-left: 0; }
  .corta { max-width: none; text-align: right; }
  .caixa-acoes { left: 0; right: auto; width: min(86vw, 300px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.empurra { margin-left: auto; font-family: var(--fonte); }