/* Jarvis — visual HUD (opção B aprovada) */
:root {
  --bg: #04070b; --painel: rgba(6, 14, 20, .92); --cy: #3ee0ff; --fg: #d6f4fb; --mu: #6b8a99;
  --ln: rgba(62, 224, 255, .18); --ln2: rgba(62, 224, 255, .09); --ruim: #ff5d6c; --ok: #5dffb0;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body.hud {
  background-color: var(--bg);
  background-image: linear-gradient(rgba(62,224,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(62,224,255,.045) 1px, transparent 1px);
  background-size: 22px 22px; color: var(--fg); font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }
svg { width: 16px; height: 16px; flex: none; }
.ruim { color: var(--ruim) !important; } .ok { color: var(--ok); } .mu { color: var(--mu) !important; }

/* reator / marca */
.reator { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--cy); display: inline-grid;
  place-items: center; flex: none; box-shadow: 0 0 12px rgba(62,224,255,.7), inset 0 0 8px rgba(62,224,255,.6); }
.reator::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #bff6ff; box-shadow: 0 0 10px var(--cy); }
.reator.pequeno { width: 18px; height: 18px; } .reator.pequeno::after { width: 6px; height: 6px; }
.marca { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.marca b { font: 500 15px var(--mono); letter-spacing: .32em; color: var(--cy); text-shadow: 0 0 12px rgba(62,224,255,.55); }
.marca.grande { justify-content: center; margin-bottom: 18px; } .marca.grande b { font-size: 20px; }

/* estrutura */
.app { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--painel); border-right: 1px solid var(--ln); padding: 18px 10px; display: flex;
  flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 8px 9px; color: var(--mu);
  font: 400 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; }
.menu a:hover { color: var(--fg); }
.menu a[aria-current="page"] { color: var(--fg); background: rgba(62,224,255,.08); box-shadow: inset 2px 0 0 var(--cy); }
.menu a[aria-current="page"] svg { color: var(--cy); }
.menu a i { margin-left: auto; font-style: normal; color: var(--cy); }
.seletor label { display: block; border: 1px solid var(--cy); border-radius: 3px; padding: 6px 9px;
  box-shadow: 0 0 14px rgba(62,224,255,.15); }
.seletor small { display: block; font: 400 9px var(--mono); letter-spacing: .14em; color: var(--mu); }
.seletor select { width: 100%; background: transparent; border: 0; padding: 0; font-weight: 500; }
.seletor option { background: var(--bg); }
.medidor { margin-top: auto; border: 1px solid var(--ln); border-radius: 2px; padding: 9px; display: flex;
  flex-direction: column; gap: 6px; font: 400 10px var(--mono); color: var(--mu); text-transform: uppercase; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.medidor .kv b { color: var(--cy); font-weight: 500; }
.barra { height: 4px; background: rgba(62,224,255,.12); }
.barra b { display: block; height: 100%; background: var(--cy); box-shadow: 0 0 8px var(--cy); }
.principal { min-width: 0; padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 14px; }
.topo-movel, .barra-baixo { display: none; }
.solo { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.cartao { width: min(380px, 100%); border: 1px solid rgba(62,224,255,.25); background: var(--painel);
  border-radius: 6px; padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; }
.ola { font-size: 17px; margin: 0; text-align: center; }
.nota { color: var(--mu); font-size: 12.5px; margin: 0; text-align: center; }

/* cabeçalho de página */
.cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cab h1 { margin: 0; font: 500 13px var(--mono); letter-spacing: .18em; color: var(--cy); text-transform: uppercase; }
.sobre { font: 400 10.5px var(--mono); letter-spacing: .14em; color: var(--mu); text-transform: uppercase; }

/* botões e campos */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px;
  border-radius: 2px; border: 1px solid rgba(62,224,255,.35); color: var(--cy); background: transparent; }
.btn.p { background: var(--cy); color: #021015; border-color: var(--cy); box-shadow: 0 0 12px rgba(62,224,255,.45); }
.btn.r { color: var(--ruim); border-color: rgba(255,93,108,.4); }
.btn.largo { width: 100%; padding: 10px; }
.btn:disabled { opacity: .5; cursor: default; }
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-grade { display: flex; flex-direction: column; gap: 10px; }
.form-grade label, label.campo { display: flex; flex-direction: column; gap: 4px; font: 400 10px var(--mono);
  letter-spacing: .12em; color: var(--mu); text-transform: uppercase; }
input:not([type=checkbox]), select, textarea { background: rgba(4,10,15,.9); border: 1px solid var(--ln);
  border-radius: 2px; padding: 8px 9px; font: 400 14px var(--sans); color: var(--fg); letter-spacing: 0;
  text-transform: none; width: 100%; }
textarea { min-height: 70px; resize: vertical; }
.erro { color: var(--ruim); margin: 0; }

/* faixas, toast, caixas */
.faixa { border: 1px solid rgba(62,224,255,.35); background: rgba(62,224,255,.07); border-radius: 3px;
  padding: 8px 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.faixa.ruim { border-color: rgba(255,93,108,.45); background: rgba(255,93,108,.08); }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 20; max-width: calc(100% - 32px);
  background: rgba(4,12,18,.97); border: 1px solid var(--cy); border-radius: 3px; padding: 9px 12px; display: flex;
  gap: 12px; align-items: center; box-shadow: 0 0 22px rgba(62,224,255,.25); }
.caixa { border: 1px solid var(--ln); background: rgba(4,10,15,.8); border-radius: 3px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; }
.caixa h2 { margin: 0; font: 500 10.5px var(--mono); letter-spacing: .14em; color: var(--cy); text-transform: uppercase; }
.caixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.passos { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #a9c4cf; }

/* listas de tarefas */
.gh { display: flex; justify-content: space-between; gap: 8px; font: 500 10.5px var(--mono); letter-spacing: .14em;
  color: var(--mu); text-transform: uppercase; }
.grp { display: flex; flex-direction: column; gap: 6px; }
.list { border: 1px solid var(--ln); border-radius: 3px; background: rgba(4,10,15,.8); }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 11px; }
.row + .row { border-top: 1px solid var(--ln2); }
.row.sel { background: rgba(62,224,255,.08); box-shadow: inset 2px 0 0 var(--cy); }
.row.feita .tx b { text-decoration: line-through; color: var(--mu); }
.ck { width: 16px; height: 16px; border: 1.5px solid var(--cy); border-radius: 2px; background: transparent; padding: 0;
  cursor: pointer; box-shadow: 0 0 6px rgba(62,224,255,.4); }
.ck.ok { background: var(--cy); }
.tx { min-width: 0; }
.tx b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx small { display: block; font: 400 10px var(--mono); color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx small em, .chip { font-style: normal; color: var(--c, var(--mu)); }
.tag { font: 500 9.5px var(--mono); letter-spacing: .1em; padding: 2px 6px; border-radius: 2px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--c, var(--cy)) 55%, transparent); color: var(--c, var(--cy)); text-transform: uppercase; }
.w { font: 500 11px var(--mono); color: var(--cy); text-align: right; white-space: nowrap; }
.vazio { margin: 0; padding: 12px; color: var(--mu); font-size: 12.5px; }

/* núcleo */
.pg-nucleo .principal { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-content: start; }
.pg-nucleo .faixa { grid-column: 1 / -1; }
.nucleo-centro { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
/* a esfera ocupa o que sobrar da altura, sem empurrar a caixa de comando para fora da tela */
.orbe { position: relative; width: clamp(260px, min(88vw, calc(100vh - 330px)), 600px); aspect-ratio: 1; }
.orbe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.estado { font: 500 10.5px var(--mono); letter-spacing: .2em; color: var(--mu); text-transform: uppercase; }
.estado::before { content: "● "; color: var(--cy); }
.atalho-hoje { font: 500 10px var(--mono); letter-spacing: .1em; border: 1px solid var(--ln); padding: 5px 9px; border-radius: 2px; background: rgba(4,10,15,.8); }
.conversa { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 6px; min-height: 70px; }
.conversa span { font: 500 10.5px var(--mono); letter-spacing: .12em; color: var(--mu); margin-right: 6px; }
.conversa .jv span { color: var(--cy); }
.conversa i { font-style: normal; }
.conversa .voce i { color: #9fb7c2; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acoes .list { width: 100%; }
.contador { font: 400 10px var(--mono); color: var(--mu); }
form.comando, .comando.falso { width: 100%; max-width: 560px; display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  background: rgba(4,12,18,.92); border: 1px solid var(--cy); border-radius: 3px;
  box-shadow: 0 0 22px rgba(62,224,255,.16), inset 0 0 18px rgba(62,224,255,.05); }
form.comando input { border: 0; background: transparent; padding: 2px 0; font: 400 13px var(--mono); }
.comando .mic { background: none; border: 0; padding: 4px; color: var(--mu); cursor: pointer; display: grid; place-items: center; }
.comando .mic svg { width: 18px; height: 18px; }
.comando .mic:hover, .comando .mic.ativo { color: var(--cy); }
.comando .mic.ativo { filter: drop-shadow(0 0 6px var(--cy)); }
.comando .mic:disabled { opacity: .35; cursor: default; }
.orbe canvas { cursor: pointer; }
.campo-voz { display: grid; gap: 6px; font: 500 10px var(--mono); letter-spacing: .14em; color: var(--mu); text-transform: uppercase; }
.comando.falso { color: var(--mu); font: 400 12px var(--mono); }
.outro-horario { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.outro-horario input { width: auto; }
.nucleo-hoje { display: flex; flex-direction: column; gap: 8px; }
/* na coluna estreita do Núcleo o nome da tarefa vale mais que a etiqueta do time */
.nucleo-hoje .row { grid-template-columns: auto minmax(0, 1fr) auto; }
.nucleo-hoje .row .tag, .nucleo-hoje .row > span:empty { display: none; }
.nucleo-hoje .mais { font: 500 10px var(--mono); letter-spacing: .14em; color: var(--cy); text-align: right; }

/* tarefas e detalhe */
.filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filtros a, .filtros select { font: 400 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mu);
  border: 1px solid var(--ln); padding: 5px 8px; border-radius: 2px; width: auto; }
.filtros a[aria-current="true"] { color: var(--fg); border-color: var(--cy); background: rgba(62,224,255,.08); }
.dividido { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.detalhe { border: 1px solid var(--cy); border-radius: 3px; background: rgba(4,12,18,.96); padding: 12px;
  display: flex; flex-direction: column; gap: 9px; box-shadow: 0 0 20px rgba(62,224,255,.12); }
.linha-tempo { border-left: 1px solid var(--ln); margin: 0 0 0 4px; padding: 0 0 0 12px; list-style: none;
  display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #a9c4cf; }
.linha-tempo li { position: relative; }
.linha-tempo li::before { content: ""; position: absolute; left: -16px; top: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cy); box-shadow: 0 0 6px var(--cy); }
.linha-tempo b { font: 500 10px var(--mono); color: var(--cy); margin-right: 6px; }
.linha-tempo q { display: block; color: var(--mu); font-style: italic; }

/* time e lojas */
.pessoa { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; }
.pessoa + .pessoa { border-top: 1px solid var(--ln2); }
.av { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cy); display: grid; place-items: center;
  font: 500 10px var(--mono); color: var(--cy); background: rgba(62,224,255,.07); text-transform: uppercase; }
.av.pend { border-style: dashed; color: var(--mu); border-color: var(--mu); }
.pessoa small { display: block; font: 400 10px var(--mono); color: var(--mu); }
.acoes-pessoa { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.acoes-pessoa form { display: inline-flex; gap: 6px; }
.acoes-pessoa select { width: auto; padding: 4px 6px; font: 500 10px var(--mono); }
.papel { font: 500 10px var(--mono); letter-spacing: .08em; padding: 3px 7px; border-radius: 2px; border: 1px solid var(--ln); }
.papel.dono { color: #ffd166; border-color: rgba(255,209,102,.45); }
.papel.admin { color: var(--cy); border-color: rgba(62,224,255,.5); }
.convite { border: 1px dashed var(--cy); background: rgba(62,224,255,.05); border-radius: 3px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.convite code { font: 400 11px var(--mono); overflow-wrap: anywhere; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.apelidos { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.apelidos span { font: 400 9.5px var(--mono); color: #a9c4cf; border: 1px solid var(--ln); padding: 1px 6px; border-radius: 2px; }

/* celular */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .topo-movel { display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 8px; position: sticky; top: 0; z-index: 5;
    background: rgba(4,7,11,.92); border-bottom: 1px solid var(--ln); }
  .topo-movel .seletor { max-width: 55%; }
  .topo-movel .seletor label { padding: 3px 8px; }
  .principal { padding: 14px 14px calc(96px + env(safe-area-inset-bottom)); }
  .barra-baixo { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; position: fixed;
    left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(6,14,20,.97); border-top: 1px solid var(--ln);
    padding: 6px 4px calc(10px + env(safe-area-inset-bottom)); }
  .barra-baixo a { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 400 9px var(--mono);
    letter-spacing: .06em; color: var(--mu); text-transform: uppercase; }
  .barra-baixo a[aria-current="page"] { color: var(--fg); }
  .barra-baixo a[aria-current="page"] svg { color: var(--cy); }
  .barra-baixo .meio { position: relative; top: -10px; }
  .barra-baixo .core { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--cy);
    background: radial-gradient(circle, rgba(191,246,255,.95) 0 14%, rgba(62,224,255,.5) 15% 32%, rgba(4,10,15,.95) 34%);
    box-shadow: 0 0 18px rgba(62,224,255,.6); }
  .pg-nucleo .principal { display: flex; }
  .pg-nucleo #conteudo { display: none; }
  .dividido { grid-template-columns: 1fr; }
  .detalhe { order: -1; }
  .row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .row .tag { display: none; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.campo-check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
#despertar-nota { margin: 0; font-size: 12px; }