/* ==========================================================================
   Atlas Vivo · v0.4 — biblioteca, campo, análise, formação e gestão
   Mesma paleta do Manual de Marca (tokens em atlas.css).
   ========================================================================== */

/* ---------- navegação em grupos ---------- */
.busca-lateral { margin: 0 4px 6px; }
.busca-lateral input { width: 100%; min-height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07); color: #fff; padding: 8px 12px; font: inherit; font-size: 14px; }
.busca-lateral input::placeholder { color: #9DB3CC; }
.busca-lateral input:focus { background: rgba(255,255,255,.12); outline: 2px solid var(--buriti); }
.nav-grupo { margin: 0; }
.nav-grupo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  border-radius: 6px; padding: 6px 0; }
.nav-grupo > summary::-webkit-details-marker { display: none; }
.nav-grupo > summary::after { content: ''; width: 7px; height: 7px; border-right: 1.6px solid #9DB3CC; border-bottom: 1.6px solid #9DB3CC;
  transform: rotate(-45deg); transition: transform .2s; margin-right: 6px; }
.nav-grupo[open] > summary::after { transform: rotate(45deg); }
.nav-grupo > summary:hover { color: #fff; }

/* ---------- elementos comuns ---------- */
.sit { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 99px; white-space: nowrap; }
.sit::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sit.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.sit.pend { background: var(--perigo-fundo); color: var(--perigo-texto); }
.sit.agenda { background: var(--atencao-fundo); color: var(--atencao-texto); }
.sit.info { background: var(--info-fundo); color: var(--info-texto); }
.cabeca-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.cabeca-pagina .titulo { margin: 4px 0 6px; }
.cabeca-pagina .lead { margin: 0; max-width: 820px; }
.barra-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; }
.barra-filtros .campo { width: auto; min-width: 180px; flex: 1 1 200px; margin: 0; }
.barra-filtros .btn { flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--linha);
  background: var(--branco); font-size: 13px; color: var(--tinta); }
.chip b { font-family: var(--display); }
.chip[aria-current="true"] { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); }
.secao-v4 { margin: 28px 0 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.secao-v4 h2 { margin: 0; font-size: 22px; }
.nota-legal { font-size: 13px; color: var(--texto-2); border-left: 3px solid var(--buriti); padding: 4px 0 4px 12px; margin: 10px 0 18px; }
dl.ficha-dados { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
dl.ficha-dados dt { color: var(--texto-2); font-weight: 600; }
dl.ficha-dados dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { dl.ficha-dados { grid-template-columns: 1fr; } dl.ficha-dados dd { margin-bottom: 8px; } }

/* ---------- painel: alertas e atalhos ---------- */
.alertas { display: grid; gap: 8px; margin: 0 0 18px; }
.alerta { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px; color: var(--tinta); font-size: 14px;
  border: 1px solid; }
.alerta span { flex: 1; }
.alerta.info { background: var(--info-fundo); border-color: var(--info-borda); }
.alerta.atencao { background: var(--atencao-fundo); border-color: var(--atencao-borda); }
.alerta.critico { background: var(--perigo-fundo); border-color: var(--perigo-borda); }
.alerta:hover { filter: brightness(.98); color: var(--tinta); }
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0 0 22px; }
.atalhos a { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; color: var(--tinta); transition: border-color .15s, transform .15s; }
.atalhos a .ic { grid-row: span 2; color: var(--verde); }
.atalhos a b { font-family: var(--display); font-size: 15px; }
.atalhos a span { font-size: 12.5px; color: var(--texto-2); }
.atalhos a:hover { border-color: var(--verde); transform: translateY(-1px); }

/* ---------- biblioteca ---------- */
.midias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.midia-card { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; display: flex;
  flex-direction: column; color: var(--tinta); transition: box-shadow .15s, transform .15s; }
.midia-card:hover { box-shadow: var(--sombra); transform: translateY(-2px); color: var(--tinta); }
.midia-capa { aspect-ratio: 4 / 3; background: var(--nevoa); display: grid; place-items: center; position: relative; overflow: hidden; }
.midia-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.midia-capa.onda img { object-fit: contain; padding: 18px; }
.midia-capa .ic { width: 44px; height: 44px; color: var(--azul); opacity: .55; }
.midia-capa .duracao { position: absolute; right: 8px; bottom: 8px; background: rgba(20,32,46,.78); color: #fff; font-size: 12px;
  padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.midia-capa .tipo { position: absolute; left: 8px; top: 8px; background: rgba(255,255,255,.92); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; color: var(--noite); }
.midia-corpo { padding: 12px 14px 14px; display: grid; gap: 6px; flex: 1; }
.midia-corpo h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.midia-corpo .meta { font-size: 12px; color: var(--texto-2); }
.midia-corpo .linha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }
.midia-corpo .trecho { font-size: 12.5px; color: var(--texto-2); background: var(--nevoa); border-radius: 6px; padding: 6px 8px; }
mark { background: var(--marca-texto); color: inherit; padding: 0 2px; border-radius: 3px; }
.visualizador { background: #0F1B2A; border-radius: var(--raio); overflow: hidden; display: grid; place-items: center; min-height: 240px; }
.visualizador img, .visualizador video { max-width: 100%; max-height: 72vh; display: block; }
.visualizador audio { width: calc(100% - 32px); margin: 16px; }
.visualizador iframe { width: 100%; height: 76vh; border: 0; background: #FFFFFF; }
.visualizador .onda { width: 100%; padding: 18px 18px 0; }
.midia-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .midia-layout { grid-template-columns: 1fr; } }
.segmentos { max-height: 420px; overflow-y: auto; border: 1px solid var(--linha); border-radius: 8px; background: var(--branco); }
.segmentos button { display: grid; grid-template-columns: 58px 1fr; gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--nevoa);
  background: none; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--tinta); cursor: pointer; }
.segmentos button:hover, .segmentos button.ativo { background: var(--info-fundo); }
.segmentos button span:first-child { color: var(--azul); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; padding-top: 2px; }
.pendencias { margin: 0; padding-left: 18px; color: var(--perigo-texto); font-size: 14px; }
.registro-log { font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; background: var(--nevoa); padding: 10px 12px;
  border-radius: 8px; max-height: 220px; overflow: auto; margin: 0; }
textarea.transcricao { min-height: 320px; font: 14px/1.6 var(--texto); }
.zona-envio { border: 2px dashed var(--linha-forte); border-radius: var(--raio); padding: 28px; text-align: center; background: var(--branco);
  transition: border-color .15s, background .15s; }
.zona-envio.sobre { border-color: var(--verde); background: var(--ok-fundo-2); }
.zona-envio input[type=file] { margin: 12px auto 0; display: block; }
.ferramentas-mini { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

/* ---------- glossário ---------- */
.termos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.termo-card { background: var(--branco); border: 1px solid var(--linha); border-left: 4px solid var(--buriti); border-radius: var(--raio);
  padding: 14px 16px; color: var(--tinta); display: grid; gap: 4px; }
.termo-card:hover { box-shadow: var(--sombra); color: var(--tinta); }
.termo-card h3 { margin: 0; font-size: 19px; }
.termo-card p { margin: 0; font-size: 14px; }
.termo-card .eq { font-size: 12.5px; color: var(--texto-2); }

/* ---------- busca ---------- */
.resultados { display: grid; gap: 10px; }
.resultado { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.resultado .onde { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); font-weight: 700; }
.resultado h3 { margin: 4px 0; font-size: 16px; }
.resultado p { margin: 0; font-size: 14px; color: var(--texto-2); }
.busca-grande { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.busca-grande input { flex: 1 1 320px; min-height: 52px; font-size: 17px; }
.salvaguardas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin: 0 0 20px; }
.salvaguardas div { background: var(--branco); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--texto-2); }
.salvaguardas b { display: block; color: var(--tinta); font-size: 13.5px; }

/* ---------- protocolo E1–E8 ---------- */
.etapas-v4 { display: grid; gap: 14px; }
.etapa-v4 { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.etapa-v4 > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: var(--nevoa);
  border-bottom: 1px solid var(--linha); }
.etapa-v4 > header h2 { margin: 0; font-size: 17px; }
.progresso { width: 140px; height: 8px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; }
.progresso span { display: block; height: 100%; background: var(--verde); border-radius: 99px; }
.item-check { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 280px) auto; gap: 14px; align-items: center; padding: 12px 18px;
  border-bottom: 1px solid var(--nevoa); font-size: 14px; }
.item-check:last-child { border-bottom: 0; }
.item-check .auto { font-size: 12.5px; color: var(--texto-2); display: flex; gap: 6px; align-items: flex-start; }
.item-check .auto.sim { color: var(--ok-texto); }
.item-check .auto.nao { color: var(--perigo-texto); }
.item-check form { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 820px) { .item-check { grid-template-columns: 1fr; } .item-check form { justify-content: flex-start; } }

/* ---------- linha do tempo / diário ---------- */
.tempo-v4 { position: relative; padding-left: 26px; display: grid; gap: 12px; }
.tempo-v4::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--linha-forte); }
.tempo-v4 > div { position: relative; background: var(--branco); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 14px; }
.tempo-v4 > div::before { content: ''; position: absolute; left: -23px; top: 14px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--buriti); border: 2px solid var(--branco); box-shadow: 0 0 0 1px var(--linha-forte); }
.tempo-v4 > div.versao::before { background: var(--azul); }
.tempo-v4 .quando { font-size: 12px; font-weight: 700; color: var(--texto-2); letter-spacing: .04em; }
.decada { font: 800 26px/1 var(--display); color: var(--noite); margin: 22px 0 10px; }
.entrada-diario { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 18px; border-left: 4px solid var(--azul); }
.entrada-diario.memo { border-left-color: var(--urucum); background: var(--perigo-fundo-2); }
.entrada-diario.reflexividade { border-left-color: var(--verde); }
.entrada-diario.duvida { border-left-color: var(--buriti); }
.entrada-diario header { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--texto-2); }
.entrada-diario p { margin: 8px 0 0; white-space: pre-wrap; }

/* ---------- PRISMA ---------- */
.prisma { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; align-items: stretch; }
.prisma .fase { background: var(--noite); color: #fff; border-radius: 8px; display: grid; place-items: center; text-align: center;
  font: 700 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 10px; }
.prisma .caixa { background: var(--branco); border: 1.5px solid var(--linha-forte); border-radius: 8px; padding: 12px 14px; font-size: 14px; position: relative; }
.prisma .caixa b { font: 800 22px/1 var(--display); color: var(--tinta); display: block; margin-bottom: 4px; }
.prisma .caixa.lado { border-style: dashed; color: var(--texto-2); }
.prisma .caixa.final { border-color: var(--verde); background: var(--ok-fundo-2); }
.prisma .caixa ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
@media (max-width: 760px) { .prisma { grid-template-columns: 1fr; } }
.triagem-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 12px 16px; align-items: center; }
.triagem-item form { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.triagem-item select { min-height: 36px; font-size: 13px; }
@media (max-width: 760px) { .triagem-item { grid-template-columns: 1fr; } }

/* ---------- metas e indicadores ---------- */
.indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.indicador { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; display: grid; gap: 8px; }
.indicador .dim { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--texto-2); }
.indicador h3 { margin: 0; font-size: 15.5px; line-height: 1.3; }
.indicador .valor { display: flex; align-items: baseline; gap: 10px; }
.indicador .valor strong { font: 800 34px/1 var(--display); }
.indicador .valor span { font-size: 13px; color: var(--texto-2); }
.indicador .trilho { height: 8px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; }
.indicador .trilho span { display: block; height: 100%; border-radius: 99px; background: var(--azul); }
.indicador.ok .trilho span { background: var(--verde); }
.indicador.atencao .trilho span { background: var(--buriti); }
.indicador.critico .trilho span { background: var(--urucum); }
.indicador.sem_dados .valor strong { color: var(--texto-2); font-size: 22px; }
.indicador small { font-size: 12px; color: var(--texto-2); }
.metas-tabela td form { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.metas-tabela td select, .metas-tabela td input { min-height: 34px; font-size: 13px; }
tr.atrasada td:first-child { box-shadow: inset 3px 0 0 var(--urucum); }

/* ---------- formação ---------- */
.matriz { border-collapse: collapse; font-size: 13px; width: 100%; }
.matriz th, .matriz td { border: 1px solid var(--linha); padding: 6px 8px; text-align: center; }
.matriz th:first-child, .matriz td:first-child { text-align: left; white-space: nowrap; }
.matriz td.feito { background: var(--ok-fundo); color: var(--ok-texto); font-weight: 700; }
.matriz thead th { background: var(--nevoa); font-size: 12px; }
.movimentos { display: grid; gap: 14px; counter-reset: mov; }
.movimento { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px 18px 74px; position: relative; }
.movimento::before { content: attr(data-n); position: absolute; left: 18px; top: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--noite); color: #fff; display: grid; place-items: center; font: 800 18px/1 var(--display); }
.movimento.vazio-mov { border-style: dashed; background: transparent; }
.movimento h3 { margin: 0 0 4px; font-size: 18px; }
.movimento .pergunta { font-style: italic; color: var(--texto-2); margin: 0 0 10px; }
.movimento.sem-traducao { border-color: var(--buriti); }

/* ---------- comparar ---------- */
.comparacao { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.comparacao .cartao h3 { margin: 0 0 4px; font-size: 17px; }

/* ---------- preservação / ferramentas ---------- */
.diag { display: grid; gap: 8px; }
.diag div { display: grid; grid-template-columns: 28px minmax(0, 220px) minmax(0, 1fr); gap: 10px; align-items: start; background: var(--branco);
  border: 1px solid var(--linha); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.diag .ic { margin-top: 2px; }
.diag .sim .ic { color: var(--verde); }
.diag .nao .ic { color: var(--urucum); }
.diag small { color: var(--texto-2); display: block; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .diag div { grid-template-columns: 28px 1fr; } .diag div > :last-child { grid-column: 2; } }

[hidden] { display: none !important; }