/* Guardião — visual sóbrio, escuro, focado na imagem.
   Sem bibliotecas, só CSS puro. */

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

:root {
  --bg: #0b0d10;
  --bg-2: #11141a;
  --line: #1f242c;
  --text: #e7ecf2;
  --muted: #8b95a4;
  --accent: #10b981;     /* verde "ao vivo" */
  --warn: #f59e0b;
  --danger: #ef4444;
  --radius: 14px;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { overflow: hidden; }

/* O atributo HTML `hidden` tem que vencer qualquer display: grid/flex.
   Sem isso, .login e .live ficam ambos visíveis e .live cobre a tela. */
[hidden] { display: none !important; }

button { font: inherit; cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.muted { color: var(--muted); margin: 0; }
.small { font-size: 0.85rem; }

/* ---------- LOGIN ---------- */
.login {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(16,185,129,0.10), transparent 70%),
    var(--bg);
}

.card {
  width: min(100%, 380px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: grid;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.brand {
  display: flex; align-items: center; gap: 10px;
}
.brand h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.2px; }
.brand .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
}

input[type=password] {
  width: 100%;
  padding: 12px 14px;
  background: #0a0c10;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  outline: none;
  transition: border-color 120ms;
}
input[type=password]:focus { border-color: var(--accent); }

button[type=submit],
.actions button {
  border: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--accent);
  color: #06130d;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: filter 120ms, transform 120ms;
}
button[type=submit]:hover,
.actions button:hover { filter: brightness(1.05); }
button[type=submit]:active { transform: translateY(1px); }
button[disabled] { opacity: 0.6; cursor: progress; }

.error {
  margin: 0;
  color: var(--danger);
  font-size: 0.9rem;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  padding: 8px 10px;
  border-radius: 8px;
}

/* ---------- AO VIVO ---------- */
.live {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  z-index: 2;
}

.status { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.status-online {
  background: var(--accent);
  animation: pulse 1.4s infinite;
}
.status-connecting { background: var(--warn); animation: pulse 1.4s infinite; }
.status-offline { background: var(--danger); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.actions { display: flex; gap: 8px; }
.actions button {
  background: #1a1f27;
  color: var(--text);
  padding: 8px 12px;
  border: 1px solid var(--line);
}
.actions button:hover { background: #232a34; }

.stage {
  position: relative;
  background: #000;
  overflow: hidden;
}

video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 12px;
  text-align: center;
  padding: 24px;
  pointer-events: none;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.placeholder p { margin: 0; }

.spinner {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.unmute {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--accent);
  color: #06130d;
  border: 0;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}