/* Fontes da marca hospedadas no próprio portal: a CSP só aceita origem própria e o celular
   do funcionário não tem estas fontes instaladas. Pesos: Unbounded 500, 700 e 900; Sora variável. */
@font-face { font-family: "Unbounded"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/Unbounded-Medium.ttf") format("truetype"); }
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/Unbounded-Bold.ttf") format("truetype"); }
@font-face { font-family: "Unbounded"; font-weight: 900; font-style: normal; font-display: swap; src: url("/fonts/Unbounded-Black.ttf") format("truetype"); }
@font-face { font-family: "Sora"; font-weight: 100 800; font-style: normal; font-display: swap; src: url("/fonts/Sora-VariableFont_wght.ttf") format("truetype"); }

:root {
  --amarelo: #ffda00;
  --espaco-box: 24px;
  --preto: #000000;
  --grafite: #939393;
  --fundo: #0d0d0d;
  --painel: #141414;
  --borda: #262626;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: #fff;
  font-family: "Sora", sans-serif;
}

h1, h2 {
  font-family: "Unbounded", sans-serif;
  margin: 0 0 6px;
}

a {
  color: inherit;
}

/* ---------- Login ---------- */

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Textura de marca: brilho radial amarelo sutil + linhas diagonais finas
     sobre fundo quase-preto (mesmo tratamento usado nas peças da Minas Rodas). */
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 218, 0, 0.14), transparent 55%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 26px
    ),
    var(--fundo);
}

.login-wrap {
  width: 100%;
  max-width: 420px;
}

.login-logo {
  display: block;
  height: 96px;
  width: auto;
  margin: 0 auto 20px;
}

.login-logo-simbolo {
  height: 72px;
}

.login-logo-svg {
  height: auto;
  width: 160px;
  max-width: 50%;
}

.login-panel {
  text-align: center;
}

.login-panel .subtitle {
  text-align: center;
}

.login-panel form {
  text-align: left;
}

/* Botões de ação de um formulário lado a lado, na mesma linha, com respiro
   entre eles; o primário (amarelo) cresce, o secundário tem o tamanho do rótulo. */
.form-acoes {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 18px;
}

.form-acoes > button:not(.ghost-btn) {
  flex: 1 1 auto;
  width: auto;
}

.form-acoes > .ghost-btn {
  flex: 0 0 auto;
  padding: 13px 18px;
  font-size: 1rem;
}

/* Texto explicativo da tela de definição de senha (primeiro acesso). */
.login-panel .hint {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--grafite, #555);
  margin: 0 0 18px;
}

/* ---------- Painel genérico (login) ---------- */

.panel {
  width: 100%;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 32px;
}

.brand {
  font-family: "Unbounded", sans-serif;
  font-weight: 900;
  color: var(--amarelo);
  letter-spacing: 0.02em;
  margin: 0 0 4px;
  font-size: 1.5rem;
}

.subtitle {
  color: var(--grafite);
  margin: 0 0 28px;
  font-size: 0.95rem;
}

label {
  display: block;
  font-size: 0.85rem;
  color: var(--grafite);
  margin-bottom: 6px;
}

input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: 8px;
  border: 1px solid #333;
  background: #0d0d0d;
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: 1rem;
}

input:focus {
  outline: none;
  border-color: var(--amarelo);
}

input[type="file"] {
  padding: 10px;
  background: transparent;
}

/* REGRA DE BOTÃO: o tamanho é o do rótulo, nunca o da linha. Largura total é
   exceção declarada (`.btn-bloco`, ou o painel de login). */
button {
  width: auto;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: var(--amarelo);
  color: #000;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.btn-bloco,
.login-panel button {
  width: 100%;
  padding: 13px;
  font-size: 1rem;
}

.login-panel .form-acoes > button {
  width: auto;
}

button:hover {
  filter: brightness(0.95);
}

.error,
.error-box {
  background: #3a1a1a;
  color: #ff8a8a;
  border: 1px solid #5c2626;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 0.9rem;
}

.notice {
  background: #1a2f1e;
  color: #8fe0a0;
  border: 1px solid #275c36;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 0.9rem;
}

/* ---------- App shell (sidebar + conteúdo) ---------- */

.app-body {
  background: var(--fundo);
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 260px;
  flex: 0 0 260px;
  transition: width 0.2s ease, flex-basis 0.2s ease, padding 0.2s ease;
  background: var(--painel);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  padding: 0 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.brand-link {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
}

/* Símbolo da marca: só aparece com o menu recolhido, no lugar do logo. */
.brand-simbolo {
  display: none;
  width: 32px;
  height: 32px;
}

/* Botão de recolher/expandir o menu. Mesmo desenho discreto do "Sair": é
   controle da barra, não ação do conteúdo, e não pode competir com o item
   ativo pelo amarelo. */
.sidebar-toggle {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--grafite);
  cursor: pointer;
}
.sidebar-toggle:hover {
  color: #fff;
  border-color: #555;
  background: #1a1a1a;
  filter: none;
}
.sidebar-toggle:focus-visible {
  outline: none;
  border-color: var(--amarelo);
}
.sidebar-toggle svg {
  width: 18px;
  height: 18px;
}
.sidebar-toggle .seta {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.brand-logo {
  height: auto;
  width: 100%;
  max-width: 140px;
}

.profile-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  margin-bottom: 16px;
  border: 1px solid transparent;
}

.profile-summary:hover {
  border-color: var(--borda);
  background: #1a1a1a;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 40px;
  border: 1px solid var(--borda);
}

.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f1f1f;
  color: var(--amarelo);
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
}

.avatar-lg {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  font-size: 1.6rem;
  margin-bottom: 16px;
}

.profile-summary-text {
  min-width: 0;
}

.profile-name {
  /* 6px, e não os 2px de antes: a etiqueta de cargo é uma pilha com borda, e
     encostada no nome os dois liam como um bloco só. 6px é a distância que o
     resto do portal usa entre um rótulo e o que vem embaixo dele. */
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.role-tag {
  display: inline-block;
  background: #1f1f1f;
  color: var(--amarelo);
  border: 1px solid #333;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.72rem;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  /* Barra de rolagem escura e fina: a padrão do sistema é branca e salta
     aos olhos num menu preto quando a lista não cabe na altura. */
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.sidebar-nav ul {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}

.nav-heading {
  color: var(--grafite);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 18px 8px 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: #d8d8d8;
  font-size: 0.92rem;
  border-left: 3px solid transparent;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grafite);
}

.nav-icon svg {
  width: 18px;
  height: 18px;
}

.nav-item:hover {
  background: #1a1a1a;
  color: #fff;
}

.nav-item:hover .nav-icon {
  color: #fff;
}

.nav-item.active {
  background: #1a1a1a;
  color: var(--amarelo);
  border-left-color: var(--amarelo);
}

.nav-item.active .nav-icon {
  color: var(--amarelo);
}

.sidebar .empty {
  color: var(--grafite);
  font-size: 0.85rem;
  padding: 8px 10px;
}

/* ---------- Sidebar: submenus (Treinamentos / Planners) ---------- */

.nav-group-toggle {
  width: 100%;
  background: transparent;
  color: #d8d8d8;
  font-family: "Sora", sans-serif;
  font-weight: 400;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}

.nav-group-toggle:hover {
  filter: none;
}

.nav-caret {
  margin-left: auto;
  color: var(--grafite);
  transition: transform 0.15s;
}

/* O ">" aqui não é estilo: é o que faz o subgrupo aninhado funcionar.
   "Avaliações" é um .nav-group DENTRO do .nav-sublist de "Treinamentos", então
   um seletor de descendente faria o estado aberto do pai valer também para o
   filho — o sublist de dentro ficaria aberto à força e o clique no botão não
   mudaria nada na tela. Cada grupo responde só pelo próprio .open. */
.nav-group.open > .nav-group-toggle .nav-caret {
  transform: rotate(90deg);
  color: var(--amarelo);
}

.nav-group.open > .nav-group-toggle {
  color: #fff;
}

.nav-sublist {
  list-style: none;
  margin: 2px 0 4px;
  padding: 0;
  display: none;
}

.nav-group.open > .nav-sublist {
  display: block;
}

.nav-subitem {
  display: block;
  padding: 8px 10px 8px 42px;
  border-radius: 8px;
  text-decoration: none;
  color: #a9a9a9;
  font-size: 0.87rem;
  border-left: 3px solid transparent;
}

.nav-subitem:hover {
  background: #1a1a1a;
  color: #fff;
}

.nav-subitem.active {
  background: #1a1a1a;
  color: var(--amarelo);
  border-left-color: var(--amarelo);
}

/* Botão amarelo de destaque contextual (ex: link para a versão impressa de
   um planner), usado dentro do conteúdo da página — não mais na sidebar.
   Funciona tanto como <a> quanto como <button> (por isso reseta width/border
   herdados da regra genérica de "button"). */
.content-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  width: auto;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: var(--amarelo);
  color: #000;
  text-decoration: none;
  font-family: "Sora", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.content-cta .nav-icon {
  color: #000;
}

.content-cta:hover {
  filter: brightness(0.95);
}

.content-cta:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Variante secundária (ex: "Salvar registro de hoje") — mesma forma, sem
   competir visualmente com o CTA amarelo sólido ao lado. */
.content-cta-outline {
  background: transparent;
  border: 1px solid var(--amarelo);
  color: var(--amarelo);
}

.content-cta-outline .nav-icon {
  color: var(--amarelo);
}

.content-cta-outline:hover {
  background: rgba(255, 218, 0, 0.1);
  filter: none;
}

.content-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

form.logout {
  margin-top: 12px;
}

.logout-btn {
  background: transparent;
  border: 1px solid #333;
  color: var(--grafite);
  width: 100%;
  padding: 10px 14px;
  font-size: 0.85rem;
}

.logout-btn:hover {
  color: #fff;
  border-color: #555;
}

/* ---------- Conteúdo principal ---------- */

.content {
  flex: 1;
  min-width: 0;
  padding: 40px 48px;
}

.content-header {
  margin-bottom: 28px;
}

/* Título de página em caixa alta, como os rótulos do content-map ("MONTE
   ORÇAMENTO"). É CSS e não texto em maiúsculas na origem porque parte desses
   títulos é montada com dado que aparece em outro lugar sem caixa alta (o
   título da prova, por exemplo, também vai para as tabelas do Administrador e
   para o texto de confirmação) — transformar na exibição mantém o dado
   intacto. */
.titulo-caixa-alta {
  text-transform: uppercase;
}

/* ---------- Home: seções temáticas ---------- */

.home-section {
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--borda);
}

.home-section-last {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.home-section > .section-title {
  margin-bottom: 16px;
}

/* REGRA DE RESPIRO na página inicial: a grade de duas colunas e os blocos de
   largura total/abaixo não são `.home-section`, então não trazem o afastamento
   dela — sem isto o box de Conduta encostava no do Instagram e o Mural em
   "Comemorações". */
.split-grid {
  margin-bottom: 36px;
}

[data-coluna="largura-total"]:not(:empty) {
  margin-bottom: 36px;
}

/* `minmax(0, 1fr)` e não `1fr`: `1fr` tem mínimo `auto`, ou seja, a coluna
   nunca fica mais estreita que o conteúdo mais largo dela (abas, ladrilhos,
   select). No tablet (946px) isso empurrava a coluna da direita para fora da
   tela e criava rolagem horizontal na página inteira. */
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  /* `stretch` (o padrão) e não `start`: é o que faz o box da direita ter a
     altura das duas caixas da esquerda somadas. Com `start` cada coluna ficava
     do tamanho do próprio conteúdo e a direita terminava no meio da página. */
  align-items: stretch;
}

/* Coluna como flex para o conteúdo poder ocupar a altura que o grid deu a
   ela — sem isto, `height: 100%` dentro da coluna não teria contra o que
   resolver. */
/* REGRA DE RESPIRO: box empilhado em box tem `--espaco-box` entre eles, dado
   pelo `gap` do pai e não por margem de cada box. */
.split-col {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-box);
  min-width: 0;
}

/* Título de uma caixa que vem DEPOIS de outra na mesma coluna (hoje, "Redes
   sociais" abaixo de "O que há de novo?"). */
.split-col > .section-title:not(:first-child) {
  margin-top: 24px;
}

.split-col .section-title {
  margin-bottom: 16px;
}

/* Com a barra lateral de 260px ocupando a tela, abaixo de ~1100px cada coluna
   ficaria com menos de 300px — pouco para o dashboard de Avaliações (anel,
   abas, ladrilhos). Por isso empilha já no tablet, e não só no celular. */
@media (max-width: 1100px) {
  .split-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

ul.items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card {
  display: block;
  padding: 16px 18px;
  background: #1a1a1a;
  border: 1px solid #292929;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  transition: border-color 0.15s;
}

.card:hover {
  border-color: var(--amarelo);
}

.empty {
  color: var(--grafite);
  padding: 16px 0;
}

/* ---------- Perfil ---------- */

.profile-grid {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 20px;
  align-items: start;
}

.profile-card {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 24px;
}

.avatar-form label {
  margin-top: 4px;
}

/* ---------- Login: links auxiliares ---------- */

.forgot-link {
  display: block;
  text-align: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--borda);
  color: var(--grafite);
  font-size: 0.85rem;
  text-decoration: none;
}

.forgot-link:hover {
  color: var(--amarelo);
}

/* ---------- Botões "ghost" (secundários) ---------- */

.ghost-btn {
  display: inline-block;
  width: auto;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid #3a3a3a;
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s;
}

.ghost-btn:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
}

.ghost-btn-accent {
  border-color: var(--amarelo);
  color: var(--amarelo);
}

.ghost-btn-block {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* ---------- Home: acesso rápido (slider) ---------- */

.quick-slider-wrap {
  position: relative;
}

.quick-slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 18px 4px 20px;
  margin: -18px -4px -20px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.quick-slider::-webkit-scrollbar {
  display: none;
}

.quick-slider .poster-card {
  flex: 0 0 auto;
  width: 200px;
  aspect-ratio: 3 / 5;
  scroll-snap-align: start;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: var(--painel);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.slider-arrow:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
}

.slider-arrow-prev {
  left: -14px;
}

.slider-arrow-next {
  right: -14px;
}

@media (max-width: 560px) {
  .slider-arrow {
    display: none;
  }
}

/* ---------- Home: cards do carrossel "Meu conteúdo" (estilo Netflix) ----------
   Capa em foto (background-image, com gradiente escuro embutido — ver
   server.js) em vez de ícone/painel liso; ao passar o mouse, o card cresce
   por cima dos vizinhos e revela a descrição. */

.poster-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.7);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.poster-card:hover,
.poster-card:focus-visible {
  transform: scale(1.08) translateY(-6px);
  z-index: 5;
  box-shadow: 0 24px 44px -16px rgba(0, 0, 0, 0.8), 0 0 0 2px var(--amarelo);
}

.poster-card.highlight {
  box-shadow: 0 0 0 2px var(--amarelo), 0 10px 24px -16px rgba(0, 0, 0, 0.7);
}

.poster-kind {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--amarelo);
  border-radius: 999px;
  padding: 3px 9px;
}

/* Cor da etiqueta por tipo de conteúdo. É o que permite bater o olho na
   fileira e separar treinamento de planner sem ler a palavra — por isso a
   cor é fixa por tipo e o card em destaque NÃO a inverte (o destaque dele é
   a moldura amarela). Tipo novo em KIND_LABELS ganha uma linha aqui; sem
   ela, cai no amarelo padrão de .poster-kind. */
.poster-kind-treinamento {
  background: var(--amarelo);
  color: #0a0a0a;
}

.poster-kind-planner {
  background: #0a0a0a;
  color: #ffffff;
  /* Contorno claro: sem ele a pílula preta some sobre foto escura. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.poster-kind-tabela {
  background: #ffffff;
  color: #0a0a0a;
}

.poster-kind-ferramenta {
  background: var(--grafite);
  color: #0a0a0a;
}

/* O título começa SEMPRE na mesma altura do card (66% a partir do topo, já na parte escurecida da foto), e
   não colado na base. Presa na base, a caixa crescia para cima conforme o
   título tivesse uma ou duas linhas e a legenda (invisível até o hover, mas
   ocupando espaço) fosse curta ou longa — e na fileira cada título ficava
   numa altura. Ancorado no topo, título de duas linhas cresce para baixo, e
   a legenda desce abaixo dele, cortada em três linhas para caber no card. */
.poster-info {
  position: absolute;
  left: 0;
  right: 0;
  top: 66%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  padding: 0 14px 12px;
  overflow: hidden;
}

.poster-label {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.poster-desc {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.poster-card:hover .poster-desc,
.poster-card:focus-visible .poster-desc {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 560px) {
  .quick-slider .poster-card {
    width: 150px;
  }
}

/* ---------- Home: grade de acesso rápido (não usada por padrão — mantida
   caso algum outro bloco precise de layout em grade em vez de slider) ---------- */

.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.quick-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  transition: transform 0.15s, border-color 0.15s;
}

.quick-card:hover {
  border-color: var(--amarelo);
  transform: translateY(-2px);
}

.quick-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #1f1f1f;
  color: var(--amarelo);
}

.quick-icon svg {
  width: 22px;
  height: 22px;
}

.quick-label {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
}

.quick-desc {
  color: var(--grafite);
  font-size: 0.85rem;
  line-height: 1.4;
}

.quick-card.highlight {
  background: var(--amarelo);
  color: #000;
  border-color: var(--amarelo);
}

.quick-card.highlight .quick-icon {
  background: rgba(0, 0, 0, 0.12);
  color: #000;
}

.quick-card.highlight .quick-desc {
  color: #2b2b2b;
}

/* ---------- Home: painéis informativos ---------- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
}

.info-panel {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 22px;
}

.info-panel h2 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.info-panel p {
  color: var(--grafite);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 14px;
}

.info-panel-ok {
  border-color: #275c36;
}

.info-panel-ok h2 {
  color: #8fe0a0;
}

.content-header-tight {
  margin-bottom: 16px;
}

.content-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* REGRA DE AÇÕES DA PÁGINA: o título (`.page-header`) é emitido pela casca e o
   apoio + os botões pelo corpo da tela, em blocos separados. Quando a tela tem
   ações (`.content-actions`, ou um botão direto no `.content-header-row`),
   `.content` vira grade de duas colunas e as ações sobem para a linha do
   título, no canto superior direito; o resto continua empilhado em largura
   inteira. `display: contents` tira a caixa do cabeçalho do corpo para as
   ações poderem ocupar a célula do título. Só em celular (até 700px) elas
   descem para baixo do título. */
.content:has(> .content-header-row, > .content-header > .content-actions) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-content: start;
}

.content:has(> .content-header-row, > .content-header > .content-actions) > * {
  grid-column: 1 / -1;
}

.content:has(> .content-header-row, > .content-header > .content-actions) > .page-header {
  grid-column: 1;
  grid-row: 1;
}

.content > .content-header-row,
.content > .content-header:has(> .content-actions) {
  display: contents;
}

.content > .content-header-row > *,
.content > .content-header:has(> .content-actions) > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.content > .content-header-row > :not(.content-actions, .ghost-btn, .content-cta),
.content > .content-header:has(> .content-actions) > :not(.content-actions) {
  margin-bottom: 28px;
}

.content > .content-header-row > :is(.content-actions, .ghost-btn, .content-cta),
.content > .content-header > .content-actions {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  flex-wrap: nowrap;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .content > .content-header-row > :is(.content-actions, .ghost-btn, .content-cta),
  .content > .content-header > .content-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
}

/* ---------- Conteúdo embutido (treinamentos, planners, tabela) ---------- */

.frame-wrap {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 14px;
  overflow: hidden;
  height: calc(100vh - 190px);
  min-height: 420px;
}

.content-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* Treinamentos: o deck já mostra o próprio título na barra superior dele, então
   aqui o cabeçalho do portal vira uma faixa fina — cada pixel devolvido ao
   iframe é um pixel a menos de slide cortado. */
.deck-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.deck-bar-label {
  /* Mesma tipografia do <h1> das páginas internas de planner/tabela:
     Unbounded, tamanho padrão de h1 (2em) e margem de 6px até a linha de
     baixo. O caixa alta vem do texto, como no label dos planners. */
  display: block;
  font-family: "Unbounded", sans-serif;
  font-size: 2em;
  font-weight: bold;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 6px;
}

/* Segunda linha: o cargo e o CBO do quadro de carreira RH10, com a mesma
   tipografia do .subtitle das demais páginas internas. A margem inferior
   de 28px do .subtitle não se aplica aqui: esta faixa é compacta de
   propósito, para não roubar altura do deck. */
.deck-bar-label small {
  display: block;
  font-family: "Sora", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--grafite);
  margin: 0;
}

/* 155px = 40 (padding superior do .content) + 63 (faixa de título de duas
   linhas) + 12 (margem da faixa) + 40 (padding inferior). Medido no
   navegador; se a faixa mudar de tamanho, remedir este valor. */
.frame-wrap-deck {
  height: calc(100vh - 155px);
}

/* Em tela cheia o quadro ocupa a viewport inteira, sem moldura do portal. */
.frame-wrap:fullscreen {
  height: 100vh;
  width: 100vw;
  border: 0;
  border-radius: 0;
}

/* ---------- Painel com cabeçalho de ícone ----------
   Nasceu no box "O que há de novo?" e hoje serve também ao box de resultados
   das avaliações e à página /novidades — daí o nome genérico. O modificador
   .whats-new é só o fundo âmbar do box de novidades. */

.whats-new {
  grid-column: 1 / -1;
  border-color: #3a3210;
  background: linear-gradient(180deg, #1a1708, var(--painel) 60%);
}

.painel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.quick-icon-sm {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.quick-icon-sm svg {
  width: 18px;
  height: 18px;
}

.painel-head .quick-icon-sm {
  background: rgba(255, 218, 0, 0.15);
  color: var(--amarelo);
}

.painel-head h2 {
  margin: 0;
  font-size: 1.02rem;
}

.version-tag {
  color: var(--grafite);
  font-size: 0.78rem;
}

.painel-lista {
  margin: 0;
  padding-left: 20px;
  color: #d8d8d8;
  font-size: 0.88rem;
  line-height: 1.7;
}

/* Selo de versão ao lado de uma novidade. Só aparece quando os destaques da
   home vêm de versões diferentes — ver buildWhatsNew(). */
.novidade-versao {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--grafite);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Rodapé de ações do painel: botões à esquerda, nota de apoio ao lado. Em
   tela estreita os botões empilham e ocupam a linha inteira, senão dois
   botões lado a lado ficam com área de toque pequena demais. */
.painel-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
}

.painel-nota {
  color: var(--grafite);
  font-size: 0.8rem;
}

@media (max-width: 520px) {
  .painel-acoes .ghost-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* O box da home resume um painel que tem página própria; dentro dele os
   ladrilhos não levam a margem de baixo que separam seções na página do
   painel. */
.painel-avaliacoes .av-tiles {
  margin-bottom: 0;
}

.painel-avaliacoes .av-tiles-painel {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.painel-avaliacoes .av-tile {
  padding: 14px 16px;
}

.painel-avaliacoes .av-tile-valor {
  font-size: 26px;
}

.painel-avaliacoes p {
  margin-bottom: 0;
}

/* ---------- Página /novidades ---------- */

.novidades-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Home: ferramentas do dia a dia ---------- */

/* REGRA DE RESPIRO: título de seção sempre tem espaço até o box que ele
   encabeça (a lista do Banco de Questões encostava o "Questões 150" no
   primeiro cartão). */
.section-title {
  font-size: 1.1rem;
  margin: 0 0 16px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.tool-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  transition: border-color 0.15s, transform 0.15s;
}

.tool-card:hover {
  border-color: var(--amarelo);
  transform: translateY(-2px);
}

/* ---------- Meus registros (planners salvos) ---------- */

/* O atributo hidden vale display:none na folha do navegador, que perde para
   qualquer display declarado aqui. Sem este !important, esconder uma linha
   (display:flex) ou um grupo com .hidden não teria efeito nenhum. */
[hidden] {
  display: none !important;
}

/* Rótulo lido por leitor de tela, invisível na tela. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.registros-busca {
  position: relative;
  max-width: 640px;
  margin-bottom: 22px;
}

.registros-busca-icone {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--grafite);
  pointer-events: none;
}

.registros-busca-icone svg {
  width: 18px;
  height: 18px;
  display: block;
}

.registros-busca input {
  margin-bottom: 0;
  padding-left: 42px;
  border-radius: 12px;
  font-size: 0.92rem;
}

/* O X nativo do type="search" no Chrome nasce preto sobre fundo escuro. */
.registros-busca input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--grafite);
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="black" stroke-width="3" stroke-linecap="round"/></svg>') center / contain no-repeat;
  cursor: pointer;
}

.registros-grupo {
  margin-bottom: 28px;
  max-width: 640px;
}

.registros-grupo .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* Contagem ao lado do nome do tipo — o Administrador vê a lista da equipe
   inteira e precisa saber o tamanho de cada grupo sem contar cartão. */
.registros-contagem {
  font-family: "Sora", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--grafite);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 1px 8px;
}

.registros-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}

/* O card é um link e o botão de excluir é um <form> — um não pode ficar
   dentro do outro, então esta linha os põe lado a lado. */
.registro-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.registro-row .registro-card {
  flex: 1;
  min-width: 0;
}

.registro-excluir {
  display: flex;
}

.icon-btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 12px;
  color: var(--grafite);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.icon-btn-danger:hover {
  border-color: #e05252;
  color: #e05252;
  background: rgba(224, 82, 82, 0.1);
}

.icon-btn-danger .nav-icon {
  color: inherit;
  display: flex;
  width: 20px;
  height: 20px;
}

.registro-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  transition: border-color 0.15s;
}

.registro-card:hover {
  border-color: var(--amarelo);
}

.tool-card .quick-icon-sm {
  background: #1f1f1f;
  color: var(--amarelo);
}

.tool-text {
  min-width: 0;
}

.tool-label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
}

.tool-desc {
  display: block;
  color: var(--grafite);
  font-size: 0.8rem;
  margin-top: 2px;
}

/* ---------- Home: feed do Instagram ----------
   Carrossel no lugar do widget do Fouita: cabeçalho do perfil (foto com o
   anel do Instagram, nome, "Seguir") e uma fileira de posts colados, sem
   vão entre eles. Seção de largura inteira: com 7 posts por tela, na meia
   coluna onde ficava o card antigo cada miniatura sairia do tamanho de um
   selo. */

.insta-feed {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 22px 24px 16px;
}

.insta-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.insta-feed-perfil {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

/* O anel colorido é o do próprio Instagram: é o que diz "isto é um perfil
   do Instagram" antes de ler o nome. */
.insta-feed-avatar {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.insta-feed-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--painel);
  background: #000;
  object-fit: cover;
}

.insta-feed-nome {
  font-size: 1.15rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insta-feed-perfil:hover .insta-feed-nome {
  color: var(--amarelo);
}

.insta-feed-head .ghost-btn {
  flex: 0 0 auto;
}

.insta-feed .quadro-vazio {
  margin: 0 0 6px;
}

/* O contêiner é quem decide quantos posts cabem (container query), não a
   tela: com a barra lateral aberta ou fechada a largura útil muda, e é ela
   que importa. */
.insta-carrossel {
  position: relative;
  container-type: inline-size;
}

.insta-trilho {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 7);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: 10px;
  /* Sem script (sem setas nem bolinhas), a barra de rolagem é a única pista
     de que há mais posts à direita: fica visível e fina. */
  scrollbar-width: thin;
  scrollbar-color: var(--borda) transparent;
}

.insta-carrossel-ligado .insta-trilho {
  scrollbar-width: none;
}

.insta-carrossel-ligado .insta-trilho::-webkit-scrollbar {
  display: none;
}

.insta-trilho:focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: 3px;
}

@container (max-width: 1100px) {
  .insta-trilho { grid-auto-columns: calc(100% / 5); }
}

@container (max-width: 820px) {
  .insta-trilho { grid-auto-columns: calc(100% / 4); }
}

@container (max-width: 600px) {
  .insta-trilho { grid-auto-columns: calc(100% / 3); }
}

@container (max-width: 420px) {
  .insta-trilho { grid-auto-columns: calc(100% / 2); }
}

.insta-post {
  scroll-snap-align: start;
}

.insta-post a {
  position: relative;
  display: block;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: #1a1a1a;
}

.insta-post img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}

.insta-post a:hover img {
  transform: scale(1.04);
}

.insta-post a:focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: -2px;
}

/* Post cuja capa veio toda preta da API: a legenda ocupa o quadro, sobre um
   degradê discreto com o amarelo da marca, para não parecer imagem quebrada. */
.insta-post-sem-capa {
  display: flex !important;
  align-items: flex-end;
  padding: 16px 14px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 218, 0, 0.16), transparent 60%),
    linear-gradient(180deg, #1c1c1c, #0f0f0f) !important;
  color: #fff;
  text-decoration: none;
}

.insta-post-legenda {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.85rem;
  line-height: 1.45;
}

.insta-post-sem-capa:hover .insta-post-legenda {
  color: var(--amarelo);
}

/* Selo de Reels / carrossel no canto, como no Instagram. A sombra é o que o
   mantém legível sobre foto clara. */
.insta-post-tipo {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.insta-post-tipo svg {
  width: 100%;
  height: 100%;
}

.insta-seta {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.15s, color 0.15s;
}

.insta-seta svg {
  width: 22px;
  height: 22px;
}

.insta-seta:hover,
.insta-seta:focus-visible {
  background: var(--amarelo);
  color: #000;
}

.insta-seta-ant { left: 10px; }
.insta-seta-prox { right: 10px; }

/* `hidden` perde para qualquer `display` declarado no seletor da classe —
   sem estas duas linhas as setas e as bolinhas apareceriam sempre, inclusive
   a seta "anterior" na primeira página. */
.insta-seta[hidden],
.insta-pontos[hidden] {
  display: none;
}

.insta-pontos {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 10px;
}

/* O botão tem 20px (área de toque); a bolinha desenhada é o ::after. */
.insta-ponto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.insta-ponto::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #4a4a4a;
  transition: width 0.15s, background 0.15s;
}

.insta-ponto[aria-current="true"]::after {
  width: 18px;
  background: var(--amarelo);
}

@media (prefers-reduced-motion: reduce) {
  .insta-post img,
  .insta-seta,
  .insta-ponto::after {
    transition: none;
  }
  .insta-post a:hover img {
    transform: none;
  }
}

@media (max-width: 560px) {
  .insta-feed {
    padding: 16px 14px 12px;
  }
  .insta-feed-avatar {
    width: 48px;
    height: 48px;
  }
  .insta-feed-nome {
    font-size: 1rem;
  }
  .insta-seta {
    width: 34px;
    height: 34px;
  }
}

/* ---------- Suporte no WhatsApp (barra lateral) ----------
   Item da barra logo acima do "Sair" (era um botão flutuante até
   2026-09-28). Mesmo desenho de .nav-item, com o ícone em amarelo para
   continuar fácil de achar — é o único item que tira a pessoa do portal. */

.nav-suporte {
  margin-bottom: 8px;
}

.nav-suporte .nav-icon {
  color: var(--amarelo);
}

/* A barra lateral NÃO sobe para o topo em tela estreita — ela continua na
   lateral em todo tamanho (decisão da Nayelle, 2026-09-28). No celular ela
   vira trilho de ícones por cima do conteúdo: ver § "Barra lateral
   recolhida", no fim do arquivo. */
@media (max-width: 760px) {
  .content {
    padding: 24px 18px;
  }

  /* Título de página no celular: "TREINAMENTO" em Unbounded no tamanho
     padrão de h1 é mais largo que a coluna ao lado do trilho de ícones. */
  .content-header h1 {
    font-size: 1.45rem;
    overflow-wrap: anywhere;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Área de usuários (Administrador) ---------- */

.status-ativo {
  color: #1a7f37;
  font-weight: 600;
}

.status-inativo {
  color: #8a8a8a;
  font-weight: 600;
}

.status-pendente {
  color: #9a6700;
  font-size: 0.85em;
}

.form-usuario {
  display: grid;
  gap: 14px;
  max-width: 520px;
}

.form-usuario label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

.form-usuario input,
.form-usuario select {
  padding: 10px;
  font: inherit;
}

/* O <select> não herda o estilo do <input> global, então ficava branco no meio
   de um portal escuro — valia para o select de categoria da tela de Usuários e
   para os de agendar avaliação. */
.form-usuario select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #333;
  background: #0d0d0d;
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: 1rem;
}

.form-usuario select:focus {
  outline: none;
  border-color: var(--amarelo);
}

/* Moldura tracejada de propósito: a senha temporária aparece uma única vez,
   então precisa saltar aos olhos na tela. */
.senha-temporaria {
  border: 2px dashed #9a6700;
  background: rgba(255, 218, 0, 0.05);
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.senha-temporaria code {
  font-size: 1.4em;
  letter-spacing: 0.05em;
}

.botao-perigo {
  background: #b42318;
  color: #fff;
}

/* ---------- Módulo de avaliação ---------- */

/* Etiquetas de situação. A cor nunca carrega sozinha o significado: cada
   etiqueta traz o texto (e um símbolo) junto — é o que faz a tela continuar
   legível para quem não distingue verde de vermelho, e impressa em preto e
   branco. */
.av-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 99px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.av-tag-ok { color: #0ca30c; border-color: rgba(12, 163, 12, 0.45); background: rgba(12, 163, 12, 0.1); }
.av-tag-ruim { color: #e66767; border-color: rgba(230, 103, 103, 0.45); background: rgba(230, 103, 103, 0.1); }
.av-tag-aberta { color: var(--amarelo); border-color: rgba(255, 218, 0, 0.4); background: rgba(255, 218, 0, 0.08); }
.av-tag-neutra { color: var(--grafite); border-color: #2c2c2a; background: rgba(147, 147, 147, 0.08); }

/* ----- Lista "Minhas avaliações" ----- */

.av-lista { display: grid; gap: 10px; }

.av-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.av-card:hover { border-color: var(--amarelo); transform: translateY(-1px); }
.av-card-inerte { opacity: 0.65; }
.av-card-inerte:hover { border-color: var(--borda); transform: none; }

.av-card-cta {
  margin-left: auto;
  flex: none;
  background: var(--amarelo);
  color: var(--preto);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 99px;
}
.av-card-nota {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
}

/* ----- Prova ----- */

.av-cronometro {
  flex: none;
  text-align: right;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 8px 16px;
  /* Fica preso no topo enquanto a pessoa rola a prova: um cronômetro que some
     da tela é um cronômetro que a pessoa esquece. */
  position: sticky;
  top: 12px;
  z-index: 5;
}
.av-cronometro-rotulo {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: 2px;
}
.av-cronometro-valor {
  display: block;
  font-family: "Unbounded", sans-serif;
  font-size: 22px;
  font-weight: 700;
  /* Dígitos de largura fixa: sem isso o cronômetro "pula" a cada segundo,
     porque o 1 é mais estreito que os demais números. */
  font-variant-numeric: tabular-nums;
}
.av-cronometro-urgente { border-color: #e66767; }
.av-cronometro-urgente .av-cronometro-valor { color: #e66767; }

.av-form { display: grid; gap: 16px; max-width: 900px; }

.av-questao {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0;
}
.av-questao legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}
.av-questao-numero {
  font-family: "Unbounded", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--amarelo);
}
.av-questao-nivel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grafite);
}

.av-enunciado { margin: 6px 0 14px; line-height: 1.55; }

.av-opcoes { display: grid; gap: 8px; }

.av-opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.av-opcao:hover { border-color: var(--grafite); }
.av-opcao:has(input:checked) {
  border-color: var(--amarelo);
  background: rgba(255, 218, 0, 0.07);
}
/* O portal tem um "input { width: 100% }" global, pensado nos campos de
   formulário. Num radio dentro de um flex isso vira um controle esticado que
   empurra letra e texto para fora do cartão — daí o width/flex explícitos
   aqui. Mesmo motivo no .av-check abaixo. */
.av-opcao input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  margin: 3px 0 0;
  accent-color: var(--amarelo);
}
.av-opcao-texto { flex: 1 1 auto; }

.av-opcao-letra {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--grafite);
}
.av-opcao-texto { line-height: 1.5; }

.av-form-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.av-aviso { color: var(--grafite); font-size: 13px; margin: 0; }
.av-aviso-ok { color: #0ca30c; }

/* ----- Resultado / gabarito ----- */

.av-resultado-topo { margin-bottom: 24px; }

.av-nota {
  display: inline-block;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-left-width: 4px;
  border-radius: 14px;
  padding: 18px 28px;
}
.av-nota-ok { border-left-color: #0ca30c; }
.av-nota-ruim { border-left-color: #e66767; }
.av-nota-valor {
  font-family: "Unbounded", sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  margin: 0 0 6px;
}
.av-nota-detalhe { margin: 0; color: var(--grafite); font-size: 13px; }
.av-nota-situacao { margin: 6px 0 0; font-weight: 600; font-size: 13px; }

.av-revisao {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-left-width: 4px;
  border-left-color: var(--borda);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.av-revisao-ok { border-left-color: #0ca30c; }
.av-revisao-erro { border-left-color: #e66767; }
.av-revisao header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.av-rev-opcoes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.av-rev-opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  line-height: 1.5;
}
.av-rev-correta { border-color: rgba(12, 163, 12, 0.5); background: rgba(12, 163, 12, 0.08); }
.av-rev-errada { border-color: rgba(230, 103, 103, 0.5); background: rgba(230, 103, 103, 0.08); }
.av-rev-marca {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--grafite);
  white-space: nowrap;
}
.av-rev-correta .av-rev-marca { color: #0ca30c; }
.av-rev-errada .av-rev-marca { color: #e66767; }
.av-rev-vazia { color: #e66767; font-size: 13px; margin: 0 0 10px; }

.av-justificativa {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #d6d6d6;
  border-left: 2px solid var(--amarelo);
  padding-left: 12px;
}

/* ----- Agendamento ----- */

.av-form-agendar { max-width: 620px; margin-bottom: 36px; }

.av-fieldset {
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0;
}
.av-fieldset legend { padding: 0 8px; font-size: 13px; font-weight: 600; }

/* Precisa da especificidade extra: ".form-usuario label" (grid) vence um
   ".av-check" sozinho e empilharia a caixinha acima do texto. */
.form-usuario .av-check,
.av-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-weight: 400;
}
.av-check input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 3px 0 0;
  accent-color: var(--amarelo);
}
.av-check > span { flex: 1 1 auto; }
.av-check small { display: block; color: var(--grafite); font-size: 11px; margin-top: 2px; }

/* As duas acoes de uma prova ("Ver resultado" e Excluir/Cancelar) numa
   coluna so. Empilhadas, nao lado a lado: a coluna e estreita e "Ver
   resultado" ao lado de "Excluir" convida ao clique errado no destrutivo. */
.av-acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.av-acoes form { margin: 0; }

.av-link-perigo {
  background: none;
  border: none;
  color: #e66767;
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-decoration: underline;
}

/* ----- Dashboard ----- */

/* Uma linha de filtros só, acima de tudo que ela recorta: os tiles, os
   gráficos e a tabela falam sempre do mesmo recorte. Filtro dentro do cartão
   de um gráfico é como se acaba comparando dois recortes diferentes lado a
   lado sem perceber. */
/* A barra de filtros gruda no topo ao rolar: ela define o recorte de TUDO que
   está abaixo, e numa página longa trocar o filtro exigia voltar ao começo
   para lembrar qual recorte estava aberto. */
.av-filtros {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.av-filtros label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grafite);
}
/* Select e campo de mês compartilham a MESMA regra, e não duas parecidas.
   Quando o campo de mês tinha regra própria, ele nasceu com outro fundo,
   outro raio de canto e outro padding — e dois controles lado a lado na
   mesma barra saíam desalinhados, com alturas diferentes. Controle novo
   nesta barra entra nesta lista. */
.av-filtros select,
.av-filtros input[type="month"],
.av-filtros input[type="date"] {
  /* O `input { margin-bottom: 18px }` lá de cima (do formulário de login) é
     um seletor de elemento NU e alcança todo input do portal. Dentro da barra
     de filtros ele virava uma faixa vazia embaixo do campo — visível como um
     vão dentro do box, sem nada nele. O select vizinho nunca teve o problema
     porque não é um input, e era isso que deixava os dois desalinhados. */
  margin: 0;
  background: var(--fundo);
  color: #fff;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  min-width: 190px;
  /* Sem isto o seletor nativo de data abre em tema claro sobre o painel
     escuro, e o campo fica com texto preto em fundo preto. */
  color-scheme: dark;
}
.av-filtros select:focus,
.av-filtros input[type="month"]:focus,
.av-filtros input[type="date"]:focus {
  outline: none;
  border-color: var(--amarelo);
}

/* O campo de mês inteiro abre o calendário (ver o script em
   disciplinar-web.js), então o cursor precisa dizer isso — sem o ponteiro, a
   área clicável parece ser só o ícone à direita. */
.av-filtros input[type="month"] { cursor: pointer; }
.av-filtros input[type="month"]::-webkit-calendar-picker-indicator { cursor: pointer; }

.av-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.av-tile {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 16px 18px;
}
.av-tile-rotulo {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grafite);
}
/* Número grande em figuras proporcionais (sem tabular-nums): em corpo grande,
   dígitos de largura fixa deixam o número visualmente frouxo. O tabular fica
   só onde números se alinham em coluna — tabelas e o cronômetro. */
.av-tile-valor {
  margin: 0;
  font-family: "Unbounded", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
}
.av-tile-apoio { margin: 4px 0 0; font-size: 11px; color: var(--grafite); }

/* Barras horizontais. A escala é fixa de 0 a 100 porque o dado é sempre
   percentual de acerto — escala automática faria 68% e 71% parecerem
   desempenhos muito diferentes. O valor vai escrito ao lado de cada barra,
   então o gráfico nunca é a única forma de ler o número. */
.av-barras {
  position: relative;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 26px 20px 18px;
  display: grid;
  gap: 10px;
}

.av-barra-linha {
  display: grid;
  grid-template-columns: minmax(120px, 210px) 1fr 54px;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.av-barra-rotulo {
  font-size: 13px;
  color: #d6d6d6;
  overflow-wrap: anywhere;
}
.av-barra-trilho {
  height: 14px;
  background: #1d1d1d;
  border-radius: 99px;
  overflow: hidden;
}
.av-barra-preenchida {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  border-radius: 99px;
  min-width: 3px;
  animation: av-barra-crescer 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  /* Uma depois da outra, de cima para baixo: o gráfico se monta na frente de
     quem abriu a tela, em vez de já estar lá. Teto no atraso para uma lista
     longa não virar espera. */
  animation-delay: calc(min(var(--i, 0) * 60ms, 480ms));
}

@keyframes av-barra-crescer {
  from { width: 0; }
  to { width: var(--pct, 0%); }
}
.av-barra-valor {
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Linha de referência da nota de corte: fio sólido (não tracejado — tracejado
   lê como "projeção" ou "limite estimado", e isto é um limite real). Fica
   sobre a coluna das barras, que começa depois do rótulo (210px + 14px de
   gap) e termina antes da coluna de valor (54px + 14px). */
.av-barra-corte {
  position: absolute;
  top: 26px;
  bottom: 18px;
  left: 20px;
  right: 20px;
  pointer-events: none;
}
.av-barra-corte::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(224px + (100% - 224px - 68px) * var(--corte));
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.av-barra-corte span {
  position: absolute;
  top: -16px;
  left: calc(224px + (100% - 224px - 68px) * var(--corte));
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--grafite);
  white-space: nowrap;
}

.av-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 720px) {
  .av-barra-linha { grid-template-columns: minmax(90px, 130px) 1fr 44px; gap: 10px; }
  /* Abaixo desta largura a posição exata do fio deixa de bater com a coluna
     estreita das barras, e um fio "quase" no lugar certo engana mais do que
     ajuda — some, e o valor escrito ao lado de cada barra continua dando a
     leitura. */
  .av-barra-corte { display: none; }
  .av-card-cta, .av-card-nota { margin-left: 0; }
  .av-card { flex-wrap: wrap; }
}

/* ---------- Avaliação: subgrupo aninhado na barra lateral ---------- */

/* "Avaliações" é um segundo nível dentro de "Treinamentos". O fio à esquerda do
   sublist é o que deixa claro que os itens de dentro pertencem a ele, e não ao
   grupo pai.
   O recuo não vem mais de um padding grande: o ícone ocupa a coluna da
   esquerda, como nos itens de primeiro nível, e o texto cai a 42px — a mesma
   linha dos sublinks logo abaixo. */
.nav-group-aninhado > .nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px 8px 12px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: "Sora", sans-serif;
  font-weight: 400;
  /* Mesmo tamanho de "Treinamentos" (.nav-item / .nav-group-toggle): é um
     módulo, não um item de dentro de um. */
  font-size: 0.92rem;
  color: inherit;
}

/* O ícone acompanha o texto no hover e quando o subgrupo está aberto — sem
   isso ele ficaria cinza ao lado de um rótulo branco. */
.nav-group-aninhado > .nav-group-toggle:hover .nav-icon,
.nav-group-aninhado.open > .nav-group-toggle .nav-icon {
  color: #fff;
}

.nav-group-aninhado > .nav-sublist {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--borda);
}

/* ---------- Painel gaming ---------- */

.av-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: center;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 218, 0, 0.12), transparent 60%),
    var(--painel);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 20px;
}

.av-hero-texto h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.av-hero-sub {
  margin: 0 0 14px;
  color: var(--grafite);
  font-size: 13px;
}

/* Anel de progresso: a média em % desenhada como arco. O número no centro é
   que carrega o dado — o anel é reforço visual, não a única leitura. */
/* `container-type` faz do anel a referência de `cqi` para o número do centro:
   o corpo do texto acompanha o diâmetro sem depender de nada vindo do HTML. */
.av-anel { position: relative; width: 132px; height: 132px; flex: none; container-type: inline-size; }
.av-anel svg { transform: rotate(-90deg); display: block; }
/* O trilho é um passo claro do MESMO matiz do preenchimento (amarelo a 13%),
   não um cinza neutro: num medidor é isso que faz o estado ser legível ao
   longo de todo o arco, e não só onde a cor termina. */
.av-anel-trilho { fill: none; stroke: rgba(255, 218, 0, 0.13); stroke-width: 11; }
.av-anel-valor {
  fill: none;
  stroke: var(--amarelo);
  stroke-width: 11;
  stroke-linecap: round;
  /* Brilho do arco: a única peça puramente decorativa do medidor. Fica no
     mark, nunca no texto — o número no centro precisa de contraste limpo. */
  filter: drop-shadow(0 0 4px rgba(255, 218, 0, 0.28));
  animation: av-anel-preencher 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* O anel "se desenha" ao abrir a tela. --circ e --alvo vêm inline do
   anelProgresso(); sem animação (reduced-motion, impressão) o atributo
   stroke-dashoffset do próprio SVG já deixa o arco na posição certa. */
@keyframes av-anel-preencher {
  from { stroke-dashoffset: var(--circ); }
  to { stroke-dashoffset: var(--alvo); }
}
.av-anel-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
/* O corpo do número é 16% do diâmetro do anel (21px no de 132px, 17px no de
   104px da home). Fixo em 30px, "75%"/"100%" ficava mais largo que o furo do
   anel e passava por cima do traço — a Unbounded em 900 é muito larga, quase
   1em por caractere. A primeira linha é o recuo para navegador sem `cqi`. */
.av-anel-num {
  font-family: "Unbounded", sans-serif;
  font-size: calc(var(--anel, 104px) * 0.16);
  font-size: 16cqi;
  font-weight: 900;
  line-height: 1;
}
.av-anel-rot {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-top: 4px;
}

/* Patente: faixa de desempenho. Aparece sempre ao lado da média em %, nunca
   no lugar dela — "Prata" sem o número não diz quanto a pessoa acertou. */
.av-patente {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 218, 0, 0.1);
  border: 1px solid rgba(255, 218, 0, 0.4);
  color: var(--amarelo);
  border-radius: 99px;
  padding: 5px 14px;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
}
.av-patente-simbolo { font-size: 15px; line-height: 1; }

/* Barra de progresso até a próxima faixa. */
.av-xp { max-width: 420px; }
.av-xp-trilho {
  /* `display: block` nao e detalhe: o trilho e um <span>, e altura e fundo de
     elemento inline sao simplesmente ignorados — a barra existia no HTML e nao
     desenhava nada na tela. */
  display: block;
  height: 9px;
  background: #1d1d1d;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 6px;
}
.av-xp-preenchida {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  /* Leve lustro no preenchimento — estático, não uma animação em laço: brilho
     que pulsa para sempre numa página que fica aberta o dia todo é ruído. */
  background: linear-gradient(90deg, #d8b800, var(--amarelo));
  border-radius: 99px;
  animation: av-xp-crescer 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes av-xp-crescer {
  from { width: 0; }
  to { width: var(--pct, 0%); }
}
.av-xp-texto { margin: 0; font-size: 12px; color: var(--grafite); }

/* ----- Resumo crítico ----- */

.av-critico {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.av-critico-col {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-left-width: 4px;
  border-radius: 14px;
  padding: 18px 20px;
}
.av-critico-fortes { border-left-color: #0ca30c; }
.av-critico-fracos { border-left-color: #fab219; }

.av-critico-col h3 {
  margin: 0 0 4px;
  font-family: "Unbounded", sans-serif;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.av-critico-fortes h3 { color: #0ca30c; }
.av-critico-fracos h3 { color: #fab219; }

.av-critico-intro { margin: 0 0 12px; font-size: 12px; color: var(--grafite); }

.av-critico-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.av-critico-item {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 10px 12px;
}
.av-critico-item-critico { border-color: rgba(230, 103, 103, 0.45); }

.av-critico-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
}
.av-critico-aula { font-weight: 700; font-size: 13px; }
.av-critico-pct {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.av-critico-origem { margin: 0 0 6px; font-size: 11px; color: var(--grafite); }
/* A instrução é o ponto do box: sem ela, "Aula 3: 40%" não diz o que fazer. */
.av-critico-acao { margin: 0; font-size: 12px; line-height: 1.5; color: #d6d6d6; }
.av-critico-exemplo {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--grafite);
  border-left: 2px solid var(--borda);
  padding-left: 9px;
}

.av-critico-vazio { color: var(--grafite); font-size: 12.5px; margin: 0; line-height: 1.5; }

/* ----- Conquistas ----- */

.av-conquistas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.av-conquista {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
/* Bloqueada não é só mais apagada: leva o cadeado e o texto "bloqueada", para
   o estado não depender de perceber diferença de opacidade. */
.av-conquista-bloqueada { opacity: 0.45; }

.av-conquista-icone {
  font-size: 24px;
  line-height: 1;
  display: block;
  margin-bottom: 7px;
  color: var(--amarelo);
}
.av-conquista-bloqueada .av-conquista-icone { color: var(--grafite); }

.av-conquista-label { margin: 0 0 3px; font-weight: 700; font-size: 12.5px; }
.av-conquista-desc { margin: 0; font-size: 11px; color: var(--grafite); line-height: 1.4; }
.av-conquista-estado {
  display: block;
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grafite);
}
.av-conquista:not(.av-conquista-bloqueada) .av-conquista-estado { color: #0ca30c; }

/* ----- Ladrilho de número: estado de foco/hover -----
   O ladrilho não é clicável, mas o painel inteiro responde ao mouse: a borda
   acende no hover para o cartão não parecer impresso na página. */
.av-tile {
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.av-tile:hover {
  border-color: rgba(255, 218, 0, 0.45);
  transform: translateY(-1px);
}

/* ===== Box compacto do dashboard (página inicial, meia coluna) =====
   Mesmo dashboard dos painéis completos, em meia coluna: medidor, faixa, barra
   de XP, três indicadores e um gráfico, atrás de duas abas. Montado por
   `painelResultados()` em avaliacoes-ui.js. */

/* Os boxes da coluna da direita ocupam, juntos, a coluna inteira: a mesma
   altura que "O que há de novo?" e Redes Sociais têm somados, do lado de cá.

   Até 2026-09-27 havia um box só nessa coluna e ele tinha `height: 100%`.
   Com o box de Conduta embaixo, 100% faria o de avaliações ocupar a coluna
   toda e empurrar o de Conduta para fora da linha. Então o de avaliações
   passou a CRESCER para preencher a sobra (`flex: 1 1 auto` — `.split-col` é
   uma coluna flex) e o de Conduta fica com a altura do próprio conteúdo. Com
   um box só, `flex: 1` faz exatamente o que o `height: 100%` fazia.

   A sobra de altura vai para o gráfico (é o elemento que ganha alguma coisa em
   ser maior) e para empurrar os botões para o rodapé do cartão — nunca para um
   vão no meio do conteúdo. Como a altura vem da coluna vizinha, e não do
   conteúdo, trocar de aba não muda a altura: a página não dá pulo. */
.painel-avaliacoes {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.painel-avaliacoes .av-abas {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Estas duas regras levam `.painel-avaliacoes` na frente por necessidade, não
   por estilo: a regra que liga a aba (`...:checked ~ .av-aba-painel-a`) vem
   depois no arquivo e declara `display: block`. Sem um seletor mais
   específico, ela ganha por ordem e o painel volta a ser bloco — foi
   exatamente o que segurou o gráfico no tamanho mínimo. */
.painel-avaliacoes .av-aba-radio:nth-of-type(1):checked ~ .av-aba-painel:nth-of-type(1),
.painel-avaliacoes .av-aba-radio:nth-of-type(2):checked ~ .av-aba-painel:nth-of-type(2) {
  flex: 1 1 auto;
}

/* Primeira aba: o gráfico é quem estica. Os indicadores e o anel têm tamanho
   próprio; esticá-los só faria número flutuando em cartão vazio. */
.painel-avaliacoes .av-aba-radio:nth-of-type(1):checked ~ .av-aba-painel:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  /* A sobra que o gráfico não usar (ele tem teto) vira ar ENTRE anel,
     indicadores e gráfico, em vez de um vão morto no pé do cartão. */
  justify-content: space-between;
}
/* Segunda aba: o conteúdo tem tamanho próprio e não ganha nada em ser
   esticado — um cartão de conquista com 150px de altura não diz mais do que um
   de 74px. O que muda é ONDE fica a sobra, e isso depende do conteúdo:
   a grade de conquistas fica centrada (margem automática em cima e embaixo),
   e o ranking fica no topo, porque lista que começa no meio do cartão parece
   desalinhada com o título. */
.painel-avaliacoes .av-aba-radio:nth-of-type(2):checked ~ .av-aba-painel:nth-of-type(2) {
  display: flex;
  flex-direction: column;
}
.av-aba-painel-b > .av-conquistas {
  margin-top: auto;
  margin-bottom: auto;
}

.av-aba-painel-a .av-spark {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* Teto do bloco inteiro (área + legenda). Quando o crescimento de um item
     flex bate no max-height, a sobra volta para o contêiner distribuir — é o
     que faz o `space-between` acima ter o que repartir. */
  max-height: 208px;
}
.av-aba-painel-a .av-spark-area {
  flex: 1 1 auto;
  min-height: 96px;
  /* Teto: quatro colunas finas esticadas por 300px de altura viram um gráfico
     esquisito. O que sobrar depois do teto desce para o fim do cartão. */
  max-height: 170px;
}

/* Sem `margin-top: auto` aqui, de propósito: margem automática engole TODA a
   sobra de altura antes de o flex-grow repartir qualquer coisa, e o gráfico
   ficava do tamanho mínimo com um vão enorme acima dos botões. Quem empurra os
   botões para o rodapé é a área das abas crescendo. */
.painel-avaliacoes .painel-acoes {
  padding-top: 16px;
}

.av-jogo {
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 218, 0, 0.1), transparent 55%),
    var(--painel);
}

/* Anel + faixa lado a lado, empilhando sozinhos quando a faixa não couber.
   É flex-wrap, e não media query: o que aperta este bloco é a largura da
   COLUNA, e a largura da janela não diz qual é a da coluna (a barra lateral
   fica fora da conta). */
.av-jogo-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: center;
  margin-bottom: 14px;
}
.av-jogo-faixa { flex: 1 1 165px; }

/* Sem override de corpo aqui: o .av-anel-num já escala com o tamanho do anel. */
.av-jogo .av-patente { margin-bottom: 8px; font-size: 12px; padding: 4px 11px; }
.av-xp-compacta { max-width: 100%; }
.av-xp-compacta .av-xp-texto { font-size: 11px; line-height: 1.4; }

/* ----- Abas: radio + CSS, sem JavaScript -----
   A loja roda sem internet e o portal evita script onde dá; um clique que
   depende de JS é um clique que pode não acontecer. Os dois radios ficam antes
   dos painéis no DOM porque o seletor de irmão (~) só olha para frente. */
.av-abas { position: relative; }

.av-aba-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.av-abas-botoes {
  display: flex;
  gap: 4px;
  background: #0f0f0f;
  border: 1px solid var(--borda);
  border-radius: 99px;
  padding: 3px;
  margin-bottom: 14px;
}

.av-aba-botao {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grafite);
  cursor: pointer;
  user-select: none;
  transition: background 0.16s ease, color 0.16s ease;
}
.av-aba-botao:hover { color: #fff; }

.av-aba-pilula {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 218, 0, 0.16);
  color: var(--amarelo);
  border-radius: 99px;
  padding: 1px 6px;
}

/* O casamento radio ↔ botão ↔ painel é por posição. Vai até quatro abas; se
   um dia precisar de cinco, é acrescentar o par de linhas — gerar isso em
   JavaScript custaria o funcionamento sem script, que é o ponto. */
.av-aba-radio:nth-of-type(1):checked ~ .av-abas-botoes .av-aba-botao:nth-child(1),
.av-aba-radio:nth-of-type(2):checked ~ .av-abas-botoes .av-aba-botao:nth-child(2),
.av-aba-radio:nth-of-type(3):checked ~ .av-abas-botoes .av-aba-botao:nth-child(3),
.av-aba-radio:nth-of-type(4):checked ~ .av-abas-botoes .av-aba-botao:nth-child(4) {
  background: var(--amarelo);
  color: #000;
}
.av-aba-radio:nth-of-type(1):checked ~ .av-abas-botoes .av-aba-botao:nth-child(1) .av-aba-pilula,
.av-aba-radio:nth-of-type(2):checked ~ .av-abas-botoes .av-aba-botao:nth-child(2) .av-aba-pilula {
  background: rgba(0, 0, 0, 0.18);
  color: #000;
}

/* Foco de teclado: as setas trocam de aba, e isso precisa ser visível. */
.av-aba-radio:nth-of-type(1):focus-visible ~ .av-abas-botoes .av-aba-botao:nth-child(1),
.av-aba-radio:nth-of-type(2):focus-visible ~ .av-abas-botoes .av-aba-botao:nth-child(2),
.av-aba-radio:nth-of-type(3):focus-visible ~ .av-abas-botoes .av-aba-botao:nth-child(3),
.av-aba-radio:nth-of-type(4):focus-visible ~ .av-abas-botoes .av-aba-botao:nth-child(4) {
  outline: 2px solid var(--amarelo);
  outline-offset: 2px;
}

/* `div:nth-of-type()` conta só os painéis porque a barra de botões é <nav>.
   Trocar aquele <nav> por <div> desalinha painel e botão sem gerar erro. */
.av-aba-painel { display: none; }
.av-aba-radio:nth-of-type(1):checked ~ .av-aba-painel:nth-of-type(1),
.av-aba-radio:nth-of-type(2):checked ~ .av-aba-painel:nth-of-type(2),
.av-aba-radio:nth-of-type(3):checked ~ .av-aba-painel:nth-of-type(3),
.av-aba-radio:nth-of-type(4):checked ~ .av-aba-painel:nth-of-type(4) {
  display: block;
  animation: av-aba-entrar 0.26s ease both;
}

@keyframes av-aba-entrar {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ----- Indicadores em versão mini (cabem três em meia coluna) ----- */
.av-tiles-mini {
  /* auto-fit pelo mesmo motivo: cabem três enquanto a coluna der 92px para
     cada um, e viram dois sem ninguém precisar escolher um breakpoint. */
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.av-tiles-mini .av-tile { padding: 11px 12px; }
.av-tiles-mini .av-tile-rotulo { font-size: 9.5px; letter-spacing: 0.06em; }
.av-tiles-mini .av-tile-valor { font-size: 21px; }
.av-tiles-mini .av-tile-apoio { font-size: 10px; }

/* ----- Sparkline das últimas notas -----
   Colunas finas, escala fixa de 0 a 100, topo arredondado e base quadrada na
   linha de base. Só a coluna mais recente leva valor escrito: rótulo em toda
   coluna deixa de ser rótulo e vira ruído. O resto está no tooltip e, escrito,
   na lista do painel completo — nenhum valor existe só no hover. */
.av-spark {
  margin-top: 2px;
}

.av-spark-area {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* A coluna mais recente leva o valor escrito ACIMA dela; sem esta faixa de
     respiro no topo, uma nota alta empurra o rotulo para fora do grafico e ele
     encosta nos indicadores de cima. O box-sizing mantem a area de dados em
     78px, que e a altura a que as colunas se referem. */
  box-sizing: border-box;
  padding-top: 18px;
  height: 96px;
  /* O ar que sobra depois do limite de 24px por coluna vira espaco ENTRE as
     colunas, em vez de um vazio grudado na direita. */
  justify-content: space-evenly;
}

.av-spark-col {
  position: relative;
  flex: 1 1 0;
  max-width: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  cursor: default;
}

.av-spark-barra {
  display: block;
  width: 100%;
  height: var(--alt, 0%);
  /* Cinza de mark (não de texto): é contexto para a coluna atual. */
  background: #575757;
  border-radius: 4px 4px 0 0;
  transition: filter 0.16s ease;
  animation: av-spark-subir 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  /* Escalonado: as colunas sobem da mais antiga para a mais nova. */
  animation-delay: calc(var(--i, 0) * 70ms);
}
.av-spark-col-atual .av-spark-barra { background: var(--amarelo); }
.av-spark-col:hover .av-spark-barra { filter: brightness(1.35); }

@keyframes av-spark-subir {
  from { height: 0; }
  to { height: var(--alt, 0%); }
}

.av-spark-valor {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
}

/* Fio da nota de corte: hairline sólido (tracejado leria como "projeção"),
   medido a partir da linha de base. */
.av-spark-corte {
  position: absolute;
  left: 0;
  right: 0;
  /* 70% da area de dados (78px), nao da caixa com o respiro do rotulo. */
  bottom: calc(var(--corte, 70%) * 0.8125);
  height: 1px;
  background: #3d3d3d;
}

/* A legenda explica o gráfico logo acima dela, e precisa de ar para não ser
   lida como mais uma linha do gráfico. Com 10px ela encostava na última
   barra; o fio fino no topo marca onde o dado termina e o rodapé começa.
 
   O seletor leva `p.` junto porque `.info-panel p` (0-1-1) vence
   `.av-spark-legenda` (0-1-0) e zerava a margem — dentro de um painel a
   legenda nascia colada no gráfico, e sem erro nenhum. */
p.av-spark-legenda,
.av-spark-legenda {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10.5px;
  color: var(--grafite);
  line-height: 1.5;
}

/* ----- Ranking compacto (aba do Administrador) ----- */
.av-rank-bloco { margin-top: 4px; }
.av-rank { display: grid; gap: 9px; }

.av-rank-linha {
  display: grid;
  grid-template-columns: minmax(70px, 96px) 1fr 42px;
  align-items: center;
  gap: 10px;
}
.av-rank-rotulo {
  font-size: 11.5px;
  color: #d6d6d6;
  overflow-wrap: anywhere;
}
.av-rank-trilho {
  height: 10px;
  background: rgba(255, 218, 0, 0.13);
  border-radius: 99px;
  overflow: hidden;
}
.av-rank-preenchida {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  background: var(--amarelo);
  border-radius: 99px;
  animation: av-rank-crescer 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes av-rank-crescer {
  from { width: 0; }
  to { width: var(--pct, 0%); }
}
.av-rank-valor {
  font-size: 11.5px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ----- Conquistas em versão compacta (aba do funcionário) ----- */
.av-conquistas-compacta {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.av-conquistas-compacta .av-conquista {
  padding: 10px 8px;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.av-conquistas-compacta .av-conquista:not(.av-conquista-bloqueada):hover {
  border-color: rgba(255, 218, 0, 0.5);
  transform: translateY(-1px);
}
.av-conquistas-compacta .av-conquista-icone { font-size: 18px; margin-bottom: 4px; }
.av-conquistas-compacta .av-conquista-label { font-size: 11.5px; }
.av-conquistas-compacta .av-conquista-estado { margin-top: 4px; font-size: 9px; }

/* Movimento é reforço, nunca informação: quem pediu menos movimento no sistema
   recebe o mesmo dashboard, já montado, sem nenhuma entrada animada. */
@media (prefers-reduced-motion: reduce) {
  .av-anel-valor,
  .av-xp-preenchida,
  .av-rank-preenchida,
  .av-barra-preenchida,
  .av-podio-pedestal,
  .av-spark-barra,
  .av-aba-radio:checked ~ .av-aba-painel {
    animation: none;
  }
  .av-tile:hover,
  .av-conquistas-compacta .av-conquista:hover {
    transform: none;
  }
}

/* ---------- Cartão de gráficos com abas (página de Resultados) ---------- */

.av-cartao-abas {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 16px 18px 18px;
}
.av-cartao-abas .av-abas-botoes { max-width: 520px; }
/* Dentro do cartão o gráfico já está emoldurado — a moldura de dentro sairia
   como caixa dentro de caixa. */
.av-cartao-abas .av-barras {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 18px 0 0;
}

/* ---------- Pódio / ranking das pessoas ---------- */

.av-podio-bloco {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 22px 20px 16px;
}

/* Três degraus. A ordem no HTML é 1º, 2º, 3º (é a ordem em que se lê e em que
   um leitor de tela anuncia); quem põe o campeão no meio é o `order` do CSS,
   que não mexe no documento. */
.av-podio {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  /* O chão. Sem ele os degraus (que não têm borda de baixo, de propósito)
     parecem cortados no meio em vez de apoiados. */
  border-bottom: 1px solid rgba(255, 218, 0, 0.35);
}

.av-podio-coroa {
  font-size: 15px;
  line-height: 1;
  color: var(--amarelo);
  margin-bottom: 2px;
}

.av-podio-lugar {
  flex: 1 1 0;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.av-podio-1 { order: 2; }
.av-podio-2 { order: 1; }
.av-podio-3 { order: 3; }

.av-podio-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #000;
  background: var(--amarelo);
  margin-bottom: 6px;
}
.av-podio-2 .av-podio-avatar,
.av-podio-3 .av-podio-avatar { margin-top: 17px; }
.av-podio-2 .av-podio-avatar { background: #c6a900; width: 38px; height: 38px; font-size: 13px; }
.av-podio-3 .av-podio-avatar { background: #8a7500; width: 38px; height: 38px; font-size: 13px; color: #fff; }

.av-podio-nome {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.av-podio-media {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
}
.av-podio-1 .av-podio-media { font-size: 28px; }
.av-podio-apoio { font-size: 10.5px; color: var(--grafite); }

/* O degrau. A altura diferente é reforço: a posição vai escrita dentro dele e
   a média aparece acima, então nada depende de comparar alturas. */
.av-podio-pedestal {
  width: 100%;
  margin-top: 8px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, rgba(255, 218, 0, 0.35), rgba(255, 218, 0, 0.08));
  border: 1px solid rgba(255, 218, 0, 0.35);
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: av-pedestal-subir 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.av-podio-1 .av-podio-pedestal {
  height: 84px;
  animation-delay: 0.1s;
  background: linear-gradient(180deg, rgba(255, 218, 0, 0.5), rgba(255, 218, 0, 0.12));
  border-color: rgba(255, 218, 0, 0.55);
}
.av-podio-2 .av-podio-pedestal {
  height: 62px;
  background: linear-gradient(180deg, rgba(255, 218, 0, 0.28), rgba(255, 218, 0, 0.07));
}
.av-podio-3 .av-podio-pedestal {
  height: 46px;
  animation-delay: 0.2s;
  background: linear-gradient(180deg, rgba(255, 218, 0, 0.18), rgba(255, 218, 0, 0.05));
}

@keyframes av-pedestal-subir {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.av-podio-pedestal { transform-origin: bottom; }

.av-podio-posicao {
  font-family: "Unbounded", sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: var(--amarelo);
}
.av-podio-2 .av-podio-posicao,
.av-podio-3 .av-podio-posicao { font-size: 16px; color: #e8cf4a; }

/* Do 4º em diante: lista, não degrau. */
.av-rank-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.av-rank-item {
  display: grid;
  grid-template-columns: 30px minmax(90px, 180px) 1fr 48px;
  align-items: center;
  gap: 10px;
}
.av-rank-pos {
  font-size: 12px;
  font-weight: 700;
  color: var(--grafite);
  font-variant-numeric: tabular-nums;
}
.av-rank-nome { font-size: 12.5px; overflow-wrap: anywhere; }

.av-podio-fora {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--grafite);
}

.av-podio-bloco .av-spark-legenda { margin-top: 10px; }

@media (max-width: 640px) {
  /* Em tela estreita o pódio vira lista: três degraus de 100px não cabem lado
     a lado sem o nome quebrar em cinco linhas. */
  .av-podio { flex-direction: column; align-items: stretch; }
  .av-podio-lugar { max-width: none; order: 0; }
  .av-podio-pedestal { display: none; }
}

/* ----- Edição de prova ----- */

.av-editar-aviso {
  background: rgba(250, 178, 25, 0.08);
  border: 1px solid rgba(250, 178, 25, 0.4);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.55;
}
.av-editar-aviso strong { color: #fab219; }

@media (max-width: 720px) {
  .av-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .av-xp { max-width: 100%; }
}

/* ---------- Quadro de tabela (padrão do portal) ----------
   Skin único de toda tabela de dados do portal, portado da Tabela de Preços
   de Serviços (wiki/Empresas/Minas Rodas - Apresentação Tabela de Preços.html)
   a pedido da Nayelle em 2026-09-25. Três peças que andam juntas:

     .quadro-head    título com ladrilho de ícone + linha de apoio
     .quadro-tabela  cartão que emoldura e recorta a tabela
     .tabela-portal  a tabela em si, com faixa amarela de cabeçalho

   Antes disso cada tabela era `<h2 class="section-title">` solto + tabela nua
   herdada de `.tabela-usuarios`, cujo fio de linha era `rgba(0,0,0,0.08)` —
   preto sobre fundo preto, ou seja, invisível. Uma tabela de 8 colunas sem
   separador é uma parede de texto: é isso que este bloco resolve, não é
   enfeite. Tabela nova no portal entra por aqui (ver CLAUDE.md § Tabelas). */

.quadro-head {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Respiro grande acima, pequeno abaixo: o título pertence à tabela que vem
     depois dele, não ao bloco que veio antes. Zerado quando o quadro já abre
     uma `.home-section`, que dá o afastamento por conta própria. */
  margin: 34px 0 16px;
}

.quadro-head:first-child {
  margin-top: 0;
}

.quadro-head .quadro-ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #1c1c1c;
  border: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quadro-head .quadro-ic svg {
  width: 22px;
  height: 22px;
  color: var(--amarelo);
}

.quadro-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  margin: 0;
}

.quadro-head p {
  margin: 3px 0 0;
  color: var(--grafite);
  font-size: 0.88rem;
}

/* `min-width: 0` no texto: sem isso o item flex se recusa a encolher abaixo do
   conteúdo e o título de 8 colunas empurra o ladrilho para fora da tela. */
.quadro-head .quadro-texto {
  min-width: 0;
}

.quadro-tabela {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 18px;
  /* Recorta os cantos da faixa amarela do cabeçalho e, ao mesmo tempo, dá o
     scroll horizontal das tabelas largas em tela estreita. */
  overflow-x: auto;
  /* Bloco de referência do texto .sr-only (rótulo "Ações" do cabeçalho, position: absolute):
     sem isto ele escapa do recorte e, numa tabela larga, alarga a página inteira no celular. */
  position: relative;
  box-shadow: 0 16px 36px -24px rgba(0, 0, 0, 0.75);
}

table.tabela-portal {
  width: 100%;
  border-collapse: collapse;
}

table.tabela-portal thead th {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--preto);
  background: var(--amarelo);
  padding: 11px 12px;
  text-align: left;
  white-space: nowrap;
}

table.tabela-portal tbody td {
  padding: 12px;
  font-size: 0.88rem;
  vertical-align: top;
  border-bottom: 1px solid var(--borda);
}

table.tabela-portal tbody tr:last-child td {
  border-bottom: none;
}

/* Primeira coluna é a chave da linha (o aro, na tabela de preços; a pessoa,
   nas provas) — é por ela que se procura, então ela ancora a varredura. */
table.tabela-portal tbody td:first-child {
  font-weight: 700;
  color: var(--amarelo);
}

table.tabela-portal tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

table.tabela-portal small {
  color: var(--grafite);
}

.quadro-vazio {
  color: var(--grafite);
  font-size: 0.88rem;
  text-align: center;
  padding: 22px 16px;
  border: 1px dashed var(--borda);
  border-radius: 18px;
}

/* Cabeçalho da coluna numérica acompanha o alinhamento das células dela — a
   regra `.av-num` sozinha não vence a especificidade do seletor do `th`. */
table.tabela-portal thead th.av-num {
  text-align: right;
}

/* Primeira coluna de texto corrido (ver blocoTabela({ chave: false })). */
table.tabela-portal.tabela-sem-chave tbody td:first-child {
  font-weight: 400;
  color: inherit;
}

/* Scrollbar do quadro: tabela larga em tela estreita rola dentro do cartão, e
   uma barra invisível transforma "há mais colunas" em "sumiu uma coluna".
   Fina, trilho transparente, thumb que acende no hover — a mesma receita das
   páginas HTML da marca (ver Identidade Visual — Minas Rodas § Padrões de UI,
   variante de tema escuro). */
.quadro-tabela::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.quadro-tabela::-webkit-scrollbar-track {
  background: transparent;
}

.quadro-tabela::-webkit-scrollbar-thumb {
  background: var(--grafite);
  border-radius: 99px;
}

.quadro-tabela::-webkit-scrollbar-thumb:hover {
  background: #c4c4c4;
}

/* ==========================================================================
   Desempenho Disciplinar
   ==========================================================================

   O módulo reusa quase tudo do resto do portal — .av-tiles, .av-barras,
   .av-abas, .av-filtros, .av-tag, o quadro de tabela. O que não existia era o
   selo do critério do mês, e é só isso que mora aqui.

   O hero repete o desenho do .av-hero de propósito (anel à esquerda, texto à
   direita), mas com regra própria: aqui o bloco da direita termina num selo,
   que é um box com fundo, não a barra de XP. Em tela estreita o anel vai para
   cima e o texto embaixo, senão o anel come metade da largura. */

.disc-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: center;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 218, 0, 0.12), transparent 60%),
    var(--painel);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 20px;
}

.disc-hero-texto h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

/* O selo do critério. A cor NUNCA carrega o significado sozinha: cada estado
   tem o símbolo (✔/✘) e a palavra escrita, e o motivo vem na linha de baixo —
   "não atingido" sem o porquê é o mesmo que nota sem gabarito. */
.disc-selo {
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}

.disc-selo-tag {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.disc-selo p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--grafite);
}

.disc-selo-ok {
  border-color: rgba(12, 163, 12, 0.45);
  background: rgba(12, 163, 12, 0.1);
}
.disc-selo-ok .disc-selo-tag { color: #0ca30c; }

.disc-selo-ruim {
  border-color: rgba(230, 103, 103, 0.45);
  background: rgba(230, 103, 103, 0.1);
}
.disc-selo-ruim .disc-selo-tag { color: #e66767; }

/* Recorte de grupo: não é "atingido" nem "não atingido", é uma contagem —
   um departamento não tem desempenho disciplinar, ele tem N pessoas com o
   seu. Por isso o estado neutro existe e é amarelo, não verde nem vermelho. */
.disc-selo-neutro {
  border-color: rgba(255, 218, 0, 0.4);
  background: rgba(255, 218, 0, 0.08);
}
.disc-selo-neutro .disc-selo-tag { color: var(--amarelo); }

@media (max-width: 720px) {
  .disc-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 20px;
  }
  .disc-selo { text-align: left; }
}

/* ==========================================================================
   Comemorações: aniversariantes do mês e tempo de casa
   ==========================================================================

   Reusa .info-panel e .painel-head (o mesmo cabeçalho com ladrilho de ícone
   do box de novidades e do painel de resultados). O que é novo aqui é a
   lista de três colunas — dia, nome, apoio — e o fundo âmbar.

   O fundo âmbar é o mesmo de .whats-new, e isso é proposital: são os dois
   boxes da página inicial que trazem notícia boa, e não dado de trabalho.
   Se um terceiro aparecer, vale extrair o modificador em vez de repetir. */

.painel-festa {
  background:
    radial-gradient(circle at 90% 0%, rgba(255, 218, 0, 0.1), transparent 55%),
    var(--painel);
}

.painel-festa-texto {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #d6d6d6;
}

.festa-lista {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

/* Grade de três colunas, não uma frase corrida: com o dia sempre na mesma
   coluna, dá para varrer a lista de cima a baixo procurando a data em vez de
   ler nome por nome. A coluna do dia usa numeral tabular pelo mesmo motivo. */
.festa-lista li {
  display: grid;
  /* `fit-content(45%)` e não `auto` no apoio: `auto` deixava "2 anos de Minas
     Rodas" ocupar a largura inteira que quisesse, e o nome ficava espremido
     numa coluna de três letras. Assim o apoio quebra linha antes do nome. */
  grid-template-columns: 52px minmax(0, 1fr) fit-content(45%);
  align-items: baseline;
  gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.festa-lista li:last-child { border-bottom: 0; }

.festa-dia {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  color: var(--amarelo);
}

.festa-nome {
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.festa-apoio {
  font-size: 11.5px;
  color: var(--grafite);
  text-align: right;
}

/* Em tela estreita o apoio (cargo, anos de casa) desce para a linha de baixo,
   alinhado com o nome — três colunas num celular espremem o nome a ponto de
   quebrar no meio. */
@media (max-width: 560px) {
  .festa-lista li {
    grid-template-columns: 52px 1fr;
  }
  .festa-apoio {
    grid-column: 2;
    text-align: left;
  }
}

/* ----- Formulário de lançamento de Conduta -------------------------------
   Os campos de quantidade e de texto mudam conforme o tipo de ocorrência
   escolhido. A regra é: sem JavaScript, TODOS aparecem.

   Por isso quem esconde é `.disc-form-dinamico`, classe que só existe depois
   que o script rodou — e não um `hidden` escrito no HTML. Sem script a
   pessoa vê campos demais, que é chato; com a lógica invertida ela veria
   campos de menos, e não conseguiria lançar nada. */
.disc-form .disc-campo {
  display: contents;
}

.disc-form-dinamico .disc-campo[hidden] {
  display: none;
}

/* O <small> das etiquetas explica a qual tipo o campo pertence e o que ele
   faz com o critério. Fica abaixo do rótulo, em cinza, nunca ao lado: ao
   lado ele compete com o rótulo pela mesma linha e os dois somem juntos. */
.disc-form label > small {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--grafite);
  margin: 2px 0 6px;
}

/* ----- Barra de filtros compacta ----------------------------------------
   A barra de filtros padrão ocupa a largura toda porque tem três ou quatro
   controles (é o caso de Resultados). Com UM controle só — o mês do
   histórico, em Lançamentos — a largura inteira vira uma faixa vazia à
   direita do campo, que parece espaço reservado para algo que não existe.

   Ela também deixa de ser grudenta: filtro que gruda no topo serve para quem
   rola um painel longo trocando o recorte; no meio de uma página de
   formulário, uma barra que segue a rolagem é um estorvo. */
.av-filtros-compacto {
  position: static;
  width: fit-content;
  max-width: 100%;
}

/* Respiro entre o botão de lançar e o histórico logo abaixo. Sem ele o
   "Lançar ocorrência" encosta no box seguinte e os dois se leem como um
   bloco só — o botão parece pertencer ao histórico, e não ao formulário. */
.disc-form {
  margin-bottom: 34px;
}

/* ----- Cartões empilhados numa página ------------------------------------
   `.info-panel` não tem margem de propósito: na home ele vive dentro de
   `.info-grid`, que já separa os cartões pelo `gap`, e uma margem ali viraria
   espaço dobrado.

   Em página de painel os cartões são irmãos no fluxo normal, e sem margem
   eles se encostam — foi o que aconteceu entre "Conduta por pessoa" e
   "Indicadores por pessoa". Esta classe é para esse caso. */
.painel-empilhado {
  margin-bottom: 22px;
}

/* ----- Filtro no cabeçalho de um painel da home --------------------------
   Os boxes de Avaliações e de Conduta levam o seletor de período à direita
   do título, e não embaixo dele: embaixo ele empurraria o conteúdo do box e
   pareceria parte do dado.

   O cabeçalho quebra linha quando a coluna estreita — o select desce para
   baixo do título em vez de espremer o nome do box. Nos outros painéis, que
   só têm ícone e título, a quebra nunca acontece. */
.painel-head {
  flex-wrap: wrap;
}

.painel-filtro {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* Seletor e "Ver" na mesma linha; o botão é compacto, do corpo do seletor. */
.painel-filtro button {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.2;
}

/* O mesmo desenho dos selects da barra de filtros das telas internas, em
   corpo menor: é o mesmo tipo de controle, e dois desenhos para a mesma coisa
   é como a pessoa desconfia que fazem coisas diferentes. */
.painel-filtro select {
  margin: 0;
  background: var(--fundo);
  color: #fff;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  color-scheme: dark;
  cursor: pointer;
}
.painel-filtro select:focus { outline: none; border-color: var(--amarelo); }

/* ----- Box de Conduta da home ------------------------------------------ */
.painel-conduta {
  margin-top: 24px;
}

.painel-conduta-corpo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
}

.painel-conduta-corpo .av-tiles-mini {
  margin-bottom: 0;
}

/* Em coluna estreita o anel vai para cima dos ladrilhos: lado a lado, os três
   ladrilhos ficariam com menos de 92px e o rótulo quebraria no meio. */
@media (max-width: 560px) {
  .painel-conduta-corpo {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .painel-conduta-corpo .av-tiles-mini { width: 100%; }
}

/* A composição da nota, logo abaixo dos números. Em corpo de nota de rodapé:
   é a explicação do anel, não um quarto indicador. */
.painel-conduta-nota {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.5;
}

/* Mês sem aniversariante: o box continua na tela e diz isso. Em cinza e sem a
   grade de três colunas — é uma frase, não uma linha da lista. */
.info-panel p.festa-vazio {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--grafite);
}

/* ----- Barra lateral recolhida ------------------------------------------
   O botão ao lado do logo reduz a barra a uma coluna de ícones (classe
   `.recolhida`, ligada pelo script do buildSidebar).

   Os rótulos somem com `font-size: 0` no item, e não com um <span> em volta
   do texto: o texto do menu é nó solto logo depois do ícone, e é assim que os
   testes conferem rótulo + ícone juntos. O ícone não é afetado porque o SVG
   tem largura em px.

   Computador e tablet: a escolha fica guardada no navegador e a barra
   recolhida devolve a largura ao conteúdo. Celular: ver o bloco seguinte. */
:is(.sidebar.recolhida, html.menu-recolhido .sidebar) {
  width: 76px;
  flex-basis: 76px;
  padding: 24px 12px;
}

:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .sidebar-brand {
  flex-direction: column;
  padding: 0 0 16px;
  gap: 14px;
}
:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .brand-logo { display: none; }
:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .brand-simbolo { display: block; }
:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .sidebar-toggle .seta { transform: scaleX(-1); }

:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .profile-summary {
  justify-content: center;
  padding: 6px 0;
}
:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .profile-summary-text { display: none; }

/* O título de seção ("Meu conteúdo", "Conta") vira um fio: continua
   separando os blocos, sem texto cortado pela metade. */
:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .nav-heading {
  font-size: 0;
  height: 1px;
  background: var(--borda);
  margin: 14px 6px;
}

:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .nav-item {
  font-size: 0;
  gap: 0;
  justify-content: center;
  padding: 11px 0;
}
:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .nav-caret,
:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .nav-sublist { display: none; }

:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .sidebar-nav {
  overflow-x: hidden;
}

:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .logout-btn {
  padding: 9px 0;
  font-size: 0.75rem;
}

/* ----- Barra lateral no celular -----------------------------------------
   Continua na lateral, mas sempre abre recolhida (o script ignora a escolha
   guardada) e, quando expandida, fica POR CIMA do conteúdo em vez de
   empurrá-lo: 260px de menu ao lado do conteúdo num celular deixariam a
   página com uns 100px de largura.

   Por isso ela sai do fluxo (`position: fixed`) e o conteúdo guarda à
   esquerda só a largura do trilho de ícones. Expandida, o resto da tela
   escurece — o `::after` cobre tudo à direita da barra, e tocar nele fecha
   o menu (o toque cai na própria barra; o script trata esse caso). */
@media (max-width: 760px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 60;
  }

  :is(.sidebar.recolhida, html.menu-recolhido .sidebar) {
    width: 64px;
    padding: 18px 8px;
  }

  html:not(.menu-recolhido) .sidebar:not(.recolhida) {
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.55);
  }

  html:not(.menu-recolhido) .sidebar:not(.recolhida)::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 260px;
    right: 0;
    background: rgba(0, 0, 0, 0.55);
  }

  .content {
    margin-left: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-toggle .seta { transition: none; }
}

/* Ladrilhos como último item de um cartão (ex: "Na Minas Rodas", no perfil):
   a margem de baixo do .av-tiles separa os ladrilhos do bloco seguinte, e
   aqui não há bloco seguinte — somada ao padding do cartão, virava um vão
   de 50px no pé dele. */
.info-panel > .av-tiles:last-child {
  margin-bottom: 0;
}

/* ---------- Código de Conduta (/disciplinar/codigo) ----------
   Versão Visual Law do PO RH14 (codigo-conduta.js). O visual serve para
   ACHAR e ENTENDER a regra: resumo de 1 minuto, sumário, "faça / não faça"
   com sinal, passos numerados, números grandes e a escala de penalidades em
   degraus. Verde e vermelho só nos sinais de ✓ / ✗ e na caixa de atenção —
   os mesmos tons do selo de critério (#0ca30c / #e66767); o texto continua
   em tinta de texto, nunca na cor do sinal. */

.cc-icone {
  display: inline-flex;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--amarelo);
}

.cc-icone svg {
  width: 100%;
  height: 100%;
}

.cc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 20px;
  padding: 24px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 218, 0, 0.13), transparent 55%),
    var(--painel);
}

.cc-hero p {
  margin: 0;
  color: #cfcfcf;
  line-height: 1.6;
}

.cc-hero .cc-hero-frase {
  margin-bottom: 10px;
  font-family: "Unbounded", sans-serif;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--amarelo);
}

.cc-ficha {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px 18px;
  border-left: 2px solid var(--amarelo);
}

.cc-ficha div {
  display: grid;
}

.cc-ficha dt {
  color: var(--grafite);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cc-ficha dd {
  margin: 0;
  font-weight: 600;
}

/* Resumo de 1 minuto: cada item é um atalho para a seção completa. */
.cc-resumo {
  margin-bottom: 20px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--amarelo);
  color: #000;
}

.cc-resumo h2 {
  margin: 0;
  font-size: 1.1rem;
  color: #000;
}

.cc-resumo .cc-resumo-apoio {
  margin: 4px 0 16px;
  font-size: 0.85rem;
  color: #3a3a3a;
}

.cc-resumo ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-resumo a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  height: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.08);
  color: #000;
  text-decoration: none;
  line-height: 1.45;
  font-size: 0.9rem;
  transition: background 0.15s;
}

.cc-resumo a:hover,
.cc-resumo a:focus-visible {
  background: rgba(0, 0, 0, 0.16);
}

.cc-resumo .cc-icone {
  color: #000;
}

.cc-sumario {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px 24px;
  margin-bottom: 28px;
  padding: 20px 24px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: var(--painel);
}

.cc-sumario-grupo p {
  margin: 0 0 8px;
  color: var(--amarelo);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cc-sumario ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-sumario li + li {
  margin-top: 6px;
}

.cc-sumario a {
  color: #d8d8d8;
  font-size: 0.88rem;
  text-decoration: none;
}

.cc-sumario a:hover,
.cc-sumario a:focus-visible {
  color: var(--amarelo);
  text-decoration: underline;
}

.cc-secao {
  margin-bottom: 20px;
  padding: 22px 24px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: var(--painel);
  /* Respiro acima da seção quando se chega pelo sumário. */
  scroll-margin-top: 16px;
}

.cc-secao-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.cc-secao-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.cc-secao-corpo {
  display: grid;
  gap: 14px;
}

.cc-texto {
  margin: 0;
  color: #d8d8d8;
  line-height: 1.6;
}

.cc-lista {
  padding: 14px 16px;
  border-radius: 12px;
  background: #101010;
  border: 1px solid var(--borda);
}

.cc-lista-rotulo {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cc-lista-faca .cc-lista-rotulo { color: #0ca30c; }
.cc-lista-naoFaca .cc-lista-rotulo { color: #e66767; }

.cc-lista ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-lista li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
  color: #e4e4e4;
  font-size: 0.92rem;
}

.cc-sinal {
  display: inline-flex;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.cc-sinal svg {
  width: 100%;
  height: 100%;
  stroke-width: 2.2;
}

.cc-lista-faca .cc-sinal { color: #0ca30c; }
.cc-lista-naoFaca .cc-sinal { color: #e66767; }

/* Lista sem sinal (explicações da escala): marcador simples em amarelo. */
.cc-lista-info li::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--amarelo);
}

/* Passos: fluxo numerado com fio ligando os números. */
.cc-passos {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px dashed #3a3a3a;
}

.cc-passos-titulo {
  margin: 0 0 12px;
  font-weight: 600;
}

.cc-passos ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.cc-passos li {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 14px;
  counter-increment: passo;
  line-height: 1.5;
  color: #e4e4e4;
  font-size: 0.92rem;
}

.cc-passos li:last-child {
  padding-bottom: 0;
}

.cc-passos li::before {
  content: counter(passo);
  flex: 0 0 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--amarelo);
  color: #000;
  font-family: "Unbounded", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
}

.cc-passos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 28px;
  bottom: 2px;
  width: 2px;
  background: #3a3a3a;
}

.cc-passos li > span {
  padding-top: 3px;
}

.cc-nota {
  margin: 12px 0 0;
  color: var(--grafite);
  font-size: 0.84rem;
  line-height: 1.5;
}

.cc-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.cc-numero {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #101010;
  border: 1px solid var(--borda);
}

.cc-numero strong {
  font-family: "Unbounded", sans-serif;
  font-size: 1.6rem;
  color: var(--amarelo);
  line-height: 1.1;
}

.cc-numero span {
  color: #cfcfcf;
  font-size: 0.85rem;
}

.cc-atencao {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  border-left: 3px solid #e66767;
  background: rgba(230, 103, 103, 0.08);
}

.cc-atencao .cc-icone {
  color: #e66767;
}

.cc-atencao p {
  margin: 0;
  line-height: 1.55;
  color: #f0f0f0;
  font-size: 0.92rem;
}

.cc-contato {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 218, 0, 0.45);
  background: rgba(255, 218, 0, 0.06);
}

.cc-contato p {
  margin: 0 0 6px;
  color: #d8d8d8;
  line-height: 1.5;
}

.cc-contato .cc-contato-titulo {
  color: #fff;
  font-weight: 600;
}

.cc-contato a {
  color: var(--amarelo);
  font-weight: 600;
  font-size: 1.02rem;
  word-break: break-all;
}

.cc-valores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-valor {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px;
  border-radius: 12px;
  background: #101010;
  border: 1px solid var(--borda);
}

.cc-valor strong {
  font-size: 0.95rem;
}

.cc-valor span {
  color: #bdbdbd;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Escala de penalidades: degraus que sobem. A altura é a gradualidade; o
   número e o nome continuam escritos, o desenho só reforça. A rampa de
   amarelo segue a regra dos gráficos (um matiz, ordem natural); o último
   degrau, a justa causa, é o único vermelho. */
.cc-escala {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-degrau {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px;
  border-radius: 12px 12px 4px 4px;
  border: 1px solid var(--borda);
  border-top: 3px solid var(--amarelo);
  background: #101010;
}

.cc-degrau-1 { min-height: 130px; border-top-color: #8a7500; }
.cc-degrau-2 { min-height: 160px; border-top-color: #c6a900; }
.cc-degrau-3 { min-height: 190px; border-top-color: #ffda00; }
.cc-degrau-4 { min-height: 220px; border-top-color: #e66767; }

.cc-degrau-num {
  font-family: "Unbounded", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--amarelo);
  line-height: 1;
}

.cc-degrau-4 .cc-degrau-num {
  color: #e66767;
}

.cc-degrau strong {
  font-size: 0.95rem;
}

.cc-degrau span:last-child {
  color: #bdbdbd;
  font-size: 0.84rem;
  line-height: 1.45;
}

.cc-portal {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: #101010;
}

.cc-portal p {
  margin: 0;
  color: #cfcfcf;
  font-size: 0.88rem;
  line-height: 1.5;
}

.cc-portal a {
  color: var(--amarelo);
}

.cc-rodape {
  margin: 8px 0 32px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px dashed #3a3a3a;
  color: var(--grafite);
  font-size: 0.84rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .cc-hero {
    grid-template-columns: 1fr;
  }
  .cc-ficha {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 18px;
  }
  .cc-escala {
    grid-template-columns: 1fr 1fr;
  }
  .cc-degrau {
    min-height: 0 !important;
  }
}

@media (max-width: 480px) {
  .cc-secao,
  .cc-resumo,
  .cc-sumario,
  .cc-hero {
    padding: 16px;
  }
  .cc-escala {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-resumo a {
    transition: none;
  }
}

/* Atalho para a apresentação do Código, logo abaixo do hero. */
.cc-apresentacao {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: var(--painel);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.15s;
}

.cc-apresentacao:hover,
.cc-apresentacao:focus-visible {
  border-color: var(--amarelo);
}

.cc-apresentacao-texto {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.cc-apresentacao-texto span {
  color: var(--grafite);
  font-size: 0.88rem;
}

.cc-apresentacao-seta {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--amarelo);
}

/* ---------- Recado da direção (home) ----------
   Mensagem da Nayelle à equipe (recado-direcao.js). Borda amarela à
   esquerda + frase em Unbounded: é a voz da direção, e precisa se separar dos
   boxes de dado sem virar um cartaz. .info-panel não tem margem (ver CLAUDE.md
   do portal), então a margem de baixo vem daqui. */
.painel-recado {
  margin: 0 0 28px;
  border-left: 3px solid var(--amarelo);
}

/* "p.recado-frase" dentro de .info-panel: sozinha, a classe (0-1-0) perde para
   ".info-panel p" (0-1-1) e a frase sai cinza e pequena — a mesma armadilha da
   legenda do sparkline, descrita no CLAUDE.md do portal. */
.info-panel p.recado-frase {
  margin: 14px 0 10px;
  font-family: "Unbounded", sans-serif;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #fff;
}

.recado-pontos {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recado-pontos li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #d6d6d6;
}

.recado-pontos li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--amarelo);
  transform: rotate(45deg);
}

.recado-completo {
  margin-top: 12px;
}

.recado-completo summary {
  cursor: pointer;
  color: var(--amarelo);
  font-size: 0.86rem;
  font-weight: 600;
}

.recado-completo summary:focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: 3px;
}

.recado-texto {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #101010;
}

.info-panel .recado-texto p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #dcdcdc;
}

.info-panel .recado-texto p.recado-assinatura {
  margin: 0;
  font-weight: 700;
  color: #fff;
}

/* ---------- Exames ocupacionais (Meu Perfil) ----------
   Três estados de aviso (buildExames no server.js): em dia (discreto),
   faltando 30 dias ou menos (amarelo) e vencido (vermelho — os mesmos tons do
   selo de critério). A cor marca o estado; o texto diz o prazo e o que fazer. */
.info-panel p.aviso-exame {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border-left: 3px solid var(--borda);
  background: #101010;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #cfcfcf;
}

.info-panel p.aviso-exame-proximo {
  border-left-color: var(--amarelo);
  background: rgba(255, 218, 0, 0.08);
  color: #fff;
}

.info-panel p.aviso-exame-vencido {
  border-left-color: #e66767;
  background: rgba(230, 103, 103, 0.1);
  color: #fff;
}

.form-usuario .dica-campo {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--grafite);
}

/* ----- Dados travados do Meu Perfil -------------------------------------
   Nome e CPF vêm da planilha de pessoal e não são editáveis pela pessoa
   (2026-09-30). Aparecem como DADO, não como campo desabilitado: campo
   cinza-claro convida a clicar e depois não deixa digitar, e a pessoa fica
   achando que a tela está com defeito. Uma lista de definição diz "isto é
   informação" sem prometer edição. */
/* O rótulo fica ACIMA do valor, e não ao lado, para ficar igual aos campos
   editáveis logo abaixo: mesma estrutura, mesmo ritmo, e a única diferença
   visível é que um se digita e o outro não. Lado a lado, além de não casar
   com o resto do site, o nome completo quebrava em duas linhas no celular.

   A tipografia do rótulo é a mesma de .av-tile-rotulo (11px, versalete com
   0.08em), que é o padrão do portal para rótulo curto sobre valor. */
.dados-travados {
  margin: 0;
}

.dados-travados dt {
  margin: 0 0 6px;
  color: var(--grafite);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 18px embaixo é a mesma respiração que `input` deixa entre um campo e o
   próximo rótulo — é o que mantém o bloco travado no ritmo do formulário. */
.dados-travados dd {
  margin: 0 0 18px;
  color: #f0f0f0;
  font-size: 1rem;
  line-height: 1.4;
}

.dados-travados dd:last-child {
  margin-bottom: 0;
}

.dados-travados-nota {
  margin: 14px 0 0;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--borda);
}

/* Estava definida só dentro de .form-usuario; o Meu Perfil passou a usar a
   mesma dica fora daquele formulário. */
/* A dica vem depois do campo a que se refere, e `input` já deixa 18px de
   margem embaixo. O recuo de -12px desfaz parte disso para a dica ficar a
   6px do seu campo — a mesma distância que um `label` fica do dele — sem
   colar no rótulo seguinte. */
.dica-campo {
  display: block;
  color: var(--grafite);
  font-size: 0.78rem;
  line-height: 1.45;
  margin-top: -12px;
  margin-bottom: 18px;
}

/* ----- Avisos de alteração de perfil ------------------------------------
   Caixa no topo da tela de Usuários com o que a equipe mudou no próprio
   perfil desde a última conferência (ver perfil-alteracoes.js). Amarelo na
   borda esquerda, como os outros blocos que pedem atenção sem ser erro. */
.avisos-alteracoes {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--amarelo);
  border-radius: 10px;
  padding: 18px 20px 14px;
  margin-bottom: 24px;
}

.avisos-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.avisos-cabecalho h2 {
  margin: 0;
  font-size: 0.98rem;
  color: var(--amarelo);
}

.avisos-lista {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.avisos-lista li {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(90px, 0.7fr) minmax(200px, 2fr) auto;
  gap: 4px 14px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--borda);
  font-size: 0.87rem;
}

.avisos-lista li:first-child {
  border-top: 0;
}

.aviso-quem {
  color: #f0f0f0;
  font-weight: 600;
}

.aviso-campo {
  color: var(--amarelo);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* O valor antigo e o novo são o conteúdo da notificação, então quebram em
   qualquer largura em vez de vazar da caixa: chave PIX e e-mail são longos. */
.aviso-valores {
  color: #d8d8d8;
  overflow-wrap: anywhere;
}

.aviso-vazio {
  color: var(--grafite);
  font-style: normal;
}

.aviso-quando {
  color: var(--grafite);
  font-size: 0.78rem;
  white-space: nowrap;
}

/* No celular a grade de quatro colunas não cabe: vira uma linha por dado. */
@media (max-width: 760px) {
  .avisos-lista li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .aviso-quando {
    white-space: normal;
  }
}

/* ----- Selo de contagem na barra lateral --------------------------------
   Quantas alterações de perfil ainda não foram conferidas, ao lado de
   "Usuários". O Administrador não abre essa tela todo dia, e aviso que só
   aparece dentro da página que ninguém visitou não avisa nada. */
.nav-selo {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--amarelo);
  color: var(--preto);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  flex: 0 0 auto;
}

/* Recolhida, a barra zera o font-size dos rótulos — o número desapareceria.
   Ele vira um ponto sobre o ícone, que é o que ainda caberia ali. */
:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .nav-selo {
  position: absolute;
  top: 6px;
  right: 50%;
  transform: translateX(18px);
  margin: 0;
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .nav-item {
  position: relative;
}

/* ----- Seletor do tipo de chave PIX -------------------------------------
   A folha tem regra global para `input` e nenhuma para `select` — o campo
   novo do Meu Perfil saía com a caixa branca nativa do sistema no meio do
   painel escuro. Fica escopado ao cartão do perfil, e não global, para não
   mexer nos selects já estilizados de outras telas (.form-usuario,
   filtros de avaliação). */
.profile-card select {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: 8px;
  border: 1px solid #333;
  background: #0d0d0d;
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  /* A seta nativa também é clara demais; desenhamos a nossa. */
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23939393' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

.profile-card select:focus {
  outline: none;
  border-color: var(--amarelo);
}

/* A opção em si é desenhada pelo sistema, não pelo CSS da página: sem isto,
   a lista aberta fica com texto branco sobre fundo branco no Windows. */
.profile-card select option {
  background: #141414;
  color: #fff;
}

/* A dica fica logo abaixo do campo a que se refere, então ela encosta na
   margem de 18px do input. O ajuste negativo aproxima-a do campo certo sem
   colar no seguinte. */
.profile-card .dica-campo {
  margin-top: -12px;
  margin-bottom: 18px;
}

/* A nota dos campos travados usa .dica-campo, mas não é dica DE campo: ela
   fecha o bloco de nome/CPF. Sem isto ela herda o recuo negativo da regra
   acima e cola na linha do CPF. */
.profile-card .dados-travados-nota {
  margin-top: 14px;
  margin-bottom: 22px;
}

/* .ghost-btn nasceu para <a> e por isso nunca precisou zerar fundo: o <a> não
   tem o `background: amarelo` da regra global de `button`. Aplicada a um
   botão de verdade (o "Marcar como lidas"), ela saía preenchida de amarelo,
   competindo com o botão primário da página. */
button.ghost-btn {
  background: transparent;
  width: auto;
  cursor: pointer;
}

button.ghost-btn:hover {
  filter: none;
  border-color: var(--amarelo);
  color: var(--amarelo);
}

/* ----- Selo BETA (desde 2026-10-01) ---------------------------------------
   Área que está no portal mas ainda sendo aprimorada pela direção, visível só
   para o Administrador (ver AREAS_BETA no server.js). Amarelo CHEIO, com
   texto preto: é o sinal mais forte do portal, e é de propósito — ele marca
   as telas em que o que está escrito ainda pode mudar. Contorno amarelo
   (o desenho dos outros selos) leria como mais uma etiqueta de apoio. */
.selo-beta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--amarelo);
  color: var(--preto);
  font-family: "Unbounded", sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

/* Na barra lateral o selo acompanha o cabeçalho da seção, que já é pequeno e
   em caixa alta — aqui ele encolhe para não competir com o próprio rótulo. */
.nav-heading .selo-beta {
  font-size: 0.55rem;
  padding: 0 5px;
}

/* Recolhida, a barra mostra só ícones: um "BETA" solto, sem rótulo ao lado,
   não diria de que área ele fala. */
:is(.sidebar.recolhida, html.menu-recolhido .sidebar) .nav-heading .selo-beta {
  display: none;
}

/* ----- Refino (só Administrador, desde 2026-09-30) ------------------------
   Checklist sem JavaScript: cada ponto é um <form>, e a caixa de marcar é o
   botão de envio. O resolvido desce para o fim da lista, riscado, e continua
   visível com a data e a decisão: a lista também é o registro do que já foi
   decidido.

   Desde 2026-10-01 a tela agrupa por PRIORIDADE. O bloco dos essenciais tem
   moldura própria e o primeiro ladrilho é maior: a tela existe para
   responder "dá para lançar?", e essa resposta não pode ter o mesmo peso
   visual de "quantos pontos existem ao todo". */
.pa-lista {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.pa-item {
  border-top: 1px solid var(--borda);
  padding: 14px 0;
}

.pa-item:first-child {
  border-top: 0;
  padding-top: 6px;
}

.pa-linha {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
}

.pa-check {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 1.6px solid var(--grafite);
  border-radius: 6px;
  background: transparent;
  color: var(--preto);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pa-check:hover,
.pa-check:focus-visible {
  border-color: var(--amarelo);
}

.pa-check svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.pa-check-on {
  background: var(--amarelo);
  border-color: var(--amarelo);
}

/* Verificação calculada: não é botão, não se marca. */
.pa-check-auto {
  cursor: default;
  border-color: var(--amarelo);
  color: var(--amarelo);
  font-weight: 700;
  font-size: 0.85rem;
}

.pa-texto {
  min-width: 0;
  flex: 1;
}

.info-panel p.pa-titulo {
  margin: 0 0 4px;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
}

.info-panel p.pa-detalhe {
  margin: 0 0 6px;
  font-size: 0.87rem;
}

.info-panel p.pa-origem,
.info-panel p.pa-feito {
  margin: 0;
  font-size: 0.78rem;
  color: #6f6f6f;
}

.info-panel p.pa-origem a {
  color: var(--amarelo);
}

.info-panel p.pa-pessoas {
  margin: 0 0 6px;
  font-size: 0.87rem;
  color: #fff;
}

.pa-resolvido .pa-titulo {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  color: var(--grafite) !important;
}

.info-panel p.pa-feito {
  margin-top: 6px;
  color: #8fe0a0;
}

.info-panel p.pa-decisao-texto {
  margin: 6px 0 0;
  font-size: 0.87rem;
  color: #d6d6d6;
}

.pa-decisao {
  margin-top: 8px;
}

.pa-decisao summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--amarelo);
  width: fit-content;
}

.pa-decisao textarea {
  display: block;
  width: 100%;
  margin: 8px 0;
  background: var(--fundo);
  color: #fff;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.87rem;
  resize: vertical;
}

/* O ladrilho "Falta para lançar" ocupa duas colunas da grade e dobra o
   número: ele não é um dos quatro indicadores, é a resposta da tela. Os
   outros três continuam iguais aos de qualquer painel. */
.av-tiles-refino {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.av-tile-destaque {
  grid-column: span 2;
}

.av-tile-destaque .av-tile-valor {
  font-size: 46px;
}

/* Trava: a cor do alerta, já usada em "nota ruim". Livre: o amarelo da marca,
   que aqui é comemoração. A cor nunca é a única pista — a linha de apoio
   abaixo do número diz em palavras o que falta. */
.av-tile-trava {
  border-color: rgba(230, 103, 103, 0.5);
  background: linear-gradient(180deg, rgba(230, 103, 103, 0.09), transparent 70%), var(--painel);
}
.av-tile-trava .av-tile-valor { color: #e66767; }

.av-tile-livre {
  border-color: rgba(255, 218, 0, 0.5);
  background: linear-gradient(180deg, rgba(255, 218, 0, 0.09), transparent 70%), var(--painel);
}
.av-tile-livre .av-tile-valor { color: var(--amarelo); }

@media (max-width: 560px) {
  /* Numa coluna só, "span 2" deixaria o ladrilho estourando a grade. */
  .av-tile-destaque { grid-column: auto; }
}

/* O bloco dos essenciais. Fio amarelo à esquerda, e não cartão inteiro
   colorido: ele tem oito itens de texto dentro, e fundo forte nessa altura
   cansa a leitura justamente do que mais precisa ser lido. */
.painel-essencial {
  border-color: rgba(255, 218, 0, 0.45);
  border-left: 3px solid var(--amarelo);
}

.painel-essencial .painel-head h2 {
  color: var(--amarelo);
}

/* Etiqueta do tema ao lado do título. Agrupada por prioridade, a lista perde
   a área de onde o ponto veio — e é a área que diz onde ir mexer. */
.pa-tema {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-family: "Sora", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--grafite);
  vertical-align: middle;
  white-space: nowrap;
}

/* Por que o item trava o lançamento. Só existe nos essenciais. */
.info-panel p.pa-porque {
  margin: 0 0 6px;
  font-size: 0.87rem;
  color: #e8e8e8;
  border-left: 2px solid rgba(255, 218, 0, 0.55);
  padding-left: 10px;
}

.info-panel p.pa-porque strong {
  color: var(--amarelo);
}

.info-panel p.pa-vazio {
  margin: 6px 0 0;
  font-size: 0.87rem;
  color: var(--grafite);
}

/* ----- Agenda da equipe (home, desde 2026-09-30) --------------------------
   Reusa a lista de três colunas de Comemorações (.festa-lista): dia, nome,
   apoio. O fundo NÃO é o âmbar de festa — isto é dado de trabalho, não
   notícia boa. Exame vencido ganha o vermelho do selo de critério, só no
   dia e no "venceu há", nunca no nome. */
.festa-dia.agenda-vencido,
.festa-apoio.agenda-vencido {
  color: #ff8a80;
}

.info-panel p.agenda-nota {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--grafite);
}

.info-panel p.agenda-nota a {
  color: var(--amarelo);
}

/* ----- Cadastro / edição de usuário (.uf-*) -----------------------------
   Desde 2026-10-01. A versão anterior era uma coluna única de onze caixas
   iguais, com as ações da conta empilhadas embaixo — lia como formulário de
   pesquisa. Agora: ficha da pessoa no topo, campos agrupados em cartões com
   cabeçalho de ícone (o mesmo .painel-head dos painéis), dois campos por
   linha onde cabem, e as ações que agem na hora (senha, ativar, excluir)
   numa coluna à parte. Prefixo próprio porque .form-usuario continua servindo
   aos formulários de Conduta e Avaliações. */

.uf-voltar {
  margin: 0 0 10px;
  font-size: 0.85rem;
}

.uf-voltar a {
  color: var(--grafite);
  text-decoration: none;
}

.uf-voltar a:hover {
  color: var(--amarelo);
}

.uf-ficha {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  margin-bottom: 20px;
  background: linear-gradient(120deg, #1a1708, var(--painel) 55%);
  border: 1px solid #3a3210;
  border-radius: 18px;
}

.uf-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  font-size: 1.2rem;
  border-color: rgba(255, 218, 0, 0.4);
}

.uf-ficha-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.uf-ficha-nome {
  font-family: "Unbounded", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
}

.uf-ficha-login {
  color: var(--grafite);
  font-size: 0.88rem;
}

.uf-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.uf-selo {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid #3a3a3a;
  color: #e6e6e6;
  /* Pode quebrar: "Atendimento Interno · Consultor de Vendas" é mais largo que a coluna no celular. */
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.uf-selo-ok { color: #0ca30c; border-color: rgba(12, 163, 12, 0.45); background: rgba(12, 163, 12, 0.1); }
.uf-selo-off { color: var(--grafite); }
.uf-selo-aviso { color: var(--amarelo); border-color: rgba(255, 218, 0, 0.4); background: rgba(255, 218, 0, 0.08); }

.uf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.uf-layout-unico {
  grid-template-columns: minmax(0, 860px);
}

.uf {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.uf-cartao {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 20px 24px 22px;
}

.uf-cartao .painel-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}

/* Dois campos por linha: nome e login lado a lado se leem como "a mesma
   pessoa", e o formulário cai para metade da altura. */
.uf-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.uf-largo {
  grid-column: 1 / -1;
}

/* Rótulo em versalete curto acima do campo — a mesma tipografia de
   .dados-travados dt e .av-tile-rotulo. */
.uf-campo,
.uf-rotulo {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--grafite);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Sem isto, num par de campos em que só um tem dica embaixo, a linha da
   grade estica o outro e a caixa dele sai mais alta. */
.uf-campo {
  align-content: start;
}

.uf-confirmar {
  display: grid;
  gap: 8px;
  margin: 0;
  color: var(--grafite);
  font-size: 0.85rem;
}

.uf-confirmar strong {
  color: #fff;
}

.uf-campo strong {
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
}

.uf input,
.uf select,
.uf-perigo input {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #2f2f2f;
  background: #0d0d0d;
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: 0.98rem;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.uf input:hover,
.uf select:hover {
  border-color: #444;
}

.uf input:focus,
.uf select:focus,
.uf-perigo input:focus {
  outline: none;
  border-color: var(--amarelo);
  box-shadow: 0 0 0 3px rgba(255, 218, 0, 0.15);
}

/* Sem color-scheme escuro, o ícone de calendário nativo sai preto sobre o
   campo preto. Vale para data E mês — o campo de mês do envio de documentos
   ficou de fora na primeira versão, e o ícone sumiu. */
.uf input[type="date"],
.uf input[type="month"] {
  color-scheme: dark;
}

.uf input[type="date"]::-webkit-calendar-picker-indicator,
.uf input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.uf select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23939393' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

.uf select option {
  background: #141414;
  color: #fff;
}

/* Login não muda depois de criado: sem caixa "clicável", só o valor. */
.uf input.uf-travado {
  background: transparent;
  border-style: dashed;
  color: #cfcfcf;
  cursor: default;
}

.uf input.uf-travado:focus {
  border-color: #2f2f2f;
  box-shadow: none;
}

.uf-dado {
  color: #f0f0f0;
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.uf-dica {
  display: block;
  margin: 0;
  color: var(--grafite);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

/* Dica do exame ao lado do campo de data, não embaixo: a data é curta e a
   segunda coluna ficaria vazia. */
.uf-dica-lado {
  align-self: end;
  padding-bottom: 4px;
}

/* Funções extras (desde 2026-10-02). A caixa "Atua em mais de um
   departamento" abre o bloco pelo CSS (:checked ~), sem script: ela vem
   antes do bloco no HTML exatamente para isso. */
.uf-multi {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 10px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}

/* Zera o que a regra global de input daria à caixa (width 100%, padding,
   margem de campo de formulário). */
.uf .uf-multi-caixa {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--amarelo);
  cursor: pointer;
}

.uf-multi-rotulo {
  margin: 0;
  color: #f0f0f0;
  font-size: 0.92rem;
  cursor: pointer;
}

.uf-extras {
  display: none;
  grid-column: 1 / -1;
  gap: 12px;
}

.uf-multi-caixa:checked ~ .uf-extras {
  display: grid;
}

.uf-multi-bloqueado .uf-multi-caixa,
.uf-multi-bloqueado .uf-multi-rotulo,
.uf-multi-bloqueado .uf-extras {
  display: none;
}

.uf-multi-marketing {
  grid-column: 1 / -1;
}

/* [hidden] precisa de regra própria: o display das classes venceria o
   atributo (mesma armadilha do carrossel do Instagram). */
.uf-multi [hidden] {
  display: none;
}

.uf-extras-linhas {
  display: grid;
  gap: 12px;
}

.uf-extra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px 20px;
  align-items: end;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

/* Botão-ícone: zera width/padding da regra global de button. */
.uf .uf-extra-remover {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid #2f2f2f;
  border-radius: 10px;
  background: transparent;
  color: var(--grafite);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.uf .uf-extra-remover:hover,
.uf .uf-extra-remover:focus-visible {
  color: #fff;
  border-color: var(--amarelo);
}

.uf .uf-extra-mais {
  justify-self: start;
  width: auto;
}

/* Na lista de Usuários: função extra embaixo da principal. */
.uf-lista-extra {
  display: block;
  margin-top: 3px;
  color: var(--grafite);
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .uf-extra {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .uf-extra .uf-campo:first-child {
    grid-column: 1 / -1;
  }
}

/* Barra de salvar presa ao pé da tela enquanto se rola o formulário: o botão
   está sempre à vista, e não só depois do último campo. */
.uf-barra {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  background: linear-gradient(to top, var(--fundo) 70%, rgba(13, 13, 13, 0));
}

.uf-barra .ghost-btn {
  padding: 12px 18px;
}

.uf-salvar {
  width: auto;
  padding: 12px 28px;
  border-radius: 10px;
}

.uf-lateral {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 20px;
}

.uf-acao {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--borda);
}

.uf-acao:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.uf-acao:first-of-type {
  padding-top: 0;
}

.uf-acao strong {
  font-size: 0.92rem;
}

.uf-acao p,
.uf-nota {
  margin: 3px 0 0;
  color: var(--grafite);
  font-size: 0.8rem;
  line-height: 1.45;
}

.uf-nota {
  margin-top: 14px;
}

.uf-acao form {
  margin: 0;
}

.uf-acao .ghost-btn {
  width: 100%;
}

.uf-perigo {
  border-color: rgba(230, 103, 103, 0.3);
  padding-bottom: 20px;
}

.uf-perigo summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.uf-perigo summary::-webkit-details-marker {
  display: none;
}

.uf-perigo summary > span:last-child {
  display: grid;
  gap: 2px;
}

.uf-perigo summary strong {
  font-size: 0.95rem;
}

.uf-perigo summary .quick-icon-sm {
  background: rgba(230, 103, 103, 0.12);
  color: #e66767;
}

.uf-perigo[open] summary {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}

.uf-perigo form {
  display: grid;
  gap: 14px;
}

.uf-perigo .botao-perigo {
  border-radius: 10px;
}

@media (max-width: 1100px) {
  .uf-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .uf-lateral {
    position: static;
  }
}

@media (max-width: 640px) {
  .uf-grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .uf-cartao {
    padding: 18px;
  }

  .uf-ficha {
    padding: 16px;
  }

  .uf-barra .ghost-btn,
  .uf-salvar {
    flex: 1 1 0;
    text-align: center;
  }
}

/* ----- Meus Documentos (.doc-*) -----------------------------------------
   Desde 2026-10-01. Contracheques, ponto, férias, exames e os anexos de
   advertência e suspensão de Conduta. Os cartões reaproveitam .uf-cartao e o
   .painel-head da tela de usuário, para a área parecer parte do mesmo
   portal, e não um gerenciador de arquivos colado nele. */

.uf-selo-link {
  text-decoration: none;
  color: var(--grafite);
}

.uf-selo-link:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
}

/* Bloco de documentos na edição do usuário: abaixo da grade, largura cheia. */
.doc-admin {
  margin-top: 20px;
  scroll-margin-top: 20px;
}

.doc-envio {
  margin-bottom: 22px;
}

/* .uf-campo é grid, e display de classe vence o atributo `hidden` — sem
   isto, o campo "escondido" continuaria na tela (armadilha do carrossel). */
.doc-form-dinamico .doc-campo[hidden] {
  display: none;
}

.doc-envio input[type="file"] {
  padding: 10px 12px;
  cursor: pointer;
}

.doc-envio-acoes {
  display: flex;
  justify-content: flex-end;
}

.doc-admin-subtitulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--borda);
  font-family: "Unbounded", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
}

/* Meus Documentos: duas colunas de seções, uma por tipo. */
.doc-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.doc-secao .painel-head {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borda);
}

.doc-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: #fff;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.doc-item:hover {
  border-color: #3a3a3a;
  background: #191919;
}

/* Novo: fio amarelo à esquerda, como os blocos que pedem atenção sem ser
   erro. A etiqueta "Novo" vai junto — a cor nunca diz isso sozinha. */
.doc-item-novo {
  border-left: 3px solid var(--amarelo);
  background: rgba(255, 218, 0, 0.04);
}

.doc-item-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.doc-item-texto strong {
  font-size: 0.95rem;
  font-weight: 600;
}

.doc-item-texto small {
  color: var(--grafite);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-item-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.doc-item-seta {
  display: flex;
  color: var(--grafite);
}

.doc-item-seta svg {
  width: 18px;
  height: 18px;
}

.doc-item:hover .doc-item-seta {
  color: var(--amarelo);
}

.doc-vazio {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--borda);
  border-radius: 10px;
  color: var(--grafite);
  font-size: 0.85rem;
  text-align: center;
}

.doc-pendentes,
.painel-documentos {
  border-left: 3px solid var(--amarelo);
}

.painel-documentos {
  margin: 0 0 28px;
}

.doc-pendentes .painel-head,
.painel-documentos .painel-head {
  margin-bottom: 12px;
}

/* Página do documento */
.doc-conduta {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: var(--painel);
  color: var(--grafite);
  font-size: 0.88rem;
}

.doc-conduta strong {
  color: #fff;
  font-weight: 600;
}

.doc-visor-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.doc-visor {
  display: block;
  width: 100%;
  height: 78vh;
  min-height: 420px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: #1f1f1f;
}

.doc-visor-imagem {
  height: auto;
  min-height: 0;
  padding: 12px;
  text-align: center;
}

.doc-visor-imagem img {
  max-width: 100%;
  border-radius: 8px;
}

.doc-ciencia {
  margin-top: 16px;
  border-left: 3px solid var(--amarelo);
}

.doc-ciencia p {
  margin: 0 0 16px;
  color: #d6d6d6;
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 70ch;
}

.doc-ciencia form {
  margin: 0;
}

.doc-ciencia-ok {
  border-left-color: #0ca30c;
}

.doc-ciencia-ok .painel-head .quick-icon-sm {
  background: rgba(12, 163, 12, 0.12);
  color: #0ca30c;
}

/* Link de documento na tabela de Conduta, logo abaixo do motivo. */
.disc-doc-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--amarelo);
}

.disc-doc-falta {
  color: var(--grafite);
}

@media (max-width: 900px) {
  .doc-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .doc-item {
    flex-wrap: wrap;
  }

  .doc-item-tags {
    justify-content: flex-start;
    order: 3;
    flex-basis: 100%;
  }

  .doc-visor {
    height: 70vh;
  }
}

/* O botão nativo do campo de arquivo sai branco, com a fonte do sistema, no
   meio do formulário escuro. */
.doc-envio input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #3a3a3a;
  background: #1f1f1f;
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.doc-envio input[type="file"]::file-selector-button:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
}

.doc-aviso-ciencia {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 3px solid var(--amarelo);
  background: rgba(255, 218, 0, 0.06);
  font-size: 0.9rem;
}

.doc-aviso-ciencia a {
  color: var(--amarelo);
}

.doc-ciencia {
  scroll-margin-top: 20px;
}

/* ----- Comunidade: selo nos sublinks e no grupo (desde 2026-10-01) ------- */
.nav-subitem-selo {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Selo e seta no mesmo botão: os dois têm margin-left:auto, e duas margens
   automáticas repartem a sobra — a seta ficaria no meio do caminho. */
.nav-group-toggle .nav-selo + .nav-caret {
  margin-left: 6px;
}

/* ----- Mural ------------------------------------------------------------
   Rede social interna. Coluna única e estreita, como um feed de celular:
   foto grande e texto curto se leem melhor numa coluna de ~680px do que
   espalhados numa grade larga. */
.mural-feed {
  display: grid;
  gap: 18px;
  max-width: 680px;
}

.mural-post {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 18px 20px;
  scroll-margin-top: 20px;
}

.mural-post-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mural-post-autor {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mural-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--borda);
}

.mural-avatar-sm {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

.mural-avatar-iniciais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1f1f1f;
  color: var(--amarelo);
  font-family: "Unbounded", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}

.mural-avatar-sm.mural-avatar-iniciais {
  font-size: 0.6rem;
}

.mural-meta {
  color: var(--grafite);
  font-size: 0.78rem;
}

.mural-cat {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 218, 0, 0.4);
  color: var(--amarelo);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.mural-foto {
  margin: 0 -20px 12px;
  background: #0a0a0a;
}

.mural-foto img {
  display: block;
  width: 100%;
  max-height: 640px;
  object-fit: contain;
}

/* `.mural-post p.x` e não só `.x`: dentro de um .info-panel (a fila de
   aprovação, "Seus posts fora do ar"), `.info-panel p` venceria a classe
   sozinha — armadilha descrita no CLAUDE.md. */
.mural-post p.mural-texto {
  margin: 0 0 12px;
  color: #ececec;
  font-size: 0.95rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.mural-post p.mural-situacao {
  margin: 0 0 12px;
  color: var(--grafite);
  font-size: 0.85rem;
}

.mural-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--borda);
}

.mural-inline {
  display: inline;
  margin: 0;
}

/* O `button` global é amarelo e de largura inteira; estes são botões de
   texto dentro de uma linha. */
.mural-curtir,
.mural-link {
  width: auto;
  padding: 0;
  background: none;
  border: none;
  color: var(--grafite);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.mural-curtir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #333;
  border-radius: 999px;
  color: #fff;
  font-size: 0.85rem;
}

.mural-curtir svg {
  width: 17px;
  height: 17px;
  display: block;
}

.mural-curtir:hover {
  filter: none;
  border-color: var(--amarelo);
  color: var(--amarelo);
}

/* Curtido: coração preenchido + rótulo "Curtido" — o estado não depende só
   da cor. */
.mural-curtir.curtido {
  border-color: var(--amarelo);
  color: var(--amarelo);
}

.mural-curtir.curtido svg path {
  fill: currentColor;
}

.mural-link {
  font-size: 0.78rem;
  text-decoration: underline;
}

.mural-link:hover {
  filter: none;
  color: #fff;
}

.mural-link-perigo {
  color: #e66767;
}

.mural-contagem {
  color: var(--grafite);
  font-size: 0.8rem;
}

.mural-comentarios {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.mural-comentario {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.mural-comentario-corpo {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 8px 12px;
  min-width: 0;
}

.mural-post .mural-comentario-corpo p {
  margin: 0 0 2px;
  color: #e6e6e6;
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mural-comentar {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.mural-comentar input {
  flex: 1 1 auto;
  margin: 0;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
}

.mural-comentar .ghost-btn {
  flex: 0 0 auto;
}

.mural-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 10px;
}

.mural-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 18px;
}

.mural-filtro {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #333;
  color: #d8d8d8;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.mural-filtro:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
}

.mural-filtro.ativo {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--preto);
}

.mural-paginas {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  max-width: 680px;
}

/* Publicar: recolhido por padrão (o feed é o que se veio ver), aberto quando
   houve erro no envio — senão a mensagem ficaria escondida. */
.mural-publicar {
  max-width: 680px;
}

.mural-publicar > summary {
  list-style: none;
  cursor: pointer;
}

.mural-publicar > summary::-webkit-details-marker {
  display: none;
}

.mural-publicar > summary .painel-head {
  margin-bottom: 0;
}

.mural-publicar[open] > summary .painel-head {
  margin-bottom: 16px;
}

.mural-publicar > summary h2::after {
  content: " +";
  color: var(--amarelo);
}

.mural-publicar[open] > summary h2::after {
  content: " −";
}

.uf textarea {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #2f2f2f;
  background: #0d0d0d;
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: 0.98rem;
  letter-spacing: 0;
  text-transform: none;
  resize: vertical;
}

.uf textarea:focus {
  outline: none;
  border-color: var(--amarelo);
}

.mural-previa {
  max-width: 220px;
  max-height: 220px;
  border-radius: 12px;
  border: 1px solid var(--borda);
  object-fit: cover;
}

.mural-previa[hidden] {
  display: none;
}

.mural-combinado {
  padding: 12px 16px;
  border-left: 3px solid var(--amarelo);
  border-radius: 10px;
  background: rgba(255, 218, 0, 0.05);
  font-size: 0.85rem;
  color: #d8d8d8;
}

.info-panel .mural-combinado p {
  margin: 0 0 4px;
  color: #fff;
  font-size: 0.85rem;
}

.mural-combinado ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
}

.mural-enviar {
  width: auto;
  padding: 11px 22px;
}

/* Fila de aprovação: o post como a equipe vai ver + as duas decisões. */
.mural-fila {
  max-width: 760px;
}

.mural-fila-item {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.mural-moderar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.mural-moderar form {
  margin: 0;
}

.mural-moderar button {
  width: auto;
  padding: 10px 18px;
}

.mural-recusar {
  display: flex;
  gap: 8px;
  flex: 1 1 280px;
}

.mural-recusar input {
  margin: 0;
  padding: 9px 12px;
  font-size: 0.9rem;
}

.mural-meus {
  max-width: 760px;
}

.mural-meus .mural-feed {
  margin-top: 4px;
}

/* Box da home: grade de 4 miniaturas. Post sem foto vira um cartão com a
   frase — sem isso ele sumiria da vitrine. */
.mural-mini-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}

.mural-mini {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background: #101010;
  transition: border-color 0.15s;
}

.mural-mini:hover {
  border-color: var(--amarelo);
}

.mural-mini img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mural-mini-frase {
  display: block;
  aspect-ratio: 4 / 3;
  padding: 16px;
  background: linear-gradient(160deg, #1d1a08, #121212 70%);
  color: #f2f2f2;
  font-size: 0.92rem;
  line-height: 1.45;
  overflow: hidden;
}

.mural-mini-info {
  display: grid;
  gap: 4px;
  padding: 10px 12px 12px;
  font-size: 0.85rem;
}

.mural-mini-info .mural-cat {
  justify-self: start;
  margin-left: 0;
}

@media (max-width: 560px) {
  .mural-post {
    padding: 14px 14px;
  }
  .mural-foto {
    margin: 0 -14px 12px;
  }
}

/* ----- Prêmios --------------------------------------------------------- */
.painel-premios {
  margin-top: 24px;
}

.pr-nivel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.pr-aro {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 218, 0, 0.12);
  color: var(--amarelo);
}

.pr-aro svg {
  width: 34px;
  height: 34px;
}

.pr-nivel-texto {
  flex: 1 1 auto;
  min-width: 0;
}

/* Com `.info-panel` na frente para empatar com `.info-panel p`. */
.info-panel p.pr-nivel-nome {
  margin: 0 0 6px;
  font-family: "Unbounded", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.pr-nivel .av-xp {
  max-width: 100%;
}

.info-panel .pr-nivel p.av-xp-texto {
  margin: 0;
  font-size: 12px;
}

.pr-resumo .av-tiles,
.painel-premios .av-tiles {
  margin-bottom: 0;
}

.info-panel p.pr-nota {
  font-size: 0.82rem;
  margin: 0;
}

.pr-origem {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid #333;
  font-size: 0.75rem;
  white-space: nowrap;
}

.pr-detalhe {
  color: var(--grafite);
  font-size: 0.8rem;
}

/* Loja: cartões em grade, do mais barato para o mais caro. O liberado ganha
   borda amarela; o bloqueado diz por quê, por escrito. */
.pr-loja {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 16px;
}

.pr-premio {
  display: flex;
  flex-direction: column;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 18px 20px;
}

.pr-premio-livre {
  border-color: rgba(255, 218, 0, 0.55);
}

.pr-premio-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pr-custo {
  font-family: "Unbounded", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--amarelo);
}

.pr-custo small {
  font-family: "Sora", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--grafite);
}

.pr-req {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #333;
  color: #d8d8d8;
  font-size: 0.72rem;
  font-weight: 600;
}

.pr-premio h3 {
  margin: 0 0 6px;
  font-family: "Unbounded", sans-serif;
  font-size: 0.98rem;
}

.pr-premio p {
  margin: 0 0 10px;
  color: var(--grafite);
  font-size: 0.86rem;
  line-height: 1.5;
}

.pr-premio p.pr-limite {
  font-size: 0.78rem;
}

.pr-premio p.pr-bloqueio {
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--borda);
  color: #d8d8d8;
  font-size: 0.82rem;
}

.pr-resgatar {
  margin-top: auto;
}

.pr-resgatar > summary {
  list-style: none;
  display: block;
  text-align: center;
  cursor: pointer;
}

.pr-resgatar > summary::-webkit-details-marker {
  display: none;
}

.pr-resgatar form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.pr-resgatar input {
  margin: 0;
  padding: 9px 12px;
  font-size: 0.88rem;
  text-transform: none;
  letter-spacing: 0;
}

.pr-celula-acoes {
  min-width: 300px;
}

.pr-decidir {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
}

.pr-decidir input {
  margin: 0;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.pr-decidir button {
  width: auto;
  padding: 8px 14px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.pr-check {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: end;
}

.uf .pr-check input {
  width: auto;
}

.pr-regras ul {
  margin: 0;
  padding-left: 20px;
  color: #d8d8d8;
  font-size: 0.9rem;
  line-height: 1.7;
}

/* Ladrilhos dentro dos painéis de Prêmios: `.info-panel p` (0-1-1) vence
   `.av-tile-valor` (0-1-0) e encolhia o número para o corpo do parágrafo.
   O screenshot mostrou; o teste não veria. */
.info-panel .av-tile p.av-tile-rotulo { margin: 0 0 6px; font-size: 11px; }
.info-panel .av-tile p.av-tile-valor {
  margin: 0;
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}
.info-panel .av-tile p.av-tile-apoio { margin: 4px 0 0; font-size: 11px; }

/* ----- Produção de Conteúdo / Redes Sociais (.ct-*) ----------------------
   Desde 2026-10-01 (conteudo-web.js). Calendário de posts no lugar do
   PodePostar, para a Administração e o time externo de conteúdo.

   A cor do status mora na borda esquerda do cartão do calendário (e no
   fundo, de leve, nos estados que pedem ação). Ela nunca vem sozinha: o
   cartão escreve o status por extenso na linha de baixo, e as etiquetas são
   as mesmas .av-tag-* do resto do portal — amarelo é "esperando alguém",
   vermelho é "voltou com ajuste", verde é "aprovado/no ar". */


.ct-barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px 24px;
  flex-wrap: wrap;
  padding: 12px 18px;
  margin-bottom: 12px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 18px;
}

.ct-periodo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ct-periodo strong {
  min-width: 12ch;
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
}

.ct-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.ct-seta:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
}

.ct-seta svg {
  width: 18px;
  height: 18px;
}

.ct-hoje {
  margin-left: 4px;
  color: var(--grafite);
  font-size: 0.82rem;
}

.ct-hoje:hover {
  color: var(--amarelo);
}

.ct-placar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.ct-placar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
}

.ct-placar-item strong {
  font-variant-numeric: tabular-nums;
}

.ct-placar-item:hover {
  border-color: #3a3a3a;
}

.ct-placar-item.ativo {
  border-color: var(--amarelo);
}

.ct-tag-publicado {
  color: #000;
  background: #0ca30c;
  border-color: #0ca30c;
}

/* Faixa de filtros: sempre aberta, nunca com barra de rolagem (pedido da
   Nayelle, 2026-10-02). As duas coisas andam juntas — filtro escondido, seja
   atrás de um "Filtros ›" ou fora da borda de uma faixa que rola, é
   calendário "vazio" sem explicação.

   Por isso os chips QUEBRAM LINHA (flex-wrap) em vez de deslizar. E por isso
   nada aqui pode ter overflow: a lista de cada chip sai para fora dele, e um
   contêiner com overflow a cortaria — a mesma armadilha que já custou caro no
   preview do calendário. */
.ct-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px;
}

.ct-chip {
  position: relative;
}

.ct-chip-gatilho {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--borda);
  border-radius: 99px;
  background: #0f0f0f;
  color: var(--grafite);
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.ct-chip-gatilho::-webkit-details-marker {
  display: none;
}

.ct-chip-gatilho::after {
  content: "›";
  font-size: 1rem;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}

.ct-chip[open] > .ct-chip-gatilho::after {
  transform: rotate(270deg);
}

.ct-chip-gatilho:hover {
  border-color: #555;
  color: #fff;
}

/* Chip com filtro ligado fica amarelo e conta quantos: o número responde
   "por que o mês está com três posts?" sem precisar abrir o menu. */
.ct-chip-on {
  border-color: var(--amarelo);
  background: #17150a;
  color: #fff;
}

.ct-chip-on > span {
  padding: 0 6px;
  border-radius: 99px;
  background: var(--amarelo);
  color: #000;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.ct-chip-lista {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 206px;
  max-width: 280px;
  padding: 6px;
  border: 1px solid #2c2c2c;
  border-radius: 14px;
  background: #121212;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.ct-chip-op {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 9px;
  color: #e6e6e6;
  font-size: 0.86rem;
  cursor: pointer;
}

.ct-chip-op:hover {
  background: #1c1c1c;
  color: #fff;
}

.ct-chip-op input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: var(--amarelo);
}

.ct-chip-op span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-chips-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Com script, marcar a caixinha já aplica; o botão é a saída de quem está
   sem ele. Fica discreto, não escondido: escondê-lo com CSS deixaria a faixa
   sem nenhuma forma de filtrar quando o script não carrega. */
.ct-chips-aplicar {
  padding: 6px 14px;
  font-size: 0.82rem;
}

.ct-limpar {
  color: var(--grafite);
  font-size: 0.82rem;
}

.ct-visoes {
  display: flex;
  gap: 2px;
  margin: 4px 0 16px;
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
}

.ct-visao {
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--grafite);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ct-visao:hover {
  color: #fff;
}

.ct-visao.ativo {
  color: #fff;
  border-bottom-color: var(--amarelo);
}

/* --- Visão mensal --- */

.ct-mes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.ct-mes-cab {
  padding: 2px 0 4px;
  color: var(--grafite);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

/* O <ol> some da grade (display: contents) e os dias viram células da
   grade de cima, alinhados com o cabeçalho dos dias da semana. */
.ct-mes-dias {
  display: contents;
  list-style: none;
}

.ct-dia {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 118px;
  padding: 8px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
}

/* A opacidade vai no número e no cartão, não na célula: na célula ela
   criaria um contexto de empilhamento, e o preview que abre de dentro dela
   sairia translúcido e por baixo das células vizinhas. */
.ct-dia-fora .ct-dia-topo,
.ct-dia-fora .ct-card {
  opacity: 0.45;
}

.ct-dia-hoje {
  border-color: var(--amarelo);
}

.ct-dia-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.ct-dia-num {
  font-size: 0.85rem;
  font-weight: 600;
}

.ct-dia-sem {
  display: none;
}

.ct-hoje-selo {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--amarelo);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* "+" de post novo no dia: aparece no hover (e sempre em tela de toque, que
   não tem hover). Sempre visível em 35 células, viraria textura. */
.ct-dia-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--grafite);
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.ct-dia:hover .ct-dia-add,
.ct-semana-dia:hover .ct-dia-add,
.ct-dia-add:focus-visible {
  opacity: 1;
}

.ct-dia-add:hover {
  background: rgba(255, 218, 0, 0.12);
  color: var(--amarelo);
}

@media (hover: none) {
  .ct-dia-add {
    opacity: 1;
  }
}

.ct-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 9px;
  border-left: 3px solid #5a5a5a;
  border-radius: 8px;
  background: #1f1f1f;
  color: #fff;
  text-decoration: none;
  transition: background 0.15s;
}

.ct-card:hover {
  background: #2a2a2a;
}

.ct-card-titulo {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ct-card-meta {
  color: var(--grafite);
  font-size: 0.7rem;
}

.ct-st-em_aprovacao { border-left-color: var(--amarelo); background: rgba(255, 218, 0, 0.08); }
.ct-st-ajuste { border-left-color: #e66767; background: rgba(230, 103, 103, 0.09); }
.ct-st-aprovado { border-left-color: #0ca30c; }
.ct-st-publicado { border-left-color: #0ca30c; background: rgba(12, 163, 12, 0.12); }

/* --- Visão semanal --- */

/* Sem rolagem no computador: contêiner com overflow corta o preview que
   abre ao lado do cartão. A rolagem só entra abaixo de 1100px, onde sete
   colunas não cabem — e ali o preview sai (ver o fim do arquivo). */
.ct-semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 6px;
}

@media (max-width: 1100px) {
  .ct-semana {
    grid-template-columns: repeat(7, minmax(118px, 1fr));
    overflow-x: auto;
  }

  .ct-semana .ct-previa {
    display: none !important;
  }
}

.ct-semana-dia {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 320px;
  padding: 10px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
}

.ct-semana-cab {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borda);
  color: var(--grafite);
  font-size: 0.8rem;
}

.ct-semana-cab strong {
  color: #fff;
  font-size: 0.95rem;
}

.ct-semana-cab .ct-dia-add {
  margin-left: auto;
}

.ct-semana-vazio {
  margin: 4px 0 0;
  color: #444;
  text-align: center;
}

.ct-card-grande {
  gap: 5px;
  padding: 8px;
}

.ct-card-capa {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  background: #111;
}

/* --- Feed (prévia da grade do perfil) --- */

.ct-nota {
  margin: 0 0 14px;
  color: var(--grafite);
  font-size: 0.85rem;
}

.ct-feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  max-width: 640px;
}

.ct-feed-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
}

.ct-feed-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct-feed-sem-capa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

.ct-feed-sem-capa small {
  color: var(--grafite);
  font-weight: 400;
}

.ct-feed-info {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 18px 8px 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  font-size: 0.7rem;
}

/* --- Página do post --- */

.ct-faixa-ajuste {
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid rgba(230, 103, 103, 0.45);
  border-left: 4px solid #e66767;
  border-radius: 12px;
  background: rgba(230, 103, 103, 0.08);
}

.ct-faixa-ajuste p {
  margin: 6px 0 0;
  line-height: 1.5;
}

.ct-meta {
  color: var(--grafite);
  font-size: 0.8rem;
  font-weight: 400;
}

.ct-canais {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 0;
  border: 0;
}

.ct-canais legend {
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
}

.ct-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e6e6e6;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.uf .ct-check input {
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--amarelo);
}

.ct-perto-limite {
  color: var(--amarelo);
}

.ct-links {
  display: grid;
  gap: 12px;
}

.ct-link-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
}

.ct-links + .uf-dica {
  margin-top: 12px;
}

.ct-dados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px 20px;
  margin: 0;
}

.ct-dados dt {
  color: var(--grafite);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ct-dados dd {
  margin: 4px 0 0;
}

.ct-sub {
  margin: 16px 0 8px;
  font-family: "Sora", sans-serif;
  font-size: 0.92rem;
}

.ct-sub:first-of-type {
  margin-top: 0;
}

.ct-texto {
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  background: #0d0d0d;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.ct-links-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.ct-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.ct-img {
  margin: 0;
}

.ct-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #111;
}

.ct-img figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
}

.ct-img figcaption form {
  margin: 0;
}

.ct-comentar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}

.ct-historico summary {
  list-style: none;
  cursor: pointer;
}

.ct-historico summary::-webkit-details-marker {
  display: none;
}

.ct-historico[open] summary .painel-head {
  margin-bottom: 14px;
}

.ct-historico ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
}

.ct-ajuste-texto {
  margin: 4px 0 0;
  color: #e6e6e6;
  font-style: italic;
}

/* Coluna lateral: status e etapas */

.ct-status-topo .av-tag {
  padding: 4px 12px;
  font-size: 0.8rem;
}

.ct-status-texto {
  margin: 10px 0 14px;
  color: #d6d6d6;
  font-size: 0.88rem;
  line-height: 1.5;
}

.ct-status-acoes {
  display: grid;
  gap: 10px;
}

.ct-status-acoes form {
  margin: 0;
}

.ct-status-acoes .ghost-btn,
.ct-status-acoes button {
  width: 100%;
  text-align: center;
}

.ct-status-acoes button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.ct-falta {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 218, 0, 0.08);
  color: var(--amarelo);
  font-size: 0.8rem;
  line-height: 1.45;
}

.ct-ajuste-inline summary {
  list-style: none;
  cursor: pointer;
}

.ct-ajuste-inline summary::-webkit-details-marker {
  display: none;
}

.ct-ajuste-inline[open] summary {
  margin-bottom: 10px;
}

.ct-ajuste-inline form {
  gap: 10px;
}

.ct-publicar {
  gap: 10px;
}

.ct-etapas {
  display: grid;
  gap: 4px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.ct-etapa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--borda);
}

.ct-etapa:last-child {
  border-bottom: none;
}

.ct-etapa form {
  margin: 0;
}

.ct-etapa-texto {
  display: grid;
  gap: 3px;
  justify-items: start;
  font-size: 0.86rem;
}

.ct-etapa-feita .ct-etapa-texto strong {
  color: var(--grafite);
  text-decoration: line-through;
}

/* A caixa de marcar é um botão (cada etapa é um <form>), como no Refino:
   funciona sem script. */
button.ct-etapa-caixa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1.5px solid #555;
  border-radius: 6px;
  background: transparent;
  color: #000;
  font-size: 0.8rem;
  font-weight: 700;
}

button.ct-etapa-caixa:hover {
  border-color: var(--amarelo);
  filter: none;
}

button.ct-etapa-caixa[aria-pressed="true"] {
  border-color: var(--amarelo);
  background: var(--amarelo);
}

button.ct-etapa-caixa[disabled] {
  cursor: default;
}

.ct-nova-etapa summary::-webkit-details-marker {
  display: none;
}

.ct-nova-etapa summary {
  list-style: none;
  padding: 8px 0 0;
  color: var(--amarelo);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.ct-nova-etapa form {
  gap: 10px;
  margin-top: 10px;
}

/* --- Aprovações --- */

.ct-aprovar-lista {
  display: grid;
  gap: 16px;
}

.ct-aprovar {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--amarelo);
  border-radius: 18px;
}

.ct-aprovar-capa {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background: #1f1f1f;
  color: var(--grafite);
  font-size: 0.8rem;
  text-decoration: none;
}

.ct-aprovar-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct-aprovar-corpo h3 {
  margin: 0 0 4px;
  font-family: "Unbounded", sans-serif;
  font-size: 1rem;
}

.ct-aprovar-corpo h3 a {
  text-decoration: none;
}

.ct-aprovar-corpo .ct-meta {
  margin: 2px 0;
}

.ct-aprovar-legenda {
  margin: 10px 0 0;
  color: #cfcfcf;
  font-size: 0.86rem;
  line-height: 1.5;
}

.ct-aprovar-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.ct-aprovar-acoes form {
  margin: 0;
}

.ct-aprovar-acoes button {
  width: auto;
  padding: 9px 22px;
  font-size: 0.88rem;
}

.ct-aprovar .ct-ajuste-inline {
  margin-top: 10px;
}

.ct-aprovar .ct-ajuste-inline summary {
  color: #e66767;
  font-size: 0.86rem;
  font-weight: 600;
}

/* --- Tarefas --- */

.ct-ajustes {
  border-color: rgba(230, 103, 103, 0.45);
}

.ct-ajustes-lista {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-ajustes-lista li {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-left: 3px solid #e66767;
  border-radius: 8px;
  background: rgba(230, 103, 103, 0.06);
}

.ct-filtro-pessoa {
  display: flex;
  align-items: end;
  gap: 12px;
  max-width: 420px;
  margin-bottom: 18px;
}

.ct-filtro-pessoa .uf-campo {
  flex: 1;
}

button.ct-concluir {
  width: auto;
  padding: 6px 14px;
  font-size: 0.8rem;
}

/* --- Tela estreita --- */

@media (max-width: 1100px) {
  .ct-aprovar {
    grid-template-columns: 110px minmax(0, 1fr);
  }
}

/* No celular, a grade de 7 colunas vira a agenda do mês: só os dias com
   post (e hoje), um embaixo do outro, com o dia da semana escrito. Sete
   colunas de 40px não cabem o título de post nenhum. */
@media (max-width: 760px) {
  /* Setas + "Outubro de 2026" + "Este mês" passam de 330px: sem quebrar,
     a barra empurrava a página inteira para fora da tela. */
  .ct-barra {
    padding: 12px;
  }

  .ct-periodo {
    flex-wrap: wrap;
  }

  .ct-periodo strong {
    min-width: 0;
  }

  .ct-mes {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-mes-cab,
  .ct-dia-fora,
  .ct-dia-vazio:not(.ct-dia-hoje) {
    display: none;
  }

  .ct-dia {
    min-height: 0;
  }

  .ct-dia-sem {
    display: inline;
    color: var(--grafite);
  }

  .ct-semana {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-semana-dia {
    min-height: 0;
  }

  .ct-link-linha,
  .ct-comentar {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-aprovar {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-aprovar-capa {
    max-width: 180px;
  }
}

/* --- Preview do post ao passar o mouse (desde 2026-10-01) ---------------
   No modelo do PodePostar: capa, status, trecho da legenda, o que já está
   pronto e as contagens. Nasce com display: none — é isso que segura o
   download da capa (loading="lazy") até alguém passar o mouse. Abre com um
   atraso curto, para não piscar um preview a cada cartão que o mouse
   atravessa a caminho de outro lugar. Fica aberto com o mouse em cima dele
   também (está dentro da mesma .ct-card-caixa). */

.ct-card-caixa {
  position: relative;
}

.ct-previa {
  display: none;
  position: absolute;
  z-index: 30;
  top: 0;
  width: 280px;
  overflow: hidden;
  background: #181818;
  border: 1px solid #333;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* A ponte invisível entre o cartão e o preview: sem ela, o mouse cai no
   vão de 8px e o preview fecha antes de chegar nele. */
.ct-previa::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
}

.ct-previa-dir { left: calc(100% + 8px); }
.ct-previa-dir::before { right: 100%; }
.ct-previa-esq { right: calc(100% + 8px); }
.ct-previa-esq::before { left: 100%; }
.ct-previa-cima { top: auto; bottom: 0; }

@media (hover: hover) {
  .ct-card-caixa:hover .ct-previa,
  .ct-card-caixa:focus-within .ct-previa {
    display: block;
    animation: ct-previa-entra 0.15s ease-out 0.25s backwards;
  }
}

@keyframes ct-previa-entra {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-card-caixa:hover .ct-previa,
  .ct-card-caixa:focus-within .ct-previa {
    animation: none;
  }
}

.ct-previa-midia {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 300px;
  width: 100%;
  background: #0d0d0d;
}

/* Sem imagem, só uma faixa com o formato: um retângulo 4:5 vazio seria o
   maior elemento do preview sem mostrar nada. */
.ct-previa-midia-vazia {
  aspect-ratio: auto;
  height: 110px;
}

.ct-previa-midia img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct-previa-sem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 16px;
  color: #e6e6e6;
  font-family: "Unbounded", sans-serif;
  font-size: 0.95rem;
  text-align: center;
}

.ct-previa-sem small {
  color: var(--grafite);
  font-family: "Sora", sans-serif;
  font-size: 0.75rem;
}

.ct-previa-formato {
  position: absolute;
  top: 8px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
}

.ct-previa-formato { left: 8px; z-index: 2; }

/* --- carrossel e vídeo dentro do preview --- */

.ct-previa-trilho,
.ct-previa-video {
  position: absolute;
  inset: 0;
}

.ct-previa-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 3;
}

/* As setas e as bolinhas só existem para o mouse: o preview inteiro é
   aria-hidden e fica fora da tabulação — ele é atalho, não caminho. Quem usa
   teclado ou leitor de tela abre o post, que tem tudo isto por escrito. */
.ct-previa-seta {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.15s ease;
}

.ct-previa-seta-esq { left: 6px; }
.ct-previa-seta-dir { right: 6px; }

.ct-previa-seta:hover { background: rgba(0, 0, 0, 0.85); }

.ct-previa-bolinhas {
  position: absolute;
  z-index: 4;
  bottom: 8px;
  left: 50%;
  display: flex;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
}

.ct-previa-bolinha {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.ct-previa-bolinha.ativa { background: var(--amarelo); }

/* O play aparece sobre a capa enquanto o vídeo não chega — e some assim que
   ele chega (o <video> entra depois dele e cobre tudo). */
.ct-previa-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.58);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ct-previa-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid #fff;
  transform: translate(-50%, -50%);
}

.ct-previa-corpo {
  display: grid;
  gap: 8px;
  padding: 12px 14px 12px;
}

.ct-previa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ct-previa-titulo {
  font-size: 0.9rem;
  line-height: 1.3;
}

.ct-previa-legenda {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #bdbdbd;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-line;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Os pontos: verde = pronto, cinza = falta. O rótulo está sempre escrito
   ao lado, então a cor não carrega o significado sozinha. */
.ct-previa-pontos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--grafite);
}

.ct-previa-pontos li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ct-previa-pontos li.ok {
  color: #e6e6e6;
}

.ct-ponto {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #4a4a4a;
}

.ct-previa-pontos li.ok .ct-ponto {
  background: #0ca30c;
}

.ct-previa-rodape {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--borda);
  color: var(--grafite);
  font-size: 0.78rem;
}

.ct-previa-rodape span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ct-previa-rodape svg {
  width: 15px;
  height: 15px;
}

.ct-previa-resp {
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- Tela do post no modelo do PodePostar (.ct-ed-*) -------------------
   Desde 2026-10-01, a pedido da Nayelle: prévia vertical à esquerda, quatro
   abas à direita (Tema, Conteúdos, Mídia, Legenda), cada uma com o próprio
   status, e o rodapé com o status do post, os atalhos e Anterior/Próximo.
   O roxo do PodePostar vira o amarelo da marca: é ele que diz "esta é a
   aba aberta". */

.ct-editor {
  margin-bottom: 22px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
}

.ct-ed-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--borda);
}

.ct-ed-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ct-ed-logo {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 7px;
  border: 1px solid #2f2f2f;
  border-radius: 50%;
  background: #000;
  object-fit: contain;
}

.ct-ed-nome {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ct-ed-cliente {
  color: var(--grafite);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ct-ed-titulo {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ct-ed-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ct-ed-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #333;
  border-radius: 10px;
  background: #0f0f0f;
  color: #eee;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

a.ct-ed-chip:hover {
  border-color: var(--amarelo);
}

.ct-ed-chip svg {
  width: 16px;
  height: 16px;
}

/* Publicação: data, formato, canais. Recolhida no post que já existe (a
   linha de resumo diz tudo), aberta no post novo e quando o servidor
   devolve erro — campo obrigatório escondido é campo que ninguém acha. */
.ct-ed-publicacao {
  padding: 0 24px;
  border-bottom: 1px solid var(--borda);
}

.ct-ed-publicacao summary,
.ct-ed-publicacao-lida {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}

.ct-ed-publicacao summary {
  list-style: none;
  cursor: pointer;
}

.ct-ed-publicacao summary::-webkit-details-marker {
  display: none;
}

.ct-ed-publicacao-lida {
  padding: 12px 24px;
}

.ct-ed-resumo {
  flex: 1;
  min-width: 0;
  color: #d6d6d6;
  font-size: 0.86rem;
}

.ct-ed-editar {
  color: var(--amarelo);
  font-size: 0.82rem;
  font-weight: 600;
}

.ct-ed-publicacao[open] .ct-ed-editar {
  visibility: hidden;
}

.ct-ed-pub-grade {
  padding: 4px 0 20px;
}

/* O campo de horário também precisa do esquema escuro, senão o relógio
   nativo sai preto sobre o campo preto (mesma armadilha do de data). */
.ct-ed-pub-grade input[type="time"] {
  color-scheme: dark;
}

/* --- corpo: prévia + abas --- */

.ct-ed-corpo {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 24px;
}

.ct-ed-previa {
  position: sticky;
  top: 20px;
}

/* O "celular": 9:16, a proporção do Reels e do Stories. Imagem de feed
   (4:5, 1:1) aparece inteira, com faixa preta em volta — cortar para
   preencher esconderia justamente a borda que a Administração precisa ver. */
.ct-celular {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid #2c2c2c;
  border-radius: 18px;
  background: #000;
}

.ct-celular-trilho {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sem script (sem setas nem bolinhas), a barra de rolagem é a única pista
     de que há mais arquivos: fica visível e fina. O arranjo é o mesmo do
     carrossel do Instagram na home. */
  scrollbar-width: thin;
}

/* Com o script, as setas e as bolinhas substituem a barra — e aí ela sai de
   dentro do quadro 9:16, onde cortava o pé da mídia. */
.ct-celular-ligado .ct-celular-trilho {
  scrollbar-width: none;
}

.ct-celular-ligado .ct-celular-trilho::-webkit-scrollbar {
  display: none;
}

.ct-celular-ligado + .ct-celular-dica {
  display: none;
}

.ct-celular-seta {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.15s ease;
}

.ct-celular-seta:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: var(--amarelo);
}

.ct-celular-seta-ant { left: 10px; }
.ct-celular-seta-prox { right: 10px; }

.ct-celular-pontos {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  left: 50%;
  display: flex;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
}

.ct-celular-ponto {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.ct-celular-ponto[aria-current="true"] {
  background: var(--amarelo);
}

/* O atributo `hidden` perde para o `display` das classes acima — a mesma
   armadilha que já custou tempo no carrossel do Instagram e no placar da
   apresentação do Código de Conduta. */
.ct-celular-seta[hidden],
.ct-celular-pontos[hidden] {
  display: none;
}

.ct-celular-item {
  position: relative;
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  height: 100%;
  scroll-snap-align: start;
}

.ct-celular-item img,
.ct-celular-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ct-celular-n {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.7);
  font-size: 11px;
  font-weight: 600;
}

.ct-celular-vazio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  background: #1b1d22;
  color: #c4c4c4;
  font-size: 0.95rem;
  cursor: pointer;
}

.ct-celular-vazio svg {
  width: 44px;
  height: 44px;
  color: #8b8b8b;
}

.ct-celular-vazio:hover {
  color: #fff;
}

.ct-celular-dica {
  margin: 8px 0 0;
  text-align: center;
}

/* "Ver Capa": nasce hidden no HTML e quem o acende é o conteudo.js, porque
   quem recorta o quadro é o <canvas> do navegador. */
.ct-ver-capa {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.ct-ver-capa:hover {
  border-color: var(--amarelo);
  color: var(--amarelo);
}

.ct-celular-item.escolhendo-capa .ct-ver-capa {
  display: none;
}

.ct-capa-barra {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  left: 10px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #2c2c2c;
  border-radius: 14px;
  background: rgba(10, 10, 10, 0.94);
  text-align: center;
}

.ct-capa-barra p {
  margin: 0;
  color: #e6e6e6;
  font-size: 0.78rem;
}

.ct-capa-sair {
  padding: 2px;
  border: 0;
  background: none;
  color: var(--grafite);
  font-size: 0.76rem;
  cursor: pointer;
}

.ct-capa-sair:hover {
  color: #fff;
}

/* As quatro abas viram quatro cartões, como no PodePostar. O seletor de
   "aba aberta" repete o do mecanismo (.av-aba-radio...) com .ct-ed-abas na
   frente: só assim vence o fundo amarelo cheio da pílula padrão. */
.ct-ed-abas .av-abas-botoes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.ct-ed-abas .av-aba-botao {
  flex-direction: column;
  gap: 7px;
  padding: 14px 8px 12px;
  border: 1.5px solid #2c2c2c;
  border-radius: 14px;
  background: #101010;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

.ct-ed-abas .av-aba-botao:hover {
  border-color: #555;
}

.ct-ed-abas .av-aba-radio:nth-of-type(1):checked ~ .av-abas-botoes .av-aba-botao:nth-child(1),
.ct-ed-abas .av-aba-radio:nth-of-type(2):checked ~ .av-abas-botoes .av-aba-botao:nth-child(2),
.ct-ed-abas .av-aba-radio:nth-of-type(3):checked ~ .av-abas-botoes .av-aba-botao:nth-child(3),
.ct-ed-abas .av-aba-radio:nth-of-type(4):checked ~ .av-abas-botoes .av-aba-botao:nth-child(4) {
  border-color: var(--amarelo);
  background: #17150a;
  color: #fff;
  box-shadow: 0 0 0 1px var(--amarelo);
}

/* --- a pílula de status da aba, que é um menu --- */

/* O <details> mora DENTRO do <label> da aba. Isso é de propósito: <summary> e
   <button> são conteúdo interativo, então o navegador não repassa o clique
   deles para o radio da aba — abrir o menu não troca de aba, e clicar na
   pílula de outra aba abre as duas coisas, que é o que se espera.

   O menu é absoluto e nenhum ancestral pode ter overflow, senão ele sai
   cortado dentro do cartão da aba. */
.ct-selo {
  display: inline-flex;
}

.ct-selo-menu {
  position: relative;
}

.ct-selo-gatilho {
  cursor: pointer;
  list-style: none;
}

.ct-selo-gatilho::-webkit-details-marker {
  display: none;
}

.ct-selo-opcoes {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: 50%;
  display: grid;
  width: 212px;
  padding: 6px;
  border: 1px solid #2c2c2c;
  border-radius: 14px;
  background: #121212;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  text-align: left;
  transform: translateX(-50%);
}

.ct-selo-op {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
}

.ct-selo-op small {
  color: var(--grafite);
  font-size: 0.72rem;
  font-weight: 400;
  white-space: normal;
}

button.ct-selo-op {
  cursor: pointer;
}

button.ct-selo-op:hover {
  background: #1c1c1c;
}

.ct-selo-op-atual {
  background: #17150a;
  box-shadow: inset 0 0 0 1px var(--amarelo);
}

/* Opção que a regra não permite fica apagada DIZENDO o motivo, em vez de
   sumir: menu que muda de tamanho conforme quem olha faz a pessoa procurar o
   que nunca esteve ali. */
.ct-selo-op-off {
  color: #6b6b6b;
}

.ct-selo-op-off small {
  color: #5a5a5a;
}

/* --- topo de cada aba: status e ações dela --- */

.ct-secao-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 18px;
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: #0f0f0f;
}

.ct-secao-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #d0d0d0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.ct-secao-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ct-secao-acoes form {
  margin: 0;
}

button.ct-btn-mini,
.ct-btn-mini {
  width: auto;
  padding: 7px 14px;
  font-size: 0.82rem;
}

/* O pedido de ajuste abre numa caixa flutuante, ancorada no botão: aberta
   no fluxo, ela empurraria a aba inteira para baixo. */
.ct-secao-ajuste {
  position: relative;
}

.ct-secao-ajuste[open] .ct-secao-ajuste-caixa {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  width: min(360px, 80vw);
  padding: 14px;
  border: 1px solid #333;
  border-radius: 12px;
  background: #141414;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.ct-secao-ajuste-caixa .ghost-btn {
  justify-self: start;
}

.ct-aba-campos {
  display: grid;
  gap: 18px;
}

.ct-refs {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.ct-refs legend {
  margin-bottom: 8px;
  padding: 0;
}

.uf-campo .ct-leitura,
.ct-leitura {
  margin: 0;
  color: #f0f0f0;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

.uf-campo .ct-links-lista {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* --- aba Mídia --- */

.ct-externa summary {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-left: auto;
  color: #e6e6e6;
  font-size: 0.9rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.ct-externa summary:hover {
  color: var(--amarelo);
}

.ct-externa summary::-webkit-details-marker {
  display: none;
}

.ct-externa summary svg {
  width: 16px;
  height: 16px;
}

.ct-externa-caixa {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: #0f0f0f;
}

.ct-externa,
.ct-externa-lida {
  margin-bottom: 16px;
}

.ct-externa-lida {
  display: grid;
  gap: 8px;
}

.ct-midia-contagem {
  margin: 0 0 12px;
}

.ct-ed-abas .ct-galeria {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-bottom: 18px;
}

.ct-img-quadro {
  position: relative;
  display: block;
}

.ct-img video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #111;
}

/* O "play" desenhado sobre a miniatura do vídeo: sem ele, um quadro de
   vídeo parado é indistinguível de uma foto. */
.ct-img-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ct-img-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #fff;
  transform: translate(-50%, -50%);
}

.ct-img-selos {
  display: inline-flex;
  gap: 6px;
}

.ct-img-nome {
  width: 100%;
  overflow: hidden;
  color: #cfcfcf;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-img-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
}

/* A área de soltar arquivos. O <input type="file"> cobre a caixa inteira,
   invisível: clicar abre o seletor e soltar arquivos em cima funciona no
   próprio navegador, sem script. O script só acende a borda e lista o que
   foi escolhido. */
.ct-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 32px 20px 24px;
  border: 1.5px dashed #3a3a3a;
  border-radius: 14px;
  background: #0f0f0f;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.ct-drop:hover,
.ct-drop:focus-within,
.ct-drop.arrastando {
  border-color: var(--amarelo);
  background: #14130b;
}

.uf .ct-drop input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.ct-drop-icone svg {
  width: 46px;
  height: 46px;
  color: #d6d6d6;
}

.ct-drop-titulo {
  font-size: 1.02rem;
}

.ct-drop-sub {
  color: var(--grafite);
  font-size: 0.84rem;
}

.ct-drop-regras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 250px));
  gap: 12px;
  margin-top: 12px;
  text-align: left;
}

.ct-drop-regras > div {
  padding: 12px 14px;
  border: 1px solid #2c2c2c;
  border-radius: 10px;
  background: #141414;
  font-size: 0.82rem;
}

.ct-drop-regras ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #cfcfcf;
  line-height: 1.6;
}

/* A lista do que foi escolhido (montada pelo script). `[hidden]` precisa de
   regra própria: o display: grid da classe venceria o atributo. */
.ct-drop-lista {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ct-drop-lista[hidden] {
  display: none;
}

.ct-drop-lista li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: #0f0f0f;
  font-size: 0.85rem;
}

.ct-drop-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 6px;
  background: #222;
  color: #d6d6d6;
  font-size: 0.7rem;
  font-weight: 600;
}

.ct-drop-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct-drop-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-drop-lista .ct-drop-erro {
  color: #e66767;
}

.ct-drop + .ct-drop-lista + .uf-dica,
.ct-drop + .ct-drop-lista[hidden] + .uf-dica {
  margin-top: 10px;
}

.ct-legenda-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* --- envio em andamento (vídeo grande leva tempo) --- */

.ct-ed-progresso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px 14px;
  color: #d6d6d6;
  font-size: 0.85rem;
}

.ct-ed-progresso[hidden] {
  display: none;
}

.ct-ed-progresso-trilho {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #2a2600;
}

.ct-ed-progresso-trilho span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--amarelo);
}

/* --- rodapé: Anterior | status, atalhos, salvar | Próximo ---
   Preso ao pé da tela enquanto se rola o editor (mesma ideia da .uf-barra):
   o "Salvar" fica sempre à vista. */
.ct-ed-rodape {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-top: 1px solid var(--borda);
  border-radius: 0 0 18px 18px;
  background: var(--painel);
}

.ct-ed-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.ct-ed-nav svg {
  width: 18px;
  height: 18px;
}

a.ct-ed-nav:hover {
  color: var(--amarelo);
}

.ct-ed-nav-dir {
  justify-self: end;
}

.ct-ed-nav-off {
  color: #474747;
}

.ct-ed-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #333;
  border-radius: 14px;
  background: #0f0f0f;
}

.ct-ed-sep {
  width: 1px;
  height: 24px;
  background: #333;
}

.ct-ed-icone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 8px;
  color: #d6d6d6;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.ct-ed-icone svg {
  width: 20px;
  height: 20px;
}

.ct-ed-icone:hover {
  background: #1a1a1a;
  color: var(--amarelo);
}

.ct-ed-perigo {
  color: #e66767;
}

.ct-ed-barra button {
  width: auto;
  padding: 9px 16px;
  font-size: 0.86rem;
}

.ct-ed-baixo {
  margin-top: 4px;
}

/* --- status das abas (quadro de status e fila de aprovações) --- */

.ct-status-abas {
  display: grid;
  gap: 2px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.ct-status-abas li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 0.86rem;
}

.ct-status-abas li:last-child {
  border-bottom: 0;
}

.ct-aprovar-corpo .ct-status-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 12px;
}

.ct-aprovar-corpo .ct-status-abas li {
  gap: 6px;
  padding: 0;
  border: 0;
}

/* Pontos do preview do calendário: a cor é a do status da aba, e o nome
   dela está sempre escrito ao lado. */
.ct-previa-pontos li.preenchida,
.ct-previa-pontos li.aguarda,
.ct-previa-pontos li.ajuste {
  color: #e6e6e6;
}

.ct-previa-pontos li.preenchida .ct-ponto {
  background: #bdbdbd;
}

.ct-previa-pontos li.aguarda .ct-ponto {
  background: var(--amarelo);
}

.ct-previa-pontos li.ajuste .ct-ponto {
  background: #e66767;
}

@media (max-width: 1100px) {
  .ct-ed-corpo {
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: 20px;
  }
}

/* Tablet e celular: a prévia sobe para cima das abas, as abas viram 2x2 e
   a barra de ações ocupa uma linha só dela. */
@media (max-width: 860px) {
  .ct-ed-corpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-ed-previa {
    position: static;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  .ct-ed-abas .av-abas-botoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ct-ed-rodape {
    grid-template-columns: 1fr 1fr;
  }

  .ct-ed-barra {
    grid-column: 1 / -1;
    order: -1;
  }

  .ct-drop-regras {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
}

@media (max-width: 560px) {
  .ct-ed-topo,
  .ct-ed-corpo,
  .ct-ed-rodape,
  .ct-ed-publicacao-lida {
    padding-left: 14px;
    padding-right: 14px;
  }

  .ct-ed-publicacao {
    padding: 0 14px;
  }

  .ct-ed-progresso {
    padding: 0 14px 12px;
  }
}

/* Tarefa M4 — Prêmios: telas da pessoa e Loja. */
.pr-nivel { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.pr-nivel > div { flex: 1; min-width: 0; }
.pr-aro { width: 56px; height: 56px; color: var(--accent); flex: 0 0 56px; }
.pr-aro svg { width: 100%; height: 100%; }
.pr-loja { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 20px; }
.pr-premio { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow-wrap: anywhere; }
.pr-premio-livre { border-color: var(--accent); }
.pr-premio-topo { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pr-custo { font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.pr-custo small { font-size: .8rem; }
.pr-premio h2 { font-size: 1.1rem; }
.pr-premio p, .pr-detalhe { color: var(--muted); }
.pr-resgatar { margin-top: 20px; }
.pr-resgatar form { margin-top: 16px; }
.pr-bloqueio { border-top: 1px solid var(--line); padding-top: 16px; }
.pr-regras li { margin-bottom: 12px; }

/* Tarefa M2 — Mural: feed, fotos privadas e moderação. */
.mural-post { min-width: 0; padding: 22px; margin: 18px 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow-wrap: anywhere; }
.mural-post-head, .mural-acoes, .mural-filtros, .mural-paginas, .mural-rodape, .mural-moderar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mural-post-head > div { flex: 1; min-width: 0; }
.mural-meta { display: block; color: var(--muted); font-size: .8rem; }
.mural-avatar { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; background: var(--accent); color: #111; border-radius: 50%; font-weight: 700; }
.mural-cat { color: var(--accent); font-size: .8rem; }
.mural-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.mural-foto { margin: 18px 0; }
.mural-foto img, .mural-previa { display: block; width: 100%; max-height: 650px; object-fit: contain; border-radius: 12px; }
.mural-previa[hidden] { display: none; }
.mural-comentarios { list-style: none; padding: 0; }
.mural-comentarios li { padding: 12px 0; border-top: 1px solid var(--line); }
.mural-comentar { display: flex; gap: 10px; align-items: center; }
.mural-comentar input { flex: 1; min-width: 0; margin: 0; }
.mural-comentar button, .mural-inline button, .mural-acoes button { width: auto; margin: 0; }
.mural-curtir { display: flex; align-items: center; gap: 8px; }
.mural-curtir svg { width: 20px; height: 20px; }
.mural-curtir[aria-pressed="true"] { color: var(--accent); }
.mural-moderar > form { flex: 1; min-width: 0; }
.mural-publicar textarea, .mural-publicar select { width: 100%; box-sizing: border-box; margin-bottom: 18px; }
.mural-publicar summary { cursor: pointer; font-weight: 700; }
.mural-combinado { font-size: .9rem; margin: 18px 0; }
.mural-mini-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.mural-mini { display: block; min-width: 0; overflow-wrap: anywhere; }
.mural-mini img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 12px; }
@media (max-width: 760px) { .mural-post { padding: 16px; } .mural-moderar { display: block; } .mural-comentar { flex-wrap: wrap; } .mural-comentar button { width: 100%; } }

/* Tarefa M4 — limites da página e variáveis da paleta do portal. */
.pr-pagina { min-width: 0; overflow-wrap: anywhere; --accent: var(--amarelo); --line: var(--borda); --panel: var(--painel); --muted: var(--grafite); }
.pr-pagina .quadro-head > *, .pr-pagina .painel-head > * { min-width: 0; }
.pr-pagina .quadro-texto { flex: 1; }
.pr-pagina .pr-regras ul { padding-left: 22px; }

/* Tarefa M4 — o título Regulamento cabe também no menu recolhido a 390 px. */
.content:has(.pr-pagina) .page-header h1 { overflow-wrap: anywhere; }

/* Tarefa M4 — leitura no celular: título único e tabelas com rolagem própria. */
.pr-pagina { overflow-wrap: normal; }
.pr-pagina .tabela-portal { min-width: 560px; }
.pr-pagina .pr-detalhe { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .content:has(.pr-pagina) .page-header h1 { font-size: 1.5rem; }
}

/* Tarefa M2 — campos do Mural seguem os painéis do portal. */
.mural-publicar textarea, .mural-publicar select {
  padding: 12px 14px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}
.mural-publicar textarea { resize: vertical; min-height: 110px; }

/* Tarefa M2 — cores locais usam as variáveis da marca já existentes. */
.content:has(.mural-publicar), .mural-home {
  --accent: var(--amarelo);
  --line: var(--borda);
  --panel: var(--painel);
  --muted: var(--grafite);
  --text: #fff;
}

/* Tarefa M2 — categoria em linha própria preserva a leitura do autor no celular. */
@media (max-width: 760px) {
  .mural-post-head > div { flex-basis: calc(100% - 52px); }
  .mural-post-head > .mural-cat { flex-basis: 100%; }
}

/* Tarefa M5 — Administração de Prêmios: tabelas e formulários no celular. */
.pr-admin-pagina { min-width: 0; }
.pr-admin-pagina .tabela-portal { min-width: 680px; }
.pr-admin-pagina .pr-admin-acao { min-width: 180px; margin-bottom: 12px; }
.pr-admin-pagina .pr-admin-acao button { width: 100%; }
.pr-admin-pagina .uf { margin-top: 20px; }
.pr-admin-pagina textarea { width: 100%; min-height: 90px; resize: vertical; }
.pr-admin-pagina select, .pr-admin-pagina textarea {
  padding: 12px 14px; color: #fff; background: var(--painel);
  border: 1px solid var(--borda); border-radius: 10px; font: inherit;
}
.pr-admin-pagina .painel-acoes { margin-bottom: 20px; }
@media (max-width: 560px) {
  .content:has(.pr-admin-pagina) .page-header h1 { font-size: 1.5rem; overflow-wrap: anywhere; }
}

/* Tarefa S7 — feed do Instagram: carrossel sem avanço automático. */
.home-section-insta { min-width: 0; }
.insta-feed { background: var(--painel); border: 1px solid var(--borda); border-radius: 18px; padding: 22px 24px 16px; min-width: 0; }
.insta-feed-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.insta-feed-perfil { display: flex; align-items: center; gap: 16px; min-width: 0; color: #fff; text-decoration: none; }
.insta-feed-avatar { flex: 0 0 auto; width: 64px; height: 64px; padding: 3px; border-radius: 50%; background: linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); }
.insta-feed-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--painel); background: #000; object-fit: cover; }
.insta-feed-nome { font-size: 1.15rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insta-feed-perfil:hover .insta-feed-nome { color: var(--amarelo); }
.insta-feed-head .ghost-btn { flex: 0 0 auto; }
.insta-feed .quadro-vazio { margin: 0 0 6px; }
.insta-carrossel { position: relative; container-type: inline-size; }
.insta-trilho { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% / 7); overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 10px; scrollbar-width: thin; scrollbar-color: var(--borda) transparent; }
.insta-carrossel-ligado .insta-trilho { scrollbar-width: none; }
.insta-carrossel-ligado .insta-trilho::-webkit-scrollbar { display: none; }
.insta-trilho:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; }
@container (max-width: 1100px) { .insta-trilho { grid-auto-columns: calc(100% / 5); } }
@container (max-width: 820px) { .insta-trilho { grid-auto-columns: calc(100% / 4); } }
@container (max-width: 600px) { .insta-trilho { grid-auto-columns: calc(100% / 3); } }
@container (max-width: 420px) { .insta-trilho { grid-auto-columns: calc(100% / 2); } }
.insta-post { scroll-snap-align: start; }
.insta-post a { position: relative; display: block; aspect-ratio: 5 / 7; overflow: hidden; background: #1a1a1a; }
.insta-post img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.insta-post a:hover img { transform: scale(1.04); }
.insta-post a:focus-visible { outline: 2px solid var(--amarelo); outline-offset: -2px; }
.insta-post-sem-capa { display: flex !important; align-items: flex-end; padding: 16px 14px; background: radial-gradient(circle at 30% 20%,rgba(255,218,0,.16),transparent 60%),linear-gradient(180deg,#1c1c1c,#0f0f0f) !important; color: #fff; text-decoration: none; }
.insta-post-legenda { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; font-size: .85rem; line-height: 1.45; }
.insta-post-sem-capa:hover .insta-post-legenda { color: var(--amarelo); }
.insta-post-tipo { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); pointer-events: none; }
.insta-post-tipo svg { width: 100%; height: 100%; }
.insta-seta { position: absolute; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff; cursor: pointer; transform: translateY(-50%); transition: background .15s,color .15s; }
.insta-seta svg { width: 22px; height: 22px; }
.insta-seta:hover,.insta-seta:focus-visible { background: var(--amarelo); color: #000; }
.insta-seta-ant { left: 10px; } .insta-seta-prox { right: 10px; }
.insta-seta[hidden],.insta-pontos[hidden] { display: none; }
.insta-pontos { display: flex; justify-content: center; gap: 2px; margin-top: 10px; }
.insta-ponto { display: flex; align-items: center; justify-content: center; width: 24px; height: 20px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.insta-ponto::after { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #4a4a4a; transition: width .15s,background .15s; }
.insta-ponto[aria-current="true"]::after { width: 18px; background: var(--amarelo); }
@media (prefers-reduced-motion: reduce) { .insta-post img,.insta-seta,.insta-ponto::after { transition: none; } .insta-post a:hover img { transform: none; } }
@media (max-width: 560px) { .insta-feed { padding: 16px 14px 12px; } .insta-feed-avatar { width: 48px; height: 48px; } .insta-feed-nome { font-size: 1rem; } .insta-seta { width: 34px; height: 34px; } }



/* S4: calendário — agenda, prontidão e correções de composição. */
.ct-mes-cab { display: contents; }
.ct-mes-cab span { text-align: center; color: var(--grafite); font-size: .8rem; padding: 2px 0 4px; }
.ct-card-caixa:hover, .ct-card-caixa:focus-within { z-index: 31; }
.ct-previa { overflow: visible; }
.ct-previa-midia { border-radius: 14px 14px 0 0; overflow: hidden; }
.ct-previa-tela[hidden] { display: none; }
.ct-previa-rodape { flex-wrap: wrap; gap: 8px 12px; }
.ct-previa-titulo, .ct-card-meta, .ct-feed-sem-capa { overflow-wrap: anywhere; }
.ct-previa-pontos li.preenchida, .ct-previa-pontos li.aguarda, .ct-previa-pontos li.ajuste { color: #e6e6e6; }
.ct-previa-pontos li.preenchida .ct-ponto { background: #bdbdbd; }
.ct-previa-pontos li.aguarda .ct-ponto { background: var(--amarelo); }
.ct-previa-pontos li.ajuste .ct-ponto { background: #e66767; }
.ct-meta { color: var(--grafite); font-size: .8rem; font-weight: 400; }
.ct-chips-aplicar { width: auto; margin: 0; }
.ct-chip-op span { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .ct-seta, .ct-chip-gatilho, .ct-chip-gatilho::after, .ct-dia-add, .ct-card, .ct-previa-seta { transition: none; }
}
@media (max-width: 1100px) { .ct-mes .ct-previa { display: none !important; } }
@media (max-width: 760px) {
  .ct-barra { padding: 12px; }
  .ct-periodo { flex-wrap: wrap; }
  .ct-periodo strong { min-width: 0; }
  .ct-mes, .ct-semana { grid-template-columns: minmax(0, 1fr); }
  .ct-mes-cab, .ct-mes-cab span, .ct-dia-fora:not(.ct-dia-hoje), .ct-dia-vazio:not(.ct-dia-hoje) { display: none; }
  .ct-dia, .ct-semana-dia { min-height: 0; }
  .ct-dia-sem { display: inline; color: var(--grafite); }
  .ct-semana-dia:not(:has(.ct-card-caixa)):not(.ct-dia-hoje) { display: none; }
  .ct-chip-lista { position: static; min-width: 0; max-width: 100%; margin-top: 6px; }
  .ct-chip[open] { flex-basis: 100%; }
  .ct-chips-acoes { margin-left: 0; }
  .ct-cabecalho { flex-wrap: wrap; }
}

/* S4: as quatro visões ficam visíveis sem barra de rolagem interna. */
.ct-visoes { overflow: visible; flex-wrap: wrap; }
.ct-visao { padding: 10px 12px; }
.ct-cabecalho { align-items: center; gap: 16px; }
.ct-cabecalho .subtitle { margin: 0; }

/* S5 (revisado em 2026-10-04): a tela do post usa o CSS completo do v1
   (.ct-ed-*, .ct-celular*, .ct-galeria, .ct-drop, .uf-*, mais acima neste
   arquivo). Aqui ficam só as peças do mecanismo de abas e do botão "Ver Capa"
   do v2, que dependem do HTML novo. */
.ct-editor { min-width: 0; }
.ct-ed-abas { min-width: 0; }
.ct-ed-abas .av-aba-radio { width: auto; padding: 0; margin: 0; position: absolute; opacity: 0; }
.ct-ed-abas .av-aba-painel { display: none; margin-top: 4px; }
.ct-ed-abas #av-aba-post-1:checked ~ [data-painel="tema"],
.ct-ed-abas #av-aba-post-2:checked ~ [data-painel="conteudos"],
.ct-ed-abas #av-aba-post-3:checked ~ [data-painel="midia"],
.ct-ed-abas #av-aba-post-4:checked ~ [data-painel="legenda"] { display: block; }
.ct-ed-abas:has(.av-aba-radio:focus-visible) .av-abas-barra { outline: 2px solid var(--amarelo); outline-offset: 4px; }
.ct-ed-abas input, .ct-ed-abas textarea, .ct-ed-pub-grade input, .ct-ed-pub-grade select { box-sizing: border-box; max-width: 100%; }
.ct-check { display: inline-flex; gap: 8px; align-items: center; margin-right: 12px; }
.ct-check input { width: auto; padding: 0; margin: 0; }
.ct-celular [hidden], .ct-editor [hidden] { display: none !important; }
.ct-ed-previa:not(:has(+ .ct-ed-abas #av-aba-post-3:checked)) .ct-ver-capa { display: none; }
.ct-editor .uf fieldset { min-width: 0; }

/* R4: filtros fixos e paginação da auditoria. */
.auditoria-filtros { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin: 24px 0; }
.auditoria-filtros label { flex: 1 1 180px; min-width: 0; margin: 0; }
.auditoria-filtros input, .auditoria-filtros select { width: 100%; margin: 6px 0 0; box-sizing: border-box; padding: 12px; border: 1px solid #444; border-radius: 8px; background: #151515; color: inherit; }
.auditoria-filtros button { width: auto; margin: 0; }
.auditoria-paginacao { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
@media (max-width: 760px) { .auditoria-filtros button, .auditoria-filtros .ghost-btn { width: 100%; } }


/* ---------- Respiro de ações soltas e Meus Aparelhos ----------
   REGRA: formulário/botão de ação que fica ENTRE boxes (ou logo depois de um
   texto) tem `--espaco-box` acima e abaixo; dentro de um box, 16px acima. */
.aparelhos-encerrar-outros {
  margin: var(--espaco-box) 0;
}

.info-panel > form {
  margin-top: 16px;
}

.aparelhos-conhecidos {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.aparelho-conhecido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--borda);
}

.aparelho-conhecido > span {
  flex: 1 1 320px;
  min-width: 0;
}

.aparelho-conhecido > form {
  flex: 0 0 auto;
  margin: 0;
}

/* Os comentários da tela do post reusam o avatar do Mural, cuja cor vem de
   variáveis que só existem dentro do Mural. */
.mural-comentario .mural-avatar {
  background: var(--amarelo);
  color: #111;
}


/* ---------- Segurança (segundo fator) ----------
   Hierarquia: título do box → resumo (estado e códigos) → "Gerenciar
   proteção" → ações recolhíveis, cada uma com título e consequência na linha
   de cima e o formulário dentro. O espaço entre blocos vem do próprio
   painel (24px), nunca de margem solta em cada elemento. */
.mfa-painel > * + * {
  margin-top: 24px;
}

.mfa-painel .painel-head {
  align-items: center;
}

.mfa-estado {
  margin-left: auto;
}

.mfa-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.mfa-resumo > div {
  padding: 14px 18px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--fundo);
}

.mfa-resumo dt {
  margin-bottom: 8px;
  color: var(--grafite);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mfa-resumo dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.mfa-subtitulo {
  margin: 32px 0 0;
  font-size: 1.05rem;
}

.mfa-painel .mfa-subtitulo + .mfa-explica {
  margin-top: 6px;
}

.mfa-painel .mfa-explica {
  max-width: 64ch;
  margin-bottom: 0;
  color: var(--grafite);
  line-height: 1.6;
}

.mfa-acoes {
  display: grid;
  gap: 12px;
}

.mfa-acao {
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--fundo);
}

.mfa-acao > summary {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 20px 16px 50px;
  cursor: pointer;
  list-style: none;
}

.mfa-acao > summary::-webkit-details-marker {
  display: none;
}

.mfa-acao > summary::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--grafite);
  border-bottom: 2px solid var(--grafite);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.mfa-acao[open] > summary::before {
  transform: rotate(45deg);
}

.mfa-acao > summary:hover .mfa-acao-titulo {
  color: var(--amarelo);
}

.mfa-acao-titulo {
  font-weight: 700;
}

.mfa-acao-texto {
  color: var(--grafite);
  font-size: 0.9rem;
  line-height: 1.5;
}

.mfa-acao[open] > summary {
  border-bottom: 1px solid var(--borda);
}

.mfa-acao-corpo {
  padding: 20px;
}

.mfa-acao-perigo .mfa-acao-titulo {
  color: #e66767;
}

.mfa-form .uf-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
  gap: 16px;
}

.mfa-form-acoes {
  margin-top: 20px;
}

.mfa-painel .mfa-nota {
  margin-bottom: 0;
  padding: 14px 18px;
  border-left: 3px solid var(--amarelo);
  border-radius: 8px;
  background: rgba(255, 218, 0, 0.06);
  color: #d6d6d6;
  line-height: 1.6;
}

.mfa-passos {
  margin: 0;
  padding-left: 20px;
  line-height: 1.9;
}

.mfa-configuracao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.mfa-qr {
  width: 208px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
}

.mfa-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.mfa-manual > * + * {
  margin-top: 14px;
}

.mfa-segredo {
  display: block;
  max-width: 28rem;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--fundo);
  font-size: 1rem;
  letter-spacing: 0.12em;
  overflow-wrap: anywhere;
}

.mfa-recuperacao {
  padding: 20px;
  border: 1px solid rgba(255, 218, 0, 0.35);
  border-radius: 14px;
  background: rgba(255, 218, 0, 0.06);
}

.mfa-recuperacao h3 {
  margin: 0 0 8px;
}

.mfa-recuperacao p {
  max-width: 64ch;
  margin: 0;
  line-height: 1.6;
}

.mfa-recuperacao ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.mfa-recuperacao code {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  letter-spacing: 0.1em;
  text-align: center;
}

@media (max-width: 700px) {
  .mfa-configuracao {
    grid-template-columns: minmax(0, 1fr);
  }
  .mfa-estado {
    margin-left: 0;
  }
}

/* REGRA DE CAMPO: campo de texto, senha, código ou seleção solto num box tem
   largura legível (28rem), não a do box inteiro. Campo em grade (`.uf`) ou
   com classe própria decide a largura pela grade. */
.info-panel form:not(.uf) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select) {
  max-width: 28rem;
}

.success {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(12, 163, 12, 0.45);
  border-radius: 8px;
  background: rgba(12, 163, 12, 0.1);
  color: #7fdc7f;
  font-size: 0.9rem;
}

.mfa-manual .uf input {
  max-width: 20rem;
}

/* REGRA DE RESPIRO do título: título de página seguido direto de um box (sem
   linha de apoio entre eles) não pode encostar nele. */
.page-header:has(+ :not(.content-header, .content-header-row, .subtitle)) {
  margin-bottom: 20px;
}

/* ----- Pendências do Administrador ---------------------------------------
   Uma linha por pendência, inteira clicável, com o aviso de urgência à
   direita. Reusa boxes, ladrilhos e pílulas do resto do portal; só a linha é
   nova. Texto corrido com largura de leitura (regra de ritmo do portal). */
.pend-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.pend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 4px;
  border-top: 1px solid #2c2c2a;
  color: inherit;
  text-decoration: none;
}
.pend-lista li:first-child .pend-item { border-top: 0; }
.pend-item:hover, .pend-item:focus-visible { background: rgba(255, 218, 0, 0.05); }
.pend-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pend-apoio { color: var(--grafite); font-size: 0.85rem; line-height: 1.5; max-width: 64ch; }
.pend-item .av-tag { flex: none; }
.info-panel p.pend-abrir { margin: 0; font-size: 0.9rem; }
.pend-falha { border-color: rgba(230, 103, 103, 0.45); }
.pend-vazio p { margin: 0; }
.painel-head > .av-tag { margin-left: auto; }