/* UNICORNIO — estilo.css · layout das telas internas (a identidade mora em marca.css).
   Aqui o neon é tempero: estados e destaques — nunca gritaria. */

/* ---- grades / listas ---- */
.grade { display: grid; gap: 11px; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); }
.lista { display: grid; gap: 11px; }
.lista > .cartao { margin: 0; }

/* ---- pendências — os cartões "esperando você" ---- */
a.pendencia {
  color: var(--prata); display: flex; flex-direction: column; gap: 4px;
  border-left: 3px solid var(--ambar);
  transition: filter .18s ease, transform .18s ease;
}
a.pendencia:hover {
  text-decoration: none; transform: translateY(-1px);
  filter: drop-shadow(0 3px 8px rgba(26, 24, 17, .14));
}
a.pendencia.respondida { border-left-color: var(--neon-verde); opacity: .72; }
a.pendencia.respondida:hover { filter: drop-shadow(0 3px 8px rgba(26, 24, 17, .14)); }

/* item 6 — cartão "esperando você" COMPACTO: 2 linhas (rótulo + meta), gap
   apertado, sem padding gordo nem linhas vazias. A etiqueta de ação vira um
   chip discreto à direita do rótulo. */
/* GRADES COMPACTAS de 4 colunas (Esperando você + Operação automática): 4 por
   linha; com 2 cartões ocupam 2 colunas (não esticam). Responsivo. */
.grade.pendencias, .grade.auto {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
@media (max-width: 880px) {
  .grade.pendencias, .grade.auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grade.auto .cartao { display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; font-size: .82rem; }
.grade.auto .etiqueta { font-size: .7rem; }
/* Canais (home): 5 por linha — os cartões são enxutos (nome + botão). Responsivo. */
.grade.canais { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 920px) { .grade.canais { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grade.canais { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
a.pendencia.compacta { padding: 8px 11px; gap: 2px; font-size: .82rem; }
a.pendencia.compacta .pend-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
a.pendencia.compacta .pend-topo strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.pendencia.compacta .pend-meta { font-size: .8rem; }
a.pendencia.compacta .etiqueta { flex-shrink: 0; font-size: .72rem; }
a.pendencia.compacta .aviso { margin: 4px 0 0; padding: 7px 10px; }

/* ---- vídeos em produção ---- */
.video .video-cabeca { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.video .video-pe {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-top: 6px;
}
.video.falhou { border-left: 3px solid var(--vermelho); }
.barra {
  /* o TRACK (parte vazia) precisa ser visível p/ dar a noção do total: tom um
     respiro mais claro que o campo + um fio fino por dentro + um faint tint do
     neon — sutil, nunca contraste forte. */
  height: 5px; margin: 11px 0 3px;
  background: linear-gradient(90deg,
              rgba(43, 184, 230, .14), rgba(126, 211, 33, .14)), var(--grafite-3);
  box-shadow: inset 0 0 0 1px var(--fio);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.barra-cheia {   /* o único lugar onde o par anda junto no dia a dia: progresso */
  height: 100%; min-width: 6px;
  background: linear-gradient(90deg, var(--neon-ciano-vivo), var(--neon-verde-vivo));
  clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

/* ---- canais ---- */
.canal { display: flex; flex-direction: column; gap: 3px; }
.canal form { margin-top: var(--esp-2); }
/* DENSIDADE (squad): a meta do canal (nicho · produção · mês) numa linha que
   quebra, não 3-4 linhas empilhadas "enchendo" altura. Mesma info, varredura
   mais rápida. O separador "·" é desenhado pelo CSS entre os itens. */
.canal-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 8px; margin-top: 2px; font-size: .86rem; color: var(--prata-escura);
}
.canal-meta > span { display: inline-flex; align-items: baseline; gap: 8px; }
.canal-meta > span + span::before {
  content: "·"; color: var(--fio); margin-right: 8px;
}
.canal-meta strong { color: var(--prata); font-weight: 600; }
.linha-custo h2 { margin: 22px 0 0; text-transform: none; letter-spacing: .02em; font-size: .95rem; }
.linha-custo strong { color: var(--branco); font-size: 1.05rem; }

/* ---- pendência (página) ---- */
.pend-cabeca .pergunta { margin: 10px 0 0; color: var(--branco); }
.proposta h3 { color: var(--neon-verde); font-weight: 600; }
.capitulos li { margin-bottom: 6px; }
.amostra-cor {
  display: inline-block; width: 18px; height: 18px; margin-right: 4px;
  vertical-align: -4px; box-shadow: inset 0 0 0 1px var(--fio);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px),
                     calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.grade.capas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.capa-opcao { cursor: pointer; padding: 10px; gap: 6px; display: flex; flex-direction: column; }
.capa-opcao img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.titulo-opcao { cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.capa-opcao:has(input:checked), .titulo-opcao:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--neon-verde);
}
.texto-livre {
  white-space: pre-wrap; word-break: break-word; background: var(--grafite-3);
  padding: 10px 12px; font-size: .85rem;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px),
                     calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.erro-texto { color: var(--vermelho); }
details summary { cursor: pointer; color: var(--neon-ciano); }

/* ---- histórico (logs) ---- */
.historico { display: grid; gap: 6px; font-size: .87rem; }
.log .mudo { margin-right: 4px; }
.log.warn { color: var(--ambar); }
.log.error { color: var(--vermelho); }

/* ---- atalhos (home → calendário/biblioteca) ---- */
a.atalho {
  color: var(--prata); display: flex; flex-direction: column; gap: 5px;
  border-left: 3px solid var(--neon-ciano);
  transition: filter .18s ease, transform .18s ease;
}
a.atalho:hover {
  text-decoration: none; transform: translateY(-1px);
  filter: drop-shadow(0 3px 8px rgba(26, 24, 17, .14));
}

/* ---- calendário / pool ---- */
.calendario-cabeca { margin-bottom: 11px; }
.calendario-cabeca p { margin: 4px 0; }
.calendario-lista .agenda-item {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-left: 3px solid var(--neon-verde);
}
.agenda-data { min-width: 86px; display: flex; flex-direction: column; gap: 1px; }
.agenda-data strong { font-family: var(--fonte-display); font-size: 1.05rem; }
.agenda-video {
  flex: 1; display: flex; align-items: center; gap: 12px;
  justify-content: space-between; flex-wrap: wrap;
}

/* ---- M42: GRADE MENSAL ---- */
.cal-nav {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.cal-nav-titulo {
  font-family: var(--fonte-display); font-size: 1.15rem; font-weight: 700;
  flex: 1; text-align: center; white-space: nowrap;
}
.cal-nav .botao { min-width: 36px; text-align: center; padding: 5px 10px; }
.cal-grade-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-grade {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  min-width: 560px;
}
.cal-grade th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--prata-escura); padding: 4px 6px; text-align: center;
  border-bottom: 1px solid var(--fio);
}
/* domingo e sábado: tom levemente diferente */
.cal-grade th:first-child, .cal-grade th:last-child { color: var(--prata-escura); opacity: .7; }
.cal-cel {
  vertical-align: top; padding: 5px 6px; border: 1px solid var(--fio);
  min-height: 72px; font-size: .78rem; position: relative;
}
.cal-cel.fora-mes { background: rgba(26, 24, 17, .03); opacity: .35; }
.cal-cel.hoje { border-color: var(--neon-verde); box-shadow: inset 0 0 0 1px var(--neon-verde); }
.cal-num {
  font-family: var(--fonte-display); font-size: .9rem; font-weight: 700;
  display: block; margin-bottom: 2px; line-height: 1;
}
.cal-cel.hoje .cal-num { color: var(--neon-verde); }
/* feriados */
.cal-feriado {
  display: block; font-size: .6rem; line-height: 1.2; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-feriado.federal { color: var(--neon-verde); opacity: .85; }
.cal-feriado.cultural { color: var(--roxo); opacity: .8; }
/* vídeos dentro do quadradinho */
.cal-video {
  display: block; font-size: .65rem; line-height: 1.3; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 2px solid var(--neon-verde); padding-left: 4px;
}
.cal-video.pronto { border-color: var(--ambar); }
.cal-video-canal {
  font-size: .58rem; color: var(--prata-escura); display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-mais {
  font-size: .6rem; color: var(--prata-escura); display: block; margin-top: 2px;
}
@media (max-width: 600px) {
  .cal-nav-titulo { font-size: .95rem; }
  .cal-feriado { display: none; }  /* em tela muito pequena, esconde feriados p/ não afogar */
  .cal-video { font-size: .6rem; }
}

/* ---- biblioteca de prontos ---- */
.grade.biblioteca { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 9px; }
.item-biblioteca { display: flex; flex-direction: column; gap: 5px; padding: 7px; }
.item-biblioteca img, .item-biblioteca .sem-capa { margin: -7px -7px 1px; }
.item-biblioteca .bib-tit { color: var(--branco); font-weight: 600; font-size: .78rem;
  line-height: 1.22; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-biblioteca .bib-pe { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.item-biblioteca .bib-st { font-size: .66rem; color: var(--prata-escura);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-biblioteca .bib-pe .botao.mini { padding: 3px 8px; font-size: .7rem; flex: none; }
.item-biblioteca img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.item-biblioteca .sem-capa {
  width: 100%; aspect-ratio: 16/9; display: flex; align-items: center;
  justify-content: center; background: var(--grafite-3);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* ---- gestão do canal ---- */
.gestao-canal h3 { margin-top: 4px; }
.gestao-canal .pilha { margin-top: 16px; }
.dias-semana { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
.dia-check {
  flex-direction: row; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 12px; background: var(--grafite-3); color: var(--prata);
  box-shadow: inset 0 0 0 1px var(--fio);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px),
                     calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: box-shadow .15s ease, color .15s ease;
}
.dia-check.marcado { color: var(--branco); box-shadow: inset 0 0 0 1px var(--neon-verde); }
.dia-check input { width: auto; accent-color: var(--neon-verde); }
/* lembrete de CUIDADO, não erro: sem caixa — só texto pequeno em vermelho discreto */
/* aviso de CADÊNCIA: lembrete DISCRETO (não alarme) — texto cinza e pequeno; só
   o ícone de atenção em âmbar (regra: vermelho só p/ falha real). */
.aviso-constancia { margin: 8px 0 2px; font-size: .72rem; line-height: 1.4;
  color: var(--prata-escura); background: none; padding: 0; box-shadow: none; }
.aviso-constancia::before { content: "⚠ "; color: var(--ambar); }

/* PILOTO AUTOMÁTICO — cada opção é um CARD pequeno (4 por linha, mesmo tamanho),
   com um checkbox QUADRADO CHANFRADO no canto superior esquerdo (estilo do site). */
.aut-grade {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
@media (max-width: 880px) { .aut-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .aut-grade { grid-template-columns: 1fr; } }
.aut-card {
  position: relative; display: block; cursor: pointer; min-height: 62px;
  padding: 9px 11px 10px 40px;
  background: var(--sup-campo); box-shadow: inset 0 0 0 1px var(--fio);
  clip-path: var(--chanfro); transition: box-shadow .15s ease;
}
.aut-card:hover { box-shadow: inset 0 0 0 1px var(--prata-escura); }
.aut-card:has(input:checked) { box-shadow: inset 0 0 0 1px rgba(61, 122, 18, .55); }
.aut-card:has(input:disabled) { opacity: .6; cursor: default; }
.aut-card-txt { display: flex; flex-direction: column; gap: 2px; }
.aut-card-txt strong { font-size: .82rem; color: var(--branco); line-height: 1.25; }
.aut-card .aut-estado { display: block; }
/* o checkbox: quadrado com o canto quebrado (chanfro), no canto sup. esquerdo */
.aut-card input[type=checkbox] {
  appearance: none; -webkit-appearance: none; margin: 0;
  position: absolute; top: 9px; left: 9px; width: 21px; height: 21px;
  cursor: pointer; background: var(--grafite-3);
  box-shadow: inset 0 0 0 1px var(--fio);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px),
                     calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: background .15s ease, box-shadow .15s ease;
}
.aut-card input[type=checkbox]:checked {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.3 11.6 13 4.6' fill='none' stroke='%23101c04' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat,
    linear-gradient(170deg, #8fe22e, #7ed321 60%);
  box-shadow: inset 0 0 0 1px var(--neon-verde);
}
.aut-card input[type=checkbox]:disabled { cursor: not-allowed; }

/* ---- chat por vídeo (efêmero) ---- */
.chat-video { margin-top: 10px; }
.chat-video summary {
  color: var(--neon-ciano); font-size: .86rem; cursor: pointer; list-style: none;
}
.chat-video summary::before { content: "› "; }
.chat-corpo { margin-top: 9px; display: grid; gap: 9px; }
.chat-mensagens { display: grid; gap: 7px; }
.chat-msg {
  background: var(--grafite-3); padding: 7px 11px; font-size: .87rem;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px),
                     calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.chat-msg p { margin: 3px 0 0; white-space: pre-wrap; word-break: break-word; }
.chat-msg.raul { box-shadow: inset 3px 0 0 var(--neon-ciano); }
.chat-msg.sistema { box-shadow: inset 3px 0 0 var(--neon-verde); }
.chat-form { display: grid; gap: 8px; }
.chat-form textarea { min-height: 48px; }

/* ---- ações de perigo do vídeo (cancelar / excluir) + modal ---- */
.video-acoes-perigo { justify-content: flex-start; gap: 8px; margin-top: 4px; }

.modal-confirmacao {
  width: min(92vw, 420px); padding: 0; color: var(--prata); border: 0;
  background: linear-gradient(165deg, var(--grafite-3) 0%, var(--grafite-2) 80%);
  box-shadow: 0 18px 50px rgba(26, 24, 17, .6),
              inset 0 0 0 1px rgba(196, 61, 46, .35);
  clip-path: var(--chanfro);
}
.modal-confirmacao::backdrop {
  background: rgba(26, 24, 17, .66); backdrop-filter: blur(3px);
}
.modal-confirmacao h3 { margin: 0 16px 6px; padding-top: 18px; color: var(--branco); }
.modal-confirmacao > .mudo { margin: 0 16px; }
.modal-confirmacao .acoes { margin: 16px; }
.modal-confirmacao .modal-fechar {
  position: absolute; top: 8px; right: 10px; background: none; border: 0;
  color: var(--prata-escura); font-size: 1rem; cursor: pointer; padding: 4px 7px;
}
.modal-confirmacao .modal-fechar:hover { color: var(--branco); }

/* ---- média de custo por vídeo (home, ao lado do custo do dia) ---- */
.linha-custo .media-video {
  font-size: .86rem; color: var(--prata-escura); font-weight: 400;
  letter-spacing: .02em; margin-left: 4px;
}
.linha-custo .media-video strong { color: var(--prata); }

/* ---- adicionar canal (home) ---- */
.canais-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.novo-canal { margin: 4px 0 14px; }
.novo-canal summary {
  cursor: pointer; color: var(--neon-ciano); font-size: .9rem; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.novo-canal summary::-webkit-details-marker { display: none; }
.novo-canal[open] summary { color: var(--branco); }
.novo-canal .cartao { margin-top: 10px; }
.novo-canal .pilha { margin-top: 0; }

/* canais EM CRIAÇÃO pelo assistente (rascunhos não concluídos) — destaque âmbar na home */
.em-criacao-bloco { margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.canal-em-criacao {
  border-left: 3px solid var(--ouro);
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
.canal-em-criacao-info { display: flex; flex-direction: column; gap: 2px; }
.canal-em-criacao-info strong { color: var(--branco); font-size: 1rem; }
.etiqueta-assistente {
  align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  color: var(--ouro-escuro); background: var(--ouro-vivo); padding: 2px 9px; border-radius: 999px; margin-bottom: 4px;
}
/* perguntas do assistente (formulário único e editável) */
.assistente-q { display: flex; flex-direction: column; gap: 5px; }
.assistente-q strong { font-size: .92rem; }
.assistente-q textarea { width: 100%; }

/* ============================================================================
   MENU — hambúrguer (celular) + navegação horizontal (desktop)
   ========================================================================== */
/* O menu é SEMPRE um HAMBÚRGUER (desktop E celular) — topo clean. As 3 barras em
   DOURADO (o acento nobre da marca). O menu abre como painel lateral que desliza. */
.menu-botao {
  display: block; position: relative; z-index: 30; width: 42px; height: 38px;
  background: var(--grafite-3); border: 0; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px var(--fio);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px),
                     calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.menu-botao span {
  display: block; width: 20px; height: 2px; margin: 4px auto;
  background: var(--ouro); transition: transform .2s ease, opacity .2s ease;
}
.menu-fundo {
  display: none; position: fixed; inset: 0; z-index: 18; border: 0; padding: 0;
  background: rgba(26, 24, 17, .6); backdrop-filter: blur(2px); cursor: pointer;
}
.menu {
  position: fixed; top: 0; right: 0; z-index: 20;
  width: min(82vw, 340px); height: 100svh;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 64px 0 24px; background: var(--grafite-2);
  box-shadow: -10px 0 40px rgba(26, 24, 17, .5), inset 1px 0 0 var(--fio);
  transform: translateX(100%); visibility: hidden;
  transition: transform .24s ease, visibility 0s linear .24s;
  overflow-y: auto;
}
/* FECHADO = oculto de verdade (visibility:hidden): não pinta, não foca, não cria
   rolagem lateral. Só aparece com .menu-aberto (clique no hambúrguer). */
body.menu-aberto .menu {
  transform: none; visibility: visible;
  transition: transform .24s ease, visibility 0s;
}
body.menu-aberto .menu-fundo { display: block; }
body.menu-aberto .menu-botao span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-aberto .menu-botao span:nth-child(2) { opacity: 0; }
body.menu-aberto .menu-botao span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu > a {
  margin-left: 0; padding: 14px 22px; color: var(--prata); font-size: .98rem;
  border-bottom: 1px solid var(--fio);
}
.menu > a:hover { color: var(--branco); background: var(--grafite-3); text-decoration: none; }
.menu-multi { word-spacing: -1px; }
.menu .sair { color: var(--prata); }
/* "Canais" vira um subtítulo no painel, com a lista SEMPRE aberta abaixo */
.menu-grupo { position: static; margin-left: 0; padding: 10px 22px 4px; }
.menu-caret { display: none; }
.menu-rotulo {
  display: block; color: var(--prata-escura); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: 4px;
}
.menu-canais-lista {
  display: block; position: static; background: none; padding: 0;
  box-shadow: none; min-width: 0; clip-path: none;
}
.menu-canal {
  display: block; padding: 9px 0; color: var(--prata); font-size: .92rem;
  white-space: nowrap;
}
.menu-canal:hover { color: var(--neon-ciano); text-decoration: none; }

/* ---- celular ---- */
@media (max-width: 560px) {
  .grade { grid-template-columns: 1fr; }
  .agenda-data { min-width: 0; }
  .canais-cabeca { flex-wrap: wrap; }
}

/* ---- página DOCUMENTOS (catálogo dos HTMLs do projeto) ---- */
.grade-docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); margin-top: 10px; }
.doc-card { display: flex; flex-direction: column; gap: 7px; }
.doc-card h3 { margin: 0; }
.doc-card p { flex: 1; margin: 0; }
.doc-card .acoes { margin-top: 4px; gap: 8px; }
@media (max-width: 640px) { .grade-docs { grid-template-columns: 1fr; } }

/* ---- páginas legais (Privacidade / Termos de Serviço) ---- */
.legal { max-width: 760px; }
.legal h1 { margin-bottom: 2px; }
.legal h2 { font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--branco); margin: 24px 0 6px; }
.legal h2::before { display: none; }
.legal p, .legal li { color: var(--prata); font-size: .92rem; line-height: 1.62; }
.legal ul { padding-left: 20px; margin: 4px 0 8px; }
.legal a { color: var(--neon-ciano); }

/* links discretos no rodapé (Privacidade · Termos) — em uma linha ABAIXO do nome */
.rodape-links { display: block; margin-top: 6px; }
.rodape-links a { color: var(--prata-escura); }
.rodape-links a:hover { color: var(--neon-ciano); }

/* descrição da finalidade na tela de entrada (exigência do Google: home explica o app) */
.entrada-sobre { max-width: 460px; margin: 16px auto 0; color: var(--prata); font-size: .92rem;
  line-height: 1.55; text-align: center; }
.entrada-sobre-links { margin: 10px 0 0; font-size: .8rem; text-align: center; }
.entrada-sobre-links a { color: var(--prata-escura); }
.entrada-sobre-links a:hover { color: var(--neon-ciano); }

/* página inicial PÚBLICA (vitrine) — o Google exige uma home sem login que explique o app */
.inicio { max-width: 600px; margin: 7vh auto 0; text-align: center; padding: 0 22px; }
.inicio .entrada-logo { width: clamp(110px, 16vw, 168px); margin-bottom: 10px; }
.inicio-sobre { max-width: 520px; margin: 16px auto 0; color: var(--prata); font-size: 1rem; line-height: 1.6; }
.inicio-recursos { list-style: none; padding: 0; margin: 18px auto 22px; max-width: 470px; text-align: left; }
.inicio-recursos li { color: var(--prata); font-size: .94rem; padding: 7px 0 7px 26px; position: relative; }
.inicio-recursos li::before { content: "\2726"; color: var(--ouro); position: absolute; left: 2px; top: 7px; }
.inicio-recursos li strong { color: var(--branco); }
.inicio-acoes { margin: 6px 0 18px; }

/* ============================================================================
   SEÇÕES RECOLHÍVEIS COM CHEVRON (itens 1, 6, 9 — padrão reutilizável)
   Usa <details class="secao-recolhivel"> / <summary> nativo do browser.
   O chevron fica à DIREITA (flex) para não conflitar com o ícone do título.

   SUPERFÍCIE ÚNICA DE SEÇÃO: cada seção de 1º nível ganha a MESMA atmosfera
   (gradiente --sup-secao, chanfro, borda de fio e fio de luz no topo) — é o que
   acaba com a "colcha de retalhos": nenhuma seção fica com fundo avulso, e o
   ritmo entre páginas passa a ser sempre igual. As seções ANINHADAS (dentro de
   um cartão/seção) ficam transparentes para não empilhar caixa sobre caixa.
   ============================================================================ */
details.secao-recolhivel {
  position: relative; border: 0; padding: 0; margin: 0;
  background: none;
}
/* 1º nível: filho direto do <main> OU dentro de um <section> direto do main */
main > details.secao-recolhivel,
main > section > details.secao-recolhivel {
  background: var(--sup-secao);
  box-shadow: inset 0 0 0 1px var(--fio);
  clip-path: var(--chanfro);
  padding: 6px 18px 16px;
  margin: 0 0 var(--esp-3);
}
main > details.secao-recolhivel::after,
main > section > details.secao-recolhivel::after {
  content: ""; position: absolute; top: 0; left: var(--corte); right: 0;
  height: 1px; pointer-events: none; background: var(--fio-luz);
}
/* BARRA UNIFICADORA à esquerda de cada MENU (seção de 1º nível): verde (acima) →
   ciano (abaixo), contínua por TODOS os submenus; "cortada" entre menus (cada
   seção tem a sua, e o chanfro+espaço separam uma da outra). Une visualmente os
   submenus que compõem o menu. */
main > details.secao-recolhivel::before,
main > section > details.secao-recolhivel::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--neon-verde), var(--neon-ciano));
}

/* FRAME INICIAL do canal: botões menores (tamanho mini) — menos peso no topo */
.canal-cabeca .acoes .botao { padding: 7px 12px; font-size: .82rem; }
/* aninhada (subtópico, NÍVEL 3): título LIMPO e alinhado — SEM barra na frente dele.
   Quem ganha a barra é o CONTEÚDO: ele desloca pra direita e, no espaço à sua esquerda,
   corre uma barrinha vertical em DEGRADÊ AZUL (ciano → azul). É isso que mostra que o
   bloco "pende" do título de cima e o separa dos títulos dos menus vizinhos. */
details.secao-recolhivel details.secao-recolhivel,
.cartao details.secao-recolhivel {
  background: none; box-shadow: none; clip-path: none;
  border: 0; padding: 0; margin: 0 0 var(--esp-2);
}
details.secao-recolhivel details.secao-recolhivel::after,
.cartao details.secao-recolhivel::after { display: none; }
/* CONTEÚDO do subtópico: deslocado pra direita + barra azul-degradê à esquerda */
details.secao-recolhivel details.secao-recolhivel > summary ~ *,
.cartao details.secao-recolhivel > summary ~ * {
  position: relative; margin-left: 4px; padding-left: 20px;
}
details.secao-recolhivel details.secao-recolhivel > summary ~ *::before,
.cartao details.secao-recolhivel > summary ~ *::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--neon-ciano), #2f6bd8);
}
details.secao-recolhivel > summary {
  display: flex; align-items: center; justify-content: space-between;
  list-style: none; cursor: pointer; padding: 8px 0;
  color: inherit;
}
details.secao-recolhivel > summary::-webkit-details-marker { display: none; }
details.secao-recolhivel > summary::after {
  content: "›";
  font-size: 1.3rem; color: var(--prata-escura);
  transition: transform .18s ease; margin-left: 10px; flex-shrink: 0;
}
details.secao-recolhivel[open] > summary::after { transform: rotate(90deg); }
details.secao-recolhivel > summary:hover::after { color: var(--neon-ciano); }
details.secao-recolhivel > summary h2,
details.secao-recolhivel > summary h3 { margin: 0; }
/* dentro de uma seção-superfície, os cartões recuam de tom (nível CAMPO) para a
   profundidade ficar legível — a mesma regra de "filho mais fundo que o pai" */
main > details.secao-recolhivel > .cartao,
main > details.secao-recolhivel .pilha > .cartao,
main > section > details.secao-recolhivel > .cartao { background: var(--sup-campo); }

/* CONTROLE "máquinas em paralelo" — dropdown discreto no topo de "Em produção".
   Mesmo espírito do .controle-paineis: pequeno, à direita, neon ciano no foco. */
.secao-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--esp-3); flex-wrap: wrap;
}
.controles-topo {
  display: inline-flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
}
.selo-carteiro {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--neon-verde); font-weight: 700; cursor: default; letter-spacing: .02em;
}
.controle-maquinas {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  font-size: .72rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--prata-escura);
}
.controle-maquinas select {
  color-scheme: light;
  background: var(--sup-campo); color: var(--neon-ciano);
  border: 1px solid var(--fio-forte); padding: 4px 9px;
  font-weight: 700; font-size: .82rem; cursor: pointer;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px),
                     calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.controle-maquinas select:hover,
.controle-maquinas select:focus {
  border-color: var(--neon-ciano); outline: none;
  box-shadow: 0 0 0 1px var(--neon-ciano);
}
/* Botão FREIO GERAL da produção (pausar/retomar) — na barra de controles da home */
.controle-pausa { display: inline-flex; margin: 0; }
.controle-pausa .btn-pausar,
.controle-pausa .btn-retomar {
  font-weight: 700; letter-spacing: .02em; cursor: pointer;
  border: 1px solid; padding: 5px 12px; font-size: .82rem;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px),
                     calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: box-shadow .15s ease, filter .15s ease;
}
.controle-pausa .btn-pausar {
  color: var(--ambar); border-color: var(--ambar-vivo);
  background: rgba(232, 179, 57, .12);
}
.controle-pausa .btn-pausar:hover { box-shadow: 0 0 0 1px var(--ambar-vivo); }
.controle-pausa .btn-retomar {
  color: var(--neon-verde-tinta); border-color: var(--neon-verde-vivo);
  background: var(--neon-verde-vivo);
}
.controle-pausa .btn-retomar:hover { filter: brightness(1.06); }

/* Linha resumida de vídeo (itens 5 e 8) */
.video-linha {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 4px 0;
}
.video-linha .barra-resumo {
  /* mesmo track visível da .barra: vê-se o tamanho total mesmo com pouco preenchido */
  flex: 1; min-width: 80px; height: 4px;
  background: linear-gradient(90deg,
              rgba(43, 184, 230, .14), rgba(126, 211, 33, .14)), var(--grafite-3);
  box-shadow: inset 0 0 0 1px var(--fio);
  position: relative;
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}
.video-linha .barra-resumo .barra-cheia {
  position: absolute; inset: 0 auto 0 0; height: 100%;
}
/* nome do canal + etapa empilhados À DIREITA da barra: a etapa cai pequena LOGO
   ABAIXO do nome do canal (sem ocupar uma linha cheia embaixo da barra) */
.video-linha .canal-etapa {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  gap: 0; line-height: 1.2;
  /* largura FIXA da coluna canal/etapa: NÃO cresce nem encolhe com o tamanho do
     texto embaixo do nome (de "tema" até "cap 8/15 · clipe 30/33") — assim a barra
     de progresso fica DO MESMO TAMANHO em todos os vídeos da lista. */
  flex: 0 0 var(--col-canal, 168px);
  width: var(--col-canal, 168px); max-width: var(--col-canal, 168px);
}
.video-linha .canal-etapa > a {   /* nome do canal: trunca se passar da coluna */
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ETAPA ATUAL "onde o programa está trabalhando" (Raul 20/07): mostra o texto COMPLETO,
   quebrando em linhas SEM cortar com "..." e SEM partir palavras (quebra só entre
   palavras). A coluna mantém a largura fixa (barras alinhadas); só cresce em altura. */
.video-linha .etapa-resumo {
  margin: 0; font-size: .72rem; color: var(--prata-escura); letter-spacing: .01em;
  max-width: 100%; text-align: right;
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: normal; word-break: normal;
}
.video-linha .pct {
  font-size: .78rem; color: var(--neon-ciano); min-width: 32px; text-align: right;
}
.video-linha .titulo-resumo {
  flex: 2; font-size: .9rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 240px;
}
.btn-yt-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: #ff0000;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px),
                     calc(100% - 4px) 100%, 0 100%, 0 4px);
  color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: -.02em;
  text-decoration: none; flex-shrink: 0;
  transition: filter .15s ease;
}
.btn-yt-mini:hover { filter: brightness(1.18); text-decoration: none; }
/* botão do UNICÓRNIO (subir pelo ajudante) — canal sem proxy, na main/pool */
.btn-uni {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: var(--grafite-2); flex-shrink: 0;
  border: 1px solid var(--ouro);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px),
                     calc(100% - 4px) 100%, 0 100%, 0 4px);
  text-decoration: none; transition: filter .15s ease;
}
.btn-uni:hover { filter: brightness(1.3); text-decoration: none; }
.btn-uni img { width: 19px; height: 19px; display: block; }

/* ITEM DE VÍDEO EM LINHA (Em produção / Prontos): compacto, SEM expandir — tudo
   na mesma linha (título · barra · % (custo) · canal/etapa · ações). */
.video-item { padding: 9px 13px; }
.video-linha .pct { white-space: nowrap; }
.pct-custo { color: var(--prata-escura); font-weight: 400; }
.video-linha .drive-link { color: var(--prata-escura); white-space: nowrap; }
.video-linha .drive-link:hover { color: var(--neon-ciano); }

/* X de ABORTAR/EXCLUIR — vermelho (atenção), à direita; abre a confirmação */
.btn-x {
  flex-shrink: 0; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(229, 96, 79, .10); color: var(--vermelho);
  box-shadow: inset 0 0 0 1px rgba(196, 61, 46, .45);
  border: 0; cursor: pointer; font-size: .95rem; line-height: 1;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px),
                     calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition: filter .15s ease;
}
.btn-x:hover { filter: brightness(1.12); }

/* "Vídeos do canal": MESMA linha da home, mas com mais info → barra MENOR p/ caber */
.video-item.denso .barra-resumo { flex: 0 1 90px; min-width: 46px; }
.video-item.denso .titulo-resumo { flex: 1 1 120px; max-width: none; }
.video-item.denso .canal-etapa { --col-canal: 132px; }   /* barra menor → coluna menor */

.quebra-mobile { display: none; }   /* não usada no layout empilhado — fica inerte */

/* CELULAR — "Em produção" (home): tudo EMPILHADO (Raul 17/06, v2).
   1ª linha = nome do vídeo · 2ª = a BARRA (largura TOTAL da linha/tela) ·
   3ª = % (R$), canal e o X de cancelar. */
@media (max-width: 600px) {
  .video-linha { flex-wrap: wrap; row-gap: 7px; }
  /* nome sozinho na 1ª linha (pode quebrar em 2 se for longo, sem cortar) */
  .video-linha .titulo-resumo { flex: 1 1 100%; max-width: none; white-space: normal; }
  /* a barra ocupa a linha inteira, de ponta a ponta */
  .video-linha .barra-resumo { flex: 1 1 100%; min-width: 0; height: 6px; }
  /* 3ª linha: % (R$), canal e o X — o X colado na direita */
  .video-linha .canal-etapa {
    flex: 0 1 auto; width: auto; max-width: 55%;
    align-items: flex-start; overflow: hidden;
  }
  .video-linha .btn-x, .video-linha .btn-yt-mini { margin-left: auto; }
}
/* botão de chat do vídeo (ciano) — abre o chat num modal */
.btn-chat {
  flex-shrink: 0; height: 26px; padding: 0 8px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: .78rem;
  background: var(--ciano-veu); color: var(--neon-ciano);
  box-shadow: inset 0 0 0 1px rgba(8, 111, 145, .4);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px),
                     calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition: filter .15s ease;
}
.btn-chat:hover { filter: brightness(1.1); }
/* utilitária: texto no verde da paleta */
.verde { color: var(--neon-verde); }
/* coluna estreita só para um botão-ícone (ex.: o X de bloquear no pool de proxys) */
.col-x { width: 1%; white-space: nowrap; text-align: center; padding-left: 6px; padding-right: 6px; }


/* ---- FILA DE PREVIEW: cards PEQUENOS por data (fácil de varrer) ----
   A grade encaixa vários cards compactos por linha; cada um traz miniatura da
   capa + título + canal. Recolhido por padrão sob o menu da data. */
.preview-grade {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.preview-card { padding: 8px 11px; }
.preview-card .titulo-resumo {
  flex: 1; max-width: none; font-size: .88rem;
}
.preview-card .preview-thumb {
  width: 44px; height: 26px; object-fit: cover; flex-shrink: 0;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px),
                     calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.preview-card .preview-canal { font-size: .76rem; flex-shrink: 0; }
.preview-card .preview-canal a { color: var(--prata-escura); }
.preview-card .preview-canal a:hover { color: var(--neon-ciano); }

/* ============================================================================
   CHECKLIST DE CRIAÇÃO (canal.html) — linhas COMPACTAS e limpas.
   Cada linha: [Feito ✓ pequeno] + título com setinha ▾ (clicável p/ expandir) +
   descrição RECOLHIDA por padrão. Usa <details>/<summary> nativo.
   ============================================================================ */
.checklist-itens { display: grid; gap: 8px; margin-top: 12px; }
.check-item {
  position: relative; padding: 9px 13px; margin: 0;
  background: var(--sup-campo); box-shadow: inset 0 0 0 1px var(--fio);
  box-shadow: inset 3px 0 0 var(--ambar), inset 0 0 0 1px var(--fio);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px),
                     calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.check-item.feito { box-shadow: inset 3px 0 0 var(--neon-verde), inset 0 0 0 1px var(--fio); opacity: .82; }
/* a linha-resumo: botão pequeno ANTES do título, depois o título + ▾ */
.check-linha {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  list-style: none; cursor: pointer; padding: 0;
}
.check-linha::-webkit-details-marker { display: none; }
.check-titulo {
  flex: 1; min-width: 0; color: var(--branco); font-weight: 600;
  font-size: .92rem; display: inline-flex; align-items: center; gap: 7px;
}
/* o título agora é um BOTÃO que abre a box flutuante (popover) do passo */
.check-abre {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-align: left; line-height: 1.3;
}
.check-abre:hover { color: var(--neon-ciano); }
/* a setinha ↗ que indica "clique para abrir a box do passo" */
.check-titulo::after {
  content: "↗"; font-size: .76rem; color: var(--prata-escura);
  transition: color .18s ease; flex-shrink: 0;
}
.check-abre:hover::after { color: var(--neon-ciano); }
.check-item.feito .check-titulo { color: var(--prata); font-weight: 500; }

/* ---- BOX FLUTUANTE de um passo do checklist (o que é / como fazer / link) ----
   Mesma superfície do modal de confirmação, mas com aresta NEON VERDE (orientação,
   não perigo). Abre com .showModal() ao clicar no título do passo. */
.modal-passo {
  width: min(94vw, 480px); padding: 0; color: var(--prata); border: 0;
  background: linear-gradient(165deg, var(--grafite-3) 0%, var(--grafite-2) 80%);
  box-shadow: 0 18px 50px rgba(26, 24, 17, .6),
              inset 0 0 0 1px rgba(61, 122, 18, .35);
  clip-path: var(--chanfro);
}
.modal-passo::backdrop { background: rgba(26, 24, 17, .66); backdrop-filter: blur(3px); }
.modal-passo h3 { margin: 0 18px 10px; padding-top: 18px; color: var(--branco); font-size: 1rem; }
.modal-passo .modal-fechar {
  position: absolute; top: 8px; right: 10px; background: none; border: 0;
  color: var(--prata-escura); font-size: 1rem; cursor: pointer; padding: 4px 7px;
}
.modal-passo .modal-fechar:hover { color: var(--branco); }
.passo-bloco { margin: 0 18px 12px; }
.passo-rotulo {
  display: inline-block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--neon-verde); margin-bottom: 3px; font-weight: 700;
}
.passo-texto { margin: 0; font-size: .88rem; color: var(--prata); line-height: 1.5; }
.passo-link { margin: 0 18px 14px; }
.passo-acoes { display: flex; gap: 8px; margin: 0 18px 18px; flex-wrap: wrap; }
.passo-acoes form { margin: 0; }
.passo-auto { margin: 0 18px 18px; font-size: .84rem; color: var(--neon-verde); }

/* checklist CONCLUÍDO (no fim da página): discreto, recolhido */
.checklist-pronto summary h2 { color: var(--prata); }
/* o botão "Feito" PEQUENO (do tamanho do texto), antes do título */
.check-feito {
  flex-shrink: 0; padding: 4px 10px; font-size: .74rem; font-weight: 600;
  letter-spacing: .02em; line-height: 1.2; border: 0; cursor: pointer;
  color: var(--branco);
  background: rgba(126, 211, 33, .06);
  box-shadow: inset 0 0 0 1px rgba(61, 122, 18, .58);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px),
                     calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: box-shadow .15s ease, transform .15s ease;
}
.check-feito:hover { box-shadow: inset 0 0 0 1px rgba(61, 122, 18, .95); transform: translateY(-1px); }
/* quando já feito, o botão "Feito" vira um selo discreto (voltar a pendente) */
.check-feito.desfazer {
  background: var(--grafite-3); color: var(--neon-verde);
  box-shadow: inset 0 0 0 1px rgba(61, 122, 18, .4);
}
.check-feito.desfazer:hover { filter: drop-shadow(0 3px 8px rgba(26, 24, 17, .14)); }
/* marca "✓ confirmado pelo sistema" (sem botão) — também pequena */
.check-auto {
  flex-shrink: 0; padding: 4px 10px; font-size: .72rem; font-weight: 700;
  color: var(--neon-verde); background: var(--verde-veu);
  box-shadow: inset 0 0 0 1px rgba(61, 122, 18, .3);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px),
                     calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.check-ajuda {
  margin: 9px 0 2px; padding-left: 2px; font-size: .85rem;
  color: var(--prata-escura);
}
.check-item form { margin: 0; }

/* Assistente "Criar canal comigo" */
.assistente-escolha { max-width: 760px; margin: 0 auto; }
.assistente-opcoes { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.opcao-canal { border-left: 3px solid var(--fio); }
/* a opção "destaque/recomendada" (criar canal comigo) é AÇÃO NOBRE → dourada */
.opcao-destaque { border-left-color: var(--ouro); }
.opcao-destaque .botao { background: rgba(205, 171, 99, .07); color: var(--ouro);
  box-shadow: inset 0 0 0 1px rgba(138, 106, 31, .6); }
.assistente-passo { max-width: 700px; margin: 0 auto; }
.assistente-progresso {
  display: flex; justify-content: space-between; font-size: .82rem;
  margin-bottom: 6px;
}
.assistente-mapa { display: grid; gap: 6px; margin: 14px 0; }
.assistente-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--grafite-3); font-size: .88rem;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px),
                     calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.assistente-item.respondida { opacity: .6; }
.assistente-item.atual {
  background: var(--grafite-2);
  box-shadow: inset 0 0 0 1px var(--neon-ciano);
}
.assistente-item.pendente { opacity: .45; }
.assistente-num {
  min-width: 20px; height: 20px; display: flex; align-items: center;
  justify-content: center; background: var(--grafite-2);
  font-size: .75rem; color: var(--prata-escura);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px),
                     calc(100% - 3px) 100%, 0 100%, 0 3px);
}
.assistente-item.atual .assistente-num { background: var(--neon-ciano); color: var(--grafite-0); }
.assistente-pergunta-atual { margin: 14px 0 8px; }
.assistente-respondidas summary { color: var(--prata-escura); }
.opcao-nome { border-left: 3px solid var(--fio); }
.lista-passos { padding-left: 1.4em; display: grid; gap: 8px; }
.lista-passos li { line-height: 1.5; }

/* TABELAS — uma base só (financeiro, proxys): mesmas linhas de fio, mesmo
   cabeçalho discreto. Antes cada tabela ficava "crua" e destoava do resto. */
table { border-collapse: collapse; font-size: .88rem; }
.cartao table, details table { width: 100%; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--fio); }
th { color: var(--prata-escura); font-weight: 600; font-size: .78rem;
     text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }

/* Dashboard financeiro */
.tabela-fin {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.tabela-fin th, .tabela-fin td {
  text-align: left; padding: 6px 10px;
  border-bottom: 1px solid var(--fio);
}
.tabela-fin th { color: var(--prata-escura); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em; }
.tabela-fin tr:last-child td { border-bottom: 0; }
.valor-destaque { font-size: 1.5rem; color: var(--branco);
  font-family: var(--fonte-display); margin: 4px 0; }

/* densidade — cartões de proposta/referência da Pendência (parágrafos mais juntos) */
.proposta p { margin: .25rem 0; }
.proposta h3 { margin: 0 0 .35rem; }
.proposta form { margin-top: .5rem; }

/* ---- cartõezinhos de estatística (financeiro: uma fileira compacta) ----
   Mesma superfície de CARTÃO, mas em 2 linhas (rótulo pequeno em cima, número
   embaixo) e VÁRIOS por linha. Troca os 4 cards gigantes por uma régua enxuta. */
.grade-stats {
  display: grid; gap: 8px; margin-bottom: var(--esp-3);
  grid-template-columns: repeat(6, minmax(0, 1fr));   /* TODOS os cards numa linha só (Raul 17/06) */
}
@media (max-width: 920px) { .grade-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grade-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cartao-stat {
  padding: 7px 9px; display: flex; flex-direction: column; gap: 1px;
}
.cartao-stat .stat-rotulo {
  font-size: .63rem; color: var(--prata-escura); letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.cartao-stat .stat-valor {
  font-size: .96rem; color: var(--branco); font-family: var(--fonte-display);
  line-height: 1.15; white-space: nowrap;
}
.cartao-stat.realce-verde .stat-valor { color: var(--neon-verde); }

/* Link financeiro no menu */
.menu-fin { }

/* ---- filtro do calendário (item 5) + grupos recolhíveis (item 4) ----
   Barra de filtro discreta acima da agenda; cada dimensão (data/semana/mês/
   canal) é um <details class="secao-recolhivel"> recolhido por padrão. */
.cal-filtro {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  margin-top: 10px;
}
.cal-filtro label { font-size: .8rem; }
.cal-filtro .cal-filtro-acoes { display: flex; gap: 8px; align-items: center; }
.cal-grupo-titulo { display: inline-flex; align-items: center; gap: 8px; }
.cal-grupo-titulo .selo { vertical-align: 0; }
/* a agenda dentro de um grupo: respira um pouco do topo */
details.secao-recolhivel .calendario-lista { margin-top: 10px; }

/* ---- AUTO-ATUALIZAÇÃO: o fio neon do topo "pisca" suave quando a página se
   atualiza sozinha (sinal discreto de que algo mudou — sem barulho). O fio é o
   mesmo contorno duplo da logo (.topo::after); aqui ele só ganha brilho e largura
   por um instante. Respeita prefers-reduced-motion (vide marca.css). ---- */
@keyframes fio-pulsa {
  0%   { opacity: .45; filter: none; height: 1px; }
  35%  { opacity: 1;   filter: drop-shadow(0 0 8px rgba(26, 24, 17, .16)); height: 2px; }
  100% { opacity: .45; filter: none; height: 1px; }
}
body.atualizando .topo::after { animation: fio-pulsa 1.1s ease-in-out; }

/* ---- M4: indentação progressiva de submenus aninhados (sutil, ~16px por nível) ---- */
details details { margin-left: 16px; }
details details details { margin-left: 32px; }

/* ---- M3+M5: lembrete de saldo de APIs + aviso de estimativas (home) ---- */
.aviso-saldo-apis {
  font-size: .82rem; color: var(--prata-escura);
  padding: 8px 14px; margin-bottom: 14px;
  background: var(--ciano-veu);
  box-shadow: inset 0 0 0 1px rgba(8, 111, 145, .22);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 0 100%, 0 8px);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
}
.aviso-saldo-apis a { color: var(--neon-ciano); font-weight: 600; }
.aviso-saldo-apis a:hover { text-decoration: underline; }
.aviso-estimativa {
  display: block; width: 100%;
  margin-top: 3px; font-size: .76rem; color: var(--prata-escura);
}
.aviso-estimativa strong { color: var(--prata-escura); font-weight: 600; }

/* ---- M40: aviso de canal secando / disco cheio (alerta crítico, tema escuro) ---- */
.aviso-espaco-critico {
  font-size: .88rem; color: var(--vermelho);
  padding: 10px 15px; margin-bottom: 14px;
  background: rgba(229, 96, 79, .10);
  box-shadow: inset 4px 0 0 var(--vermelho), inset 0 0 0 1px rgba(196, 61, 46, .40);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.aviso-espaco-critico a { color: var(--neon-ciano); text-decoration: underline; }
.aviso-producao-pausada {
  font-size: .9rem; color: var(--ambar);
  padding: 10px 15px; margin: 0 0 14px;
  background: rgba(232, 179, 57, .12);
  box-shadow: inset 4px 0 0 var(--ambar-vivo), inset 0 0 0 1px rgba(138, 106, 18, .35);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.aviso-producao-pausada strong { color: var(--ambar); }