/* Telas de operação (TV do salão e cozinha). Tema escuro de alto contraste: lê de longe,
   não ofusca e é o padrão de KDS. Cores da marca vêm de app/lib/core/tema.dart. */
:root {
  --bg: #0a1020;
  --superficie: #121b2e;
  --superficie-2: #1a2540;
  --borda: #26324f;
  --texto: #eef3fb;
  --texto-2: #9fb0cc;
  --marca: #1e5bc6;
  --marca-2: #48cae4;
  --ok: #22c55e;
  --ok-fundo: #0f2a1c;
  --atencao: #f5a524;
  --atencao-fundo: #2e2210;
  --atraso: #ef4444;
  --atraso-fundo: #2f1316;
  --raio: 14px;
  --gap: clamp(8px, 1.2vw, 16px);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

body { display: flex; flex-direction: column; overflow: hidden; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible { outline: 3px solid var(--marca-2); outline-offset: 2px; }

.oculto { display: none !important; }

/* ---------------------------------------------------------------- barra superior */

.topo {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: clamp(10px, 1.4vw, 18px) clamp(14px, 2vw, 28px);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}

.topo .marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topo .logo {
  width: clamp(32px, 3vw, 44px);
  height: clamp(32px, 3vw, 44px);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--marca), var(--marca-2));
  display: grid;
  place-items: center;
  flex: none;
}
.topo .logo svg { width: 60%; height: 60%; }
.topo h1 {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topo .sub { color: var(--texto-2); font-size: clamp(12px, 1vw, 15px); }

.topo .espaco { flex: 1; }

.relogio { font-size: clamp(18px, 1.8vw, 30px); font-weight: 600; }

.conexao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-2);
}
.conexao::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgb(34 197 94 / 0.2);
}
.conexao.caiu { color: var(--atraso); }
.conexao.caiu::before { background: var(--atraso); box-shadow: 0 0 0 3px rgb(239 68 68 / 0.25); }

.icone-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--texto-2);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
}
.icone-btn:hover { color: var(--texto); }
.icone-btn svg { width: 20px; height: 20px; }
.icone-btn[aria-pressed="false"] { opacity: 0.55; }

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

.faixa {
  padding: 10px 20px;
  text-align: center;
  font-weight: 600;
  background: var(--atraso-fundo);
  color: #fecaca;
  border-bottom: 1px solid var(--atraso);
}

.toast-area {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  width: min(92vw, 520px);
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.45);
  animation: sobe 0.2s ease-out;
}
.toast .msg { flex: 1; }
.toast.erro { border-color: var(--atraso); }
.toast button {
  font-weight: 700;
  color: var(--marca-2);
  padding: 8px 12px;
  border-radius: 8px;
}
.toast button:hover { background: rgb(72 202 228 / 0.12); }

.vazio {
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--texto-2);
  padding: 40px 20px;
  gap: 8px;
}
.vazio svg { width: 48px; height: 48px; opacity: 0.5; }

.config {
  margin: auto;
  max-width: 560px;
  padding: 32px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  line-height: 1.6;
}
.config code { background: var(--superficie-2); padding: 2px 6px; border-radius: 6px; }

@keyframes sobe { from { transform: translateY(8px); opacity: 0; } }
@keyframes pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgb(72 202 228 / 0.55); }
  50% { box-shadow: 0 0 0 8px rgb(72 202 228 / 0); }
}

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