/* Base da interface: cores, tipografia e controles. Compartilhada pela central
   e pelo painel. Layout é problema de cada página — central.css e painel.css.

   Duas famílias de cor convivem aqui, e é importante não confundi-las:

   - `--bg`, `--card`, `--linha`, `--tx`… são a interface. Não mudam nunca.
   - `--evento-primaria` e companhia são a cor DAQUELA corrida, escritas por
     core/tema.js. Elas pintam o realce do menu, a borda do cartão e a prévia,
     para o operador reconhecer de relance em qual evento está.

   A semântica de cor é a da mesa de corte, e ela vale a página inteira:
   VERDE = prévia, o que você está preparando. VERMELHO = no ar, o que o
   público está vendo. ÂMBAR = fixado por cima. */

:root {
  --bg:     #0B0F15;
  --bg-2:   #0E141C;
  --card:   #141B25;
  --card-2: #1A2331;
  --linha:  #232C3A;
  --linha-2: rgba(255, 255, 255, .07);
  --tx:     #E8EDF4;
  --mut:    rgba(232, 237, 244, .62);
  --fraco:  rgba(232, 237, 244, .38);

  --previa: #22C55E;
  --ar:     #EF4444;
  --fixa:   #F59E0B;

  /* Padrão, até o evento dizer a sua. */
  --evento-primaria: #FFB020;
  --evento-secundaria: #0B0F15;
  --evento-primaria-tinta: #0B0F15;

  --raio: 10px;
  --face: 'Barlow', 'Segoe UI', system-ui, Arial, sans-serif;
  --face-c: 'Barlow Condensed', 'Segoe UI', system-ui, Arial, sans-serif;
  --face-num: 'Barlow', ui-monospace, Consolas, monospace;
}

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

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 14px/1.45 var(--face);
  -webkit-font-smoothing: antialiased;
}

/* `display:grid` de classe de autor venceria o `display:none` padrão do
   atributo. Sem esta guarda, esconder um bloco simplesmente não funciona. */
[hidden] { display: none !important; }

a { color: var(--evento-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #2E3A4C; }

/* ---- rótulos de seção ---------------------------------------------------- */

.rot {
  font: 600 10.5px/1 var(--face);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--fraco);
}

.dica { font-size: 12px; color: var(--mut); line-height: 1.5; }
.dica strong { color: var(--tx); font-weight: 600; }

/* ---- botões -------------------------------------------------------------- */

button, .botao {
  font: 500 14px/1 var(--face);
  color: var(--tx);
  background: var(--card-2);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 38px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
button:hover:not(:disabled), .botao:hover { background: #222D3D; border-color: #2E3A4C; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible, .botao:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--evento-primaria); outline-offset: 2px;
}

button.principal {
  background: var(--evento-primaria);
  border-color: var(--evento-primaria);
  color: var(--evento-primaria-tinta);
  font-weight: 700;
}
button.principal:hover:not(:disabled) { filter: brightness(1.08); background: var(--evento-primaria); }

button.no-ar { background: rgba(239, 68, 68, .16); border-color: rgba(239, 68, 68, .5); color: #FCA5A5; }
button.previa { background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .5); color: #86EFAC; }
button.perigo { color: #FCA5A5; }
button.perigo:hover:not(:disabled) { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .45); }
button.discreto { background: transparent; border-color: transparent; color: var(--mut); padding: 6px 8px; min-height: 30px; }
button.discreto:hover:not(:disabled) { background: var(--card-2); color: var(--tx); }
button.pequeno { min-height: 30px; padding: 6px 10px; font-size: 13px; }
button.ligado { background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .5); color: #86EFAC; }

/* ---- campos -------------------------------------------------------------- */

input[type="text"], input[type="number"], input[type="date"], input[type="search"], select, textarea {
  font: 14px/1.3 var(--face);
  color: var(--tx);
  background: var(--bg-2);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 9px 11px;
  min-height: 38px;
  width: 100%;
}
input::placeholder { color: var(--fraco); }
input:focus, select:focus, textarea:focus { border-color: var(--evento-primaria); outline: none; }
select { cursor: pointer; }

input[type="color"] {
  width: 44px; height: 38px; padding: 3px;
  background: var(--bg-2); border: 1px solid var(--linha); border-radius: 8px; cursor: pointer;
}

label.campo { display: block; }
label.campo > span {
  display: block; margin-bottom: 5px;
  font: 600 10.5px/1 var(--face); letter-spacing: .14em; text-transform: uppercase; color: var(--fraco);
}

.linha { display: flex; gap: 8px; align-items: center; }
.linha > .cresce { flex: 1 1 auto; min-width: 0; }

/* ---- pílulas e selos ----------------------------------------------------- */

.pilula {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font: 600 11px/1 var(--face); letter-spacing: .06em;
  background: var(--card-2); border: 1px solid var(--linha); color: var(--mut);
}
.pilula.viva { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .45); color: #FCA5A5; }
.pilula.ok { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .45); color: #86EFAC; }
.pilula.aviso { background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .45); color: #FCD34D; }

.luz { width: 8px; height: 8px; border-radius: 50%; background: var(--fraco); flex: none; }
.luz.viva { background: var(--ar); animation: pulsa 1.4s ease-in-out infinite; }
.luz.ok { background: var(--previa); }
@keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- avisos -------------------------------------------------------------- */

.aviso {
  border-radius: 8px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5;
  background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35); color: #FCD34D;
}
.aviso.erro { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); color: #FCA5A5; }

.vazio {
  padding: 28px 20px; text-align: center;
  color: var(--fraco); font-size: 13px; line-height: 1.6;
  border: 1px dashed var(--linha); border-radius: var(--raio);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}