/* Portal de Treinamento Claude — Natural One
 *
 * Built on the LP Digital Hive design system imported from Claude Design. Every value
 * here comes from that project: the token block below is copied from the design
 * system's own bundle, and the component rules transcribe its screens.
 *
 * The design expresses everything as inline styles. This portal serves a strict
 * Content-Security-Policy with `style-src 'self'`, which blocks style attributes, so
 * each inline rule became a class. Where a value has to vary at runtime (progress),
 * the template sets a data-attribute and the variation lives here — never a style
 * attribute.
 */

@import url("fonts.css");

/* ------------------------------------------------------------------ tokens */

:root {
  --lpdh-color-brand-500: #fa4616;
  --lpdh-color-brand-interactive: #d33005;
  --lpdh-color-brand-interactive-hover: #b52904;
  --lpdh-color-brand-interactive-active: #972204;
  --lpdh-color-semantic-success: #207929;
  --lpdh-color-semantic-danger: #dd000c;
  --lpdh-color-semantic-danger-interactive: #c9000b;
  --lpdh-color-semantic-info: #0087ce;
  --lpdh-color-semantic-info-interactive: #006ca5;

  --lpdh-font-family-body: "Poppins", system-ui, sans-serif;
  --lpdh-font-family-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --lpdh-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --lpdh-space-1: 4px;
  --lpdh-space-2: 8px;
  --lpdh-space-3: 12px;
  --lpdh-space-4: 16px;
  --lpdh-space-6: 24px;
  --lpdh-space-8: 32px;
  --lpdh-space-12: 48px;
  --lpdh-space-16: 64px;
  --lpdh-space-24: 96px;

  --lpdh-radius-sm: 6px;
  --lpdh-radius-md: 8px;
  --lpdh-radius-lg: 12px;
  --lpdh-radius-xl: 16px;

  --lpdh-motion-duration-fast: 0.15s;
  --lpdh-motion-duration-base: 0.25s;
  --lpdh-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

:root,
[data-theme="light"] {
  --lpdh-color-bg: #ede9de;
  --lpdh-color-surface: #e4ddcd;
  --lpdh-color-surface-2: #dbd2bd;
  /* The content card is a shade lighter than the sidebar surface, with a softer border and an
     even softer inner divider between rows. The design uses this trio on every card and list. */
  --lpdh-color-card: #f7f4ed;
  --lpdh-color-card-border: #ddd3bd;
  --lpdh-color-divider: #e8e1cf;
  --lpdh-color-card-hover: #efeadd;
  --lpdh-color-border: #cdc0a2;
  --lpdh-color-border-strong: #927e4f;
  --lpdh-color-text-secondary: #605234;
  --lpdh-color-ink: #322b1b;
  --lpdh-color-overlay: #322b1b8c;
  --lpdh-color-inverse-surface: #3b3126;
  --lpdh-color-inverse-text: #f1ede9;
  --lpdh-color-brand-soft-bg: #e9c3b9;
  --lpdh-color-brand-soft-text: #a52504;
  --lpdh-color-semantic-success-text: #1c6924;
  --lpdh-color-semantic-success-soft-bg: #c2e0c5;
  --lpdh-color-semantic-success-soft-text: #1d6d25;
  --lpdh-color-semantic-danger-text: #ba000a;
  --lpdh-color-semantic-danger-soft-bg: #eab8bb;
  --lpdh-color-semantic-danger-soft-text: #a80009;
  --lpdh-color-semantic-info-text: #006093;
  --lpdh-color-semantic-info-soft-bg: #b8d9ea;
  --lpdh-color-semantic-info-soft-text: #006194;
  --lpdh-shadow-sm: 0 1px 2px #322b1b14, 0 1px 1px #322b1b0f;
  --lpdh-shadow-md: 0 4px 8px #322b1b1f, 0 2px 4px #322b1b14;
  --lpdh-shadow-lg: 0 12px 24px #322b1b2e, 0 4px 8px #322b1b1a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--lpdh-color-bg);
  color: var(--lpdh-color-ink);
  font-family: var(--lpdh-font-family-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--lpdh-color-brand-soft-text);
  text-decoration: none;
}

a:hover {
  color: var(--lpdh-color-brand-interactive);
}

::selection {
  background: var(--lpdh-color-brand-soft-bg);
  color: var(--lpdh-color-ink);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--lpdh-font-family-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

@keyframes pulseDot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.np::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.np::-webkit-scrollbar-thumb {
  background: var(--lpdh-color-border);
  border-radius: 8px;
}

/* ----------------------------------------------------------- accessibility */

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 16px;
  background: var(--lpdh-color-ink);
  color: var(--lpdh-color-inverse-text);
}

.pular:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--lpdh-color-brand-interactive);
  outline-offset: 2px;
  border-radius: 3px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------- shared type roles */

.eyebrow {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lpdh-color-brand-soft-text);
}

.eyebrow--quieto {
  color: var(--lpdh-color-text-secondary);
}

.titulo-tela {
  margin: 0 0 8px;
  font-size: 32px;
  letter-spacing: -0.03em;
}

.lead {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--lpdh-color-text-secondary);
  max-width: 44rem;
  text-wrap: pretty;
}

.dados {
  font-variant-numeric: tabular-nums;
}

.prosa {
  max-width: 46rem;
  font-size: 14.5px;
  line-height: 1.7;
}

.prosa h2 {
  margin: 30px 0 10px;
  font-size: 19px;
}

.prosa h3 {
  margin: 24px 0 8px;
  font-size: 16px;
}

.prosa p,
.prosa ul,
.prosa ol {
  margin: 0 0 14px;
}

.prosa ul,
.prosa ol {
  padding-left: 20px;
}

.prosa li {
  margin-bottom: 6px;
}

.prosa blockquote {
  margin: 20px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--lpdh-color-brand-interactive);
  color: var(--lpdh-color-text-secondary);
}

.prosa code {
  font-family: var(--lpdh-font-family-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--lpdh-color-surface);
}

.prosa strong {
  font-weight: 600;
}

/* ------------------------------------------------------------ logged out */

.entrada {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 100vh;
}

.entrada__marca {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 64px 60px;
  background: var(--lpdh-color-surface);
  border-right: 1px solid var(--lpdh-color-border);
}

.entrada__brilho {
  position: absolute;
  right: -180px;
  top: -180px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(211, 48, 5, 0.16), rgba(211, 48, 5, 0) 66%);
}

.entrada__topo,
.entrada__meio,
.entrada__base {
  position: relative;
}

.entrada__logo {
  height: 44px;
  width: auto;
}

.entrada__meio {
  max-width: 30rem;
}

.entrada__eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lpdh-color-brand-soft-text);
}

.entrada__titulo {
  margin: 0 0 20px;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.entrada__lead {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--lpdh-color-text-secondary);
  max-width: 28rem;
  text-wrap: pretty;
}

.entrada__base {
  display: flex;
  gap: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--lpdh-color-border);
}

.numero__valor {
  margin: 0;
  font-family: var(--lpdh-font-family-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lpdh-color-brand-soft-text);
}

.numero__rotulo {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--lpdh-color-text-secondary);
}

.entrada__painel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
}

.forma {
  width: 100%;
  max-width: 24rem;
}

.forma--larga {
  max-width: 30rem;
}

.forma__titulo {
  margin: 0 0 6px;
  font-size: 27px;
  letter-spacing: -0.02em;
}

.forma__lead {
  margin: 0 0 30px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
}

.forma__nota {
  margin: 22px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
}

/* -------------------------------------------------------------- enrolment */

.passos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lpdh-color-border-strong);
}

.passos__feito,
.passos__atual {
  color: var(--lpdh-color-brand-soft-text);
  font-weight: 600;
}

.qr-cartao {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px;
  margin-bottom: 18px;
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-surface);
}

.qr-cartao__codigo {
  width: 124px;
  height: 124px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 6px;
  border-radius: var(--lpdh-radius-lg);
  background: #fff;
  border: 1px solid var(--lpdh-color-border);
}

.qr-cartao__codigo svg {
  width: 100%;
  height: auto;
}

.qr-cartao__lado {
  min-width: 0;
}

.qr-cartao__ajuda {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
}

.chave {
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--lpdh-radius-md);
  background: var(--lpdh-color-bg);
  border: 1px solid var(--lpdh-color-border);
  font: 400 12.5px/1.5 var(--lpdh-font-family-mono);
  word-break: break-all;
  color: var(--lpdh-color-ink);
}

.codigos-backup {
  list-style: none;
  margin: 16px 0 20px;
  padding: 20px;
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-surface);
  border: 1px solid var(--lpdh-color-border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 8px 20px;
  font: 500 14px/1.6 var(--lpdh-font-family-mono);
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------ forms */

.campo {
  margin-bottom: 18px;
}

.campo__rotulo {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 0 7px;
}

.campo__ajuda {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
}

.input,
.area {
  width: 100%;
  font: 400 14px/1.4 var(--lpdh-font-family-body);
  color: var(--lpdh-color-ink);
  background: var(--lpdh-color-bg);
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-md);
  padding: 10px 12px;
}

.input {
  height: 40px;
}

.area {
  min-height: 86px;
  resize: vertical;
}

.input::placeholder,
.area::placeholder {
  color: var(--lpdh-color-border-strong);
}

.input:focus,
.area:focus {
  outline: none;
  border-color: var(--lpdh-color-brand-interactive);
  box-shadow: 0 0 0 3px rgba(211, 48, 5, 0.16);
}

.input--codigo {
  height: 56px;
  text-align: center;
  letter-spacing: 0.3em;
  font: 600 20px/1 var(--lpdh-font-family-mono);
  padding-left: 0.3em;
}

.input--busca {
  height: 36px;
  font-size: 13px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--lpdh-radius-md);
  border: 1px solid transparent;
  background: var(--lpdh-color-brand-interactive);
  color: #fff;
  font: 600 13.5px/1 var(--lpdh-font-family-body);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--lpdh-motion-duration-fast) var(--lpdh-motion-easing-standard);
}

.botao:hover {
  background: var(--lpdh-color-brand-interactive-hover);
  color: #fff;
}

.botao:active {
  background: var(--lpdh-color-brand-interactive-active);
}

.botao--secundario {
  background: var(--lpdh-color-bg);
  border-color: var(--lpdh-color-border);
  color: var(--lpdh-color-ink);
}

.botao--secundario:hover {
  background: var(--lpdh-color-surface-2);
  border-color: var(--lpdh-color-border-strong);
  color: var(--lpdh-color-ink);
}

.botao--claro {
  background: #fff;
  color: var(--lpdh-color-brand-soft-text);
}

.botao--claro:hover {
  background: #fff;
  color: var(--lpdh-color-brand-interactive-active);
}

.botao--fantasma {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
  font-weight: 500;
}

.botao--fantasma:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.botao--larga {
  width: 100%;
}

/* The live-session call to action. A soft ring rather than a colour change, so it reads as
   "this is happening now" without shouting over the brand red it sits on. */
.botao--pulsando {
  animation: anelVivo 2s ease-in-out infinite;
}

@keyframes anelVivo {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }
}

.proxima__aviso {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
}

.botao--pequeno {
  height: 32px;
  padding: 0 14px;
  font-size: 12.5px;
}

.botao[disabled],
.botao[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.ligacao {
  padding: 0;
  border: none;
  background: none;
  color: var(--lpdh-color-brand-soft-text);
  font: 600 13px/1.4 var(--lpdh-font-family-body);
  cursor: pointer;
  text-decoration: none;
}

.ligacao:hover {
  color: var(--lpdh-color-brand-interactive);
}

.ligacao--quieta {
  color: var(--lpdh-color-text-secondary);
  font-weight: 400;
}

.ligacao--quieta:hover {
  color: var(--lpdh-color-ink);
}

/* ---------------------------------------------------------------- notices */

.aviso {
  padding: 12px 14px;
  border-radius: var(--lpdh-radius-md);
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.aviso--erro {
  background: var(--lpdh-color-semantic-danger-soft-bg);
  border-color: var(--lpdh-color-semantic-danger-text);
  color: var(--lpdh-color-semantic-danger-soft-text);
}

.aviso--atencao {
  background: var(--lpdh-color-brand-soft-bg);
  border-color: var(--lpdh-color-brand-interactive);
  color: var(--lpdh-color-brand-soft-text);
}

.aviso--ok {
  background: var(--lpdh-color-semantic-success-soft-bg);
  border-color: var(--lpdh-color-semantic-success-text);
  color: var(--lpdh-color-semantic-success-soft-text);
}

.aviso ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* --------------------------------------------------------------- app shell */

.app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.lateral {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 26px 0 20px;
  background: var(--lpdh-color-surface);
  border-right: 1px solid var(--lpdh-color-border);
}

.lateral__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 0 22px 22px;
  color: inherit;
}

.lateral__simbolo {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
}

.lateral__marca-texto {
  min-width: 0;
}

.lateral__kicker {
  display: block;
  margin: 0 0 2px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lpdh-color-border-strong);
}

.lateral__curso {
  display: block;
  margin: 0;
  /* The name is two words and must stay on one line under the label, as the design
     shows it — never wrapped mid-phrase. */
  white-space: nowrap;
  font-family: var(--lpdh-font-family-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lateral__turma {
  margin: 0 14px 22px;
  padding: 12px 14px;
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-bg);
}

.lateral__turma-rotulo {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lpdh-color-border-strong);
}

.lateral__turma-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lateral__turma-nome {
  font-size: 13.5px;
  font-weight: 600;
}

.pulso {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--lpdh-color-brand-soft-text);
}

.pulso::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lpdh-color-brand-interactive);
  animation: pulseDot 1.6s infinite;
}

/* ------------------------------------------------------- instructor turma panel */

/* A native <select> was wrong here: the browser draws its open menu with the operating
 * system's own chrome — grey panel, blue highlight — which no stylesheet can reach. Every
 * turma is a submit button instead, so the open state is as designed as the closed one.
 *
 * The panel is deliberately distinct from the participant's "Sua turma" block: this view
 * belongs to the instructor, and it should not read as something a participant also has. */
.painel-instrutor {
  margin: 0 14px 22px;
  padding: 12px 12px 10px;
  border: 1px solid var(--lpdh-color-brand-soft-bg);
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-bg);
}

.painel-instrutor__rotulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding-left: 2px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lpdh-color-brand-soft-text);
}

.painel-instrutor__marca {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--lpdh-color-brand-interactive);
}

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

.turma-opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: var(--lpdh-radius-md);
  background: transparent;
  color: var(--lpdh-color-text-secondary);
  font-family: var(--lpdh-font-family-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--lpdh-motion-duration-fast) var(--lpdh-motion-easing-standard);
}

.turma-opcao:hover {
  background: var(--lpdh-color-surface);
  color: var(--lpdh-color-ink);
}

.turma-opcao[aria-current="true"] {
  background: var(--lpdh-color-surface);
  color: var(--lpdh-color-ink);
  box-shadow: var(--lpdh-shadow-sm);
}

.turma-opcao__numero {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--lpdh-radius-sm);
  background: var(--lpdh-color-surface-2);
  color: var(--lpdh-color-text-secondary);
  font: 600 11px/1 var(--lpdh-font-family-display);
}

.turma-opcao[aria-current="true"] .turma-opcao__numero {
  background: var(--lpdh-color-brand-interactive);
  color: #fff;
}

.turma-opcao__texto {
  min-width: 0;
}

.turma-opcao__nome {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.turma-opcao__periodo {
  display: block;
  font-size: 10.5px;
  color: var(--lpdh-color-border-strong);
}

.painel-instrutor__nota {
  margin: 10px 2px 0;
  padding-top: 9px;
  border-top: 1px solid var(--lpdh-color-border);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--lpdh-color-border-strong);
}

.lateral__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}

/* Section header above the curator-only nav group, as the design separates "Curadoria". */
.lateral__grupo-rotulo {
  margin: 0;
  padding: 26px 22px 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lpdh-color-border-strong);
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: var(--lpdh-radius-md);
  text-align: left;
  cursor: pointer;
  background: transparent;
  color: var(--lpdh-color-text-secondary);
  font: 400 13.5px/1.2 var(--lpdh-font-family-body);
  text-decoration: none;
}

.nav__item:hover {
  color: var(--lpdh-color-ink);
}

.nav__item[aria-current="page"] {
  background: var(--lpdh-color-bg);
  color: var(--lpdh-color-ink);
  font-weight: 600;
  box-shadow: var(--lpdh-shadow-sm);
}

.nav__marca {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--lpdh-color-border);
}

.nav__item[aria-current="page"] .nav__marca {
  background: var(--lpdh-color-brand-interactive);
}

.nav__contador {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(211, 48, 5, 0.9);
  color: #fff;
}

.lateral__pe {
  margin-top: auto;
  padding: 20px 22px 0;
  border-top: 1px solid var(--lpdh-color-border);
}

.usuario {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--lpdh-color-brand-interactive);
  color: #fff;
  font: 600 12px/1 var(--lpdh-font-family-display);
}

.avatar--grande {
  width: 42px;
  height: 42px;
  font-size: 15px;
}

/* The chip name is the link to /conta (the design has no separate Conta nav item). */
.usuario__texto {
  min-width: 0;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.usuario__texto:hover .usuario__nome {
  color: var(--lpdh-color-brand-interactive);
}

.usuario__nome {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usuario__area {
  display: block;
  font-size: 11px;
  color: var(--lpdh-color-text-secondary);
}

.usuario__sair {
  flex: none;
  margin: 0;
}

.lateral__creditos {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--lpdh-color-border);
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--lpdh-color-border-strong);
}

.lateral__creditos img {
  width: 18px;
  height: 18px;
  flex: none;
  object-fit: contain;
  opacity: 0.9;
}

.lateral__creditos strong {
  font-weight: 600;
  color: var(--lpdh-color-text-secondary);
}

/* ------------------------------------------------------------------ topbar */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 40px;
  background: rgba(237, 233, 222, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lpdh-color-border);
}

.topo__busca {
  position: relative;
  flex: 1;
  max-width: 24rem;
  margin: 0;
}

.topo__instrutor {
  margin-left: auto;
  white-space: nowrap;
  font-size: 12px;
  color: var(--lpdh-color-text-secondary);
}

.topo__instrutor strong {
  font-weight: 600;
  color: var(--lpdh-color-ink);
}

.conteudo {
  padding: 36px 40px 64px;
  max-width: 1120px;
}

/* ------------------------------------------------------------------ início */

.cabeca-dia {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lpdh-color-brand-soft-text);
}

.saudacao {
  margin: 0;
  font-family: var(--lpdh-font-family-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.painel-inicio {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 34px;
}

/* -------------------------------------------------------- início (novo design) */

/* The signed-in home: a greeting, a two-column hero (próximo encontro + Iris), the featured
   último encontro, and the anteriores / materiais rails. Classes map 1:1 to the design canvas,
   whose inline styles the strict CSP (style-src 'self') forbids. */
.inicio {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.inicio__cabeca {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inicio__lede {
  margin: 4px 0 0;
  max-width: 44rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
  text-wrap: pretty;
}

.inicio-topo,
.inicio-baixo {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 20px;
}

.inicio-baixo {
  align-items: start;
}

.inicio-coluna {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Hero: the próximo encontro card. */
.proxima {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
  border-radius: 18px;
  background: var(--lpdh-color-brand-interactive);
  color: #fff;
  padding: 32px 34px;
}

.proxima__brilho {
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 66%);
}

.proxima__topo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.selo-vivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.selo-vivo__ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.proxima__prazo {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.proxima__numero {
  position: relative;
  margin: 6px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.proxima__titulo {
  position: relative;
  margin: 0;
  font: 700 28px/1.15 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
  max-width: 26rem;
  text-wrap: balance;
}

.proxima__quando {
  position: relative;
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.proxima__acoes {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.botao-claro {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--lpdh-radius-md);
  background: #fff;
  color: var(--lpdh-color-brand-soft-text);
  font: 600 13.5px/1 var(--lpdh-font-family-body);
  text-decoration: none;
}

.botao-claro:hover {
  color: var(--lpdh-color-brand-interactive-active);
}

/* The join button while the encontro is happening. A steady emphasis, not an animation: the page
   is server-rendered and a pulsing control is noise for anyone reading with reduced motion. */
.botao-claro--vivo {
  background: var(--lpdh-color-semantic-danger-soft-text, #a3261f);
  color: #fff;
}

.botao-claro--vivo:hover {
  color: #fff;
  opacity: 0.92;
}

.botao-contorno {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--lpdh-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font: 500 13.5px/1 var(--lpdh-font-family-body);
  text-decoration: none;
}

.botao-contorno:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* The members' home usually has no published upcoming encontro (the synced ones start as
   drafts), so the hero has a muted empty state instead of the bright brand card. */
.proxima--vazia {
  background: var(--lpdh-color-card);
  border: 1px solid var(--lpdh-color-card-border);
  color: var(--lpdh-color-ink);
}

.proxima--vazia .selo-vivo {
  background: var(--lpdh-color-surface);
  color: var(--lpdh-color-text-secondary);
}

.proxima--vazia .selo-vivo__ponto {
  background: var(--lpdh-color-border-strong);
}

.proxima--vazia .proxima__quando {
  color: var(--lpdh-color-text-secondary);
}

.proxima--vazia .botao-contorno {
  border-color: var(--lpdh-color-border);
  color: var(--lpdh-color-ink);
}

.proxima--vazia .botao-contorno:hover {
  background: var(--lpdh-color-surface);
  color: var(--lpdh-color-ink);
}

/* Hero neighbour: the Iris teaser (dark inverse surface). */
.cartao-iris {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 18px;
  background: var(--lpdh-color-inverse-surface);
  color: var(--lpdh-color-inverse-text);
  padding: 28px 30px;
}

.cartao-iris__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cartao-iris__rotulo {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lpdh-color-brand-soft-bg);
}

.selo-breve {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.1);
  color: var(--lpdh-color-brand-soft-bg);
}

.cartao-iris__titulo {
  margin: 0;
  font: 700 22px/1.2 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cartao-iris__texto {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(241, 237, 233, 0.72);
}

.cartao-iris__campo {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cartao-iris__prompt {
  flex: 1;
  font-size: 13px;
  color: rgba(241, 237, 233, 0.55);
}

.cartao-iris__seta {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--lpdh-radius-md);
  background: var(--lpdh-color-brand-interactive);
  color: #fff;
  font: 600 14px/1 var(--lpdh-font-family-display);
}

/* A section rail's header: a title and a "ver todos" link on the same baseline. */
.secao-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.secao-linha h2 {
  margin: 0;
  font: 700 20px/1.2 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
}

.secao-linha__link {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Featured último encontro: a thumbnail beside its summary. */
.destaque-ultimo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  border: 1px solid var(--lpdh-color-card-border);
  border-radius: 18px;
  background: var(--lpdh-color-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--lpdh-color-ink);
}

.destaque-ultimo:hover {
  border-color: var(--lpdh-color-border);
  box-shadow: var(--lpdh-shadow-md);
  color: var(--lpdh-color-ink);
}

.thumb-gravacao {
  position: relative;
  min-height: 240px;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, var(--lpdh-color-surface) 0 12px, #ddd5c2 12px 24px);
}

.play-botao {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  color: var(--lpdh-color-brand-interactive);
  font: 700 22px/1 var(--lpdh-font-family-display);
  box-shadow: var(--lpdh-shadow-lg);
}

.grav-selo {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 4px 8px;
  border-radius: var(--lpdh-radius-sm);
  background: var(--lpdh-color-overlay);
  color: var(--lpdh-color-inverse-text);
  font: 500 11px/1 var(--lpdh-font-family-mono);
  white-space: nowrap;
}

.destaque-ultimo__corpo {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eyebrow {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lpdh-color-brand-soft-text);
}

.destaque-ultimo__titulo {
  margin: 0;
  font: 700 22px/1.2 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.destaque-ultimo__resumo {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--lpdh-color-text-secondary);
  text-wrap: pretty;
}

.tags-conteudo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.tag-conteudo {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--lpdh-color-surface);
  color: var(--lpdh-color-text-secondary);
}

.tag-conteudo--materiais {
  background: var(--lpdh-color-brand-soft-bg);
  color: var(--lpdh-color-brand-soft-text);
}

/* Anteriores rail: a bordered list of compact meeting rows. */
.lista-encontros {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lpdh-color-card-border);
  border-radius: 14px;
  background: var(--lpdh-color-card);
  overflow: hidden;
}

.linha-encontro {
  display: grid;
  grid-template-columns: 44px 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--lpdh-color-divider);
  text-decoration: none;
  color: var(--lpdh-color-ink);
}

.linha-encontro:first-child {
  border-top: 0;
}

.linha-encontro:hover {
  background: var(--lpdh-color-card-hover);
  color: var(--lpdh-color-ink);
}

.linha-encontro__num {
  font: 700 18px/1 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
  color: var(--lpdh-color-border-strong);
  font-variant-numeric: tabular-nums;
}

.linha-encontro__data {
  font-size: 12.5px;
  color: var(--lpdh-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.linha-encontro__titulo {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linha-encontro__quem {
  display: block;
  font-size: 12px;
  color: var(--lpdh-color-text-secondary);
}

.linha-encontro__dur {
  font-size: 12px;
  color: var(--lpdh-color-border-strong);
  font-variant-numeric: tabular-nums;
}

/* Materiais rail: small file rows with a type badge. */
.lista-materiais-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.material-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--lpdh-color-card-border);
  border-radius: 12px;
  background: var(--lpdh-color-card);
  text-decoration: none;
  color: var(--lpdh-color-ink);
}

.material-mini:hover {
  border-color: var(--lpdh-color-border);
  color: var(--lpdh-color-ink);
}

.material-mini__texto {
  min-width: 0;
  flex: 1;
}

.material-mini__titulo {
  display: block;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.material-mini__meta {
  display: block;
  font-size: 11.5px;
  color: var(--lpdh-color-text-secondary);
}

.badge-tipo {
  flex: none;
  padding: 5px 9px;
  border-radius: var(--lpdh-radius-sm);
  font: 600 10.5px/1 var(--lpdh-font-family-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--lpdh-color-brand-soft-bg);
  color: var(--lpdh-color-brand-soft-text);
}

/* --------------------------------------------------- pages: header, filters, list */

/* Shared page scaffold for Encontros / Materiais / Calendário / Administração. */
.pagina {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pagina-cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.pagina-cabeca__texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pagina-cabeca h1 {
  margin: 0;
  font: 700 36px/1.1 var(--lpdh-font-family-display);
  letter-spacing: -0.03em;
}

.pagina-cabeca__sub {
  margin: 0;
  font-size: 14.5px;
  color: var(--lpdh-color-text-secondary);
}

.botao-primario {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--lpdh-radius-md);
  background: var(--lpdh-color-brand-interactive);
  color: #fff;
  font: 600 13.5px/1 var(--lpdh-font-family-body);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.botao-primario:hover {
  background: var(--lpdh-color-brand-interactive-hover);
  color: #fff;
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filtro {
  padding: 7px 14px;
  border: 1px solid var(--lpdh-color-card-border);
  border-radius: 999px;
  background: var(--lpdh-color-card);
  color: var(--lpdh-color-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.filtro:hover {
  border-color: var(--lpdh-color-border);
  color: var(--lpdh-color-ink);
}

.filtro--ativo {
  background: var(--lpdh-color-ink);
  border-color: var(--lpdh-color-ink);
  color: #fff;
}

.filtro--ativo:hover {
  color: #fff;
}

.grupos-encontros {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.grupo-mes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grupo-mes__rotulo {
  margin: 0;
  font: 700 13px/1.2 var(--lpdh-font-family-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lpdh-color-border-strong);
}

.grupo-mes__itens {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.encontro-cartao {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid var(--lpdh-color-card-border);
  border-radius: 14px;
  background: var(--lpdh-color-card);
  text-decoration: none;
  color: var(--lpdh-color-ink);
}

.encontro-cartao:hover {
  border-color: var(--lpdh-color-border);
  box-shadow: var(--lpdh-shadow-md);
  color: var(--lpdh-color-ink);
}

.encontro-cartao__quando {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.encontro-cartao__num {
  font: 700 26px/1 var(--lpdh-font-family-display);
  letter-spacing: -0.03em;
  color: var(--lpdh-color-brand-interactive);
  font-variant-numeric: tabular-nums;
}

.encontro-cartao__dow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lpdh-color-border-strong);
}

.encontro-cartao__corpo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.encontro-cartao__titulo {
  font: 700 17px/1.25 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
}

.encontro-cartao__resumo {
  font-size: 13px;
  line-height: 1.55;
  color: var(--lpdh-color-text-secondary);
  text-wrap: pretty;
}

.encontro-cartao__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--lpdh-color-text-secondary);
}

.encontro-cartao__quem {
  font-weight: 600;
  color: var(--lpdh-color-ink);
}

.status-tag {
  align-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* The derived encontro states (D25). "ao vivo" is the loud one because it is the only state that
   asks the reader to act right now; the rest are quiet labels. */
.status-tag--ao_vivo {
  background: var(--lpdh-color-semantic-danger-soft-bg, #fdecec);
  color: var(--lpdh-color-semantic-danger-soft-text, #a3261f);
}

.status-tag--proximo {
  background: var(--lpdh-color-semantic-success-soft-bg);
  color: var(--lpdh-color-semantic-success-soft-text);
}

.status-tag--agendado {
  background: var(--lpdh-color-brand-soft-bg);
  color: var(--lpdh-color-brand-soft-text);
}

.status-tag--realizado {
  background: var(--lpdh-color-surface-sunken, #eef0ee);
  color: var(--lpdh-color-ink-muted, #5c6b63);
}

.status-tag--ingest {
  background: var(--lpdh-color-semantic-info-soft-bg);
  color: var(--lpdh-color-semantic-info-soft-text);
}

/* ------------------------------------------------------ encontro (detalhe) */

.detalhe {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.voltar {
  font-size: 13px;
  color: var(--lpdh-color-text-secondary);
}

.voltar:hover {
  color: var(--lpdh-color-brand-interactive);
}

.detalhe-cabeca {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 52rem;
}

.detalhe-cabeca h1 {
  margin: 0;
  font: 700 36px/1.1 var(--lpdh-font-family-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.detalhe-cabeca__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--lpdh-color-text-secondary);
}

.detalhe-cabeca__quem {
  font-weight: 600;
  color: var(--lpdh-color-ink);
}

.banner-rascunho {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--lpdh-color-brand-interactive);
  border-radius: 10px;
  background: var(--lpdh-color-brand-soft-bg);
  color: var(--lpdh-color-brand-soft-text);
  font-size: 13px;
}

.detalhe-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.detalhe-principal {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.player-moldura {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
}

.player-moldura--vazio {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, var(--lpdh-color-surface) 0 12px, #ddd5c2 12px 24px);
}

.player-video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

.abas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--lpdh-color-card-border);
}

.aba {
  padding: 10px 2px;
  margin-right: 16px;
  border-bottom: 2px solid transparent;
  color: var(--lpdh-color-text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.aba:hover {
  color: var(--lpdh-color-ink);
}

.aba--ativa {
  color: var(--lpdh-color-ink);
  border-bottom-color: var(--lpdh-color-brand-interactive);
}

.resumo {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 46rem;
  font-size: 14.5px;
  line-height: 1.7;
}

.resumo p {
  margin: 0;
  text-wrap: pretty;
}

/* The AI attribution and the prose it labels: one section, so the tab's 22px gap separates
   sections rather than a caption from its own text. */
.resumo__ia {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resumo__nota {
  font-size: 12.5px;
  color: var(--lpdh-color-text-secondary);
}

/* Decisions are cards, not paragraphs: the design gives each one a numbered badge so a reader
   scanning the page finds what was settled without reading the summary. */
.decisoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.decisoes__titulo {
  margin: 0;
  font: 700 16px/1.2 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
}

.decisoes__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: decisao;
}

.decisao {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--lpdh-color-card);
  border: 1px solid var(--lpdh-color-card-border);
  font-size: 13.5px;
  line-height: 1.55;
  counter-increment: decisao;
}

/* The badge is drawn by the list, not stored with the text: renumbering is a CSS concern, and a
   decision whose text began with "1." would otherwise show two numbers. */
.decisao::before {
  content: counter(decisao);
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--lpdh-color-brand-soft-bg);
  color: var(--lpdh-color-brand-soft-text);
  font: 600 11px/1 var(--lpdh-font-family-display);
}

.transcricao {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 46rem;
}

.transcricao__nota {
  margin: 0;
  font-size: 12.5px;
  color: var(--lpdh-color-text-secondary);
}

.transcricao__lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The design's timestamp column is 56px, sized for the MM:SS of its sample data. The Gemini export
   writes HH:MM:SS, which measures 58px at this font, so 56px would push every one of the real
   meeting's 61 timestamps out of its own cell. 64px is the same column, fitted to the real data. */
.transcricao__linha {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  /* Room for the target highlight below without shifting the text when it lands. */
  scroll-margin-top: 24px;
}

/* The row an Iris citation opened the page at. :target covers the no-script case (the browser
   sets it from the fragment alone); the class is what portal.js adds, and is the same look. */
.transcricao__linha:target,
.transcricao__linha--alvo {
  background: var(--lpdh-color-brand-soft-bg);
  border-radius: var(--lpdh-radius-md);
  margin: 0 -10px;
  padding: 6px 10px;
}

.transcricao__t {
  align-self: start;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: 500 12px/1.8 var(--lpdh-font-family-mono);
  color: var(--lpdh-color-brand-soft-text);
  cursor: pointer;
}

.transcricao__t:hover {
  color: var(--lpdh-color-brand-interactive);
}

.transcricao__fala {
  color: var(--lpdh-color-ink);
}

/* A segment is a run of speaker turns, one block each. Rendering the whole segment as one string
   was the "sem formatação" defect: the export's **Name:** markers arrived escaped, so every turn
   ran into the next as a wall of text. */
.transcricao__falas {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.fala {
  margin: 0;
  color: var(--lpdh-color-ink);
  text-wrap: pretty;
}

/* The markup already carries a real space after the name (so copy and screen readers do not glue it
   to the speech); this only widens that gap. */
.fala__quem {
  margin-right: 3px;
  font-weight: 600;
  color: var(--lpdh-color-text-secondary);
}

.detalhe-lado {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 24px;
}

.rotulo-secao {
  margin: 0 0 4px;
  font: 700 13px/1.2 var(--lpdh-font-family-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lpdh-color-border-strong);
}

.meta-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 16px;
  font-size: 13px;
}

.meta-grid__k {
  color: var(--lpdh-color-text-secondary);
}

.meta-grid__v {
  font-weight: 600;
}

.material-mini__baixar {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--lpdh-color-brand-soft-text);
}

.botao-neutro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-md);
  background: var(--lpdh-color-bg);
  color: var(--lpdh-color-ink);
  font: 600 13.5px/1 var(--lpdh-font-family-body);
  text-decoration: none;
  cursor: pointer;
}

.botao-neutro:hover {
  background: var(--lpdh-color-surface);
  color: var(--lpdh-color-ink);
}

.botao-neutro--larga {
  width: 100%;
}

/* ------------------------------------------------------------- calendário */

.calendario-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.cal-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.cal-cabeca h2 {
  margin: 0;
  font: 700 20px/1.2 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
}

.cal-hoje {
  font-size: 12px;
  color: var(--lpdh-color-border-strong);
}

/* Month navigation. Plain links, not a widget: the strict CSP forbids inline script, so moving
   between months is a GET the browser follows and the server renders. */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-nav__seta,
.cal-nav__hoje {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--lpdh-color-border);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1;
  color: var(--lpdh-color-text);
  text-decoration: none;
}

.cal-nav__seta:hover,
.cal-nav__hoje:hover {
  border-color: var(--lpdh-color-border-strong);
  background: var(--lpdh-color-surface-muted);
}

.cal-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.cal-dow {
  text-align: center;
  padding-bottom: 6px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lpdh-color-border-strong);
}

.cal-dia {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--lpdh-radius-md);
  border: 1.5px solid transparent;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--lpdh-color-ink);
}

.cal-dia--proximo {
  background: var(--lpdh-color-brand-interactive);
  color: #fff;
  font-weight: 600;
}

.cal-dia--realizado {
  background: var(--lpdh-color-brand-soft-bg);
  color: var(--lpdh-color-brand-soft-text);
  font-weight: 600;
}

.cal-dia--hoje {
  border-color: var(--lpdh-color-ink);
  font-weight: 600;
}

.cal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--lpdh-color-divider);
  font-size: 12px;
  color: var(--lpdh-color-text-secondary);
}

.cal-legenda__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-legenda__ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.cal-legenda__ponto--proximo {
  background: var(--lpdh-color-brand-interactive);
}

.cal-legenda__ponto--realizado {
  background: var(--lpdh-color-brand-soft-bg);
}

.cal-legenda__ponto--hoje {
  border-radius: 2px;
  border: 1.5px solid var(--lpdh-color-ink);
}

.cal-proximos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cal-proximos h2 {
  margin: 0 0 4px;
  font: 700 20px/1.2 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
}

.prox-cartao {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--lpdh-color-card-border);
  border-radius: 14px;
  background: var(--lpdh-color-card);
  text-decoration: none;
  color: var(--lpdh-color-ink);
}

.prox-cartao:hover {
  border-color: var(--lpdh-color-border);
  color: var(--lpdh-color-ink);
}

.prox-cartao__data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  border-radius: 10px;
  background: var(--lpdh-color-surface);
  color: var(--lpdh-color-ink);
}

.prox-cartao__data--destaque {
  background: var(--lpdh-color-brand-interactive);
  color: #fff;
}

.prox-cartao__dia {
  font: 700 20px/1 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
}

.prox-cartao__mes {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.prox-cartao__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.prox-cartao__quando {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lpdh-color-border-strong);
}

.prox-cartao__titulo {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.prox-cartao__quem {
  font-size: 12px;
  color: var(--lpdh-color-text-secondary);
}

/* -------------------------------------------------------------- materiais */

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

.material-cartao {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--lpdh-color-card-border);
  border-radius: 14px;
  background: var(--lpdh-color-card);
  text-decoration: none;
  color: var(--lpdh-color-ink);
}

.material-cartao:hover {
  border-color: var(--lpdh-color-border);
  box-shadow: var(--lpdh-shadow-md);
  color: var(--lpdh-color-ink);
}

.material-cartao__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.material-cartao__tam {
  font-size: 11.5px;
  color: var(--lpdh-color-border-strong);
}

.material-cartao__titulo {
  font: 700 15px/1.3 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
}

.material-cartao__meta {
  margin-top: auto;
  font-size: 12px;
  color: var(--lpdh-color-text-secondary);
}

/* --------------------------------------------------------- administração */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--lpdh-color-card-border);
  border-radius: 14px;
  background: var(--lpdh-color-card);
  overflow: hidden;
}

.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 24px;
  border-left: 1px solid var(--lpdh-color-divider);
}

.admin-stat:first-child {
  border-left: 0;
}

.admin-stat__valor {
  font: 700 30px/1 var(--lpdh-font-family-display);
  letter-spacing: -0.03em;
  color: var(--lpdh-color-brand-interactive);
  font-variant-numeric: tabular-nums;
}

.admin-stat__rotulo {
  font-size: 12.5px;
  color: var(--lpdh-color-text-secondary);
}

.admin-acoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.admin-acao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px;
  border: 1px solid var(--lpdh-color-card-border);
  border-radius: 14px;
  background: var(--lpdh-color-card);
  text-decoration: none;
  color: var(--lpdh-color-ink);
}

.admin-acao:hover {
  border-color: var(--lpdh-color-border);
  box-shadow: var(--lpdh-shadow-md);
  color: var(--lpdh-color-ink);
}

.admin-acao--breve {
  background: transparent;
  border-style: dashed;
  border-color: var(--lpdh-color-border);
}

.admin-acao--breve:hover {
  box-shadow: none;
  border-color: var(--lpdh-color-border);
}

.admin-acao__titulo {
  font: 700 18px/1.2 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
  color: var(--lpdh-color-brand-soft-text);
}

.admin-acao--breve .admin-acao__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--lpdh-color-ink);
}

.admin-acao__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
}

.admin-acao__link {
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lpdh-color-brand-soft-text);
}

.pendencia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  border-top: 1px solid var(--lpdh-color-divider);
  text-decoration: none;
  color: var(--lpdh-color-ink);
}

.pendencia:first-child {
  border-top: 0;
}

.pendencia:hover {
  background: var(--lpdh-color-card-hover);
  color: var(--lpdh-color-ink);
}

.pendencia__titulo {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pendencia__sub {
  display: block;
  font-size: 12.5px;
  color: var(--lpdh-color-text-secondary);
}

.pendencia__acao {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lpdh-color-brand-soft-text);
}

/* ------------------------------------------------ cadastrar/editar encontro */

.form-encontro-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.form-cartao {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 30px;
  border: 1px solid var(--lpdh-color-card-border);
  border-radius: 16px;
  background: var(--lpdh-color-card);
  max-width: 720px;
}

.form-linha-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

/* Recording is ingested from Drive by the laptop CLI (D22), never uploaded in the browser, so
   the form shows a read-only status row instead of the canvas's upload dropzone. */
.gravacao-status {
  padding: 14px 16px;
  border: 1px dashed var(--lpdh-color-border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--lpdh-color-text-secondary);
}

.form-lado {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 24px;
}

.form-pub__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.form-pub__texto {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
}

.form-pub__hint {
  display: block;
  font-size: 12px;
  color: var(--lpdh-color-text-secondary);
}

.form-pub__acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--lpdh-color-divider);
}

.form-nota {
  margin: 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--lpdh-color-border-strong);
}

/* Publication toggle: a native checkbox drawn as a switch (no JS, CSP-safe). */
.switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch {
  flex: none;
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--lpdh-color-surface-2);
  transition: background var(--lpdh-motion-duration-fast) var(--lpdh-motion-easing-standard);
}

.switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--lpdh-shadow-sm);
  transition: left var(--lpdh-motion-duration-fast) var(--lpdh-motion-easing-standard);
}

.switch-input:checked + .switch {
  background: var(--lpdh-color-brand-interactive);
}

.switch-input:checked + .switch .switch__knob {
  left: 21px;
}

.switch-input:focus-visible + .switch {
  box-shadow: 0 0 0 3px rgba(211, 48, 5, 0.16);
}

.cartao {
  border: 1px solid var(--lpdh-color-card-border);
  border-radius: 14px;
  background: var(--lpdh-color-card);
  padding: 24px 26px;
}

.cartao-progresso {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cartao-progresso__rotulo {
  margin: 0 0 18px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lpdh-color-text-secondary);
}

.cartao-progresso__linha {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.cartao-progresso__valor {
  font-family: var(--lpdh-font-family-display);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cartao-progresso__de {
  font-size: 15px;
  color: var(--lpdh-color-text-secondary);
}

.cartao-progresso__nota {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
}

.cartao-progresso .ligacao {
  margin-top: auto;
  align-self: flex-start;
}

/* Progress bar. The fill width varies at runtime, and a strict CSP forbids the
 * style attribute, so the template writes data-feitas/data-total and the widths
 * live here. Six sessions is the programme's fixed shape. */
.barra {
  height: 8px;
  border-radius: 4px;
  background: var(--lpdh-color-border);
  overflow: hidden;
  margin-bottom: 20px;
}

.barra__preenche {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--lpdh-color-brand-interactive);
  transition: width var(--lpdh-motion-duration-base) var(--lpdh-motion-easing-standard);
  width: 0;
}

.barra[data-feitas="0"] .barra__preenche { width: 0; }
.barra[data-feitas="1"] .barra__preenche { width: 16.6667%; }
.barra[data-feitas="2"] .barra__preenche { width: 33.3333%; }
.barra[data-feitas="3"] .barra__preenche { width: 50%; }
.barra[data-feitas="4"] .barra__preenche { width: 66.6667%; }
.barra[data-feitas="5"] .barra__preenche { width: 83.3333%; }
.barra[data-feitas="6"] .barra__preenche { width: 100%; }

/* -------------------------------------------------------- session track */

.secao-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.secao-cabeca h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.trilha {
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-surface);
  overflow: hidden;
  margin-bottom: 34px;
  list-style: none;
  padding: 0;
}

.trilha__item + .trilha__item {
  border-top: 1px solid var(--lpdh-color-border);
}

.trilha__link {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 22px;
  background: transparent;
  color: var(--lpdh-color-ink);
  text-decoration: none;
  font-family: var(--lpdh-font-family-body);
}

.trilha__link:hover {
  background: var(--lpdh-color-surface-2);
  color: var(--lpdh-color-ink);
}

.trilha__item--proxima .trilha__link {
  background: var(--lpdh-color-bg);
}

.selo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--lpdh-radius-md);
  font: 600 12.5px/1 var(--lpdh-font-family-display);
  background: var(--lpdh-color-surface-2);
  color: var(--lpdh-color-text-secondary);
}

.selo--concluida {
  background: var(--lpdh-color-semantic-success-soft-bg);
  color: var(--lpdh-color-semantic-success-soft-text);
}

.selo--disponivel {
  background: var(--lpdh-color-semantic-info-soft-bg);
  color: var(--lpdh-color-semantic-info-soft-text);
}

.selo--proxima {
  background: var(--lpdh-color-brand-interactive);
  color: #fff;
}

.trilha__texto {
  min-width: 0;
  text-align: left;
}

.trilha__titulo {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.trilha__objetivo {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--lpdh-color-text-secondary);
}

.trilha__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--lpdh-color-text-secondary);
}

.etiqueta {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--lpdh-color-surface-2);
  color: var(--lpdh-color-text-secondary);
}

.etiqueta--concluida {
  background: var(--lpdh-color-semantic-success-soft-bg);
  color: var(--lpdh-color-semantic-success-soft-text);
}

.etiqueta--disponivel {
  background: var(--lpdh-color-semantic-info-soft-bg);
  color: var(--lpdh-color-semantic-info-soft-text);
}

.etiqueta--proxima {
  background: var(--lpdh-color-brand-soft-bg);
  color: var(--lpdh-color-brand-soft-text);
}

/* ------------------------------------------------------------ tasks/pilot */

.faixa-cartoes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.faixa-cartoes > .cartao {
  flex: 1 1 320px;
  min-width: 0;
}

.cartao__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.cartao__cabeca h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.cartao__contagem {
  font-size: 12px;
  color: var(--lpdh-color-text-secondary);
}

.tarefas {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tarefa {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 11px 10px;
  border-radius: var(--lpdh-radius-md);
  cursor: pointer;
}

.tarefa:hover {
  background: var(--lpdh-color-bg);
}

.tarefa input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--lpdh-color-brand-interactive);
  cursor: pointer;
}

.tarefa__texto {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lpdh-color-ink);
}

.tarefa input:checked + .tarefa__texto {
  color: var(--lpdh-color-border-strong);
  text-decoration: line-through;
}

.piloto__lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
}

.piloto__caixa {
  padding: 16px 18px;
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-bg);
  border: 1px solid var(--lpdh-color-border);
}

.piloto__area {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lpdh-color-brand-soft-text);
}

.piloto__nome {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.piloto__descricao {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
}

/* ----------------------------------------------------------------- session */

.sessao {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: flex-start;
}

.sessao__principal {
  flex: 1 1 420px;
  min-width: 0;
}

.sessao__titulo {
  margin: 0 0 10px;
  font-size: 29px;
  letter-spacing: -0.03em;
}

.sessao__lead {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--lpdh-color-text-secondary);
  max-width: 44rem;
  text-wrap: pretty;
}

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--lpdh-radius-lg);
  overflow: hidden;
  background: #221c16;
  margin-bottom: 14px;
}

.video video {
  width: 100%;
  height: 100%;
  display: block;
  background: #221c16;
}

.video--ausente {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}

.video--ausente__marca {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(211, 48, 5, 0.5);
  color: #fff;
  font-size: 22px;
}

.video--ausente p {
  margin: 0;
  font-size: 12.5px;
  color: #b3a089;
}

.sessao__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
}

.sessao h2 {
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.topicos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--lpdh-color-border);
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
  list-style: none;
  padding: 0;
}

.topico {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 18px;
  background: var(--lpdh-color-surface);
  align-items: baseline;
}

.topico__tempo {
  font: 500 12.5px/1 var(--lpdh-font-family-body);
  color: var(--lpdh-color-brand-soft-text);
  font-variant-numeric: tabular-nums;
}

.topico__texto {
  font-size: 14px;
  line-height: 1.55;
}

.destaque {
  border-left: 3px solid var(--lpdh-color-brand-interactive);
  padding: 4px 0 4px 18px;
  margin-bottom: 34px;
}

.destaque__rotulo {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lpdh-color-brand-soft-text);
}

.destaque__texto {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 40rem;
  text-wrap: pretty;
}

.paginacao {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--lpdh-color-border);
}

.paginacao a {
  text-decoration: none;
  color: inherit;
}

.paginacao__direita {
  text-align: right;
  margin-left: auto;
}

.paginacao__rotulo {
  display: block;
  font-size: 11.5px;
  color: var(--lpdh-color-text-secondary);
}

.paginacao__titulo {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lpdh-color-ink);
}

.sessao__lado {
  flex: 1 1 280px;
  max-width: 320px;
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cartao--lado {
  padding: 20px;
}

.cartao--lado__rotulo {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lpdh-color-text-secondary);
}

.materiais-lado {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.material-lado {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-md);
  background: var(--lpdh-color-bg);
  color: var(--lpdh-color-ink);
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
}

.material-lado:hover {
  border-color: var(--lpdh-color-brand-interactive);
  color: var(--lpdh-color-ink);
}

.tipo-selo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--lpdh-radius-sm);
  background: var(--lpdh-color-brand-soft-bg);
  color: var(--lpdh-color-brand-soft-text);
  font: 600 9.5px/1 var(--lpdh-font-family-body);
}

.tipo-selo--grande {
  width: 38px;
  height: 44px;
  font-size: 10px;
}

.indisponivel {
  padding: 11px 12px;
  border: 1px dashed var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-md);
  color: var(--lpdh-color-border-strong);
  font-size: 13px;
}

/* ---------------------------------------------------------------- calendar */

.calendario__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

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

.agenda__cartao {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-surface);
  border: 1px solid var(--lpdh-color-border);
  flex-wrap: wrap;
}

.agenda__cartao--proxima {
  border-color: var(--lpdh-color-brand-interactive);
}

.agenda__cartao--concluida {
  opacity: 0.7;
}

.agenda__dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 74px;
  flex: none;
  padding: 12px 0;
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-bg);
  border: 1px solid var(--lpdh-color-border);
}

.agenda__dia-num {
  font: 700 24px/1 var(--lpdh-font-family-display);
  letter-spacing: -0.03em;
}

.agenda__dia-mes {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lpdh-color-text-secondary);
}

.agenda__corpo {
  min-width: 0;
  flex: 1;
}

.agenda__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lpdh-color-text-secondary);
}

.agenda__titulo {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.agenda__objetivo {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--lpdh-color-text-secondary);
}

.agenda__lado {
  flex: none;
  text-align: right;
}

.agenda__hora {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--lpdh-color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.nota-tracejada {
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px dashed var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-lg);
}

.nota-tracejada p:first-child {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}

.nota-tracejada p:last-child {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
}

/* --------------------------------------------------------------- materials */

.categorias {
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* The lead paragraph above ends flush against the first category rule otherwise. */
  margin-top: 26px;
}

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

.categoria__cabeca h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.regua {
  flex: 1;
  height: 1px;
  background: var(--lpdh-color-border);
}

.categoria__qtd {
  font-size: 12px;
  color: var(--lpdh-color-text-secondary);
}

.materiais {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.material {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-surface);
}

.material__corpo {
  min-width: 0;
  flex: 1;
}

.material__titulo {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.material__descricao {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lpdh-color-text-secondary);
}

.material__rodape {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.video__nota {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--lpdh-color-text-secondary);
  font-style: italic;
}

.material__peso {
  font-size: 11.5px;
  color: var(--lpdh-color-text-secondary);
}

/* ------------------------------------------------------------- viewer */

.visualizador__cabeca {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--lpdh-color-border);
}

.visualizador__voltar {
  flex: none;
  padding-right: 20px;
  border-right: 1px solid var(--lpdh-color-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--lpdh-color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.visualizador__voltar:hover {
  color: var(--lpdh-color-ink);
}

.visualizador__titulo {
  min-width: 0;
  margin-right: auto;
}

/* 32px is the size for a page title standing alone; here it shares a row with the controls,
   and the file below is the subject of the screen. */
.visualizador__titulo h1 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visualizador__meta {
  margin: 2px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lpdh-color-text-secondary);
}

/* A viewport, not a thumbnail: an iframe defaults to 300×150, which shows one strip of a
   slide. Height is what makes a deck legible, so it takes the window rather than a fixed
   value, minus the room the header and the back link occupy. */
.visualizador {
  display: block;
  width: 100%;
  height: calc(100vh - 260px);
  min-height: 460px;
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-surface-2);
}

/* An image is fitted, not framed: whole and legible on arrival, with the download for the
   full-resolution file. `contain` keeps the aspect ratio of anything from a 16:9 infographic
   to a portrait screenshot. */
.visualizador--imagem {
  height: auto;
  /* No min-height: a wide image at a narrow width is short, and reserving a frame's worth of
     height would band it with empty space instead of fitting it. */
  min-height: 0;
  max-height: calc(100vh - 260px);
  object-fit: contain;
  background: var(--lpdh-color-surface);
}

/* Reading a 16:9 deck is width-bound, and the portal's 1120px column is set for prose. This
   screen has one job, so it uses the window: at 1920px the slide is nearly twice the size. */
.conteudo--visualizador {
  max-width: none;
  padding-bottom: 28px;
}

/* --------------------------------------------------------------- syllabus */

.ementa {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ementa__item {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 26px 28px;
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-surface);
}

.ementa__num {
  flex: 0 0 96px;
}

.ementa__num p:first-child {
  margin: 0;
  font-family: var(--lpdh-font-family-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--lpdh-color-brand-interactive);
}

.ementa__num p:last-child {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--lpdh-color-text-secondary);
}

.ementa__corpo {
  flex: 1 1 380px;
  min-width: 0;
}

.ementa__corpo h2 {
  margin: 0 0 6px;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.ementa__objetivo {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
  max-width: 46rem;
}

.ementa__objetivo strong {
  font-weight: 600;
  color: var(--lpdh-color-ink);
}

.ementa__conteudo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ementa__conteudo li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.6;
}

.ementa__conteudo li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--lpdh-color-brand-interactive);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------------- Q & A */

.duvidas {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}

.duvidas__principal {
  flex: 1 1 420px;
  min-width: 0;
}

.duvidas__forma {
  padding: 22px 24px;
  margin-bottom: 26px;
}

.duvidas__forma-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.duvidas__forma-nota {
  font-size: 12px;
  color: var(--lpdh-color-text-secondary);
}

.duvidas h2 {
  margin: 0 0 14px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.lista-empilhada {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--lpdh-color-border);
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-lg);
  overflow: hidden;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.pergunta {
  padding: 18px 22px;
  background: var(--lpdh-color-surface);
}

.pergunta__p {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pergunta__r {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--lpdh-color-text-secondary);
  max-width: 46rem;
}

.pergunta__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lpdh-color-text-secondary);
}

.pergunta__aguardando {
  margin: 0;
  font-size: 13px;
  color: var(--lpdh-color-border-strong);
  font-style: italic;
}

.duvidas__lado {
  flex: 1 1 280px;
  max-width: 340px;
  padding: 22px;
}

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

.instrutor__nome {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.instrutor__papel {
  margin: 0;
  font-size: 12px;
  color: var(--lpdh-color-text-secondary);
}

.duvidas__lado p.lead {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
}

.duvidas__sep {
  border: none;
  border-top: 1px solid var(--lpdh-color-border);
  margin: 18px 0;
}

/* ------------------------------------------------- Dúvidas conversation thread */

.duvida {
  padding-bottom: 20px;
}

.thread {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--lpdh-color-border);
}

.msg {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--lpdh-color-border);
}

.msg:last-child {
  border-bottom: none;
}

.msg--tina {
  border-left: 3px solid #0f6b4f;
  padding-left: 14px;
  margin-left: -17px;
  border-radius: 0 8px 8px 0;
}

.msg--instrutor {
  border-left: 3px solid var(--lpdh-color-brand-interactive);
  padding-left: 14px;
  margin-left: -17px;
  border-radius: 0 8px 8px 0;
}

.msg__avatar {
  flex: none;
  width: 36px;
  height: 36px;
}

.msg__avatar--foto {
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
}

.msg--tina .msg__avatar--foto {
  box-shadow: 0 0 0 2px #cfe6d9;
}

.msg__corpo {
  flex: 1;
  min-width: 0;
}

.msg__texto {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--lpdh-color-ink);
}

/* format_reply renders the reply as paragraphs and, when Tina enumerates, a bullet list. */
.msg__texto p {
  margin: 0 0 10px;
}

.msg__texto p:last-child {
  margin-bottom: 0;
}

.msg__texto ul {
  margin: 4px 0 10px;
  padding-left: 20px;
}

.msg__texto li {
  margin: 0 0 5px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font: 600 11px/1 var(--lpdh-font-family-display);
  letter-spacing: 0.02em;
  background: var(--lpdh-color-surface-2);
  color: var(--lpdh-color-text-secondary);
}

.chip--tina {
  background: #cfe6d9;
  color: #0c5a42;
}

.chip--instrutor {
  background: var(--lpdh-color-brand-soft-bg);
  color: var(--lpdh-color-brand-soft-text);
}

.chip--aluno {
  background: var(--lpdh-color-surface-2);
  color: var(--lpdh-color-text-secondary);
}

.etiqueta--respondida {
  background: var(--lpdh-color-semantic-success-soft-bg);
  color: var(--lpdh-color-semantic-success-soft-text);
}

.duvida__responder {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
}

.area--compacta {
  flex: 1;
  min-height: 44px;
  margin: 0;
}

/* ------------------------------------------------------------ certificate */

.diploma-caixa {
  position: relative;
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-surface);
  padding: 56px 48px;
  text-align: center;
  max-width: 44rem;
  overflow: hidden;
}

.diploma {
  position: relative;
}

.diploma--bloqueado {
  opacity: 0.42;
}

.diploma__logo {
  height: 18px;
  width: auto;
  margin: 0 auto 30px;
}

.diploma__rotulo {
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lpdh-color-text-secondary);
}

.diploma__nome {
  margin: 0 0 10px;
  font-size: 34px;
  letter-spacing: -0.03em;
}

.diploma__texto {
  margin: 0 auto;
  max-width: 30rem;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--lpdh-color-text-secondary);
}

.diploma__texto strong {
  color: var(--lpdh-color-ink);
  font-weight: 600;
}

.diploma__regua {
  display: block;
  width: 56px;
  height: 3px;
  margin: 28px auto;
  border-radius: 2px;
  background: var(--lpdh-color-brand-interactive);
}

.diploma__assinatura {
  margin: 0;
  font-size: 12.5px;
  color: var(--lpdh-color-text-secondary);
}

.diploma__codigo {
  margin: 14px 0 0;
  font: 400 12px/1 var(--lpdh-font-family-mono);
  letter-spacing: 0.18em;
  color: var(--lpdh-color-border-strong);
}

.diploma__cortina {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(237, 233, 222, 0.55);
}

.diploma__aviso {
  text-align: center;
  padding: 20px 26px;
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-brand-soft-bg);
  border: 1px solid var(--lpdh-color-brand-interactive);
  color: var(--lpdh-color-ink);
  max-width: 22rem;
}

.diploma__aviso p:first-child {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
}

.diploma__aviso p:last-child {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lpdh-color-brand-soft-text);
}

/* ---------------------------------------------------------------- account */

.conta__cartoes {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  max-width: 56rem;
}

.conta__cartoes > .cartao {
  flex: 1 1 320px;
  min-width: 0;
}

.conta__cartoes h2 {
  margin: 0 0 12px;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.conta__linha {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
}

.conta__linha strong {
  color: var(--lpdh-color-ink);
  font-weight: 600;
}

.preferencias {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preferencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 13.5px;
}

.preferencia--inativa {
  color: var(--lpdh-color-text-secondary);
}

.interruptor {
  width: 38px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  border: none;
  background: var(--lpdh-color-border);
  position: relative;
  cursor: not-allowed;
  opacity: 0.6;
}

.interruptor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}

/* ----------------------------------------------------------------- search */

.busca__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.busca__cabeca h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.03em;
}

.vazio {
  padding: 34px 30px;
  border: 1px dashed var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-lg);
  text-align: center;
}

.vazio p:first-child {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
}

.vazio p:last-child {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lpdh-color-text-secondary);
}

.grupos {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.grupo__cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.grupo__cabeca h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.resultado {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 15px 20px;
  background: var(--lpdh-color-surface);
  text-align: left;
  color: var(--lpdh-color-ink);
  text-decoration: none;
  font-family: var(--lpdh-font-family-body);
}

.resultado:hover {
  background: var(--lpdh-color-bg);
  color: var(--lpdh-color-ink);
}

.resultado__tipo {
  flex: none;
  margin-top: 2px;
  width: 52px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lpdh-color-brand-soft-text);
}

.resultado__corpo {
  min-width: 0;
}

.resultado__titulo {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.resultado__apoio {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lpdh-color-text-secondary);
}

/* ------------------------------------------------------------------ error */

.erro-tela {
  padding: 36px 40px 64px;
  max-width: 44rem;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 68rem) {
  .sessao__lado {
    position: static;
    max-width: none;
  }
}

@media (max-width: 60rem) {
  .entrada {
    grid-template-columns: minmax(0, 1fr);
  }

  .entrada__marca {
    padding: 40px 32px;
    border-right: none;
    border-bottom: 1px solid var(--lpdh-color-border);
    gap: 32px;
  }

  .entrada__titulo {
    font-size: 34px;
  }

  .entrada__painel {
    padding: 32px 24px 56px;
  }

  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .lateral {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--lpdh-color-border);
  }

  /* ------------------------------------------------------- instructor turma panel */

/* A native <select> was wrong here: the browser draws its open menu with the operating
 * system's own chrome — grey panel, blue highlight — which no stylesheet can reach. Every
 * turma is a submit button instead, so the open state is as designed as the closed one.
 *
 * The panel is deliberately distinct from the participant's "Sua turma" block: this view
 * belongs to the instructor, and it should not read as something a participant also has. */
.painel-instrutor {
  margin: 0 14px 22px;
  padding: 12px 12px 10px;
  border: 1px solid var(--lpdh-color-brand-soft-bg);
  border-radius: var(--lpdh-radius-lg);
  background: var(--lpdh-color-bg);
}

.painel-instrutor__rotulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding-left: 2px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lpdh-color-brand-soft-text);
}

.painel-instrutor__marca {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--lpdh-color-brand-interactive);
}

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

.turma-opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: var(--lpdh-radius-md);
  background: transparent;
  color: var(--lpdh-color-text-secondary);
  font-family: var(--lpdh-font-family-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--lpdh-motion-duration-fast) var(--lpdh-motion-easing-standard);
}

.turma-opcao:hover {
  background: var(--lpdh-color-surface);
  color: var(--lpdh-color-ink);
}

.turma-opcao[aria-current="true"] {
  background: var(--lpdh-color-surface);
  color: var(--lpdh-color-ink);
  box-shadow: var(--lpdh-shadow-sm);
}

.turma-opcao__numero {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--lpdh-radius-sm);
  background: var(--lpdh-color-surface-2);
  color: var(--lpdh-color-text-secondary);
  font: 600 11px/1 var(--lpdh-font-family-display);
}

.turma-opcao[aria-current="true"] .turma-opcao__numero {
  background: var(--lpdh-color-brand-interactive);
  color: #fff;
}

.turma-opcao__texto {
  min-width: 0;
}

.turma-opcao__nome {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.turma-opcao__periodo {
  display: block;
  font-size: 10.5px;
  color: var(--lpdh-color-border-strong);
}

.painel-instrutor__nota {
  margin: 10px 2px 0;
  padding-top: 9px;
  border-top: 1px solid var(--lpdh-color-border);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--lpdh-color-border-strong);
}

.lateral__nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .nav__item {
    width: auto;
  }

  .lateral__pe {
    margin-top: 20px;
  }

  .topo,
  .conteudo {
    padding-left: 20px;
    padding-right: 20px;
  }

  .saudacao {
    font-size: 26px;
  }

  .titulo-tela {
    font-size: 26px;
  }
}

@media (max-width: 40rem) {
  /* On a phone the row does not fit: the back link takes its own line above the title, and
     the download button sits beside the title rather than below it. */
  .visualizador__cabeca {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .visualizador__voltar {
    width: 100%;
    padding-right: 0;
    border-right: none;
  }

  .visualizador__titulo h1 {
    font-size: 17px;
  }

  .visualizador {
    height: calc(100vh - 230px);
    min-height: 380px;
  }

  /* A phone is narrow, so a wide infographic is unreadable fitted whole. It gets its natural
     width and scrolls sideways — the same trade the browser's own image view makes. */
  .visualizador--imagem {
    max-height: none;
  }

  .visualizador__moldura {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .visualizador__moldura .visualizador--imagem {
    width: auto;
    max-width: none;
    height: calc(100vh - 300px);
    min-height: 320px;
  }

  .entrada__base {
    gap: 20px;
    flex-wrap: wrap;
  }

  .trilha__link {
    flex-wrap: wrap;
    padding: 14px 16px;
  }

  .trilha__meta {
    margin-left: 50px;
  }

  .agenda__lado {
    text-align: left;
    width: 100%;
  }

  .ementa__item {
    gap: 14px;
    padding: 20px;
  }

  .ementa__num {
    flex-basis: auto;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .ementa__num p:last-child {
    margin: 0;
  }

  .diploma-caixa {
    padding: 32px 22px;
  }

  .diploma__nome {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .lateral,
  .topo,
  .naoimprimir {
    display: none !important;
  }

  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .diploma-caixa {
    border: none;
  }

  .diploma--bloqueado {
    opacity: 1;
  }

  .diploma__cortina {
    display: none;
  }
}

/* ============================================================================
   End-of-training survey and final quiz
   New controls only; the pages otherwise reuse .sessao__principal, .botao,
   .destaque, .input, .topicos. Built on the imported design tokens.
   ============================================================================ */

.avaliacao__secao {
  margin: 0 0 var(--lpdh-space-8);
}

.avaliacao__secao-titulo {
  margin: 0 0 var(--lpdh-space-4);
  padding-bottom: var(--lpdh-space-2);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lpdh-color-text-secondary);
  border-bottom: 1px solid var(--lpdh-color-border);
}

/* .pergunta already carries a surface background + padding from the Q&A page; as a
   <fieldset> it also needs its native chrome reset and a border to read as a card. */
fieldset.pergunta {
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-lg);
  margin: 0 0 var(--lpdh-space-4);
  min-inline-size: auto;
}

fieldset.pergunta.pergunta--falta {
  border-color: var(--lpdh-color-semantic-danger);
  background: var(--lpdh-color-semantic-danger-soft-bg);
}

.pergunta__texto {
  margin: 0 0 var(--lpdh-space-3);
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--lpdh-color-ink);
}

.pergunta__numero {
  margin-right: 4px;
  font-weight: 700;
  color: var(--lpdh-color-brand-interactive);
}

.pergunta__opcional {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--lpdh-color-text-secondary);
}

/* escala: a row of numbered radios between two end labels */
.escala {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lpdh-space-3);
}

.escala__ponta {
  flex: 0 1 auto;
  font-size: 12.5px;
  color: var(--lpdh-color-text-secondary);
}

.escala__opcoes {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  gap: var(--lpdh-space-4);
}

.escala__op {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.escala__op input,
.escolha__op input {
  width: 18px;
  height: 18px;
  accent-color: var(--lpdh-color-brand-interactive);
}

.escala__n {
  font-size: 13px;
  color: var(--lpdh-color-text-secondary);
}

/* escolha: option chips, stacked in a column on the quiz */
.escolha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lpdh-space-2);
}

.escolha--coluna {
  flex-direction: column;
}

.escolha__op {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--lpdh-space-2);
  padding: var(--lpdh-space-2) var(--lpdh-space-3);
  font-size: 14.5px;
  border: 1px solid var(--lpdh-color-border);
  border-radius: var(--lpdh-radius-md);
  cursor: pointer;
  transition: border-color var(--lpdh-motion-duration-fast);
}

.escolha__op:hover {
  border-color: var(--lpdh-color-border-strong);
}

.avaliacao__texto {
  width: 100%;
}

.avaliacao__nota {
  margin-top: var(--lpdh-space-3);
  font-size: 12.5px;
  color: var(--lpdh-color-text-secondary);
}

/* the call-to-action banner shared by the dashboard and the certificate page */
a.destaque--acao {
  display: block;
  padding: var(--lpdh-space-4) var(--lpdh-space-6);
  border-left-width: 4px;
  border-radius: 0 var(--lpdh-radius-lg) var(--lpdh-radius-lg) 0;
  background: var(--lpdh-color-surface);
  color: inherit;
  text-decoration: none;
  transition: background var(--lpdh-motion-duration-fast);
}

a.destaque--acao:hover {
  background: var(--lpdh-color-surface-2);
}

.destaque--acao .destaque__rotulo,
.destaque--acao .destaque__texto,
.destaque--acao .destaque__cta {
  display: block;
}

.destaque--acao .destaque__texto {
  margin-top: 4px;
}

.destaque--acao .destaque__cta {
  margin-top: var(--lpdh-space-2);
  font-weight: 600;
  color: var(--lpdh-color-brand-interactive);
}

.destaque--alerta {
  border-left-color: var(--lpdh-color-semantic-danger);
}

.destaque--alerta .destaque__texto {
  color: var(--lpdh-color-semantic-danger-text);
}

/* ----------------------------------------------------------------------------
   Portal-local additions (this app, not part of the imported LP Digital Hive
   bundle above). Kept at the end so the copied bundle stays a verbatim block.

   Logout is a POST form now (a state change must not ride a GET), so the two
   controls that used to be links are submit buttons styled to match the links
   they replaced. No inline styles: the strict CSP forbids the style attribute.
---------------------------------------------------------------------------- */

.botao-sair {
  font: 400 12px/1 var(--lpdh-font-family-body);
  color: var(--lpdh-color-border-strong);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.botao-sair:hover {
  color: var(--lpdh-color-brand-interactive);
}

.forma-inline {
  display: inline;
}

.link-texto {
  font: inherit;
  color: var(--lpdh-color-brand-interactive);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* Phase 3 ingestion: the recording player and the AI digest on the meeting page. Kept as classes,
   not inline styles, because the Content-Security-Policy is style-src 'self' (no unsafe-inline). */
.encontro__player {
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  background: #000;
}
/* ------------------------------------------- texto rico (portal/web/richtext.py)

   The digest and the transcript details are markdown written by Claude and by Gemini. They used to
   be dumped as escaped plain text under `white-space: pre-wrap`, which is why the page showed
   literal asterisks and hashes. The renderer now emits real blocks, so they are styled here. */

.rico > :first-child {
  margin-top: 0;
}

.rico > :last-child {
  margin-bottom: 0;
}

.rico p {
  margin: 0 0 13px;
  text-wrap: pretty;
}

.rico h4 {
  margin: 22px 0 10px;
  font: 700 16px/1.3 var(--lpdh-font-family-display);
  letter-spacing: -0.02em;
}

/* Heavier than the bold lead-in that opens many digest paragraphs: a section heading that reads
   lighter than the text under it inverts the hierarchy. */
.rico h5 {
  margin: 22px 0 9px;
  font: 700 15.5px/1.35 var(--lpdh-font-family-display);
  letter-spacing: -0.01em;
  color: var(--lpdh-color-ink);
}

.rico__lista {
  margin: 0 0 13px;
  padding-left: 19px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* "Próximas etapas" is a checklist in the export. The box is decoration drawn in CSS: a real
   <input type=checkbox> would promise the portal remembers a tick, and it does not. */
.rico__tarefas {
  margin: 0 0 13px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rico__tarefas li {
  position: relative;
  padding-left: 26px;
}

.rico__tarefas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--lpdh-color-border-strong);
  border-radius: 3px;
}

/* ------------------------------------------- sala do encontro (D25) */

/* A list row pairs the encontro card with its join button; the card keeps its own link target,
   so the button is a sibling rather than a nested anchor (nested anchors are invalid HTML). */
.encontro-linha {
  display: flex;
  gap: 12px;
  align-items: center;
}

.encontro-linha .encontro-cartao {
  flex: 1 1 auto;
}

.grupo-mes--proximos .grupo-mes__rotulo {
  color: var(--lpdh-color-brand-soft-text);
}

.encontro-cartao--proximo {
  border-color: var(--lpdh-color-brand-soft-text);
}

.chamada-sala {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: var(--lpdh-radius-md);
  background: var(--lpdh-color-brand-soft-bg);
}

.chamada-sala__quando {
  margin: 0;
  font: 600 14px/1.4 var(--lpdh-font-family-body);
  color: var(--lpdh-color-brand-soft-text);
}

.chamada-sala__vazio {
  margin: 0;
  font-size: 13px;
  color: var(--lpdh-color-ink-muted, #5c6b63);
}

/* ---------------------------------------------------------------- Iris
   The Iris page. The teaser card on the home screen (.cartao-iris) is the dark
   inverse surface; this is the working surface, so it sits on the light ground
   the rest of the reading screens use and borrows only the label treatment. */
.iris-pergunta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--lpdh-color-surface);
  border: 1px solid var(--lpdh-color-border);
  margin-bottom: 22px;
}

.iris-pergunta__acoes {
  display: flex;
  justify-content: flex-end;
}

.iris-resposta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 26px;
  border-radius: 14px;
  background: var(--lpdh-color-bg);
  border: 1px solid var(--lpdh-color-border);
}

.iris-resposta__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* The label colour on .cartao-iris is tuned for the dark surface; on this light
   one it would wash out, so the token is the brand ink instead. */
.iris-resposta .cartao-iris__rotulo {
  color: var(--lpdh-color-brand-interactive);
}

.selo-fonte {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--lpdh-color-brand-soft-bg);
  color: var(--lpdh-color-brand-soft-text);
}

.iris-fontes__titulo {
  margin: 4px 0 0;
  font: 600 12.5px/1.2 var(--lpdh-font-family-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lpdh-color-text-secondary);
}

.iris-fontes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.iris-fonte {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--lpdh-radius-md);
  border: 1px solid var(--lpdh-color-border);
  background: var(--lpdh-color-surface);
  text-decoration: none;
  color: var(--lpdh-color-ink);
}

.iris-fonte:hover {
  border-color: var(--lpdh-color-brand-interactive);
}

.iris-fonte__tipo {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lpdh-color-text-secondary);
}

.iris-fonte__rotulo {
  font-size: 13px;
  line-height: 1.5;
}

.iris-exemplos {
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px dashed var(--lpdh-color-border);
}

.iris-exemplos__titulo {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lpdh-color-text-secondary);
}

.iris-exemplos__lista {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--lpdh-color-text-secondary);
}