/* ===========================================================
   IEFP CRM — Manual · design system 1:1 com a app
   Os tokens NÃO se copiam para aqui: vêm de estilo/tokens.css,
   que o CI copia para esta pasta antes de construir o manual.
   Mexer nas cores faz-se lá, e muda a app, o repositório e isto.
   =========================================================== */
@import url("tokens.css");

/* --- Cor primária (verde IEFP) --- */
[data-md-color-primary="custom"] {
  --md-primary-fg-color:        var(--g800);
  --md-primary-fg-color--light: var(--g600);
  --md-primary-fg-color--dark:  var(--g900);
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255,255,255,.7);
}
[data-md-color-accent="custom"] {
  --md-accent-fg-color:              var(--g700);
  --md-accent-fg-color--transparent: rgba(0,137,75,.1);
  --md-accent-bg-color:              #ffffff;
  --md-accent-bg-color--light:       rgba(255,255,255,.7);
}

/* --- Apelidos locais para os tokens partilhados ---
   Declarados TAMBÉM no body porque é aí que o Material põe o
   data-md-color-scheme; declarados só no :root, o modo escuro
   não os apanhava. */
:root, body {
  --iefp-g900:var(--g900); --iefp-g800:var(--g800); --iefp-g700:var(--g700);
  --iefp-g600:var(--g600); --iefp-g400:var(--g400); --iefp-g300:var(--g300);
  --iefp-g100:var(--g100); --iefp-g50:var(--g50);
  --iefp-accent:var(--accent);
  --iefp-bg:var(--bg); --iefp-surface:var(--surface);
  --iefp-surface2:var(--surface2); --iefp-surface3:var(--surface3);
  --iefp-border:var(--border); --iefp-text:var(--text);
  --iefp-muted:var(--muted); --iefp-muted2:var(--muted2);
  --iefp-shadow:var(--shadow); --iefp-shadow-lg:var(--shadow-lg);
  --iefp-r:var(--r); --iefp-rl:var(--rl); --iefp-rs:var(--rs);
  --md-text-font: "Inter";
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--g600);
  --md-default-bg-color: var(--iefp-bg);
  --md-default-fg-color: var(--iefp-text);
}

/* ===========================================================
   1. Canvas da app: fundo cinza-esverdeado + conteúdo em card
   =========================================================== */
[data-md-color-scheme="default"] { --md-default-bg-color: var(--iefp-bg); }
.md-main { background: var(--iefp-bg); }

.md-content {
  background: var(--iefp-surface);
  border: 1px solid var(--iefp-border);
  border-radius: var(--iefp-rl);
  box-shadow: var(--iefp-shadow);
  margin: 1.1rem .4rem 2rem;
  animation: iefp-fade .26s ease;
}
.md-content__inner { padding: 1.1rem 1.6rem 1.4rem; margin: 0; }
.md-content__inner::before { display: none; }
@media screen and (max-width: 44.984375em) {
  .md-content { margin: .6rem .35rem 1.4rem; }
  .md-content__inner { padding: .9rem 1rem 1.2rem; }
}
@keyframes iefp-fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Largura de leitura confortável */
@media screen and (min-width: 76.25em) { .md-grid { max-width: 68rem; } }

/* Scrollbars como na app */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--iefp-border); border-radius: 20px; border: 2px solid var(--iefp-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--iefp-muted2); }
::selection { background: rgba(0,166,81,.22); }

/* ===========================================================
   2. Header claro com blur (como o .header da app)
   =========================================================== */
.md-header {
  background: color-mix(in srgb, var(--iefp-surface) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--iefp-text);
  border-bottom: 1px solid var(--iefp-border);
  box-shadow: none;
}
.md-header[data-md-state="shadow"],
.md-header--shadow { box-shadow: 0 4px 14px rgba(0,60,33,.07); }
.md-header__title { font-weight: 800; font-size: .85rem; color: var(--iefp-text); }
.md-header__button { color: var(--iefp-text); }
.md-header__button:hover { color: var(--iefp-g700); opacity: 1; }
.md-header__button.md-logo { padding: .2rem; }
.md-header__button.md-logo img { height: 34px; width: auto; }

/* --- Cluster de botões do header = .icon-btn da app (40×40, com moldura) --- */
/* Ordem IGUAL à app: idioma (PT) -> tema (lua) -> pesquisa */
.md-header__inner > .md-header__option:not([data-md-component]) { order: 1; }    /* idioma (PT/EN) */
.md-header__inner > .md-header__option[data-md-component="palette"] { order: 2; } /* tema (lua/sol) */
.md-header__inner > label.md-icon[for="__search"],
.md-header__inner > .md-search { order: 3; }
/* espacamento IGUAL a app: gap de 9px entre os botoes do cluster (.header-r) */
.md-header__option { margin: 0 0 0 9px; padding: 0; }
.md-header__inner > .md-search { margin-left: 9px; }

/* Botão de tema (lua/sol) = .icon-btn da app (40×40, moldura, ícone cinza).
   :not([hidden]) — o Material mantém o toggle INATIVO com [hidden]; só o ATIVO
   é que deve mostrar-se (senão apareciam lua E sol ao mesmo tempo). */
.md-header__option[data-md-component="palette"] > label.md-header__button.md-icon[hidden] { display: none; }
.md-header__option[data-md-component="palette"] > label.md-header__button.md-icon:not([hidden]) {
  width: 40px; height: 40px; margin: 0; padding: 0; opacity: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--iefp-border);
  background: var(--iefp-surface); color: var(--iefp-muted);
  transition: background .15s, border-color .15s, color .15s;
}
.md-header__option[data-md-component="palette"] > label.md-header__button.md-icon:not([hidden]):hover {
  background: var(--iefp-surface2); border-color: var(--iefp-g300); color: var(--iefp-text);
}
.md-header__option[data-md-component="palette"] > label.md-header__button.md-icon svg { width: 18px; height: 18px; }

/* Botão de idioma (PT/EN) = .icon-btn.lang-btn da app (40×40, texto verde, sem globo) */
.md-header .md-select > .md-header__button.md-icon {
  width: 40px; height: 40px; padding: 0; margin: 0; opacity: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--iefp-border);
  background: var(--iefp-surface); color: var(--iefp-g700);
  font-weight: 800; font-size: .78rem; letter-spacing: .04em;
  transition: background .15s, border-color .15s, color .15s;
}
.md-header .md-select > .md-header__button.md-icon:hover {
  background: var(--iefp-surface2); border-color: var(--iefp-g300); color: var(--iefp-g700);
}
/* sem globo — igual ao botão PT/EN da app (só texto verde) */
.md-header .md-select > .md-header__button.md-icon svg { display: none; }
/* mostra o idioma ATUAL (como o toggle da app): PT nas páginas PT, EN nas EN */
.md-header .md-select > .md-header__button.md-icon::after { content: "PT/EN"; font: inherit; color: inherit; }
html[lang^="pt"] .md-header .md-select > .md-header__button.md-icon::after { content: "PT"; }
html[lang^="en"] .md-header .md-select > .md-header__button.md-icon::after { content: "EN"; }
/* Dropdown de idiomas */
.md-header .md-select__inner {
  border-radius: 10px; box-shadow: var(--iefp-shadow-lg);
  background: var(--iefp-surface); border: 1px solid var(--iefp-border); overflow: hidden;
}
.md-header .md-select__list { background: var(--iefp-surface); }
.md-header .md-select__link {
  color: var(--iefp-text); font-size: .76rem; font-weight: 600;
}
.md-header .md-select__link:hover { background: var(--iefp-g50); color: var(--iefp-g700); }

/* Pesquisa do header = .search-inp da app */
.md-search__form {
  background: var(--iefp-surface2);
  border: 1px solid var(--iefp-border);
  border-radius: var(--iefp-rs);
  height: 2.5rem;
  box-shadow: none;
  transition: border .14s, box-shadow .14s;
}
.md-search__form:hover { background: var(--iefp-surface2); border-color: var(--iefp-g300); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--iefp-surface);
  border-color: var(--iefp-g400);
  box-shadow: 0 0 0 3px rgba(0,166,81,.14);
  border-radius: var(--iefp-rs) var(--iefp-rs) 0 0;
}
.md-search__input { font-size: .74rem; color: var(--iefp-text); }
.md-search__input::placeholder { color: var(--iefp-muted2); }
.md-search__input + .md-search__icon { color: var(--iefp-muted); }
.md-search__output { border-radius: 0 0 var(--iefp-rs) var(--iefp-rs); box-shadow: var(--iefp-shadow-lg); }
.md-search-result__meta { background: var(--iefp-surface2); color: var(--iefp-muted); }

/* ===========================================================
   3. Sidebar esquerda = painel verde-escuro da app
   =========================================================== */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-sidebar__scrollwrap {
    background: linear-gradient(180deg, var(--iefp-g900), #04492c 60%, #033c24);
    border-radius: var(--iefp-rl);
    margin: 1.1rem 0 1.4rem .2rem;
    padding: .55rem .45rem;
    box-shadow: var(--iefp-shadow);
    scrollbar-color: rgba(255,255,255,.25) transparent;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar { width: 6px; }
  .md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border: 0; }

  /* Grupos (1. Primeiros passos, …) = .nav-group da app */
  .md-sidebar--primary .md-nav__item--section > .md-nav__link,
  .md-sidebar--primary .md-nav__title {
    font-size: .56rem; text-transform: uppercase; letter-spacing: .06em;
    color: rgba(255,255,255,.5) !important; font-weight: 700;
    padding: .6rem .55rem .15rem; background: transparent; box-shadow: none;
  }
  .md-sidebar--primary .md-nav__title .md-logo { display: none; }

  /* O título "IEFP CRM — Manual" é redundante no desktop (já está no cabeçalho)
     e, sendo sticky+transparente, arrastava por cima dos itens no scroll. */
  .md-sidebar--primary .md-nav--primary > .md-nav__title { display: none; }

  /* Itens de topo SEM filhos (Início, 7. FAQ, 8. Glossário) = mesmo estilo
     de grupo das secções 1–6, para a navbar ficar uniforme. */
  .md-sidebar--primary .md-nav--primary > .md-nav__list
    > .md-nav__item:not(.md-nav__item--nested):not(.md-nav__item--section)
    > .md-nav__link {
    font-size: .56rem; text-transform: uppercase; letter-spacing: .06em;
    font-weight: 700; color: rgba(255,255,255,.5);
    padding: .6rem .55rem .15rem;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__list
    > .md-nav__item:not(.md-nav__item--nested):not(.md-nav__item--section)
    > .md-nav__link:hover {
    background: transparent; color: rgba(255,255,255,.82);
  }

  /* Labels da navbar nunca cortados (sem ellipsis "...") */
  .md-sidebar--primary .md-nav__link .md-ellipsis { overflow: visible; text-overflow: clip; }
  /* Títulos de grupo numa só linha — palavra longa ("FUNCIONALIDADES") não parte */
  .md-sidebar--primary .md-nav__item--section > .md-nav__link .md-ellipsis { white-space: nowrap; }

  /* Secções de topo COM página-índice (Funcionalidades, RGPD): o Material mete
     um <a> dentro do contentor → padding a dobrar (ficavam mais altas).
     Tira o padding do contentor e dá ao link-índice o MESMO estilo de grupo. */
  .md-sidebar--primary .md-nav__item--section > .md-nav__container { padding: 0; align-items: center; }
  .md-sidebar--primary .md-nav__item--section > .md-nav__container > a.md-nav__link {
    font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: rgba(255,255,255,.5) !important;
    padding: .6rem .55rem .15rem; margin: 0; border-radius: 0;
  }
  .md-sidebar--primary .md-nav__item--section > .md-nav__container > a.md-nav__link:hover {
    background: transparent; color: rgba(255,255,255,.82) !important;
  }
  /* o chevron do contentor de topo é redundante (secções já expandidas) */
  .md-sidebar--primary .md-nav__item--section > .md-nav__container > label.md-nav__link { display: none; }

  /* Contentores de índice ANINHADOS (3.1 Gerir a turma, 5.4 Propostas):
     tirar o padding do contentor p/ o <a> interno alinhar com os irmãos
     e não somar altura (evita a linha órfã e a altura a mais). */
  .md-sidebar--primary .md-nav__link.md-nav__container { padding: 0; }
  .md-sidebar--primary .md-nav__item--nested:not(.md-nav__item--section)
    > .md-nav__container > a.md-nav__link { flex: 1 1 auto; }

  /* Indentar o 3.º nível (sub-itens de 3.1, 5.4…) com guia subtil */
  .md-sidebar--primary .md-nav__item--nested:not(.md-nav__item--section)
    > .md-nav > .md-nav__list {
    margin-left: .55rem; padding-left: .4rem;
    border-left: 1px solid rgba(255,255,255,.14);
  }

  /* Links = .nav-link da app */
  .md-sidebar--primary .md-nav__link {
    color: rgba(255,255,255,.85);
    border-radius: 10px;
    padding: .34rem .55rem;
    margin: 1px 0;
    font-weight: 600;
    font-size: .7rem;
    position: relative;
    transition: background .14s, color .14s;
  }
  .md-sidebar--primary .md-nav__link:hover { background: rgba(255,255,255,.1); color: #fff; }
  .md-sidebar--primary .md-nav__link--active,
  .md-sidebar--primary .md-nav__link[aria-current="page"] {
    background: rgba(255,255,255,.16); color: #fff; font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .md-sidebar--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__link--active::before {
    content: ""; position: absolute; left: -0.45rem; top: 50%; transform: translateY(-50%);
    width: 4px; height: 20px; background: var(--iefp-accent); border-radius: 0 4px 4px 0;
  }
  .md-sidebar--primary .md-nav__icon,
  .md-sidebar--primary .md-nav__link::after { color: rgba(255,255,255,.6); }
}

/* TOC à direita */
.md-nav--secondary .md-nav__title {
  font-size: .58rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--iefp-muted); font-weight: 700; background: transparent; box-shadow: none;
}
.md-nav--secondary { font-size: .68rem; }
.md-nav--secondary .md-nav__link { color: var(--iefp-muted); }
.md-nav--secondary .md-nav__link:hover { color: var(--iefp-g600); }
.md-nav--secondary .md-nav__link--active { color: var(--iefp-g700); font-weight: 700; }

/* ===========================================================
   4. Tipografia (escala da app)
   =========================================================== */
.md-typeset { font-size: .8rem; line-height: 1.7; color: var(--iefp-text); }
.md-typeset p { margin: 0 0 1em; }
.md-typeset ul, .md-typeset ol { margin-bottom: 1em; }
.md-typeset li { margin-bottom: .3em; }

.md-typeset h1 {
  font-size: 1.7rem; font-weight: 800; line-height: 1.15;
  letter-spacing: -.02em; margin: 0 0 .6rem; color: var(--iefp-g900);
}
.md-typeset h2 {
  font-size: 1.22rem; font-weight: 800; line-height: 1.25;
  letter-spacing: -.01em; margin: 2.2rem 0 .9rem;
  padding-bottom: .3rem; border-bottom: 2px solid var(--iefp-g100);
  color: var(--iefp-g800);
}
.md-typeset h3 { font-size: .98rem; font-weight: 750; margin-top: 1.7rem; color: var(--iefp-text); }
.md-typeset h4 { font-size: .85rem; font-weight: 700; }
[data-md-color-scheme="slate"] .md-typeset h1 { color: #e7f3ec; }
[data-md-color-scheme="slate"] .md-typeset h2 { color: var(--iefp-g600); border-bottom-color: rgba(0,166,81,.22); }

/* Parágrafo de entrada */
.md-typeset h1 + p { font-size: .92rem; line-height: 1.6; color: var(--iefp-muted); }

/* Links */
.md-typeset a { color: var(--iefp-g700); font-weight: 600; }
.md-typeset a:hover { color: var(--iefp-g600); text-decoration: underline; text-underline-offset: 3px; }

/* ===========================================================
   5. Cartões de menu (grid cards) = .card + .kpi da app
   =========================================================== */
.md-typeset .grid.cards { gap: .8rem; margin: 1.1rem 0; }
.md-typeset .grid.cards > ul { gap: .8rem; }
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--iefp-border);
  border-radius: var(--iefp-rl);
  padding: 1.15rem 1.2rem 1rem;
  background: var(--iefp-surface);
  box-shadow: var(--iefp-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-3px);
  border-color: var(--iefp-g400);
  box-shadow: 0 16px 40px rgba(0,107,60,.16);
}

/* Ícone do cartão = .kpi-ic / .mini-item .ic da app */
.md-typeset .grid.cards svg.icon {
  display: inline-flex; box-sizing: border-box;
  width: 40px; height: 40px; padding: 9px;
  border-radius: 10px;
  background: var(--iefp-g100); color: var(--iefp-g700);
  margin: 0 0 .55rem; vertical-align: top;
  stroke-width: 2;
  transition: background .18s ease, color .18s ease;
}
.md-typeset .grid.cards > ul > li:hover svg.icon { background: var(--iefp-g600); color: #fff; }
.md-typeset .grid.cards strong {
  display: block; font-size: .92rem; font-weight: 800;
  color: var(--iefp-text); margin-bottom: .05rem;
}
.md-typeset .grid.cards hr { margin: .6rem 0; border: 0; border-top: 1px solid var(--iefp-border); }
.md-typeset .grid.cards p { font-size: .72rem; line-height: 1.55; color: var(--iefp-muted); }
.md-typeset .grid.cards li > p:last-child > a {
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 700; font-size: .74rem; color: var(--iefp-g700);
}
.md-typeset .grid.cards li > p:last-child > a:hover { color: var(--iefp-g600); text-decoration: none; gap: .5rem; }

/* ===========================================================
   6. Hero da homepage (gradiente da app)
   =========================================================== */
.iefp-hero {
  position: relative; overflow: hidden;
  border-radius: var(--iefp-rl);
  padding: 1.6rem 1.7rem 1.5rem;
  margin: .2rem 0 1.4rem;
  background: linear-gradient(125deg, var(--iefp-g800), var(--iefp-g600) 55%, var(--iefp-g400));
  color: #fff;
  box-shadow: 0 16px 40px rgba(0,107,60,.24);
}
.iefp-hero::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  pointer-events: none;
}
.md-typeset .iefp-hero h1 { color: #fff; margin: 0 0 .35rem; font-size: 1.65rem; }
.md-typeset .iefp-hero p { color: rgba(255,255,255,.9); max-width: 48rem; margin: 0; font-size: .82rem; position: relative; }
.iefp-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; position: relative; }
.md-typeset .iefp-hero-actions a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 10px; font-weight: 700; font-size: .74rem;
  text-decoration: none !important; transition: transform .08s, background .15s;
}
.md-typeset .iefp-hero-actions a:active { transform: translateY(1px); }
.md-typeset .iefp-hero-actions .hb-solid { background: #fff; color: var(--iefp-g800); }
.md-typeset .iefp-hero-actions .hb-solid:hover { background: #f0f0f0; color: var(--iefp-g900); }
.md-typeset .iefp-hero-actions .hb-out {
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.45);
}
.md-typeset .iefp-hero-actions .hb-out:hover { background: rgba(255,255,255,.28); color: #fff; }
.iefp-hero-actions svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
/* Sem âncora ¶ (permalink) no título do hero — ali não é uma secção navegável */
.md-typeset .iefp-hero .headerlink { display: none; }

/* ===========================================================
   7. Admonitions = callouts da app
   =========================================================== */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--iefp-border);
  border-left-width: 4px;
  border-radius: var(--iefp-r);
  box-shadow: var(--iefp-shadow);
  font-size: .74rem;
  background: var(--iefp-surface);
}
.md-typeset .admonition-title,
.md-typeset summary { font-weight: 700; padding-top: .5rem; padding-bottom: .5rem; }
.md-typeset .admonition > :last-child { margin-bottom: .55rem; }

.md-typeset :is(.admonition, details):is(.note, .info, .abstract) { border-left-color: var(--iefp-g600); }
.md-typeset :is(.note, .info, .abstract) > :is(.admonition-title, summary) { background: var(--iefp-g50); }
.md-typeset :is(.note, .info, .abstract) > :is(.admonition-title, summary)::before { background-color: var(--iefp-g700); }
.md-typeset :is(.admonition, details).tip { border-left-color: var(--iefp-accent); }
.md-typeset .tip > :is(.admonition-title, summary) { background: rgba(122,193,67,.12); }
.md-typeset :is(.admonition, details).warning { border-left-color: #d97706; }
.md-typeset .warning > :is(.admonition-title, summary) { background: #fef3e2; }
[data-md-color-scheme="slate"] .md-typeset .warning > :is(.admonition-title, summary) { background: #3a2c12; }

/* ===========================================================
   8. Tabelas = .table-wrap da app (header discreto uppercase)
   =========================================================== */
.md-typeset table:not([class]) {
  border: 1px solid var(--iefp-border);
  border-radius: var(--iefp-r); overflow: hidden;
  box-shadow: var(--iefp-shadow);
  font-size: .74rem;
  background: var(--iefp-surface);
}
.md-typeset table:not([class]) th {
  background: var(--iefp-surface2); color: var(--iefp-muted);
  font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; border: 0; padding: .65em 1.1em;
}
.md-typeset table:not([class]) td {
  border: 0; border-top: 1px solid var(--iefp-border); padding: .7em 1.1em;
}
.md-typeset table:not([class]) tbody tr { transition: background .12s; }
.md-typeset table:not([class]) tbody tr:hover { background: var(--iefp-surface2); }

/* ===========================================================
   9. Código
   =========================================================== */
.md-typeset code {
  background: var(--iefp-g50); color: var(--iefp-g800);
  border: 1px solid var(--iefp-g100); border-radius: 6px;
  padding: .1em .38em; font-size: .82em;
}
[data-md-color-scheme="slate"] .md-typeset code {
  background: rgba(0,166,81,.10); color: #8fe0b3; border-color: rgba(0,166,81,.2);
}
.md-typeset pre > code { border-radius: var(--iefp-r); padding: 1em 1.1em; border: 0; }
.md-typeset .highlight { border-radius: var(--iefp-r); box-shadow: var(--iefp-shadow); }

/* Citações */
.md-typeset blockquote {
  border-left: 4px solid var(--iefp-g600); border-radius: 0 var(--iefp-rs) var(--iefp-rs) 0;
  background: var(--iefp-g50); color: var(--iefp-muted);
}

/* Imagens (screenshots) */
.md-typeset img:not(.twemoji):not(.emojione) {
  border-radius: var(--iefp-r);
  border: 1px solid var(--iefp-border);
  box-shadow: var(--iefp-shadow);
}

/* Vídeos de demonstração (mesma moldura das imagens) */
.md-typeset .iefp-video {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10;          /* reserva o espaço (1440×900) — evita o leitor colapsado */
  border-radius: var(--iefp-r);
  border: 1px solid var(--iefp-border);
  box-shadow: var(--iefp-shadow);
  background: #000;
}

/* Botões Material */
.md-typeset .md-button {
  border-radius: 10px; font-weight: 700; padding: .5em 1.1em; border-width: 1px;
  transition: transform .08s, background .15s, box-shadow .15s;
}
.md-typeset .md-button:active { transform: translateY(1px); }
.md-typeset .md-button--primary {
  background: var(--iefp-g600); border-color: var(--iefp-g600); color: #fff;
  box-shadow: 0 2px 8px rgba(0,166,81,.28);
}
.md-typeset .md-button--primary:hover { background: var(--iefp-g700); border-color: var(--iefp-g700); }

/* Botão "voltar ao topo" */
.md-top {
  background: var(--iefp-surface); color: var(--iefp-text);
  border: 1px solid var(--iefp-border); box-shadow: var(--iefp-shadow);
}
.md-top:hover { background: var(--iefp-g600); color: #fff; }

/* ===========================================================
   10. Ícones de linha (SVG inline) — monocromáticos
   =========================================================== */
.md-typeset .lucide svg,
.md-typeset svg.icon {
  width: 1.15em; height: 1.15em;
  vertical-align: -.18em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Rodapé "meta" do Material */
.md-footer { background: var(--iefp-g900); }
.md-footer-meta { background: #04492c; }
.md-footer__inner { padding-top: .6rem; padding-bottom: .6rem; }
.md-footer__link { color: rgba(255,255,255,.85); }
.md-footer__link:hover { color: #fff; }

/* ===========================================================
   11. Ícones de admonição IGUAIS aos da app (estilo de linha)
   =========================================================== */
:root {
  --md-admonition-icon--note:    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>');
  --md-admonition-icon--info:    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>');
  --md-admonition-icon--tip:     url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6z"/><path d="M19 14l.7 1.9L21.6 17l-1.9.7L19 19.6l-.7-1.9L16.4 17l1.9-.7z"/></svg>');
  --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg>');
  --md-admonition-icon--question:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01"/></svg>');
  --md-admonition-icon--success: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
  --md-admonition-icon--danger:  url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg>');
}

/* ===========================================================
   12. Rodapé de navegação consistente (override main.html)
   =========================================================== */
.iefp-foot-sep { margin: 2.6em 0 1.2em; border: 0; border-top: 1px solid var(--iefp-border); }
.iefp-foot { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: .9rem; }
.iefp-foot-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 1px solid var(--iefp-border);
  border-radius: 10px; font-size: .72rem; font-weight: 700;
  color: var(--iefp-text) !important; text-decoration: none !important;
  background: var(--iefp-surface);
  transition: transform .08s, background .15s, border-color .15s, color .15s;
}
.iefp-foot-btn:active { transform: translateY(1px); }
.iefp-foot-btn:hover { background: var(--iefp-surface2); border-color: var(--iefp-g300); color: var(--iefp-text) !important; }
.iefp-foot-btn svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* CTA = .btn da app (verde com glow) */
.iefp-foot-cta {
  background: var(--iefp-g600) !important; border-color: transparent !important;
  color: #fff !important; box-shadow: 0 2px 8px rgba(0,166,81,.28);
}
.iefp-foot-cta:hover { background: var(--iefp-g700) !important; color: #fff !important; }

/* Crédito no rodapé escuro = .made-by da app (mesmo look e ordem) */
.md-copyright { color: rgba(255,255,255,.55); font-size: .72rem; font-weight: 600; }
.md-copyright__highlight { color: rgba(255,255,255,.55); }
.md-copyright .iefp-sep { opacity: .5; }
.md-copyright .made-by {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: -2px;
  font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.55);
  text-decoration: none; transition: color .14s;
}
.md-copyright .made-by:hover { color: #fff; }
.md-copyright .made-by svg {
  width: 14px; height: 14px; flex: 0 0 auto; opacity: .85;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ===========================================================
   13. Acessibilidade
   =========================================================== */
/* Foco visível por teclado (navegação acessível) */
.md-typeset a:focus-visible,
.iefp-foot-btn:focus-visible,
.iefp-hero-actions a:focus-visible,
.md-copyright .made-by:focus-visible,
.md-nav__link:focus-visible {
  outline: 2px solid var(--iefp-g600);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Respeitar "reduzir movimento" do sistema */
@media (prefers-reduced-motion: reduce) {
  .md-content { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================
   14. Galeria de vídeos (página "Vídeos")
   =========================================================== */
.md-typeset .video-gallery {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.2rem; margin: 1.3rem 0;
}
@media screen and (max-width: 48em) { .md-typeset .video-gallery { grid-template-columns: 1fr; } }
.md-typeset .video-gallery figure { margin: 0; }
.md-typeset .video-gallery figcaption { margin-top: .45rem; }
.md-typeset .video-gallery figcaption strong { color: var(--iefp-g900); font-weight: 800; font-size: .84rem; }
[data-md-color-scheme="slate"] .md-typeset .video-gallery figcaption strong { color: #e7f3ec; }
.md-typeset .video-gallery figcaption span { display: block; color: var(--iefp-muted); font-size: .72rem; margin-top: .1rem; }

/* ===========================================================
   15. Quiz / Autoavaliação
   =========================================================== */
.quiz-bar {
  position: sticky; top: 3.2rem; z-index: 3;
  background: var(--iefp-g800); color: #fff;
  border-radius: var(--iefp-rs); padding: .55rem 1rem; margin: .4rem 0 1.1rem;
  font-weight: 800; font-size: .8rem; box-shadow: var(--iefp-shadow);
}
.md-typeset .quiz-q {
  border: 1px solid var(--iefp-border); border-radius: var(--iefp-rl);
  background: var(--iefp-surface); box-shadow: var(--iefp-shadow);
  padding: 1.1rem 1.2rem; margin: 0 0 1rem;
}
.md-typeset .quiz-q__title { font-weight: 800; color: var(--iefp-text); margin: 0 0 .7rem; font-size: .9rem; }
.md-typeset .quiz-opt {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--iefp-border); background: var(--iefp-surface2); color: var(--iefp-text);
  border-radius: 10px; padding: .6rem .85rem; margin: .4rem 0;
  transition: border-color .12s, background .12s;
}
.md-typeset .quiz-opt:hover:not(:disabled) { border-color: var(--iefp-g400); background: var(--iefp-g50); }
.md-typeset .quiz-opt.correct { background: var(--iefp-g100); border-color: var(--iefp-g600); color: var(--iefp-g800); font-weight: 700; }
.md-typeset .quiz-opt.wrong { background: #fdecec; border-color: #dc2626; color: #b91c1c; }
[data-md-color-scheme="slate"] .md-typeset .quiz-opt.wrong { background: #3a1d1d; color: #f8b4b4; }
.md-typeset .quiz-opt:disabled { cursor: default; }
.md-typeset .quiz-exp {
  display: none; margin: .6rem 0 .2rem; font-size: .8rem; color: var(--iefp-muted);
  border-left: 3px solid var(--iefp-g600); padding: .15rem 0 .15rem .7rem;
}
.md-typeset .quiz-exp.show { display: block; }
.md-typeset .quiz-restart { margin-top: .4rem; }