/* ============================================================
   UNDIM — Autoestudo (Aprendizado Ativo) dentro do site
   O motor traz o próprio CSS, que entra inline em cada página de
   autoestudo/ restrito a .ae (ferramentas/publicar-autoestudo.py).
   Este arquivo vem depois e faz duas coisas: troca a paleta do
   motor pela da marca e encaixa o cabeçalho compacto, a faixa de
   identificação e os cartões. A página é só o conteúdo, como um
   slide: sem nav, Contato ou rodapé do site. Os cartões são pérola com texto navy, como
   a marca pede para fundos claros; o que fica fora de cartão é
   pérola sobre o navy, como o resto do site.
   ============================================================ */

.ae {
  /* paleta do motor, remapeada para a marca */
  --roxo: var(--navy-800);
  --coral: var(--red-bright);     /* marcador da aba ativa, sobre o navy */
  --coral-texto: var(--red);      /* erro, sobre fundo claro (6,4:1) */
  --lilas: var(--navy-600);
  --verde: #8fd3b4;               /* rótulos e etiqueta sobre o navy */
  --verde-escuro: #066d73;        /* acerto e teoria, sobre fundo claro */
  --cinza-escuro: #8a95a5;
  --cinza-medio: #ccd3dc;
  --cinza-claro: #e3e7ed;
  --branco: var(--pearl);
  --texto-suave: #4b5b73;
  --ambar: #9a5b00;
  --fundo: transparent;
  --texto: var(--navy-800);

  background: transparent;
  color: var(--pearl);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color-scheme: light;
  min-height: 0;
}
.ae a { text-decoration: underline; text-underline-offset: 3px; }
.ae ol { list-style: decimal; padding-left: 21px; }
.ae ul { list-style: disc; padding-left: 21px; }

/* ─── CABEÇALHO COMPACTO: logotipo, título e abas, grudado no topo ─ */
.ae header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px 0 0;
  background: var(--navy-900);
  color: var(--pearl);
  border-bottom: 1px solid var(--border);
}
.ae .cabeca { align-items: center; }
.ae .cabeca h1 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 19px; letter-spacing: -0.01em; }
.ae .cabeca .sub { color: var(--pearl-dim); }
.ae .ae-marca { display: block; line-height: 0; }
.ae .ae-marca img { height: 18px; width: auto; display: block; }
.ae nav button { color: var(--pearl-dim); font-family: var(--font-sans); }
.ae nav button:hover { color: var(--pearl); background: rgba(245, 242, 236, 0.08); }
.ae nav button[aria-selected="true"] {
  color: var(--pearl);
  background: rgba(245, 242, 236, 0.10);
  border-bottom-color: var(--red-bright);
}
.ae nav button .sel { color: var(--verde); }
.ae nav button .sel.vazio { color: var(--pearl-dim); }
.ae nav button:focus-visible { outline-color: var(--red-bright); }
.ae .cabeca .dica { color: var(--pearl-dim); }
.ae .ae-prof {
  font-size: 12px; color: var(--pearl-dim); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 2px 10px;
}
.ae .ae-prof:hover { color: var(--navy-800); background: var(--pearl); }
@media (max-width: 760px) { .ae .cabeca .ae-prof { margin-left: auto; } }

/* ─── FAIXA DE IDENTIFICAÇÃO E ÁREA PRINCIPAL ───────────────── */
.ae .quem { max-width: none; margin: var(--space-2) 0 0; padding: 0; }
.ae .quem .cx {
  background: var(--navy-700);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ae .quem input {
  background: rgba(10, 26, 46, 0.55);
  border-color: var(--border-strong);
  color: var(--pearl);
  border-radius: var(--radius-sm);
}
.ae .quem input::placeholder { color: var(--pearl-dim); }
.ae .quem button {
  border-color: var(--border-strong);
  color: var(--pearl);
  border-radius: var(--radius-pill);
}
.ae .quem button:hover { background: var(--pearl); color: var(--navy-800); }
.ae .quem .etiq, .ae .quem .nota { color: var(--pearl-dim); }
.ae .quem .etiq b, .ae .quem .nota b { color: var(--pearl); }
.ae .quem .etiq b { color: var(--verde); }
.ae #main { padding: var(--space-2) 0 var(--space-5); }

/* ─── TÍTULO E OBJETIVO DA ABA: fora de cartão, sobre o navy ─── */
.ae .painel h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--lh-snug);
  color: var(--pearl);
  margin: var(--space-1) 0 4px;
}
.ae .painel .obj { color: var(--pearl-dim); font-size: 15px; margin: 0 0 var(--space-2); }

/* ─── CARTÕES: pérola com texto navy ────────────────────────── */
.ae .palco, .ae .teoria, .ae .anim, .ae .marcos, .ae .caixa, .ae .leit,
.ae .tab, .ae details, .ae .volta { color: var(--texto); }
.ae .anim canvas, .ae .svgcx { background: #fff; }
.ae .anim .rot { color: var(--navy-600); }
.ae .alt:has(input:checked) { background: #e9eef5; }
.ae th { background: #ebe8e1; }
.ae .pt.meio, .ae .cel.m { background: #fbf1dc; }

/* ─── BOTÕES: pill, como no resto do site ───────────────────── */
.ae .bt {
  background: var(--red);
  border-color: var(--red);
  color: var(--pearl);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-weight: var(--fw-medium);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.ae .bt:hover { background: var(--red-deep); border-color: var(--red-deep); transform: translateY(-1px); }
.ae .bt:disabled { transform: none; }
.ae .bt.claro { background: transparent; color: var(--navy-800); border-color: var(--navy-600); }
.ae .bt.claro:hover { background: var(--navy-800); color: var(--pearl); border-color: var(--navy-800); }

/* ─── CÓDIGO DA ABA: navy elevado, como a faixa ─────────────── */
.ae .cod { background: var(--navy-700); border: 1px solid var(--border); color: var(--pearl); }
.ae .cod .rot { color: var(--verde); }
.ae .cod .frase { background: rgba(10, 26, 46, 0.55); }
.ae .cod button { border-color: var(--border-strong); color: var(--pearl); border-radius: var(--radius-pill); }
.ae .cod button:hover { background: var(--pearl); color: var(--navy-800); }
.ae .cod .obs { color: var(--pearl-dim); }
.ae .cod .obs b { color: var(--pearl); }

/* ─── ESTADO DO ENVIO AO PROFESSOR (js/autoestudo-envio.js) ─── */
.ae .ae-envio {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 10px 0 0; font-size: 13px; color: var(--pearl-dim);
}
.ae .ae-envio::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--pearl-dim);
}
.ae .ae-envio[data-estado="enviado"] { color: var(--verde); }
.ae .ae-envio[data-estado="enviado"]::before { background: var(--verde); }
.ae .ae-envio[data-estado="enviando"]::before { animation: ae-pulsa 1s ease-in-out infinite; }
.ae .ae-envio[data-estado="pendente"] { color: #ffb0b0; }
.ae .ae-envio[data-estado="pendente"]::before { background: var(--red-bright); }
@keyframes ae-pulsa { 50% { opacity: 0.25; } }
.ae .ae-reenvia {
  font: inherit; font-size: 12.5px; padding: 3px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: transparent; color: var(--pearl);
}
.ae .ae-reenvia:hover { background: var(--pearl); color: var(--navy-800); }
.ae .ae-reenvia:disabled { opacity: 0.5; }
.ae .ae-envio-resumo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: calc(-1 * var(--space-1)) 0 var(--space-2); font-size: 14px; color: var(--pearl-dim);
}
.ae .ae-envio-resumo:empty { display: none; }
.ae td.ae-envio-cel { white-space: nowrap; font-size: 13px; color: var(--texto-suave); }
.ae td.ae-envio-cel[data-estado="enviado"] { color: var(--verde-escuro); font-weight: 600; }
.ae td.ae-envio-cel[data-estado="pendente"] { color: var(--coral-texto); font-weight: 600; }

/* ─── RODAPÉ DA ATIVIDADE ───────────────────────────────────── */
.ae .ae-rodape {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  padding-bottom: var(--space-5); font-size: 12.5px; color: var(--pearl-dim);
}

@media print {
  .ae { color: #000; }
  .ae .painel h2, .ae .painel .obj { color: #000; }
}