/* VISION — painel operacional. Escuro, legível, estado sempre escrito (a cor só reforça). */
:root {
  --fundo: #0f1419;
  --fundo-2: #161d24;
  --fundo-3: #1e2731;
  --borda: #2a3541;
  --texto: #e6edf3;
  --texto-2: #9fb0c0;
  --acento: #4da3ff;
  --verde: #2ea043;
  --azul: #388bfd;
  --amarelo: #d29922;
  --laranja: #db6d28;
  --vermelho: #f85149;
  --cinza: #6e7681;
  --raio: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1rem; margin: 0; }
h3 { font-size: .8rem; margin: .5rem 0; color: var(--texto-2); letter-spacing: .06em; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* topo e lateral */
.topo { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: var(--fundo-2);
  border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.marca { font-weight: 800; letter-spacing: .2em; color: var(--texto); display: inline-flex; align-items: center; gap: .5rem; }
.marca-logo { width: 28px; height: 28px; border-radius: 6px; flex: none; }
.topo-estado, .topo-hora, .sessao { color: var(--texto-2); font-size: .85rem; }
.sair { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.corpo { display: flex; min-height: calc(100vh - 52px); }
.lateral { width: 210px; flex: 0 0 210px; background: var(--fundo-2); border-right: 1px solid var(--borda);
  padding: .75rem .5rem; display: flex; flex-direction: column; gap: .15rem; }
.lateral-item { color: var(--texto-2); padding: .5rem .7rem; border-radius: var(--raio); }
.lateral-item:hover { background: var(--fundo-3); color: var(--texto); text-decoration: none; }
.lateral-item.ativo { background: var(--fundo-3); color: var(--texto); border-left: 3px solid var(--acento); }
.conteudo { flex: 1; padding: 1.25rem; min-width: 0; }
.aviso { color: var(--texto-2); margin: 0 0 1rem; }

/* cartões e grades */
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.grade-capacidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.grade-subareas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.cartao, .subarea { background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; }
.cartao { margin-bottom: 1rem; }
.cartao-topo, .subarea-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.subarea-topo { flex-wrap: wrap; }
.subarea-topo .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.linhas { margin: 0; }
.linha { display: flex; justify-content: space-between; gap: .75rem; padding: .25rem 0; border-top: 1px solid var(--borda); }
.linha:first-child { border-top: 0; }
.linha dt { color: var(--texto-2); }
.linha dd { margin: 0; text-align: right; }
.detalhe { color: var(--texto-2); font-size: .85rem; }
.vazio { color: var(--texto-2); font-style: italic; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { padding: .25rem 0; }
.lista-compacta li { font-size: .85rem; }
.quando { color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* estados: texto sempre visível; cor segue a semântica do projeto */
.chip { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: .1rem .45rem;
  border-radius: 999px; border: 1px solid var(--borda); background: var(--fundo-3); color: var(--texto); white-space: nowrap; }
.chip-tested_in_real_env, .chip-online, .chip-ready, .chip-ok, .chip-mic_on, .chip-camera_on { border-color: var(--verde); color: #7ee787; }
.chip-implemented, .chip-tested, .chip-available { border-color: var(--azul); color: #79c0ff; }
.chip-pending, .chip-partial, .chip-degraded, .chip-not_tested, .chip-capability_pending,
.chip-mic_requesting, .chip-camera_requesting { border-color: var(--amarelo); color: #e3b341; }
.chip-blocked, .chip-waiting_for_storage { border-color: var(--laranja); color: #ffa657; }
.chip-error, .chip-offline, .chip-failed, .chip-mic_denied, .chip-mic_error, .chip-camera_denied, .chip-camera_error {
  border-color: var(--vermelho); color: #ff7b72; }
.chip-not_implemented, .chip-capability_unavailable, .chip-not_reported, .chip-disabled,
.chip-no_recent_extraction { border-color: var(--cinza); color: var(--texto-2); }
.chip-ambiente { border-color: var(--acento); color: var(--acento); }

/* tabelas legadas e novas */
table, .tabela { border-collapse: collapse; width: 100%; }
.rolagem { overflow-x: auto; max-width: 100%; }
td, th { border-bottom: 1px solid var(--borda); padding: .4rem .6rem; text-align: left; vertical-align: top; }
th { color: var(--texto-2); font-weight: 600; font-size: .85rem; }

/* formulários e botões */
input, select, textarea { background: var(--fundo); color: var(--texto); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .5rem .6rem; font: inherit; }
.botao, button { background: var(--acento); color: #0b1016; border: 0; border-radius: var(--raio);
  padding: .5rem .9rem; font-weight: 700; cursor: pointer; }
.botao-secundario { background: var(--fundo-3); color: var(--texto); border: 1px solid var(--borda); }
button:disabled, .botao:disabled { background: var(--fundo-3); color: var(--texto-2);
  border: 1px dashed var(--cinza); opacity: 1; cursor: not-allowed; }
.botoes { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
/* G5: `display: flex` anulava o atributo `hidden` (o formulário de passagem de ensaio ficava à vista sem ensaio) */
.botoes[hidden] { display: none; }
.entrada-texto { display: flex; gap: .5rem; margin-top: .6rem; }
.entrada-texto input { flex: 1; }
.timeline { min-height: 160px; border: 1px dashed var(--borda); border-radius: var(--raio); padding: .75rem; }

/* microfone e câmera */
.medidor { height: 12px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; margin-top: .5rem; }
.medidor-barra { height: 100%; width: 0; background: var(--verde); transition: width .08s linear; }
.video, .frame { width: 100%; max-height: 360px; background: #000; border-radius: var(--raio); border: 1px solid var(--borda); }
.mapa { height: 240px; }

/* entrada (login) */
.entrada { display: grid; place-items: center; min-height: 100vh; }
.entrada-cartao { width: min(380px, 92vw); background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: 12px; padding: 2rem; text-align: center; }
.entrada-marca { font-size: 2rem; letter-spacing: .35em; margin: 0; }
.entrada-logo { display: block; width: 96px; height: 96px; border-radius: 18px; margin: 0 auto 1rem; }
.entrada-sub { color: var(--texto-2); margin: .25rem 0 1.5rem; }
.entrada-form { display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.entrada-form button { margin-top: .5rem; }
.entrada-estado { margin: 1.25rem 0 .5rem; }
.entrada-rodape { color: var(--cinza); font-size: .8rem; }

@media (max-width: 1100px) { .grade-3 { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .corpo { flex-direction: column; }
  .lateral { width: auto; flex: none; flex-direction: row; overflow-x: auto; }
  .grade-2 { grid-template-columns: 1fr; }
}