/* ============================================================
   REDES.LAB ON · Telas internas ligadas ao banco
   Cronograma geral, modelo de relatório, painel do oCamino e
   os cartões de oportunidade.

   Só classes com prefixo adm-, para não esbarrar em nada das
   outras frentes. Os vazios honestos (rla-vazio, rla-falha,
   rla-carregando, rla-esq) vêm de rl-assoc.css e são reusados
   de propósito: um vazio só, com a mesma cara, na plataforma
   inteira.

   Injetada pelos próprios módulos, com guarda por id.
   ============================================================ */

/* ------------------------------------------------------------
   1 · A FORMAÇÃO QUE JÁ ACONTECEU
   Os encontros são história de verdade. Ganham espaço, foto e
   descrição inteira, porque é o que dá corpo ao cronograma.
   ------------------------------------------------------------ */
.adm-ano {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 12px;
}

.adm-ano:first-child { margin-top: 4px; }

.adm-ano b {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--ink);
  flex: none;
}

.adm-ano i {
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
  display: block;
}

.adm-ano span {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--body-soft);
}

.adm-enc-lista { display: flex; flex-direction: column; gap: 0; }

.adm-enc {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.adm-enc:last-child { border-bottom: none; }

/* a coluna da esquerda é a linha do tempo em si */
.adm-enc-linha {
  flex: none;
  width: 30px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

.adm-enc-bola {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: none;
  background: var(--magenta-vivo);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--magenta-vivo) 15%, transparent);
}

.adm-enc-bola.sem-foto {
  background: var(--surface);
  border: 2px solid var(--rule);
  box-shadow: none;
}

.adm-enc-fio {
  flex: 1 1 auto;
  width: 2px;
  min-height: 10px;
  background: var(--rule);
  border-radius: 2px;
}

.adm-enc-corpo { flex: 1 1 auto; min-width: 0; }

.adm-enc-data {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--magenta-vivo);
}

.adm-enc-t {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-top: 4px;
}

.adm-enc-d {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--body);
  margin-top: 6px;
  max-width: 68ch;
}

.adm-enc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--body-soft);
}

.adm-enc-meta span { display: inline-flex; align-items: center; gap: 5px; }

.adm-enc-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 11px;
  max-width: 620px;
}

.adm-enc-foto { margin: 0; }

.adm-enc-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 11px;
  display: block;
  background: var(--surface-sunk);
}

.adm-enc-foto figcaption {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  color: var(--body-soft);
  padding-top: 5px;
}

/* ------------------------------------------------------------
   2 · O CICLO DE EXECUÇÃO QUE AINDA NÃO ABRIU
   Os dez meses aparecem com a forma inteira. Nenhum carrega
   data, porque nenhuma data foi confirmada.
   ------------------------------------------------------------ */
.adm-ciclos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.adm-ciclo {
  border: 1px dashed var(--rule);
  border-radius: 13px;
  padding: 13px 14px;
  background: var(--surface-sunk, transparent);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 104px;
}

.adm-ciclo.aberto {
  border-style: solid;
  border-color: color-mix(in srgb, var(--magenta-vivo) 45%, transparent);
  background: var(--surface);
  box-shadow: 0 10px 26px -16px color-mix(in srgb, var(--magenta-vivo) 55%, transparent);
}

.adm-ciclo.fechado { border-style: solid; opacity: .72; }

.adm-ciclo-n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--body-soft);
}

.adm-ciclo.aberto .adm-ciclo-n {
  background: var(--magenta-vivo);
  border-color: var(--magenta-vivo);
  color: #fff;
}

.adm-ciclo-t {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
}

.adm-ciclo-d {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  color: var(--body-soft);
  margin-top: auto;
}

/* selo de "sem data confirmada" */
.adm-sem-data {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--body-soft);
  border: 1px dashed var(--rule);
  border-radius: var(--r-pill, 999px);
  padding: 2px 8px;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   3 · VOCABULÁRIO DO CAMPO SEM VALOR
   Três estados diferentes, três palavras diferentes. Nenhum
   deles é o número zero, porque zero é medição.
   ------------------------------------------------------------ */
.adm-sem-leitura,
.adm-sem-fonte,
.adm-a-validar {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  border-radius: var(--r-pill, 999px);
  padding: 2px 8px;
}

.adm-sem-leitura {
  color: var(--body-soft);
  background: var(--surface-sunk, rgba(127, 127, 127, .07));
  border: 1px solid var(--rule-soft);
}

.adm-sem-fonte {
  color: var(--body-soft);
  border: 1px dashed var(--rule);
}

.adm-a-validar {
  color: #8A6410;
  background: color-mix(in srgb, var(--amarelo-neon) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--amarelo-neon) 50%, transparent);
}

html[data-mode="escuro"] .adm-a-validar { color: var(--amarelo-neon); }

/* de onde o campo vem: a proveniência escrita ao lado do vazio */
.adm-origem {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--body-soft);
  display: block;
  margin-top: 3px;
}

/* ------------------------------------------------------------
   4 · TABELA QUE MANTÉM O CABEÇALHO
   Coluna sem valor nunca some: fica com o rótulo e o vazio
   nomeado embaixo.
   ------------------------------------------------------------ */
.adm-roll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.adm-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.adm-tab th {
  text-align: left;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body-soft);
  padding: 9px 12px;
  border-bottom: 1.5px solid var(--rule);
  white-space: nowrap;
}

.adm-tab td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
  vertical-align: middle;
}

.adm-tab tr:last-child td { border-bottom: none; }

.adm-tab .adm-org-cel { display: flex; align-items: center; gap: 10px; min-width: 0; }

.adm-tab .adm-org-cel b {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-tab-nota {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--body-soft);
  padding: 12px 12px 4px;
}

@media (max-width: 640px) {
  .adm-roll .adm-tab { min-width: 560px; }
}

/* ------------------------------------------------------------
   5 · EIXOS SEM SÉRIE
   O gráfico aparece com os eixos e a grade. A série não é
   desenhada, porque não foi medida.
   ------------------------------------------------------------ */
.adm-eixos {
  position: relative;
  border-left: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
  height: 168px;
  margin: 10px 0 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 6px;
  padding: 0 8px;
  background-image: repeating-linear-gradient(
    to top,
    transparent 0 41px,
    var(--rule-soft) 41px 42px
  );
}

.adm-eixos-vazio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--body-soft);
  padding: 0 18px;
}

.adm-eixos-x {
  display: flex;
  justify-content: space-around;
  gap: 6px;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--body-soft);
}

.adm-eixos-x span {
  flex: 1 1 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* barra de proporção sem leitura: o trilho existe, o preenchimento não */
.adm-trilho {
  height: 7px;
  border-radius: 4px;
  background: var(--surface-sunk, rgba(127, 127, 127, .1));
  border: 1px dashed var(--rule);
  width: 100%;
}

/* ------------------------------------------------------------
   6 · BOTÃO DESLIGADO COM O MOTIVO AO LADO
   ------------------------------------------------------------ */
.adm-acao-off { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.adm-acao-off .btn[disabled],
.adm-acao-off .btn:disabled { opacity: .5; cursor: not-allowed; }

.adm-motivo {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--body-soft);
  max-width: 42ch;
}

/* ------------------------------------------------------------
   7 · CARTÕES DE APOIO
   ------------------------------------------------------------ */
.adm-secao {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 26px 0 13px;
}

.adm-secao-t {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--body-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.adm-secao-s {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--body-soft);
  max-width: 60ch;
  line-height: 1.55;
}

.adm-nota {
  font-size: 12px;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface-sunk, rgba(127, 127, 127, .06));
  border-radius: 12px;
  padding: 12px 15px;
  border-left: 3px solid var(--azul-eletrico);
}

.adm-nota b { color: var(--ink); }

.adm-nota.regra { border-left-color: var(--magenta-vivo); }

/* contagens honestas do painel: número grande que pode ser zero */
.adm-conta-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}

.adm-conta {
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.adm-conta.zero { border-style: dashed; background: var(--surface-sunk, transparent); }

.adm-conta-v {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
}

.adm-conta.zero .adm-conta-v { color: var(--body-soft); }

.adm-conta-l {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--body-soft);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.adm-conta-d {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--body-soft);
  margin-top: 4px;
}

/* ------------------------------------------------------------
   8 · ETAPAS DO PERCURSO
   ------------------------------------------------------------ */
.adm-etapas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.adm-etapa {
  border: 1px solid var(--rule-soft);
  border-radius: 13px;
  padding: 13px 15px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.adm-etapa-n {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 12.5px;
  background: color-mix(in srgb, var(--azul-eletrico) 13%, transparent);
  color: var(--azul-eletrico);
}

.adm-etapa b { display: block; font-family: var(--serif); font-weight: 700; font-size: 13.5px; line-height: 1.3; }

/* O objetivo da etapa é um <span>, e o círculo do número também é.
   Escrita como ".adm-etapa span", esta regra alcançava os dois, e como
   ela pesa mais que a classe sozinha do círculo, era ela quem mandava:
   o círculo perdia o "display: flex", virava bloco e o número escorria
   para o canto de cima à esquerda, em cinza e um ponto menor. Tirar o
   número da mira devolve o desenho que .adm-etapa-n já descrevia.
   Quem acrescentar texto aqui deve manter a exceção. */
.adm-etapa span:not(.adm-etapa-n) { display: block; font-size: 11.5px; line-height: 1.55; color: var(--body-soft); margin-top: 3px; }

/* ------------------------------------------------------------
   9 · INSTRUMENTOS DO PROGRAMA
   ------------------------------------------------------------ */
.adm-inst {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.adm-inst:last-child { border-bottom: none; }

.adm-inst-c {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--surface-sunk, rgba(127, 127, 127, .08));
  color: var(--primary, var(--magenta-vivo));
}

.adm-inst-txt { flex: 1 1 auto; min-width: 0; }

.adm-inst-txt b { font-family: var(--serif); font-weight: 700; font-size: 13.5px; color: var(--ink); }

.adm-inst-txt p { font-size: 12px; line-height: 1.6; color: var(--body-soft); margin: 3px 0 0; max-width: 64ch; }

.adm-inst-q {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--body-soft);
  text-align: right;
  max-width: 190px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .adm-inst { flex-wrap: wrap; }
  /* base zero: o texto continua ao lado do código do instrumento
     em vez de empurrar a si mesmo para a linha de baixo */
  .adm-inst-txt { flex: 1 1 0; }
  .adm-inst-q { text-align: left; max-width: none; width: 100%; padding-left: 46px; }
  .adm-enc { gap: 12px; }
  .adm-enc-t { font-size: 15.5px; }
  .adm-enc-fotos { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------
   10 · MODELO DE RELATÓRIO
   As páginas vêm de rl-doc.css. Aqui entram só as marcas de
   campo vazio dentro do documento, porque o entregável precisa
   mostrar a forma inteira com os buracos nomeados.
   ------------------------------------------------------------ */
.doc-vazio {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--body-soft);
  border: 1px dashed var(--rule);
  border-radius: var(--r-pill, 999px);
  padding: 1px 8px;
  white-space: nowrap;
}

.doc-kpi.vazio { border: 1px dashed var(--rule); background: transparent; }

.doc-kpi.vazio b { color: var(--body-soft); font-size: 13px; font-weight: 700; letter-spacing: 0; }

.doc-fonte {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.45;
  color: var(--body-soft);
  margin-top: 2px;
}

.doc-aviso {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border: 1px dashed var(--rule);
  border-radius: 12px;
  padding: 11px 14px;
  background: var(--surface-sunk, transparent);
}

.doc-aviso-ic {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--amarelo-neon) 24%, transparent);
  color: #8A6410;
}

html[data-mode="escuro"] .doc-aviso-ic { color: var(--amarelo-neon); }

.doc-aviso-tx { font-size: 11px; line-height: 1.6; color: var(--body); }

.doc-aviso-tx b { color: var(--ink); }

/* quadro de foto que ainda não tem foto: a moldura fica, o vão é nomeado */
.doc-fig-vazia {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px dashed var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--body-soft);
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 8px,
    color-mix(in srgb, var(--body-soft) 6%, transparent) 8px 16px
  );
}

.doc-relato-vazio {
  background: transparent;
  border: 1px dashed var(--rule);
}

.doc-relato-vazio p { color: var(--body-soft); font-style: italic; }

/* ------------------------------------------------------------
   11 · OPORTUNIDADES
   Complementa rl-oportunidade.css: só os estados que o cartão
   ganhou ao passar a ler do banco.
   ------------------------------------------------------------ */
.op-erro-inline {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--magenta-vivo);
}

.op-card .op-cta[disabled],
.op-card .op-cta:disabled { opacity: .55; cursor: not-allowed; }

.op-sem-link {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--body-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   PAINEL DE USO
   O funil, os dias e os rankings. Tudo em CSS: um gráfico que
   depende de biblioteca externa é um gráfico que some no dia em
   que a rede do cliente bloquear o endereço dela.
   ============================================================ */
.uso-funil{display:flex;flex-direction:column;gap:16px;}
.uso-passo-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.uso-passo-r{font-size:13.5px;font-weight:650;color:var(--ink);}
.uso-passo-n{font-family:var(--serif);font-weight:800;font-size:20px;color:var(--ink);
  display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums;}
.uso-passo-p{font-family:var(--sans,inherit);font-size:11.5px;font-weight:600;color:var(--body-soft);}
.uso-barra{height:8px;border-radius:999px;background:var(--rule-soft);overflow:hidden;margin:7px 0 5px;}
.uso-barra span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--azul-eletrico),var(--ciano-vivo));
  transition:width .4s ease;}
.uso-passo-s{font-size:11.5px;color:var(--body-soft);line-height:1.5;}
.uso-perda{color:var(--magenta-vivo);}

.uso-dias{display:flex;align-items:flex-end;gap:4px;height:120px;}
.uso-dia{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;gap:6px;min-width:0;}
.uso-dia-b{width:100%;border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,var(--ciano-vivo),var(--azul-eletrico));}
.uso-dia.vazio .uso-dia-b{background:var(--rule-soft);}
.uso-dia-r{font-size:9px;color:var(--body-soft);white-space:nowrap;
  font-variant-numeric:tabular-nums;transform:rotate(-45deg);transform-origin:center;}

.uso-rank{display:flex;flex-direction:column;gap:9px;}
.uso-rank-l{display:grid;grid-template-columns:minmax(90px,1.1fr) 2fr auto;gap:10px;align-items:center;}
.uso-rank-r{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.uso-rank-b{height:7px;border-radius:999px;background:var(--rule-soft);overflow:hidden;}
.uso-rank-b span{display:block;height:100%;border-radius:999px;background:var(--lilas-neon);}
.uso-rank-n{font-size:12px;font-variant-numeric:tabular-nums;color:var(--body-soft);min-width:2ch;text-align:right;}
.uso-vazio{font-size:12.5px;color:var(--body-soft);line-height:1.6;padding:6px 0 2px;}

.uso-duas{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:900px){
  .uso-duas{grid-template-columns:1fr;}
  .uso-dias{height:96px;}
  .uso-dia-r{display:none;}
}
@media (prefers-reduced-motion:reduce){ .uso-barra span{transition:none;} }