/* Guarapps — estilos base. Identidade "Bossa" (docs/plano-visual.md):
   Fraunces nos títulos, Figtree no texto, paletas curadas (Mata, Areia,
   Terracota, Ipê, e as neutras Grafite e Papel) e o tema Noite. A paleta e o tema vêm da conta
   (atributos data-paleta e data-tema em <html>); sem login, do navegador.
   Sem framework CSS: mobile-first, foco visível, contraste adequado. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.069cb90e11a3.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italico.fa7ce081be5e.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.202cfb54d4e6.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Mata (padrão) */
:root {
  --bg: #EEF0E7;
  --surface: #FCFCF7;
  --surface-2: #E5E9DC;
  --text: #1C2A22;
  --muted: #56645A;
  --border: #DADFD0;
  --border-strong: #B4BDA9;
  --accent: #2F6B4F;
  --accent-soft: #DCE8DF;
  --on-accent: #FFFFFF;
  --acc2: #D2694A;
  --acc2-texto: #A4482C;
  --acc3: #E6B54A;
  --ceu: #DDE7DF;
  --mar: #86AFA4;
  --terra: #C9B48A;
  --ramo: #9AA894;
  --topo: #E4E8DB;
  --regiao-1: #F4F6EE;
  --regiao-2: #EEF2E7;
  --done-bg: #DCEADF;
  --done-fg: #2F6B4F;
  --done-bd: #A9CDB5;
  --study-bg: #F4E6C8;
  --study-fg: #7A5A12;
  --study-bd: #E5CD95;
  --danger: #B3261E;
  --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light dark;
}

:root[data-paleta="cereja"] {
  --bg: #F7F6F5;
  --surface: #FFFFFF;
  --surface-2: #EFEDEB;
  --text: #1D1B1B;
  --muted: #66605E;
  --border: #E7E4E2;
  --border-strong: #CDC8C5;
  --accent: #CC3339;
  --accent-soft: #FBE3E3;
  --on-accent: #FFFFFF;
  --acc2: #2E6FD8;
  --acc2-texto: #2459B0;
  --acc3: #E0A526;
  --ceu: #F2ECEB;
  --mar: #A9B7CC;
  --terra: #D7CBC4;
  --ramo: #A7A09D;
  --topo: #EFEDEB;
  --regiao-1: #FBFAF9;
  --regiao-2: #F3F2F0;
  --done-bg: #E2F1E6;
  --done-fg: #2F6B4F;
  --done-bd: #ADD3B8;
}

:root[data-paleta="terracota"] {
  --bg: #F5ECE3;
  --surface: #FFFAF5;
  --surface-2: #EFE2D6;
  --text: #2B1F1A;
  --muted: #6B5A50;
  --border: #E8D6C7;
  --border-strong: #CDB4A0;
  --accent: #9C4A28;
  --accent-soft: #F3DED2;
  --on-accent: #FFFFFF;
  --acc2: #3E7A6A;
  --acc2-texto: #2E5E51;
  --acc3: #E2AE4A;
  --ceu: #F3E3D6;
  --mar: #B98A6E;
  --terra: #D8B48E;
  --ramo: #B09A8A;
  --topo: #EEE0D3;
  --regiao-1: #F9F2EB;
  --regiao-2: #F3E9E0;
  --done-bg: #DDEBE6;
  --done-fg: #2E5E51;
  --done-bd: #A9CCC1;
}

:root[data-paleta="ipe"] {
  --bg: #F6F1E4;
  --surface: #FFFCF4;
  --surface-2: #EEE6D2;
  --text: #272214;
  --muted: #665E48;
  --border: #E6DCC2;
  --border-strong: #CDBF9C;
  --accent: #6E4A8E;
  --accent-soft: #ECE3F2;
  --on-accent: #FFFFFF;
  --acc2: #E07A5F;
  --acc2-texto: #A9502F;
  --acc3: #E8B93C;
  --ceu: #EEE7F0;
  --mar: #A994BF;
  --terra: #E3CD95;
  --ramo: #ABA184;
  --topo: #EEE6D0;
  --regiao-1: #FAF6EA;
  --regiao-2: #F3EEDD;
  --done-bg: #E1ECD9;
  --done-fg: #3D6B3F;
  --done-bd: #B3CDA5;
}

:root[data-paleta="grafite"] {
  --bg: #F3F3F2;
  --surface: #FFFFFF;
  --surface-2: #EBEBEA;
  --text: #1F1F1E;
  --muted: #5F5F5C;
  --border: #E4E4E2;
  --border-strong: #C9C9C6;
  --accent: #2E5BDB;
  --accent-soft: #E3EAFB;
  --on-accent: #FFFFFF;
  --acc2: #E0612F;
  --acc2-texto: #B44A20;
  --acc3: #D9A21B;
  --ceu: #E9ECF3;
  --mar: #9AA9C9;
  --terra: #CFC8BA;
  --ramo: #A3A39F;
  --topo: #EBEBEA;
  --regiao-1: #F8F8F7;
  --regiao-2: #F1F1F0;
  --done-bg: #E2F1E6;
  --done-fg: #2F6B4F;
  --done-bd: #ADD3B8;
}

:root[data-paleta="ambar"] {
  --bg: #F6F4F0;
  --surface: #FFFFFF;
  --surface-2: #EFEBE4;
  --text: #22201C;
  --muted: #635C52;
  --border: #E7E2D9;
  --border-strong: #CFC6B8;
  --accent: #A84D08;
  --accent-soft: #FBEBD7;
  --on-accent: #FFFFFF;
  --acc2: #2E6FA8;
  --acc2-texto: #245A88;
  --acc3: #D9A21B;
  --ceu: #F3EEE6;
  --mar: #A9B9C4;
  --terra: #D8C6A8;
  --ramo: #A79E91;
  --topo: #EFEBE4;
  --regiao-1: #FBFAF7;
  --regiao-2: #F4F1EB;
  --done-bg: #E2F1E6;
  --done-fg: #2F6B4F;
  --done-bd: #ADD3B8;
}

/* Noite: segue o aparelho, a menos que a pessoa escolha Claro ou Noite. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #111A17;
    --surface: #17221E;
    --surface-2: #1F2B26;
    --text: #E7EADF;
    --muted: #A0AC9F;
    --border: #2A3830;
    --border-strong: #3D5046;
    --accent: #88C7A3;
    --accent-soft: #1E3529;
    --on-accent: #0E1A13;
    --acc2: #EE8F70;
    --acc2-texto: #EE8F70;
    --acc3: #E8C066;
    --ceu: #1B2A28;
    --mar: #3F6F6A;
    --terra: #5B513A;
    --ramo: #5E7064;
    --topo: #1D2A24;
    --regiao-1: #141F1B;
    --regiao-2: #16231E;
    --done-bg: #1E3529;
    --done-fg: #88C7A3;
    --done-bd: #2D6A45;
    --study-bg: #3A3118;
    --study-fg: #EFCB7A;
    --study-bd: #6B5622;
    --danger: #FF8A80;
    color-scheme: dark;
  }

  :root:not([data-tema="claro"])[data-paleta="cereja"] {
    --bg: #161515;
    --surface: #1E1D1D;
    --surface-2: #272525;
    --text: #EDE9E8;
    --muted: #A8A2A0;
    --border: #2F2D2C;
    --border-strong: #474443;
    --accent: #F28B8E;
    --accent-soft: #3B1E20;
    --on-accent: #2A0A0C;
    --topo: #1C1B1B;
    --regiao-1: #191818;
    --regiao-2: #1B1A1A;
    --done-fg: #F28B8E;
  }

  :root:not([data-tema="claro"])[data-paleta="terracota"] {
    --accent: #E39271;
    --accent-soft: #3A2318;
    --done-fg: #E39271;
  }

  :root:not([data-tema="claro"])[data-paleta="ipe"] {
    --accent: #B9A0D6;
    --accent-soft: #2C2238;
    --done-fg: #B9A0D6;
  }

  :root:not([data-tema="claro"])[data-paleta="grafite"] {
    --bg: #161616;
    --surface: #1E1E1E;
    --surface-2: #262626;
    --text: #E8E8E6;
    --muted: #A3A3A0;
    --border: #2E2E2E;
    --border-strong: #454545;
    --accent: #8EA9F2;
    --accent-soft: #1F2A44;
    --on-accent: #10172A;
    --topo: #1C1C1C;
    --regiao-1: #191919;
    --regiao-2: #1B1B1B;
    --done-fg: #8EA9F2;
  }

  :root:not([data-tema="claro"])[data-paleta="ambar"] {
    --bg: #1A1714;
    --surface: #221E1A;
    --surface-2: #2A251F;
    --text: #EEE8DF;
    --muted: #ADA396;
    --border: #342E27;
    --border-strong: #4B4238;
    --accent: #F0A65C;
    --accent-soft: #3A2A18;
    --on-accent: #1F1305;
    --topo: #201C18;
    --regiao-1: #1D1916;
    --regiao-2: #1F1B17;
    --done-fg: #F0A65C;
  }
}

:root[data-tema="escuro"] {
  --bg: #111A17;
  --surface: #17221E;
  --surface-2: #1F2B26;
  --text: #E7EADF;
  --muted: #A0AC9F;
  --border: #2A3830;
  --border-strong: #3D5046;
  --accent: #88C7A3;
  --accent-soft: #1E3529;
  --on-accent: #0E1A13;
  --acc2: #EE8F70;
  --acc2-texto: #EE8F70;
  --acc3: #E8C066;
  --ceu: #1B2A28;
  --mar: #3F6F6A;
  --terra: #5B513A;
  --ramo: #5E7064;
  --topo: #1D2A24;
  --regiao-1: #141F1B;
  --regiao-2: #16231E;
  --done-bg: #1E3529;
  --done-fg: #88C7A3;
  --done-bd: #2D6A45;
  --study-bg: #3A3118;
  --study-fg: #EFCB7A;
  --study-bd: #6B5622;
  --danger: #FF8A80;
  color-scheme: dark;
}

:root[data-tema="escuro"][data-paleta="cereja"] {
  --bg: #161515;
  --surface: #1E1D1D;
  --surface-2: #272525;
  --text: #EDE9E8;
  --muted: #A8A2A0;
  --border: #2F2D2C;
  --border-strong: #474443;
  --accent: #F28B8E;
  --accent-soft: #3B1E20;
  --on-accent: #2A0A0C;
  --topo: #1C1B1B;
  --regiao-1: #191818;
  --regiao-2: #1B1A1A;
  --done-fg: #F28B8E;
}

:root[data-tema="escuro"][data-paleta="terracota"] {
  --accent: #E39271;
  --accent-soft: #3A2318;
  --done-fg: #E39271;
}

:root[data-tema="escuro"][data-paleta="ipe"] {
  --accent: #B9A0D6;
  --accent-soft: #2C2238;
  --done-fg: #B9A0D6;
}

:root[data-tema="escuro"][data-paleta="grafite"] {
  --bg: #161616;
  --surface: #1E1E1E;
  --surface-2: #262626;
  --text: #E8E8E6;
  --muted: #A3A3A0;
  --border: #2E2E2E;
  --border-strong: #454545;
  --accent: #8EA9F2;
  --accent-soft: #1F2A44;
  --on-accent: #10172A;
  --topo: #1C1C1C;
  --regiao-1: #191919;
  --regiao-2: #1B1B1B;
  --done-fg: #8EA9F2;
}

:root[data-tema="escuro"][data-paleta="ambar"] {
  --bg: #1A1714;
  --surface: #221E1A;
  --surface-2: #2A251F;
  --text: #EEE8DF;
  --muted: #ADA396;
  --border: #342E27;
  --border-strong: #4B4238;
  --accent: #F0A65C;
  --accent-soft: #3A2A18;
  --on-accent: #1F1305;
  --topo: #201C18;
  --regiao-1: #1D1916;
  --regiao-2: #1F1B17;
  --done-fg: #F0A65C;
}

:root[data-tema="claro"] {
  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
}

a {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Visível só para leitores de tela. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  left: -9999px;
}

.pular:focus {
  left: 16px;
  top: 8px;
  background: var(--surface);
  padding: 6px 12px;
  border-radius: 8px;
}

/* Topo: fixo no alto, some ao rolar para baixo e volta ao rolar para cima
   (static/js/app.js). Com foco do teclado dentro dele, nunca fica escondido. */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.topo-oculto {
  transform: translateY(-100%);
}

.topo:focus-within {
  transform: none;
}

.topo-interno {
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 23px;
  color: var(--text);
  text-decoration: none;
}

.marca-icone {
  width: 26px;
  height: 28px;
  color: var(--accent);
}

.topo form {
  margin: 0;
}

.botao-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  color: var(--muted);
}

.botao-tema:hover {
  color: var(--text);
}

.botao-tema svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Lua no tema claro (leva ao escuro); sol no escuro (leva ao claro). */
.icone-sol,
:root[data-tema="escuro"] .icone-lua {
  display: none;
}

:root[data-tema="escuro"] .icone-sol {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .icone-lua {
    display: none;
  }

  :root:not([data-tema="claro"]) .icone-sol {
    display: block;
  }
}

/* Navegação do topo: no celular o menu principal recolhe atrás do botão ☰;
   a conta abre um menu suspenso. Sem JS, tudo fica visível (classe "js"). */
.topo-nav {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.menu-principal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}

.menu-principal a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
}

.menu-principal a:hover {
  color: var(--text);
}

.menu-principal a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--acc2);
  border-radius: 0;
}

.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
}

.botao-icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.menu-conta {
  position: relative;
}

.botao-conta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
}

.botao-conta .seta {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform 0.2s ease;
}

.botao-conta[aria-expanded="true"] .seta {
  transform: rotate(180deg);
}

.menu-suspenso {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.16);
  z-index: 30;
}

.menu-suspenso ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-suspenso-quem {
  margin: 0;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.menu-suspenso a,
.menu-suspenso-sair {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}

.menu-suspenso a:hover,
.menu-suspenso-sair:hover {
  background: var(--surface-2);
}

.menu-suspenso form {
  margin: 4px 0 0;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.js .menu-suspenso:not(.aberto) {
  display: none;
}

/* Busca e "+ Novo" no topo (computador). No celular viram a lupa do topo e o "+"
   da barra de baixo. */
.topo-busca {
  position: relative;
  display: flex;
  align-items: center;
}

.topo-busca svg {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.topo-busca input {
  width: 180px;
  padding: 7px 56px 7px 32px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
}

.topo-busca input::placeholder {
  color: var(--muted);
}

.topo-busca input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.topo-busca-atalho {
  position: absolute;
  right: 8px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  pointer-events: none;
}

.topo-busca input:focus ~ .topo-busca-atalho {
  display: none;
}

.topo-busca-icone {
  display: none;
  color: var(--muted);
}

.menu-novo {
  position: relative;
}

.botao-novo {
  padding: 8px 14px;
  white-space: nowrap;
}

.menu-novo-lista {
  min-width: 200px;
}

.menu-suspenso-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 14px;
  text-align: left;
}

.menu-suspenso-item:hover {
  background: var(--surface-2);
}

.menu-instalar {
  color: var(--accent);
  font-weight: 600;
}

.folha-instalar-passos {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 10px;
}

.folha-instalar-passos .icone {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  color: var(--accent);
}

.folha-instalar-ok {
  width: 100%;
}

.menu-suspenso-item svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Barra de baixo: só no celular. */
.barra-inferior {
  display: none;
}

/* Com login, o nome fica no menu da conta; no topo basta a inicial. */
.menu-conta .topo-usuario {
  display: none;
}

@media (max-width: 1099px) {
  .topo-busca {
    display: none;
  }

  .topo-busca-icone {
    display: inline-flex;
  }
}

@media (max-width: 899px) {
  .topo-nav,
  .menu-novo,
  .js .topo .botao-painel {
    display: none;
  }

  /* Gaveta, marca, busca, sineta e conta cabem em 320px (e com o texto ampliado no celular). */
  .topo-interno {
    gap: 8px;
    padding-inline: 12px;
  }

  .marca {
    min-width: 0;
    margin-right: auto;
    gap: 8px;
    font-size: 21px;
  }

  .marca-texto {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topo-acoes {
    gap: 2px;
  }

  .botao-conta {
    padding: 4px;
  }

  .botao-conta .seta {
    display: none;
  }

  body:has(.barra-inferior) {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  .barra-inferior {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: end;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgb(0 0 0 / 0.06);
  }

  .barra-inferior > a {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 11px;
    text-decoration: none;
  }

  .barra-inferior > a[aria-current="page"] {
    color: var(--accent);
    font-weight: 600;
  }

  .barra-inferior svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .barra-inferior-contador {
    position: absolute;
    top: 0;
    left: calc(50% + 6px);
    min-width: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
  }

  .barra-inferior-novo {
    display: grid;
    justify-items: center;
  }

  .barra-inferior-mais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: -18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
  }

  .barra-inferior-mais:hover {
    background: var(--accent);
    color: var(--on-accent);
  }

  .barra-inferior-mais svg {
    width: 24px;
    height: 24px;
  }

  .barra-inferior-mais[aria-expanded="true"] svg {
    transform: rotate(45deg);
  }

  .barra-inferior .menu-novo-lista {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }


  /* Telas com barra fixa própria (tópico, editor, treino) ficam sem a barra de baixo. */
  body:has(.estudo-rodape, .ed-barra-fixa, .treino-descanso) {
    padding-bottom: 0;
  }

  body:has(.estudo-rodape, .ed-barra-fixa, .treino-descanso) .barra-inferior {
    display: none;
  }
}

/* Conteúdo */
main {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 16px 56px;
}

/* Telas de uma coluna (ajustes da conta): a coluna fica no meio, alinhada com a barra flutuante. */
main.estreito {
  max-width: 704px;
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

h2 {
  font-size: 17px;
  margin: 0 0 6px;
}

.lead {
  margin: 0 0 28px;
  color: var(--muted);
  max-width: 60ch;
}

.muted {
  color: var(--muted);
}

.cartao {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}

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

@media (min-width: 760px) {
  .grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Formulários e botões */
button,
.botao {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

button:hover,
.botao:hover {
  background: var(--surface-2);
}

.botao-principal {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.botao-principal:hover {
  background: var(--accent);
  filter: brightness(1.1);
}

.form-estreito {
  max-width: 360px;
}

.campo {
  margin-bottom: 14px;
}

.campo label {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 4px;
}

.campo input,
.lanc .campo select,
.avisos-campo {
  width: 100%;
  min-height: 44px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 10px;
}

.erro {
  color: var(--danger);
  font-size: 14px;
  margin: 0 0 12px;
}

.campo .erro {
  margin: 6px 0 0;
}

.campo .erro p {
  margin: 0;
}

.campo-com-erro input {
  border-color: var(--danger);
}

.ajuda {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

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

.botao-largo {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
}

/* Entrar e criar conta */
.conta-caixa {
  max-width: 400px;
  margin: 8px auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 20px;
}

.conta-caixa .form-estreito {
  max-width: none;
  margin-top: 20px;
}

.conta-alternativa {
  margin: 18px 0 0;
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}

/* Campo-armadilha para robôs: fora da tela, invisível para pessoas. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------
   Página de apresentação (início, deslogado)
   ------------------------------------------------------------------ */
.pagina-inicio {
  background:
    radial-gradient(60rem 32rem at 85% -10%, var(--accent-soft), transparent 70%),
    radial-gradient(40rem 26rem at -10% 10%, var(--study-bg), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}

.pagina-inicio .topo:not(.topo-rolado) {
  background: transparent;
  border-color: transparent;
}

main.apresentacao {
  max-width: none;
  padding: 0;
}

.botao-grande {
  font-size: 16px;
  padding: 12px 22px;
  border-radius: 10px;
}

/* Cena animada */

/* Seções */

/* Demonstração (mesma linguagem visual do protótipo) */

.etiqueta {
  display: inline-block;
  font-size: 13px;
  padding: 0 8px;
  border-radius: 999px;
}

.trilho {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  margin: 10px 0 8px;
  overflow: hidden;
}

.trilho-barra {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.35s ease;
}

.topico {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  text-align: left;
  margin: 6px 0 0;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 8px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.topico-nome {
  flex: 1;
}

.topico-rotulo {
  font-size: 12px;
  opacity: 0.85;
}

.s-a_estudar {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.s1,
.s1:hover,
.s-estudando,
.s-estudando:hover {
  background: var(--study-bg);
  border: 1px solid var(--study-bd);
  color: var(--study-fg);
}

.s-concluido,
.s-concluido:hover {
  background: var(--done-bg);
  border: 1px solid var(--done-bd);
  color: var(--done-fg);
}

.marcador {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.s-a_estudar .marcador,
.s-pulado .marcador {
  border-color: var(--border-strong);
}

.s1 .marcador,
.s-estudando .marcador {
  background: conic-gradient(currentColor 0 50%, transparent 50% 100%);
}

.s-concluido .marcador {
  background: currentColor;
}

.s-concluido .marcador::after {
  content: "✓";
  color: var(--done-bg);
}

/* Pilares */

/* Chamada final e rodapé */

/* ------------------------------------------------------------------
   Páginas internas: avisos, cabeçalhos e formulários largos
   ------------------------------------------------------------------ */
.avisos {
  margin: 0 0 20px;
}

.aviso {
  margin: 0 0 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
}

.aviso-success {
  background: var(--done-bg);
  border-color: var(--done-bd);
  color: var(--done-fg);
}

.aviso-error {
  color: var(--danger);
}

.aviso-alerta {
  background: var(--study-bg);
  border-color: var(--study-bd);
  color: var(--study-fg);
}

.migalha {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--muted);
}

.cabecalho-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 24px;
}

.cabecalho-pagina p,
.cabecalho-pagina .texto-md {
  margin: 0;
}

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

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

.form-largo {
  max-width: 640px;
}

.campo textarea,
.editor textarea,
.editor input {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 10px;
}

.campo textarea {
  resize: vertical;
}

#id_estrutura,
#colar-estrutura {
  font-family: var(--mono);
  font-size: 14px;
  tab-size: 2;
}

.form-acoes {
  display: flex;
  gap: 10px;
  align-items: center;
}

.botao-perigo {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--surface);
}

.texto-perigo {
  color: var(--danger);
}

.conta-secoes {
  display: grid;
  gap: 16px;
  max-width: 640px;
}

.conta-secao h2 {
  margin: 0 0 12px;
  font-size: 1.15rem;
}

.conta-perigo {
  border-color: var(--danger);
}

.conta-perigo h2 {
  color: var(--danger);
}

.vazio {
  text-align: center;
  padding: 32px 20px;
}

.vazio-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Lista de trilhas */
.trilhas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 760px) {
  .trilhas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.trilha-cartao {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0 20px 18px;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.trilha-cartao:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 28px -18px rgb(0 0 0 / 0.4);
}

.trilha-cartao:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* O cartão inteiro leva à trilha. */
.trilha-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.trilha-link:focus-visible {
  outline: none;
}

.trilha-cartao h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  margin: 14px 0 4px;
}

.trilha-cartao h2 a {
  color: var(--text);
  text-decoration: none;
}

.trilha-cartao h2 a:hover {
  text-decoration: underline;
}

.trilha-descricao {
  font-size: 14px;
}

.progresso-mini p {
  margin: 0;
  font-size: 13px;
}

.progresso-mini-pct {
  color: var(--text);
}

.trilho-completo {
  background: var(--done-fg);
}

/* Página da trilha */
.mapa-progresso {
  padding: 16px 18px;
  margin-bottom: 18px;
}

.mapa-progresso-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.mapa-pct {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
}

.mapa-estudando,
.mapa-dica {
  margin: 4px 0 0;
  font-size: 13px;
}

.mapa-estudando .etiqueta {
  margin: 2px 0;
}

.etapa {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.etapa-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.etapa-topo h2 {
  flex: 1;
  margin: 0;
  font-size: 16px;
}

.etapa-n {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.etapa-contagem {
  font-size: 13px;
}

.etapa-vazia {
  margin: 6px 0 0;
  font-size: 14px;
}

.ligacao {
  height: 16px;
  margin-left: 30px;
  border-left: 2px solid var(--border-strong);
}

.topicos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.topicos .topicos {
  margin-left: 14px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

.topico-linha {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin: 6px 0 0;
}

.topico-linha .topico {
  margin: 0;
}

.botao-pular {
  flex: none;
  width: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border-color: var(--border);
}

.botao-pular svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s-pulado,
.s-pulado:hover {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--muted);
}

.s-pulado .topico-nome {
  text-decoration: line-through;
}

.topico-grupo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.topico-grupo .muted {
  font-weight: 400;
  font-size: 13px;
}

/* Editor de estrutura */
.secao-edicao {
  margin-bottom: 36px;
}

.campo textarea.texto-estrutura {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  tab-size: 2;
}

.lista-mudancas {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.lista-mudancas li {
  padding: 4px 0;
}

.acoes-exportar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.secao-edicao > h2 {
  font-size: 18px;
}

.ed-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ed-lista .ed-lista {
  margin-left: 18px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.ed-raiz > .ed-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px 10px;
  margin-bottom: 10px;
}

.ed-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  position: relative;
}

.ed-tipo {
  flex: none;
  width: 68px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 600px) {
  .ed-tipo {
    display: none;
  }

  .ed-lista .ed-lista {
    margin-left: 8px;
  }
}

.ed-nivel-0 > .ed-linha input {
  font-weight: 600;
}

.ed-linha input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  border-color: transparent;
  background: transparent;
}

.ed-linha input:hover,
.ed-linha input:focus {
  border-color: var(--border-strong);
  background: var(--surface);
}

.ed-menu {
  position: relative;
  flex: none;
}

.ed-menu summary {
  list-style: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 20px;
  color: var(--muted);
}

.ed-menu summary::-webkit-details-marker {
  display: none;
}

.ed-menu summary:hover,
.ed-menu[open] summary {
  background: var(--surface-2);
  color: var(--text);
}

.ed-menu-lista {
  position: absolute;
  right: 0;
  top: 44px;
  z-index: 5;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.35);
}

.ed-menu-lista button {
  border: 0;
  text-align: left;
  border-radius: 6px;
  padding: 9px 10px;
  background: transparent;
}

.ed-menu-lista button:hover {
  background: var(--surface-2);
}

.ed-menu-lista .texto-perigo {
  color: var(--danger);
}

.ed-adicionar {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.ed-adicionar input {
  flex: 1;
  min-width: 0;
}

.ed-colar {
  margin-top: 14px;
  margin-bottom: 32px;
}

.ed-colar summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 14px;
}

.ed-colar form {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.ed-colar label {
  font-size: 14px;
  color: var(--muted);
}

.ed-colar button {
  justify-self: start;
}

.zona-perigo summary {
  list-style: none;
  cursor: pointer;
  color: var(--danger);
}

.confirmar {
  margin-top: 12px;
}

.htmx-request .ed-linha,
.htmx-request.topico-linha {
  opacity: 0.6;
}

/* Painel inicial (logado) */
.painel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 760px) {
  .painel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .painel-continuar {
    grid-column: 1 / -1;
  }
}

.painel .cartao {
  padding: 18px;
}

.painel-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.painel-topico {
  font-size: 18px;
  margin: 8px 0 0;
}

.painel-continuar .muted {
  margin-top: 0;
}

.continuar-destaque {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--study-bd);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--study-bg);
}

.continuar-destaque .painel-topico {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 4px;
}

.continuar-progresso {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
  margin-bottom: 12px;
}

.continuar-progresso .trilho {
  flex: 1;
  margin: 0;
  background: var(--surface);
}

.continuar-progresso .muted {
  font-size: 13px;
  white-space: nowrap;
}

/* Carrossel: rolagem horizontal com encaixe; as setas só ajudam no mouse. */
.carrossel {
  margin-top: 18px;
}

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

.carrossel-cabecalho h3 {
  margin: 0;
  font-size: 16px;
}

.carrossel-setas {
  display: flex;
  gap: 6px;
}

.carrossel-setas .botao-icone {
  width: 36px;
  height: 36px;
}

.carrossel-setas .botao-icone:disabled {
  opacity: 0.4;
  cursor: default;
}

.carrossel-trilho {
  list-style: none;
  margin: 10px 0 0;
  padding: 2px 2px 10px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, calc((100% - 24px) / 3));
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

@media (max-width: 719px) {
  .carrossel-trilho {
    grid-auto-columns: 78%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carrossel-trilho {
    scroll-behavior: auto;
  }
}

.carrossel-item {
  scroll-snap-align: start;
}

.carrossel-cartao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.carrossel-cartao:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.carrossel-titulo {
  font-weight: 600;
}

.carrossel-cartao .muted {
  font-size: 13px;
}

.carrossel-cartao .trilho {
  display: block;
  margin: auto 0 0;
}

.carrossel-cartao .trilho-barra {
  display: block;
}

.painel-trilhas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.painel-trilhas li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 80px 40px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 15px;
}

.painel-trilhas .trilho {
  margin: 0;
}

.painel-trilhas .muted {
  font-size: 13px;
  text-align: right;
}

/* ------------------------------------------------------------------
   Trilha: linha de tópico com marcador, título-link e pular
   ------------------------------------------------------------------ */
.linha-topico {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0;
  border-radius: 8px;
  min-height: 44px;
  padding-right: 4px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.linha-marca {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.linha-marca:hover {
  background: transparent;
}

.linha-marca .marcador {
  width: 18px;
  height: 18px;
}

.linha-marca:hover .marcador {
  transform: scale(1.15);
}

.linha-titulo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
}

.linha-titulo:hover .topico-nome {
  text-decoration: underline;
}

.linha-conteudo {
  font-size: 9px;
  color: var(--accent);
}

.linha-topico .topico-rotulo {
  font-size: 12px;
  opacity: 0.85;
  margin-right: 6px;
}

.linha-topico .botao-pular {
  height: 36px;
  width: 36px;
  border: 0;
  background: transparent;
}

.linha-topico .botao-pular:hover {
  background: var(--surface-2);
}

.s-pulado .marcador {
  border-style: dashed;
}

.etapa-topo h2 a,
.topico-grupo a {
  color: inherit;
  text-decoration: none;
}

.etapa-topo h2 a:hover,
.topico-grupo a:hover {
  text-decoration: underline;
}

.mapa-comecar {
  margin: 12px 0 0;
}

@media (max-width: 480px) {
  .linha-topico .topico-rotulo {
    display: none;
  }
}

/* ------------------------------------------------------------------
   Modo estudo
   ------------------------------------------------------------------ */
main.estudo {
  max-width: 1180px;
}

.com-rodape main.estudo {
  padding-bottom: 120px;
}

.estudo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 1100px) {
  .estudo-layout.com-sumario {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

.sumario {
  font-size: 14px;
}

@media (min-width: 1100px) {
  .sumario {
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow: auto;
  }
}

@media (max-width: 1099px) {
  .sumario {
    display: none;
  }
}

.sumario-movel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 24px;
  font-size: 15px;
}

.sumario-movel summary {
  cursor: pointer;
  color: var(--muted);
}

.sumario-movel ol {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.sumario-movel li {
  margin: 6px 0;
}

@media (min-width: 1100px) {
  .sumario-movel {
    display: none;
  }
}

.sumario-titulo {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.sumario li {
  margin: 4px 0;
}

.sumario-n3 {
  padding-left: 14px;
}

.sumario a {
  color: var(--muted);
  text-decoration: none;
}

.sumario a:hover {
  color: var(--accent);
}

.leitura {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.leitura-cabecalho h1 {
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.15;
  margin-bottom: 14px;
}

.leitura-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}

.leitura-meta .botao-discreto {
  margin-left: auto;
}

.status-pagina form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chip-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
}

.chip-status.s-a_estudar {
  background: var(--surface);
}

.botao-texto {
  border: 0;
  background: transparent;
  padding: 4px 6px;
  color: var(--accent);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.botao-texto:hover {
  background: transparent;
  color: var(--text);
}

.botao-discreto {
  font-size: 13px;
  padding: 5px 12px;
}

.botao-icone {
  width: 32px;
  height: 32px;
  padding: 0;
}

.botao-icone:disabled {
  opacity: 0.35;
  cursor: default;
}

.sugestao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--done-bg);
  border: 1px solid var(--done-bd);
  color: var(--done-fg);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 24px;
}

.sugestao form {
  margin: 0;
}

.leitura-corpo .bloco {
  margin: 0 0 26px;
  scroll-margin-top: 80px;
}

.leitura-corpo .texto-md,
.editor-blocos .bloco-texto .texto-md {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.75;
}

.texto-md h2,
.texto-md h3,
.texto-md h4 {
  font-family: var(--sans);
  line-height: 1.3;
  scroll-margin-top: 80px;
}

.texto-md h2 {
  font-size: 24px;
  margin: 36px 0 10px;
}

.texto-md h3 {
  font-size: 19px;
  margin: 28px 0 8px;
}

.texto-md code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

.texto-md pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.5;
}

.texto-md pre code {
  background: none;
  padding: 0;
}

.texto-md blockquote {
  margin: 16px 0;
  padding: 2px 18px;
  border-left: 3px solid var(--border-strong);
  color: var(--muted);
}

.texto-md table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  display: block;
  overflow-x: auto;
}

.texto-md th,
.texto-md td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}

.destaque {
  border-radius: 12px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
}

.destaque .texto-md {
  font-size: 17px !important;
}

.destaque-rotulo {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.destaque-atencao {
  background: var(--study-bg);
  border-left-color: var(--study-fg);
}

.destaque-atencao .destaque-rotulo {
  color: var(--study-fg);
}

.destaque-resumo {
  background: var(--done-bg);
  border-left-color: var(--done-fg);
}

.destaque-resumo .destaque-rotulo {
  color: var(--done-fg);
}

/* Pergunta aberta: a resposta fica recolhida, para tentar lembrar antes (ADR 023). */
.destaque-pergunta {
  background: var(--surface);
  border-left-color: var(--acc2);
}

.destaque-pergunta summary {
  cursor: pointer;
  list-style: none;
}

.destaque-pergunta summary::-webkit-details-marker {
  display: none;
}

.destaque-pergunta summary::after {
  content: "▸";
  margin-left: 6px;
  color: var(--muted);
}

.destaque-pergunta[open] summary::after {
  content: "▾";
}

.destaque-pergunta .destaque-rotulo {
  display: block;
  color: var(--acc2-texto);
}

.destaque-pergunta .pergunta-texto {
  font-weight: 600;
}

.destaque-pergunta > .texto-md {
  margin-top: 8px;
}

.destaque-definicao {
  background: var(--surface);
  border-left-color: var(--text);
}

.destaque-definicao .destaque-rotulo {
  color: var(--text);
}

/* Escrita estilo wiki (ADR 019): [[links]], páginas a criar, incorporações e callouts. */
.texto-md .wikilink {
  text-decoration-style: solid;
}

.texto-md .wikilink-nova {
  color: var(--muted);
  text-decoration-style: dashed;
}

.texto-md .wikilink-nova::after {
  content: " +";
  font-weight: 700;
}

.texto-md .destaque {
  margin: 1em 0;
}

.texto-md .destaque > p:not(.destaque-rotulo) {
  margin: 0.4em 0 0;
}

.incorporada {
  margin: 1em 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
}

.incorporada-origem {
  margin: 0 0 6px !important;
  font-size: 13px;
  font-weight: 600;
}

.incorporada-origem a::before {
  content: "↳ ";
}

.incorporada .texto-md {
  font-size: 0.95em;
}

.incorporada-aviso {
  color: var(--muted);
  font-size: 14px;
}

.wiki-sugestoes {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
}

.wiki-sugestoes li {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.wiki-sugestoes li[aria-selected="true"],
.wiki-sugestoes li:hover {
  background: var(--accent-soft);
}

.video,
.imagem {
  margin: 0;
}

.video-quadro {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.video-quadro iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video figcaption,
.imagem figcaption {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
}

.imagem img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.imagem figcaption {
  text-align: center;
}

.cartao-link {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.cartao-link-corpo {
  flex: 1;
  min-width: 220px;
}

.cartao-link-titulo {
  font-weight: 600;
  font-size: 16px;
}

.cartao-link-dominio {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.cartao-link-trecho {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--text);
}

.cartao-ref {
  display: grid;
  gap: 2px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
}

a.cartao-ref:hover {
  border-color: var(--accent);
}

.cartao-ref-rotulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.cartao-ref-titulo {
  font-weight: 600;
  font-size: 17px;
}

.cartao-ref-texto {
  font-size: 14px;
  color: var(--muted);
}

.visto {
  margin: 10px 0 0;
}

.cartao-link .visto {
  margin: 0;
}

.botao-visto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  border-radius: 999px;
  padding: 5px 12px;
}

.botao-visto .marcador {
  border-color: var(--border-strong);
}

.botao-visto.marcado {
  background: var(--done-bg);
  border-color: var(--done-bd);
  color: var(--done-fg);
}

.botao-visto.marcado .marcador {
  background: currentColor;
  border-color: currentColor;
}

.botao-visto.marcado .marcador::after {
  content: "✓";
  color: var(--done-bg);
}

/* Questão de múltipla escolha (ADR 009) */
.questao {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--surface);
}

.questao-rotulo,
.tarefas-titulo {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.questao-rotulo .muted {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.alternativas-campo {
  border: 0;
  margin: 0;
  padding: 0;
}

.alternativas {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.alternativa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

label.alternativa:hover {
  border-color: var(--accent);
}

.alternativa input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.alternativa-letra {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.alternativa-texto {
  padding-top: 2px;
}

.alternativa:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.alternativa:has(input:checked) .alternativa-letra {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}

.alternativa:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.alternativas-resolvidas .alternativa {
  cursor: default;
}

.alternativa-correta {
  border-color: var(--done-bd);
  background: var(--done-bg);
}

.alternativa-correta .alternativa-letra {
  border-color: var(--done-fg);
  background: var(--done-fg);
  color: var(--done-bg);
}

.alternativa-errada {
  border-color: var(--danger);
}

.alternativa-errada .alternativa-letra {
  border-color: var(--danger);
  color: var(--danger);
}

.alternativa-selo {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid currentColor;
  color: var(--muted);
}

.alternativa-correta .alternativa-selo {
  color: var(--done-fg);
}

.alternativa-errada .alternativa-selo {
  color: var(--danger);
}

.questao-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.questao-acoes form {
  margin: 0;
}

.questao-acoes .muted {
  font-size: 13px;
}

.questao-resultado {
  margin: 0;
  font-weight: 600;
}

.questao-acertou {
  color: var(--done-fg);
}

.questao-errou {
  color: var(--danger);
}

.questao-explicacao {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-2);
}

.questao-explicacao summary {
  cursor: pointer;
  font-weight: 600;
}

/* Lista de tarefas (ADR 009) */
.tarefas {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  background: var(--surface);
}

.tarefas-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.tarefas-cabecalho .muted {
  font-size: 13px;
}

.tarefas-lista {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.tarefas-lista form {
  margin: 0;
}

.tarefa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 16px;
  text-align: left;
}

button.tarefa:hover {
  background: var(--surface-2);
}

.caixa {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--border-strong);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.tarefa.feita .caixa {
  background: var(--done-fg);
  border-color: var(--done-fg);
  color: var(--done-bg);
}

.tarefa.feita .caixa::after {
  content: "✓";
}

.tarefa.feita .tarefa-texto {
  color: var(--muted);
  text-decoration: line-through;
}

/* Editor: alternativas com o rádio da correta ao lado */
.ed-alternativas {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}

.ed-alternativas legend {
  font-weight: 600;
  padding: 0;
}

.ed-alternativa {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ed-alternativa input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ed-alternativa .ed-alternativa-letra {
  flex: none;
  margin: 0;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

.ed-alternativa .ed-alternativa-letra:hover {
  border-color: var(--done-fg);
}

.ed-alternativa input[type="radio"]:checked + .ed-alternativa-letra {
  border-color: var(--done-fg);
  background: var(--done-fg);
  color: var(--done-bg);
}

.ed-alternativa input[type="radio"]:focus-visible + .ed-alternativa-letra {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ed-alternativa input:not([type="radio"]) {
  flex: 1;
  min-width: 0;
}

/* Comentários pessoais por bloco e anotações gerais */
.comentarios {
  margin-top: 6px;
  font-size: 14px;
}

.comentarios summary {
  cursor: pointer;
  color: var(--muted);
  list-style: none;
  display: inline-flex;
  gap: 6px;
  padding: 2px 0;
}

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

.comentarios summary:hover {
  color: var(--accent);
}

.comentarios[open] summary {
  color: var(--study-fg);
}

.anotacoes {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.anotacao {
  background: var(--study-bg);
  border: 1px solid var(--study-bd);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
}

.anotacao .texto-md p {
  margin: 0 0 6px;
}

.anotacao-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.anotacao-meta form {
  margin: 0;
}

.anotacao-nova {
  display: grid;
  gap: 6px;
}

.anotacao-nova textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 10px;
  resize: vertical;
}

.anotacao-nova button {
  justify-self: start;
}

.leitura-secao {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.leitura-secao > h2 {
  font-size: 18px;
}

.leitura-vazia {
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  padding: 32px 20px;
}

.lista-paginas {
  margin: 0;
  padding-left: 20px;
}

.lista-paginas li {
  margin: 4px 0;
}

.relacionados p {
  margin: 4px 0;
}

/* Rodapé fixo da trilha: anterior, progresso e concluir/próximo */
.estudo-rodape {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px -20px rgb(0 0 0 / 0.4);
}

.estudo-rodape-interno {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
}

.estudo-rodape form {
  margin: 0;
}

.rodape-lado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 30%;
}

.rodape-rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rodape-centro {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  text-align: center;
}

.rodape-centro .trilho {
  margin: 4px 0 0;
}

@media (max-width: 640px) {
  .rodape-rotulo,
  .rodape-centro .muted {
    display: none;
  }

  .estudo-rodape .botao-principal {
    font-size: 14px;
    padding: 9px 12px;
  }
}

/* ------------------------------------------------------------------
   Editor de blocos
   ------------------------------------------------------------------ */
.editor-pagina {
  max-width: 760px;
  margin: 0 auto;
}

.ed-titulo-pagina {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.ed-titulo-pagina input {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 12px;
}

.ed-bloco {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px 14px;
  margin-bottom: 12px;
  scroll-margin-top: 80px;
}

.ed-bloco-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.ed-bloco-barra form {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 auto;
}

.ed-bloco-tipo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ed-bloco .bloco {
  margin: 0;
}

.ed-bloco .texto-md {
  font-size: 17px !important;
}

.ed-form-bloco {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  scroll-margin-top: 80px;
}

.ed-form-titulo {
  margin: 0 0 10px;
  font-weight: 700;
}

.ed-form-bloco select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
}

.ed-form-bloco textarea {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
}

.ed-adicionar-bloco {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
}

.ed-adicionar-rotulo {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.ed-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ed-vazio {
  text-align: center;
}

.ed-menu-lista a {
  display: block;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

.ed-menu-lista a:hover {
  background: var(--surface-2);
}

/* Biblioteca */
.cadernos {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .cadernos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .cadernos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Cartão como os de trilha: capa larga no topo e o texto embaixo. */
.caderno-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.caderno-capa,
.caderno-faixa {
  flex: none;
  width: 100%;
  height: 132px;
}

.caderno-faixa {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--study-bg);
  color: var(--study-fg);
}

.caderno-faixa svg {
  width: 44px;
  height: 44px;
  fill: currentColor;
  opacity: 0.85;
}

.caderno-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 16px;
}

/* O cartão inteiro leva ao caderno (o link estica por cima). */
.caderno-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.caderno-cartao:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px -14px rgb(0 0 0 / 0.35);
  transform: translateY(-1px);
}

.caderno-cartao:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.caderno-link:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .caderno-cartao {
    transition: none;
  }

  .caderno-cartao:hover {
    transform: none;
  }
}

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

.caderno-cartao .caderno-descricao {
  margin: 0;
  color: var(--muted);
}

.caderno-progresso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.caderno-progresso .trilho {
  flex: 1;
  margin: 0;
}

.caderno-progresso .muted {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.caderno-cartao .caderno-estudando,
.caderno-cartao .caderno-vazio {
  margin: 0;
}

.caderno-icone-grande {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.caderno-icone-grande svg {
  width: 28px;
  height: 28px;
}

/* Cabeçalho da biblioteca: título, resumo e "Novo caderno" */
.bib-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 18px;
}

.bib-resumo {
  margin: 0;
}

.bib-num-estudando {
  color: var(--study-fg);
}

.bib-num-concluidas {
  color: var(--done-fg);
}

.bib-novo {
  position: relative;
}

.bib-novo > summary {
  list-style: none;
  cursor: pointer;
}

.bib-novo > summary::-webkit-details-marker {
  display: none;
}

.bib-novo[open] > summary {
  display: none;
}

.bib-novo-form {
  width: min(420px, calc(100vw - 32px));
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.bib-novo-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--muted);
}

.bib-novo-form .erro {
  margin: 8px 0 0;
}

/* Busca */
.bib-busca {
  position: relative;
  margin-bottom: 22px;
}

.bib-busca svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.bib-busca input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px 10px 42px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
}

.bib-busca input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Linhas de páginas (recentes e resultados da busca) */
.bib-secao {
  margin-top: 8px;
}

.bib-secao-titulo {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.bib-linhas {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.bib-linha {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icone titulo etiqueta"
    "icone meta etiqueta";
  align-items: center;
  gap: 0 12px;
  padding: 10px 16px;
}

.bib-linha + .bib-linha {
  border-top: 1px solid var(--border);
}

.bib-linha:hover {
  background: var(--surface-2);
}

.bib-linha-icone {
  grid-area: icone;
  display: inline-flex;
  color: var(--muted);
}

.bib-linha-icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.bib-linha-titulo {
  grid-area: titulo;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.bib-linha-titulo::after {
  content: "";
  position: absolute;
  inset: 0;
}

.bib-linha-titulo:focus-visible {
  outline: none;
}

.bib-linha:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.bib-linha-meta {
  grid-area: meta;
  font-size: 13px;
}

.bib-linha {
  grid-template-areas:
    "icone titulo etiqueta"
    "icone meta etiqueta"
    "icone trecho etiqueta";
}

.bib-linha-trecho {
  grid-area: trecho;
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.bib-linha-trecho mark,
.busca-grupo mark {
  background: var(--study-bg);
  color: var(--text);
  border-radius: 3px;
  padding: 0 2px;
}

/* Busca na biblioteca: resultados agrupados por caderno */
.busca-resumo {
  margin: -4px 0 14px;
}

.busca-grupos {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.busca-grupo + .busca-grupo {
  margin-top: 22px;
}

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

.busca-grupo-capa {
  flex: none;
  width: 72px;
  height: 44px;
  border-radius: 10px;
}

.busca-grupo-texto {
  min-width: 0;
}

.busca-grupo-texto h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
}

.busca-grupo-texto h3 a {
  color: var(--text);
}

.busca-grupo-texto p {
  margin: 2px 0 0;
  font-size: 14px;
}

.bib-linha .etiqueta {
  grid-area: etiqueta;
}

.etiqueta.s-pulado {
  color: var(--muted);
  border: 1px solid var(--border);
}

/* Biblioteca vazia */
.bib-vazia {
  text-align: center;
  padding: 40px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
}

.bib-vazia .caderno-icone {
  margin-bottom: 8px;
}

.bib-vazia h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 500;
}

.caderno-cartao h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
}

.caderno-cartao h2 a {
  color: var(--text);
  text-decoration: none;
}

.caderno-cartao h2 a:hover {
  text-decoration: underline;
}

.caderno-cartao p {
  margin: 2px 0 0;
  font-size: 14px;
}

.caderno-icone {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.caderno-icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.caderno-novo {
  border-style: dashed;
}

.caderno-novo-form {
  width: 100%;
}

.caderno-novo-form label {
  font-size: 14px;
  color: var(--muted);
}

.linha-campo {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.linha-campo input,
.ed-adicionar input,
.ed-colar input,
.form-largo input {
  flex: 1;
  min-width: 0;
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 10px;
}

.arvore-paginas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.arvore-paginas .arvore-paginas {
  margin-left: 16px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.item-pagina {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.item-pagina-titulo {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}

.item-pagina-titulo::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 12px;
  margin-right: 10px;
  border: 1.5px solid var(--muted);
  border-radius: 2px;
  vertical-align: -1px;
}

.item-pagina-titulo:hover {
  background: var(--surface);
}

.etiqueta.s-estudando,
.etiqueta.s-concluido,
.etiqueta.s-pulado {
  font-size: 12px;
}

/* Escolher páginas para a trilha */
.escolher-lista {
  max-height: 360px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 14px;
  margin-bottom: 10px;
}

.escolher-lista fieldset {
  border: 0;
  margin: 0 0 8px;
  padding: 0;
}

.escolher-lista legend {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0 2px;
}

.escolher-item,
.escolher-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 15px;
}

.escolher-sub {
  margin-bottom: 10px;
}

/* Trilha incluída em outra trilha */
.subtrilha-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
}

.subtrilha-icone {
  display: inline-flex;
  color: var(--accent);
}

.subtrilha-icone svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.subtrilha-titulo {
  font-weight: 600;
  color: var(--text);
}

.subtrilha-rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0 7px;
  vertical-align: 2px;
}

.subtrilha-pct {
  margin-left: auto;
  font-size: 13px;
}

.subtrilha-aviso {
  margin: 6px 0 0;
  font-size: 13px;
}

.ed-subtrilha {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-weight: 600;
}

.linha-campo select,
.form-largo select,
.cat-form select,
.revisar-filtros select {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 10px;
}

/* Abas Cartões / Mapa */
.abas {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 18px;
}

.abas a {
  padding: 8px 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.abas a:hover {
  color: var(--text);
}

.abas a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* Mapa em árvore */
main.largo {
  max-width: 1280px;
}

.mapa-arvore {
  overflow: auto;
  background-color: var(--surface);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  max-height: 75vh;
}

.mapa-svg {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
}

.mapa-ajustado .mapa-svg {
  width: 100%;
  height: auto;
}

.mapa-ajustado {
  max-height: none;
}

.mapa-ligacoes path {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.5;
}

.mapa-ligacoes path.feita {
  stroke: var(--done-fg);
  stroke-width: 2;
}

.mapa-no rect {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1.2;
}

.mapa-no text {
  fill: var(--text);
}

.mapa-no .mapa-contagem {
  fill: var(--muted);
  font-size: 12px;
}

.mapa-raiz rect {
  fill: var(--accent);
  stroke: var(--accent);
}

.mapa-raiz text,
.mapa-raiz .mapa-contagem {
  fill: var(--surface);
  font-weight: 700;
}

.mapa-grupo rect {
  fill: var(--surface-2);
}

.mapa-grupo text {
  font-weight: 600;
}

.mapa-subtrilha rect {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-dasharray: 5 3;
}

.mapa-subtrilha text {
  font-weight: 700;
}

.mapa-marcador {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 2;
}

.mapa-topico.s-estudando rect {
  fill: var(--study-bg);
  stroke: var(--study-bd);
}

.mapa-topico.s-estudando .mapa-marcador {
  fill: var(--study-fg);
  stroke: var(--study-fg);
}

.mapa-topico.s-concluido rect {
  fill: var(--done-bg);
  stroke: var(--done-bd);
}

.mapa-topico.s-concluido .mapa-marcador {
  fill: var(--done-fg);
  stroke: var(--done-fg);
}

.mapa-topico.s-pulado rect {
  fill: transparent;
  stroke-dasharray: 4 3;
}

.mapa-topico.s-pulado text {
  fill: var(--muted);
  text-decoration: line-through;
}

a.mapa-no:hover rect,
a.mapa-no:focus-visible rect {
  stroke: var(--accent);
  stroke-width: 2.5;
}

a.mapa-no:focus {
  outline: none;
}

.mapa-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.mapa-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mapa-legenda .leg {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

.leg.s-estudando {
  background: var(--study-bg);
  border-color: var(--study-bd);
}

.leg.s-concluido {
  background: var(--done-bg);
  border-color: var(--done-bd);
}

.leg.s-pulado {
  border-style: dashed;
  background: transparent;
}

.leg.leg-subtrilha {
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
}

.mapa-legenda .botao-texto {
  margin-left: auto;
}

.mapa-dica {
  font-size: 13px;
  margin-top: 8px;
}

/* Quadro da trilha (apps/roadmaps/disposicao.py, ADR 024): raias, cartões e setas. */
.quadro-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 4px 0 12px;
}

.quadro-barra .mapa-legenda {
  margin: 0;
  flex: 1 1 auto;
}

.quadro-arranjos {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.quadro-arranjos a {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.quadro-arranjos a[aria-current] {
  background: var(--accent);
  color: var(--surface);
}

.quadro-arranjos a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.quadro-raia rect {
  fill: var(--regiao-1);
  stroke: var(--border);
  stroke-width: 1;
}

.quadro-raia.destino rect {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.quadro-raia-titulo,
.quadro-raia-titulo text {
  fill: var(--text);
  font-size: 15px;
  font-weight: 700;
}

a.quadro-raia-titulo:hover text,
a.quadro-raia-titulo:focus-visible text {
  fill: var(--accent);
  text-decoration: underline;
}

.quadro-raia-titulo.muted {
  fill: var(--muted);
  font-weight: 600;
}

.quadro-raia-conta {
  fill: var(--muted);
  font-size: 13px;
  text-anchor: end;
}

.quadro-subtitulo {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.quadro-cartao text {
  font-size: 13.5px;
}

.quadro-cartao .quadro-etiqueta {
  fill: var(--muted);
  font-size: 12px;
}

.quadro-falta circle {
  fill: var(--study-bg);
  stroke: var(--study-bd);
}

.quadro-falta text {
  fill: var(--study-fg);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}

.quadro-seta-linha {
  fill: none;
  stroke: var(--acc2);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.quadro-seta.feita .quadro-seta-linha {
  stroke: var(--done-fg);
}

.quadro-seta.recomendada .quadro-seta-linha {
  stroke-dasharray: 7 5;
}

.quadro-seta.volta .quadro-seta-linha {
  stroke: var(--study-fg);
}

.quadro-seta-alvo {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  cursor: pointer;
}

#quadro-ponta path {
  fill: var(--acc2);
}

#quadro-ponta-feita path {
  fill: var(--done-fg);
}

#quadro-ponta-volta path {
  fill: var(--study-fg);
}

.quadro-seta:hover .quadro-seta-linha {
  stroke-width: 3;
}

/* Foco: o cartão escolhido, o que ele exige e o que ele libera; o resto esmaece. */
.quadro-svg.com-foco .quadro-cartao,
.quadro-svg.com-foco .quadro-seta {
  opacity: 0.28;
  transition: opacity 0.15s;
}

.quadro-svg.com-foco .quadro-cartao.foco-atual,
.quadro-svg.com-foco .quadro-cartao.foco-antes,
.quadro-svg.com-foco .quadro-cartao.foco-depois,
.quadro-svg.com-foco .quadro-seta.acesa {
  opacity: 1;
}

.quadro-svg.com-foco .quadro-seta.acesa .quadro-seta-linha {
  stroke-width: 2.6;
}

.quadro-cartao.foco-atual rect {
  stroke: var(--text);
  stroke-width: 2.5;
}

.quadro-cartao.foco-antes rect {
  stroke: var(--acc2);
  stroke-width: 2;
}

.quadro-cartao.foco-depois rect {
  stroke: var(--accent);
  stroke-width: 2;
}

.quadro-painel {
  position: sticky;
  top: 8px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgb(0 0 0 / 8%);
  font-size: 14px;
}

.quadro-painel[hidden] {
  display: none;
}

.quadro-alca {
  fill: var(--surface);
  stroke: var(--acc2);
  stroke-width: 2;
  cursor: crosshair;
  opacity: 0;
}

.quadro-ligando {
  fill: none;
  stroke: var(--acc2);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  pointer-events: none;
}

/* Seleção de vários cartões (Shift/Ctrl + clique ou retângulo no fundo). */
.quadro-cartao.selecionado rect {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 45%, transparent));
}

[data-editavel] .quadro-svg {
  user-select: none;
  -webkit-user-select: none;
}

.quadro-caixa {
  fill: color-mix(in srgb, var(--accent) 10%, transparent);
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  pointer-events: none;
}

.quadro-painel select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 4px 8px;
}

.quadro-marca {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  pointer-events: none;
}

.leg.leg-seta {
  height: 0;
  border: 0;
  border-top: 2px solid var(--acc2);
  border-radius: 0;
}

.leg.leg-seta.leg-recomendada {
  border-top-style: dashed;
}

@media (pointer: fine) {
  [data-editavel][data-arranjo="grupos"] .quadro-cartao {
    cursor: grab;
  }

  [data-editavel] .quadro-cartao.arrastando {
    cursor: grabbing;
    opacity: 0.9;
    filter: drop-shadow(0 8px 14px rgb(0 0 0 / 18%));
  }

  [data-editavel] .quadro-cartao:hover .quadro-alca,
  [data-editavel] .quadro-cartao:focus-visible .quadro-alca {
    opacity: 1;
  }
}

/* No toque, nada de editar: a dica de edição some. */
@media (pointer: coarse) {
  .quadro-dica-edicao {
    display: none;
  }
}

.incluir-trilha select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 10px;
}

/* Ações de estrutura fora do editor da trilha */
.menu-topico .ed-menu-lista {
  min-width: 290px;
}

.menu-topico .ed-menu-lista form {
  margin: 0;
}

.menu-topico .ed-menu-lista button {
  width: 100%;
}

.acao-indisponivel {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--muted);
}

.nas-trilhas {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
}

.nas-trilhas h2 {
  font-size: 16px;
  margin: 0 0 4px;
}

.nas-trilhas > p {
  margin: 0 0 10px;
  font-size: 14px;
}

.nas-trilhas ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nas-trilhas li + li {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 10px;
}

.nas-trilhas-titulo {
  margin: 0 0 6px;
  font-weight: 600;
}

.nas-trilhas-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 14px;
}

.nas-trilhas-acoes form {
  margin: 0;
}

.nas-trilhas-acoes .acao-indisponivel {
  padding: 0;
}

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

/* Acesso para IA (tokens MCP) ------------------------------------------- */

.token-novo {
  margin-bottom: 32px;
  border-color: var(--accent);
}

.token-novo h3 {
  font-size: 16px;
  margin-top: 20px;
}

.token-novo .linha-campo input {
  flex: 1;
  min-width: 0;
}

.codigo,
.bloco-codigo {
  font-family: var(--mono);
  font-size: 13px;
}

.bloco-codigo {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre;
  margin: 0 0 8px;
}

.escolha-escopo {
  border: 0;
  padding: 0;
}

.escolha-escopo input {
  width: auto;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

.escolha-escopo label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: normal;
  margin: 4px 0;
}

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

.lista-tokens li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lista-tokens p {
  margin: 4px 0 0;
}

.lista-registros {
  padding-left: 18px;
}

.lista-registros li {
  margin: 4px 0;
}

/* Autorizar acesso (OAuth) ---------------------------------------------- */

.autorizar-destino {
  color: var(--muted);
}

.autorizar-titulo {
  font-size: 16px;
  margin-top: 20px;
}

.autorizar-lista {
  padding-left: 18px;
}

.autorizar-lista li {
  margin: 8px 0;
}

.autorizar-escrita {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: normal;
}

.autorizar-escrita input {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}

.passos-conector {
  padding-left: 20px;
}

.passos-conector li {
  margin: 6px 0;
}

/* Guia da extensão do navegador */
.guia-indice {
  margin-bottom: 28px;
}

.guia-indice ol {
  margin: 0;
  padding-left: 20px;
}

.guia-passo {
  margin-bottom: 32px;
  max-width: 70ch;
}

.guia-passo h3 {
  font-size: 15px;
  margin: 16px 0 4px;
}

.guia-numero {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
}

.guia-passo kbd {
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.9em;
}

.guia-figura {
  margin: 16px 0 0;
}

.guia-janela {
  display: grid;
  gap: 4px;
  max-width: 340px;
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgb(0 0 0 / 8%);
  font-size: 14px;
}

.guia-janela-titulo {
  margin: 0 0 6px;
  font-weight: 600;
}

.guia-rotulo {
  color: var(--muted);
  font-size: 13px;
}

.guia-campo {
  margin-bottom: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  overflow-wrap: anywhere;
}

.guia-campo-alto {
  min-height: 3.2em;
}

.guia-botao {
  justify-self: start;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
}

.guia-ok {
  margin: 6px 0 0;
  color: var(--done-fg);
}

.guia-problemas dt {
  margin-top: 10px;
  font-weight: 600;
}

.guia-problemas dd {
  margin: 2px 0 0;
}

/* ------------------------------------------------------------------
   Painéis laterais: biblioteca (esquerda) e trilhas (direita)
   ------------------------------------------------------------------ */
:root {
  --pl-largura: 320px;
}

.botao-painel {
  display: none;
  color: var(--muted);
}

.js .botao-painel {
  display: inline-flex;
}

.botao-painel[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.botao-painel svg {
  stroke-linejoin: round;
}

.painel-lateral {
  position: fixed;
  top: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 40;
  width: min(var(--pl-largura), 88vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: 0 0 40px rgb(0 0 0 / 0.25);
  visibility: hidden;
  transition:
    transform 0.25s ease,
    visibility 0.25s;
}

.pl-esquerda {
  left: 0;
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
}

.pl-direita {
  right: 0;
  border-left: 1px solid var(--border);
  transform: translateX(100%);
}

.painel-lateral.aberto {
  visibility: visible;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .painel-lateral {
    transition: none;
  }
}

.pl-fundo {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgb(0 0 0 / 0.35);
}

.pl-sem-rolagem body {
  overflow: hidden;
}

/* Telas largas: o painel fica encaixado ao lado do conteúdo. */
@media (min-width: 1200px) {
  .painel-lateral {
    box-shadow: none;
  }

  .com-painel-biblioteca #painel-biblioteca,
  .com-painel-trilhas #painel-trilhas {
    visibility: visible;
    transform: none;
  }

  .com-painel-biblioteca body,
  .com-painel-biblioteca .estudo-rodape {
    padding-left: var(--pl-largura);
  }

  .com-painel-trilhas body,
  .com-painel-trilhas .estudo-rodape {
    padding-right: var(--pl-largura);
  }

  /* A barra flutuante de acesso rápido acompanha o meio do conteúdo. */
  .com-painel-biblioteca {
    --pl-esq: var(--pl-largura);
  }

  .com-painel-trilhas {
    --pl-dir: var(--pl-largura);
  }
}

.pl-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid var(--border);
}

.pl-cabecalho h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
}

.pl-fechar {
  width: 36px;
  height: 36px;
  font-size: 22px;
  border-color: transparent;
}

.pl-corpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 18px 24px;
  font-size: 14px;
}

.pl-secao + .pl-secao {
  margin-top: 18px;
}

.pl-rotulo {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.pl-atual {
  padding: 12px;
  border-radius: 10px;
  background: var(--accent-soft);
}

.pl-atual-titulo {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 15px;
}

.pl-guardar label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
}

.pl-linha {
  display: flex;
  gap: 6px;
}

.pl-linha select {
  flex: 1;
  min-width: 0;
}

.pl-guardar .ajuda,
.pl-corpo .ajuda {
  margin: 6px 0 0;
  font-size: 12px;
}

.pl-busca input,
.pl-filtro {
  width: 100%;
  margin-bottom: 4px;
}

.pl-cadernos,
.pl-paginas,
.pl-trilhas {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.pl-paginas .pl-paginas {
  margin: 0 0 0 14px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

.pl-cadernos summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.pl-cadernos summary:hover {
  background: var(--surface-2);
}

.pl-cadernos details > .pl-paginas {
  margin: 0 0 6px 10px;
}

.pl-carregando {
  margin: 4px 10px;
}

.pl-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
}

.pl-item:hover {
  background: var(--surface-2);
}

.pl-item > a {
  flex: 1;
  min-width: 0;
  padding: 6px;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.pl-item > a:hover {
  text-decoration: underline;
}

.pl-item-atual > a {
  color: var(--accent);
  font-weight: 600;
}

.pl-acoes > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
}

.pl-acoes > summary::-webkit-details-marker {
  display: none;
}

.pl-acoes > summary:hover,
.pl-acoes[open] > summary {
  color: var(--accent);
  background: var(--accent-soft);
}

.pl-acoes-lista {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 2;
  min-width: 220px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.18);
}

.pl-acoes-lista form {
  margin: 0;
}

.pl-acoes-lista button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 8px 10px;
  font-size: 14px;
}

.pl-acoes-lista button:hover {
  background: var(--surface-2);
}

.pl-trilhas li {
  padding: 2px 0 8px;
}

.pl-progresso {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
}

.pl-progresso .trilho {
  flex: 1;
  margin: 0;
}

.pl-progresso .muted {
  font-size: 12px;
  min-width: 32px;
  text-align: right;
}

.pl-links {
  margin: 8px 0 0;
}

.pl-rodape {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.pl-corpo input[type="search"],
.pl-corpo select {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 10px;
}

.pl-corpo input[type="search"]:focus,
.pl-corpo select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Tela "Aparência" */
.aparencia-grupo {
  border: 0;
  margin: 0 0 28px;
  padding: 0;
}

.aparencia-grupo legend {
  font-family: var(--serif);
  font-size: 22px;
  margin-bottom: 12px;
}

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

.paleta-opcao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px 14px;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
}

.paleta-opcao input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.paleta-opcao:has(input:checked) {
  border-color: var(--text);
}

.paleta-opcao:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.paleta-amostra svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.paleta-nome {
  font-weight: 600;
  margin-top: 6px;
}

.paleta-descricao {
  font-size: 13px;
  color: var(--muted);
}

.temas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tema-opcao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}

.tema-opcao:has(input:checked) {
  border-color: var(--text);
  font-weight: 600;
}

/* Capas geradas (apps/roadmaps/capas.py) */
.capa {
  display: block;
  object-fit: cover; /* imagem enviada: recorta para caber, como a gerada */
}

/* Capa com imagem: o span tem o tamanho da capa; a imagem cobre e recebe o
   enquadramento (object-position + transform) da templatetag `capa`. */
.capa-foto {
  position: relative;
  overflow: hidden;
  background: var(--ceu); /* se o link da imagem quebrar, fica a cor do céu */
}

.capa-foto img,
.capa-moldura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.capa-editor {
  margin: 4px 0 16px;
  padding: 0;
  border: 0;
}

.capa-editor legend {
  font-weight: 600;
  margin-bottom: 6px;
}

.capa-moldura {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 5 / 2;
  border-radius: 18px;
  background: var(--ceu);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.capa-moldura.arrastando {
  cursor: grabbing;
}

.capa-moldura img {
  pointer-events: none;
}

.capa-moldura:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.capa-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 480px;
}

.capa-zoom input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}

.capa-edicao {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.capa-previa {
  flex: none;
  width: 300px;
  max-width: 100%;
  height: 120px;
  border-radius: 18px;
}

.capa-edicao-acoes {
  flex: 1 1 280px;
  min-width: 0;
}

.capa-edicao-acoes > .muted {
  margin-top: 0;
}

.capa-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.capa-imagem > form {
  margin-top: 12px;
}

.trilha-capa {
  width: calc(100% + 40px);
  height: 160px;
  margin: 0 -20px;
}

.cabecalho-trilha {
  align-items: center;
}

.cabecalho-trilha-texto {
  flex: 1 1 320px;
  min-width: 0;
}

.capa-mini {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.pl-item .capa-mini {
  width: 28px;
  height: 28px;
  margin-left: 4px;
}

/* ------------------------------------------------------------------
   Percurso: a trilha como mapa (apps/roadmaps/percurso.py)
   ------------------------------------------------------------------ */
.percurso-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.percurso {
  flex: 999 1 600px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 20px;
}

.percurso-lado {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.percurso-mapa {
  position: relative;
}

.percurso-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.percurso-regiao {
  fill: var(--regiao-1);
}

.percurso-regiao.alt {
  fill: var(--regiao-2);
}

.percurso-curva,
.percurso-ramo,
.percurso-feito,
.percurso-falta {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.percurso-curva {
  stroke: var(--topo);
  stroke-width: 1.5;
}

.percurso-ramo {
  stroke: var(--ramo);
  stroke-width: 2.5;
  stroke-dasharray: 2 7;
}

.percurso-feito {
  stroke: var(--accent);
  stroke-width: 6;
}

.percurso-falta {
  stroke: var(--accent);
  stroke-opacity: 0.55;
  stroke-width: 3.5;
  stroke-dasharray: 1 10;
}

.percurso-rosa,
.percurso-palmeira {
  position: absolute;
  fill: none;
  stroke: var(--ramo);
  stroke-width: 1.5;
  stroke-linecap: round;
  pointer-events: none;
}

.percurso-rosa {
  right: 6px;
  top: 6px;
  width: 60px;
  height: 60px;
}

.percurso-rosa .norte {
  fill: var(--acc2);
  stroke: none;
}

.percurso-palmeira {
  left: 6px;
  bottom: 6px;
  width: 110px;
  height: 140px;
  stroke-width: 2;
}

@keyframes pulso {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }

  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* Pulsa três vezes ao abrir a página e depois descansa. */
.percurso-pulso {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: var(--acc2);
  opacity: 0;
  animation: pulso 2.4s ease-out 3;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .percurso-pulso {
    animation: none;
  }
}

.percurso-etapa {
  position: absolute;
  left: 20px;
  margin-top: 4px;
  max-width: 270px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--border);
  color: var(--text);
  text-decoration: none;
}

.percurso-etapa-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.percurso-etapa-numero {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.percurso-etapa-nome {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
}

.percurso-selo {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--on-accent);
  background: var(--accent);
}

.percurso-selo.cor-1 {
  background: var(--acc2);
}

.percurso-selo.cor-2 {
  background: var(--acc3);
  color: var(--text);
}

.percurso-selo.cor-3 {
  background: var(--mar);
  color: var(--text);
}

.percurso-selo.cor-4 {
  background: var(--terra);
  color: var(--text);
}

.percurso-cartao {
  position: absolute;
  width: 172px;
  margin-top: -18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 16px 30px -24px rgb(0 0 0 / 0.5);
}

.percurso-cartao .capa {
  width: 100%;
  height: 56px;
}

.percurso-cartao-texto {
  display: flex;
  flex-direction: column;
  padding: 8px 12px 10px;
  font-size: 13px;
  line-height: 1.25;
}

.percurso-cartao-tipo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.percurso-cartao-nome {
  font-family: var(--serif);
  font-size: 17px;
}

/* Marcos: a bolinha fica exatamente no ponto; o rótulo vai para o lado. */
.marco {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}

.marco-dir {
  transform: translate(-21px, -50%);
}

.marco-esq {
  flex-direction: row-reverse;
  text-align: right;
  transform: translate(calc(-100% + 21px), -50%);
}

.marco-baixo {
  flex-direction: column;
  gap: 4px;
  text-align: center;
  transform: translate(-50%, -16px);
}

.marco.nivel-2.marco-baixo {
  transform: translate(-50%, -14px);
}

.marco-rotulo {
  display: block;
  max-width: 250px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--surface);
  line-height: 1.2;
}

.nivel-1 .marco-rotulo {
  max-width: 140px;
  font-size: 14px;
}

.nivel-2 .marco-rotulo {
  max-width: 108px;
  font-size: 13px;
}

.marco-nome {
  display: block;
  font-weight: 600;
}

.marco-legenda {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.marco.aqui .marco-legenda {
  color: var(--acc2-texto);
  font-weight: 700;
}

.marco:hover .marco-rotulo,
.marco:focus-visible .marco-rotulo {
  box-shadow: 0 8px 20px -14px rgb(0 0 0 / 0.5);
}

.marco:hover .marco-nome {
  text-decoration: underline;
}

.parada-marca {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  border: 3px solid var(--ramo);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--surface);
  color: var(--surface);
}

.nivel-1 .parada-marca {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.nivel-2 .parada-marca,
.parada-marca.pequena {
  width: 18px;
  height: 18px;
  font-size: 10px;
  border-width: 2px;
  box-shadow: none;
}

.parada-marca.s-concluido {
  background: var(--done-fg);
  border-color: var(--done-fg);
}

.parada-marca.s-concluido::after {
  content: "✓";
}

.parada-marca.s-estudando {
  border-color: var(--acc3);
  background: linear-gradient(90deg, var(--acc3) 50%, var(--surface) 50%);
}

.parada-marca.s-pulado {
  border-style: dashed;
}

.parada-marca.destino {
  border-color: var(--acc2);
  color: var(--acc2);
}

.parada-marca.destino.s-a_estudar::after {
  content: "☼";
}

.parada-marca.trilha {
  border-radius: 8px;
  border-color: var(--acc2);
  background: var(--acc2);
}

.marco:focus-visible {
  outline: none;
}

.marco:focus-visible .parada-marca {
  box-shadow:
    0 0 0 4px var(--surface),
    0 0 0 7px var(--accent);
}

.percurso-legenda {
  list-style: none;
  margin: 12px 0 0;
  padding: 14px 8px 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  color: var(--muted);
}

.percurso-legenda li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legenda-ramo {
  width: 26px;
  border-top: 3px dotted var(--ramo);
}

/* Lado: progresso e prévia */
.percurso-pct {
  margin: 0;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
}

.percurso-progresso .muted {
  margin: 4px 0 10px;
}

.percurso-previa {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.percurso-previa > * {
  margin: 0;
}

.percurso-previa .etiqueta {
  align-self: flex-start;
}

.previa-titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
}

.previa-caminho {
  font-size: 14px;
}

.previa-tipo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.previa-capa {
  width: 100%;
  height: 100px;
  border-radius: 12px;
}

.previa-materiais {
  list-style: none;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}

.previa-materiais li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--acc3);
}

.previa-acao {
  text-align: center;
}

.etiqueta.s-a_estudar {
  background: var(--surface-2);
  color: var(--muted);
}

/* Celular: linha do tempo vertical no lugar do mapa. */
.percurso-linha {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
}

@media (max-width: 640px) {
  .percurso {
    padding: 16px 14px;
    border-radius: 20px;
  }

  .percurso-mapa {
    display: none;
  }

  .percurso-linha {
    display: block;
  }
}

.linha-etapa {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
  font-family: var(--serif);
  font-size: 19px;
}

.linha-etapa:first-child {
  margin-top: 0;
}

.linha-etapa a {
  color: var(--text);
  text-decoration: none;
}

.linha-parada {
  position: relative;
  padding: 0 0 0 4px;
  border-left: 3px dotted var(--accent);
  margin-left: 15px;
}

.linha-parada > a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin-left: -20px;
  color: var(--text);
  text-decoration: none;
}

.linha-parada .marco-rotulo {
  flex: 1;
  max-width: none;
  padding: 0;
  text-align: left;
}

.linha-parada.aqui .marco-legenda {
  color: var(--acc2-texto);
  font-weight: 700;
}

.linha-galhos {
  margin: 0 0 8px 28px;
  font-size: 14px;
}

.linha-galhos summary {
  cursor: pointer;
  color: var(--muted);
  min-height: 32px;
}

.linha-galhos ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.linha-galhos li a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--text);
  text-decoration: none;
}

.linha-galhos li.nivel-2 {
  padding-left: 20px;
}

/* ------------------------------------------------------------------
   Painel inicial (identidade Bossa)
   ------------------------------------------------------------------ */
.boas-vindas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 40px;
  margin-bottom: 36px;
}

.boas-vindas h1 {
  margin: 0;
  font-size: clamp(40px, 6vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.boas-vindas h1 em {
  font-weight: 300;
}

.boas-vindas-data {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--muted);
}

.boas-vindas-data::first-letter {
  text-transform: uppercase;
}

.sol {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--acc3);
}

.boas-vindas-frase {
  margin: 0;
  max-width: 360px;
  font-size: 17px;
}

.continuar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 40px;
}

.continuar-capa {
  width: 100%;
  height: 100%;
  min-height: 240px;
}

.continuar-corpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 32px 36px;
}

.continuar-corpo > * {
  margin: 0;
}

.continuar-corpo h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.04;
}

.continuar-rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--acc2-texto);
}

.ponto-coral {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acc2);
}

.continuar-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.continuar-vazio .continuar-corpo h2 {
  font-size: 30px;
}

.no-caminho {
  margin: 0 0 44px;
}

.inicio-subtitulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
}

.no-caminho .carrossel-cartao {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  background: var(--surface);
}

.carrossel-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.inicio-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
}

.trilha-cartao h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  margin: 14px 0 4px;
}

.trilha-cartao h3 a {
  color: var(--text);
  text-decoration: none;
}

.trilha-nova {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 2px dashed var(--border-strong);
  background: transparent;
  padding: 0;
}

.trilha-nova .trilha-link {
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}

.atalho-biblioteca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 20px;
}

.atalho-biblioteca:hover {
  border-color: var(--accent);
}

.atalho-biblioteca-texto {
  display: flex;
  flex-direction: column;
  font-size: 16px;
}

.atalho-biblioteca-texto strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
}

.onda-final {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 36px;
  fill: none;
  stroke: var(--border);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.continuar .trilho {
  background: var(--surface-2);
}

.icone-comentario {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* Telas de mover (página para caderno, tópico para trilha) */
.acoes-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lista-simples {
  margin: 0;
  padding-left: 20px;
}

.lista-simples li + li {
  margin-top: 6px;
}

/* Lixeira (apps/lixeira) */
.lixeira-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px;
}

.lixeira-item + .lixeira-item {
  border-top: 1px solid var(--border);
}

.lixeira-texto {
  flex: 1 1 320px;
  min-width: 0;
}

.lixeira-titulo {
  margin: 6px 0 2px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lixeira-meta {
  margin: 0;
  font-size: 13px;
}

.lixeira-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lixeira-acoes .texto-perigo {
  color: var(--danger);
}

/* ------------------------------------------------------------------
   Listas organizáveis: trilhas e cadernos (apps/core/listas.py)
   Visões: cartões, compacta e lista (tabela). Fixar e ordem manual.
   ------------------------------------------------------------------ */
.org-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.org-ordem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.org-ordem select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px 10px;
}

.org-visoes {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: 12px;
}

.org-visao {
  border: 0;
  background: transparent;
  color: var(--muted);
}

.org-visao[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

.org-visao svg,
.org-fixar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.org-dica {
  margin: -6px 0 12px;
}

.org-itens {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.org-cartoes {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.org-compacta {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: 12px;
}

.org-cabecalho {
  display: none;
}

.org-item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.org-item:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px -14px rgb(0 0 0 / 0.35);
}

.org-item:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.org-capa {
  flex: none;
  width: 100%;
  height: 132px;
}

.org-compacta .org-capa {
  height: 84px;
}

.org-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px 18px 16px;
}

.org-compacta .org-corpo {
  gap: 6px;
  padding: 10px 12px 12px;
}

.org-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.org-compacta .org-titulo {
  font-size: 16px;
}

.org-link {
  color: var(--text);
  text-decoration: none;
}

/* O item inteiro leva à trilha ou ao caderno (o link estica por cima). */
.org-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.org-link:focus-visible {
  outline: none;
}

.org-desc,
.org-achados,
.org-meta {
  margin: 0;
  font-size: 14px;
}

.org-achados mark {
  background: var(--study-bg);
  color: var(--text);
  border-radius: 3px;
  padding: 0 2px;
}

.org-compacta .org-desc {
  display: none;
}

.org-progresso {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: auto 0 0;
  font-size: 13px;
}

.org-progresso .trilho {
  margin: 0;
}

.org-meta {
  font-size: 13px;
}

.org-compacta .org-meta {
  display: none;
}

/* Ações ficam acima do link esticado. Nos cartões, flutuam sobre a capa. */
.org-acoes {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  gap: 4px;
}

.org-mover {
  display: flex;
  gap: 4px;
}

.org-acoes .botao-icone {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

.org-fixar {
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s;
}

.org-item:hover .org-fixar,
.org-fixar:focus-visible,
.org-fixar[aria-pressed="true"] {
  opacity: 1;
}

.org-fixar[aria-pressed="true"] {
  color: var(--accent);
}

.org-fixar[aria-pressed="true"] svg {
  fill: currentColor;
}

@media (hover: none) {
  .org-fixar {
    opacity: 1;
  }
}

/* Visão em lista: uma linha por item, com colunas como numa tabela. */
.org-lista {
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.org-lista .org-item,
.org-lista .org-cabecalho {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
}

.org-lista .org-item + .org-item {
  border-top: 1px solid var(--border);
}

.org-lista .org-item:hover {
  box-shadow: none;
  background: var(--surface-2);
}

.org-lista .org-item:focus-within {
  outline-offset: -2px;
}

.org-lista .org-capa {
  grid-row: 1 / span 3;
  width: 56px;
  height: 36px;
  border-radius: 8px;
}

.org-lista .org-corpo {
  display: contents;
}

.org-lista .org-titulo {
  grid-column: 2;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
}

.org-lista .org-desc {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-lista .org-achados,
.org-lista .org-progresso,
.org-lista .org-meta {
  grid-column: 2;
  margin: 0;
}

.org-lista .org-acoes {
  position: static;
  grid-column: 3;
  grid-row: 1 / span 3;
}

.org-lista .org-acoes .botao-icone {
  box-shadow: none;
}

@media (min-width: 760px) {
  .org-lista .org-item,
  .org-lista .org-cabecalho {
    grid-template-columns: 56px minmax(0, 1fr) 190px 130px 88px;
  }

  .org-lista .org-cabecalho {
    padding-block: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-2);
  }

  .org-lista .org-progresso {
    grid-column: 3;
    grid-row: 1 / span 3;
  }

  .org-lista .org-meta {
    grid-column: 4;
    grid-row: 1 / span 3;
  }

  .org-lista .org-acoes {
    grid-column: 5;
    justify-content: flex-end;
  }
}

.org-lista .org-cabecalho:not(:has(+ .org-item)) {
  display: none;
}

@media (max-width: 759px) {
  .org-lista .org-cabecalho {
    display: none;
  }
}

.pl-subrotulo {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.pl-abrir-caderno {
  margin: 4px 0 8px 22px;
  font-size: 13px;
}

/* Procedência do que a IA escreveu (ADR 028) */
.procedencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 16px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.procedencia p {
  margin: 0;
  flex: 1 1 240px;
  overflow-wrap: anywhere;
}

/* Modelos de partida da tela "Nova trilha" */
.modelos {
  margin: 8px 0 24px;
}

.modelos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 10px;
}

.modelo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 12px 14px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.modelo:hover,
.modelo-escolhido {
  border-color: var(--accent);
}

.modelo-escolhido {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.modelo-nome {
  font-weight: 600;
}

.modelo-resumo {
  font-size: 13px;
}

.modelo-pronto form {
  margin-top: auto;
  padding-top: 8px;
}

.modelo-categoria {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.modelos-categorias {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
  padding: 0;
}

.modelos-categorias .cat {
  text-decoration: none;
}

.modelos-categorias .cat-ativa {
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* ------------------------------------------------------------------ categorias (ADR 016)
   Etiquetas da pessoa para trilhas e cadernos. A cor de cada uma é só um tom de fundo
   e de borda misturado à superfície; o texto fica na cor normal (contraste nos dois temas). */
.cat {
  --cat: #2F6B4F;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--text);
  background: color-mix(in srgb, var(--cat) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cat) 45%, var(--surface));
  border-radius: 999px;
  padding: 3px 10px;
  text-decoration: none;
  white-space: nowrap;
}

.cat::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cat);
  flex: none;
}

a.cat:hover {
  background: color-mix(in srgb, var(--cat) 24%, var(--surface));
}

.cat-verde { --cat: #3E8A63; }
.cat-azul { --cat: #3C78B4; }
.cat-ambar { --cat: #D19A1E; }
.cat-coral { --cat: #D2694A; }
.cat-ameixa { --cat: #8C5A9E; }
.cat-terra { --cat: #9A7444; }
.cat-cinza { --cat: #7C857F; }

.cabecalho-categorias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.cabecalho-categorias .cat-etiquetas {
  margin: 0;
}

.cabecalho-categorias .cat-escolher > summary {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
}

.cat-etiquetas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 8px 0 0;
}

.cat-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.cat-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 14px;
}

.cat-linha + .cat-linha {
  border-top: 1px solid var(--border);
}

.cat-contagem {
  font-size: 14px;
  flex: 1 1 auto;
}

.cat-acoes {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.cat-acoes > form {
  display: flex;
  gap: 4px;
}

.cat-editar[open] {
  flex-basis: 100%;
}

.cat-editar > form {
  margin-top: 10px;
}

.cat-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

.cat-form .campo {
  margin: 0;
}

.cat-form select {
  min-height: 44px;
}

.cat-form button {
  min-height: 44px;
}

.cat-barra {
  margin-bottom: 20px;
}

.cat-agrupar {
  display: flex;
  gap: 12px;
}

.cat-escolher {
  position: relative;
}

.cat-escolher > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cat-escolher > summary::-webkit-details-marker {
  display: none;
}

.cat-escolher > summary svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.cat-escolher-form {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  left: 0;
  width: min(300px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.35);
}

.cat-escolher-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.cat-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.cat-escolher-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cat-filtros {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 14px;
}

.cat-filtros .cat[aria-current="true"] {
  background: color-mix(in srgb, var(--cat) 34%, var(--surface));
  border-color: var(--cat);
  font-weight: 600;
}

.cat-filtros .cat-todas {
  --cat: var(--muted);
}

.cat-filtros .cat-todas::before,
.cat-filtros .cat-sem::before {
  display: none;
}

.cat-filtros .cat-sem {
  --cat: var(--border-strong);
}

.cat-grupo + .cat-grupo {
  margin-top: 28px;
}

.cat-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin: 0 0 12px;
}

/* ---------------------------------------------------------------- tela do caderno */
.caderno-topo {
  margin-bottom: 24px;
}

/* Capa em faixa no alto (protótipo de 12/10, como no Notion): larga e baixa, com Trocar,
   Reposicionar e Tirar ao passar o mouse; o ícone do caderno sobe sobre a borda de baixo. */
.capa-topo {
  position: relative;
  margin-bottom: 14px;
}

.capa-banner {
  display: block;
  width: 100%;
  height: clamp(140px, 22vw, 240px);
  border-radius: 16px;
  overflow: hidden;
}

.capa-topo-acoes {
  position: absolute;
  z-index: 1;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}

.capa-topo:hover .capa-topo-acoes,
.capa-topo:focus-within .capa-topo-acoes {
  opacity: 1;
}

@media (hover: none) {
  .capa-topo-acoes {
    opacity: 1;
  }
}

.capa-topo-acoes form {
  margin: 0;
}

.capa-topo-botao {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.capa-topo-botao:hover {
  background: var(--surface);
}

/* No alto à direita: embaixo à esquerda fica o ícone, embaixo à direita os botões. */
.capa-credito {
  position: absolute;
  right: 12px;
  top: 10px;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
  text-decoration: none;
}

.capa-credito:hover {
  color: #fff;
  text-decoration: underline;
}

.capa-origem > summary {
  margin-bottom: 8px;
}

.capa-galeria {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  max-width: 360px;
}

.capa-galeria button {
  height: 40px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.capa-fotos-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-width: 520px;
}

.capa-fotos-grade button {
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
}

.capa-fotos-grade img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
}

.capa-galeria button:focus-visible,
.capa-fotos-grade button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.capa-vazia {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--muted);
}

.capa-vazia .icone {
  width: 40%;
  max-width: 32px;
  height: 40%;
  max-height: 32px;
}

.topo-adicionar {
  display: flex;
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.capa-adicionar {
  margin: 0 0 8px;
}

.capa-adicionar button {
  border: 0;
  background: none;
  font: inherit;
}

/* Com capa e com ícone, o ícone sobe sobre a borda de baixo da faixa. */
.caderno-topo:has(.capa-topo:not([hidden])):has(.icone-atual .emoji-icone) .topo-adicionar,
.leitura-cabecalho:has(.capa-topo:not([hidden])):has(.icone-atual .emoji-icone) .topo-adicionar {
  position: relative;
  margin-top: -48px;
}

.capa-banner.capa-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caderno-topo-corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
}

.caderno-topo-texto {
  flex: 1 1 360px;
  min-width: 0;
}

.caderno-topo-texto h1 {
  margin: 0 0 6px;
}

.caderno-desc {
  margin: 0 0 8px;
}

.caderno-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.caderno-numeros strong {
  color: var(--text);
}

.caderno-topo-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.menu-acao {
  position: relative;
}

.menu-acao > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.menu-acao > summary::-webkit-details-marker {
  display: none;
}

.menu-acao > summary svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-acao-lista {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.35);
}

.menu-acao-direita {
  left: auto;
  right: 0;
}

.menu-acao-lista a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

.menu-acao-lista a:hover,
.menu-acao-lista a:focus-visible {
  background: var(--surface-2);
}

.menu-acao-lista a .muted {
  font-size: 13px;
}

.menu-acao-grupo {
  margin: 6px 0 0;
  padding: 8px 10px 2px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.menu-acao-lista a.menu-acao-perigo {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  color: var(--danger);
}

/* No celular, o "⋯" do caderno e da trilha abre como folha acima da barra de baixo. */
@media (max-width: 899px) {
  .caderno-topo-acoes .menu-acao-lista,
  .acoes-trilha .menu-acao-lista {
    position: fixed;
    z-index: 30;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* Cabeçalho das vistas da trilha: ação principal, Editar e "⋯". */
.acoes-trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Caderno: ajustes de uso raro recolhidos no fim da página. */
.caderno-ajustes {
  margin: 32px 0 0;
  border-top: 1px solid var(--border);
}

.caderno-ajustes > summary {
  padding: 16px 0;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
}

.caderno-ajustes[open] > summary {
  color: var(--text);
}

/* Quadro: legenda e dicas atrás do "?". */
.quadro-ajuda {
  margin: 0 0 12px;
}

.quadro-ajuda > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.quadro-ajuda > summary span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.quadro-ajuda[open] {
  display: grid;
  gap: 8px;
}

@media (max-width: 560px) {
  .caderno-topo-acoes {
    width: 100%;
  }

  .menu-acao-lista {
    left: auto;
    right: 0;
  }
}

.caderno-trilhas {
  margin: 28px 0;
  padding: 18px 20px;
}

.caderno-trilhas h2 {
  font-size: 17px;
  margin: 0 0 8px;
}

.caderno-trilhas-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.caderno-trilhas-lista li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.caderno-trilhas-lista p {
  margin: 2px 0 0;
  font-size: 14px;
}

.caderno-transformar > summary {
  list-style: none;
  display: inline-block;
}

.caderno-transformar > summary::-webkit-details-marker {
  display: none;
}

.caderno-transformar[open] > summary {
  margin-bottom: 14px;
}

@media (min-width: 760px) {
  .caderno-topo-corpo {
    flex-direction: column;
    align-items: stretch;
  }

  .caderno-topo-texto {
    flex: none;
  }
}

/* ---------------------------------------------------------------- tela da página */
.migalha-caderno {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.migalha-caderno .capa-mini,
.pagina-trilha .capa-mini {
  width: 20px;
  height: 20px;
}

.pagina-trilhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 18px;
  font-size: 14px;
}

.pagina-trilha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.pagina-trilha:hover {
  background: var(--surface-2);
}

.pagina-vizinhas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.pagina-vizinha {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}

.pagina-vizinha strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pagina-vizinha:hover {
  border-color: var(--border-strong);
}

.pagina-vizinha-proxima {
  grid-column: 2;
  text-align: right;
}

/* Editor visual de páginas (ADR 020): o texto aparece formatado enquanto se escreve. */
.ed-visual {
  position: relative;
}

.ed-visual-cabeca {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

.ed-area .ProseMirror {
  min-height: 9em;
  padding: 14px 16px 14px 40px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
}

.ed-area .ProseMirror:focus-visible,
.ed-area .ProseMirror:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.ed-area .ProseMirror > :first-child {
  margin-top: 0;
}

.ed-area .ProseMirror > :last-child {
  margin-bottom: 0;
}

.ed-area .ProseMirror p {
  margin: 0 0 0.7em;
}

/* Linha vazia única: mostra a dica do campo. */
.ed-area .ProseMirror[data-placeholder] > p:only-child:empty::before,
.ed-area .ProseMirror > p:only-child > br.ProseMirror-trailingBreak:only-child::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.ed-area h1,
.ed-area h2,
.ed-area h3,
.ed-area h4 {
  font-family: var(--serif);
  line-height: 1.25;
  margin: 1em 0 0.4em;
}

.ed-area h1 { font-size: 1.6em; }
.ed-area h2 { font-size: 1.35em; }
.ed-area h3 { font-size: 1.15em; }

.ed-area blockquote {
  margin: 0.8em 0;
  padding-left: 14px;
  border-left: 3px solid var(--border-strong);
  color: var(--muted);
}

.ed-area code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface-2);
}

.ed-area pre {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  overflow-x: auto;
}

.ed-area pre code {
  padding: 0;
  background: none;
}

.ed-area a {
  color: var(--accent);
}

.ed-area hr {
  border: 0;
  border-top: 1px solid var(--border-strong);
  margin: 1.2em 0;
}

.ed-area ul,
.ed-area ol {
  padding-left: 1.4em;
}

/* Tarefas: a caixinha no lugar do marcador. */
.ed-area li[data-item-type="task"] {
  list-style: none;
  position: relative;
}

.ed-area li[data-item-type="task"]::before {
  content: "";
  position: absolute;
  left: -1.4em;
  top: 0.35em;
  width: 0.9em;
  height: 0.9em;
  border: 2px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
}

.ed-area li[data-item-type="task"][data-checked="true"]::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--surface);
}

.ed-area li[data-item-type="task"][data-checked="true"] > p {
  color: var(--muted);
  text-decoration: line-through;
}

/* [[Página]] e ![[Página#Seção]] */
.ed-wiki {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 4px;
  cursor: default;
}

.ed-wiki.ProseMirror-selectednode {
  outline: 2px solid var(--accent);
}

.ed-wiki-embed {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  text-decoration: none;
  background: var(--surface-2);
}

.ed-wiki-embed::before {
  content: "↳ ";
}

/* Callouts: mesmas cores do bloco destaque. */
.ed-callout {
  margin: 0.8em 0;
  padding: 10px 16px 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
}

.ed-callout::before {
  content: attr(data-rotulo);
  display: block;
  margin-bottom: 4px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.ed-callout-atencao {
  background: var(--study-bg);
  border-left-color: var(--study-fg);
}

.ed-callout-atencao::before {
  color: var(--study-fg);
}

.ed-callout-resumo {
  background: var(--done-bg);
  border-left-color: var(--done-fg);
}

.ed-callout-resumo::before {
  color: var(--done-fg);
}

.ed-callout-definicao {
  background: var(--surface);
  border-left-color: var(--text);
}

.ed-callout-definicao::before {
  color: var(--text);
}

.ed-callout-pergunta {
  background: var(--surface);
  border-left-color: var(--acc2);
}

.ed-callout-pergunta::before {
  color: var(--acc2-texto);
}

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

/* No editor visual, o rótulo vira cabeçalho com o título editável. */
.ed-callout-editavel::before {
  content: none;
}

.ed-callout-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 4px;
}

.ed-callout-nome {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.ed-callout-atencao > .ed-callout-cabeca .ed-callout-nome {
  color: var(--study-fg);
}

.ed-callout-resumo > .ed-callout-cabeca .ed-callout-nome {
  color: var(--done-fg);
}

.ed-callout-definicao > .ed-callout-cabeca .ed-callout-nome {
  color: var(--text);
}

.ed-callout-titulo {
  flex: 1 1 12em;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
}

.ed-callout-titulo:hover,
.ed-callout-titulo:focus {
  border-color: var(--border);
  background: var(--bg);
}

/* Barra de formatação, botão "+" e menu de inserir. */
.ed-barra {
  position: absolute;
  z-index: 20;
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgb(0 0 0 / 14%);
}

.ed-barra[hidden],
.ed-mais[hidden],
.ed-inserir[hidden],
.ed-sugestoes[hidden],
.ed-form-link[hidden],
.ed-botao[hidden] {
  display: none;
}

.ed-barra-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  justify-content: space-between;
  overflow-x: auto;
  border-radius: 0;
  border-width: 1px 0 0;
}

.ed-botao {
  min-width: 36px;
  min-height: 36px;
  padding: 4px 8px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.ed-barra-fixa .ed-botao {
  min-width: 44px;
  min-height: 44px;
}

.ed-botao:hover,
.ed-botao[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.ed-botao-negrito { font-weight: 800; }
.ed-botao-italico { font-style: italic; font-family: var(--serif); }
.ed-botao-riscado { text-decoration: line-through; }
.ed-botao-codigo { font-family: var(--mono); font-size: 13px; }

.ed-botao-mais {
  font-size: 22px;
  color: var(--accent);
}

/* Barra da tabela: os botões têm nome escrito; "Mais" abre os de inserir acima e apagar. */
.ed-barra-tabela {
  flex-wrap: wrap;
  max-width: 100%;
}

/* No celular, os botões de "Mais" descem para uma segunda linha em vez de se espremer. */
.ed-barra-tabela.ed-barra-fixa {
  justify-content: flex-start;
  gap: 4px 6px;
  overflow-x: visible;
}

.ed-botao-tabela {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.ed-botao-perigo {
  color: var(--danger);
}

.ed-botao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ed-botao:disabled:hover {
  background: none;
  color: inherit;
}

.ed-botao:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.ed-form-link {
  display: flex;
}

.ed-campo-link {
  min-width: min(320px, 80vw);
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  font: inherit;
}

.ed-mais {
  position: absolute;
  left: 8px;
  z-index: 10;
  width: 26px;
  height: 26px;
  margin-top: 16px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ed-mais:hover,
.ed-mais:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--accent);
}

.ed-inserir {
  position: absolute;
  z-index: 25;
  list-style: none;
  margin: 0;
  padding: 4px;
  width: min(280px, 90vw);
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgb(0 0 0 / 14%);
}

.ed-inserir li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.ed-inserir li.ativo,
.ed-inserir li:hover {
  background: var(--accent-soft);
}

.ed-inserir-dica {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

.ed-sugestoes {
  position: absolute;
  z-index: 25;
  width: min(360px, 90vw);
}

/* Tarefas escritas no texto (`- [ ]`): a caixinha no lugar do marcador. */
.texto-md li:has(> p > .tarefa-md:first-child),
.texto-md li:has(> .tarefa-md:first-child) {
  list-style: none;
  margin-left: -1.2em;
}

.tarefa-md {
  color: var(--muted);
}

.tarefa-md-feita {
  color: var(--accent);
}

@media (pointer: coarse) {
  /* No celular, o "+" fica na barra de baixo; o texto usa a largura toda. */
  .ed-area .ProseMirror {
    padding-left: 16px;
    padding-bottom: 72px;
  }
}

/* Página como documento (ADR 020): título grande e o texto ocupando a página. */
.ed-documento-barra {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 12px;
  padding: 8px 0;
  background: var(--bg);
}

.ed-documento-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ed-status {
  margin: 0;
  min-height: 1.4em;
  color: var(--muted);
  font-size: 14px;
}

.ed-status .erro,
.ed-status .aviso {
  font-weight: 600;
}

.ed-status .erro {
  color: var(--danger);
}

.ed-status .aviso {
  color: var(--study-fg);
}

.ed-documento-titulo {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 4px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 600;
  line-height: 1.2;
}

.ed-documento-titulo:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.ed-documento-titulo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.editor-documento .ed-area .ProseMirror {
  min-height: 55vh;
  border-color: transparent;
  background: transparent;
}

.editor-documento .ed-area .ProseMirror:focus {
  border-color: var(--border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.editor-documento .ed-documento-fonte {
  width: 100%;
  min-height: 55vh;
  font-family: var(--mono);
  font-size: 15px;
}

/* Vídeo escrito como imagem: cartão no editor. */
.ed-video {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
  font-family: var(--sans);
}

.ed-video-url {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.ed-area img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.ed-area .ProseMirror-selectednode {
  outline: 2px solid var(--accent);
}

.ed-endereco {
  position: absolute;
  z-index: 25;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgb(0 0 0 / 14%);
}

.ed-endereco[hidden] {
  display: none;
}

/* Questão escrita como callout: as alternativas lembram as do bloco questão. */
.ed-callout-tipo-questao li[data-item-type="task"][data-checked="true"] > p {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

/* Endereço de vídeo sozinho na linha: na leitura vira player; no editor, um aviso discreto. */
.ed-area p > a:only-child:is([href*="youtube.com/"], [href*="youtu.be/"], [href*="vimeo.com/"])::before {
  content: "▶ Vídeo:";
  display: inline-block;
  margin-right: 6px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.85em;
  text-decoration: none;
}

/* Folga no fim do editor: clicar ali abre uma linha nova depois do último bloco. */
.ed-area .ProseMirror {
  padding-bottom: 3em;
  cursor: text;
}

/* Tabelas no editor, como na leitura. */
.ed-area table {
  border-collapse: collapse;
  margin: 0.8em 0;
  font-family: var(--sans);
  font-size: 0.9em;
}

.ed-area th,
.ed-area td {
  min-width: 3em;
  padding: 6px 10px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.ed-area th {
  background: var(--surface-2);
}

.ed-area td > p,
.ed-area th > p {
  margin: 0;
}

/* Idioma para quem ainda não entrou (ADR 022). */
.idioma-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px 32px;
  font-size: 14px;
  color: var(--muted);
}

/* Pré-requisitos do tópico (ADR 021) */
.prerequisitos {
  margin: 1.25rem 0;
  padding: .6rem .85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: .92rem;
}
.prereq-caixa > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; cursor: pointer; }
.prereq-caixa[open] > summary { margin-bottom: .75rem; }
.prereq-resumo { font-weight: 600; }
.prereq-medidas { display: flex; flex-wrap: wrap; gap: .4rem; }
.prereq-selo {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .6rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .82rem; font-weight: 600; color: var(--text);
}
.prereq-selo.prereq-falta { background: var(--study-bg); border-color: var(--study-bd); }
.prereq-selo.prereq-ok { background: var(--done-bg); border-color: var(--done-bd); color: var(--done-fg); }
.prereq-selo.prereq-critico { border-color: var(--acc2); color: var(--acc2-texto); }
.prereq-colunas { display: grid; grid-template-columns: 1fr; gap: .75rem 1.5rem; }
@media (min-width: 40rem) { .prereq-colunas { grid-template-columns: 1fr 1fr; } }
.prereq-titulo { margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.prereq-vazio { margin: 0; font-size: .88rem; }
.prereq-lista { list-style: none; margin: 0 0 .35rem; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.prereq-lista li { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.prereq-lista li::before { content: "○"; color: var(--muted); }
.prereq-lista li.s-concluido::before { content: "✓"; color: var(--done-fg); }
.prereq-lista li.s-estudando::before { content: "◐"; color: var(--study-fg); }
.prereq-lista form { display: inline; }
.prereq-entorno { margin-top: .6rem; }
.prereq-entorno summary { cursor: pointer; color: var(--accent); font-size: .88rem; }
.prereq-desenho { padding: .6rem 0 .2rem; overflow-x: auto; }
.prereq-desenho svg { display: block; width: 100%; min-width: 360px; max-width: 480px; height: auto; margin: 0 auto; font-size: 12.5px; }
.entorno-seta { fill: none; stroke: var(--acc2); stroke-width: 1.8; }
.entorno-seta.recomendada { stroke-dasharray: 6 4; }
#entorno-ponta path { fill: var(--acc2); }
.entorno-caixa.atual rect { stroke: var(--accent); stroke-width: 2.5; }
.entorno-caixa.atual text { font-weight: 700; }
.entorno-sobra { fill: var(--muted); font-size: 12px; text-anchor: middle; }
.prereq-adicionar summary { cursor: pointer; color: var(--accent); }
.prereq-adicionar form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.prereq-adicionar select { max-width: 100%; flex: 1 1 14rem; }
.prereq-adicionar .ajuda { flex-basis: 100%; margin: 0; }
.linha-prereq { color: var(--muted); font-size: .8rem; white-space: nowrap; }

/* Revisão espaçada (ADR 023) */
.revisao-pagina form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.revisao-quando {
  font-size: 14px;
  color: var(--accent);
}

.revisao-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.revisao-mudar {
  display: inline-block;
}

.revisao-mudar summary {
  list-style: none;
  cursor: pointer;
}

.revisao-mudar summary::-webkit-details-marker {
  display: none;
}

.revisao-mudar[open] {
  flex-basis: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.revisao-mudar[open] summary {
  margin-bottom: 8px;
  font-weight: 600;
}

.revisao-mudar input[type="date"],
.revisao-pausar input[type="date"] {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 4px 8px;
}

.revisao-outra-data {
  margin-top: 6px;
}

.revisao-pausa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 16px;
}

.revisao-pausar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.revisao-antes {
  font-size: 14px;
}

.contador-menu {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--acc2);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.revisao {
  max-width: 760px;
}

.revisao h2 {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 1.6rem;
}

.revisao details {
  margin: 12px 0;
}

.revisao summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

.revisao-notas {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.revisao-pergunta {
  font-weight: 700;
}

.revisao-botoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.revisao-botoes .botao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 56px;
}

.revisao-botoes .botao span {
  font-size: 13px;
}

.revisao-botoes .revisao-sugerida {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
}

.revisao-botoes .revisao-selo {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.revisao-questoes .questao,
.revisao .questao + .questao {
  margin-top: 16px;
}

.revisao-questoes > .botao-principal {
  margin-top: 16px;
}

.revisao-placar {
  font-weight: 700;
}

.revisao-esqueci strong {
  color: var(--danger);
}

.revisao-facil strong {
  color: var(--done-fg);
}

/* Sessão: lembrar, conferir, avaliar */
.sessao-topo {
  max-width: 760px;
  margin: 8px 0 16px;
}

.sessao-rotulo {
  display: flex;
  justify-content: space-between;
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted);
}

.sessao-rotulo a {
  color: var(--muted);
}

.sessao-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.sessao-barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.3s ease;
}

.revisao-passo {
  margin: 20px 0 8px;
  font-size: 1rem;
  font-weight: 400;
}

.revisao-lembranca-rotulo {
  display: block;
  margin-top: 16px;
  font-weight: 600;
}

.revisao-lembranca {
  width: 100%;
  font: inherit;
  margin-top: 6px;
  resize: vertical;
}

.revisao-conferir {
  width: 100%;
}

.revisao-escrito {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--border);
  background: var(--surface-2);
  white-space: normal;
}

.revisao-escrito p:last-child {
  margin: 0;
}

.revisao-nota-sugerida {
  margin-top: 8px;
  font-size: 13px;
}

.revisao-fim {
  max-width: 480px;
  text-align: center;
}

.revisao-fim-numero {
  margin: 4px 0;
  font-family: var(--serif);
  font-size: 3.5rem;
  line-height: 1;
}

.revisao-fim .botao-principal {
  display: block;
}

@media (max-width: 380px) {
  .revisao-botoes .botao {
    padding-inline: 6px;
  }
}

.revisao-preferencia {
  margin-top: 24px;
}

.aviso-revisao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--accent-soft);
  font-weight: 600;
}

.aviso-revisao .botao {
  margin-left: auto;
}

.aviso-revisao p {
  margin: 0;
}

.aviso-revisao-icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 20px;
}

.aviso-revisao-rotulo {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.aviso-revisao-meta {
  font-family: var(--serif);
  font-size: 1.25rem;
}

/* Seção Revisar (ADR 023) */
.revisar-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

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

.revisar-sessao {
  align-self: start;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--accent);
  color: var(--on-accent);
}

.revisar-sessao p {
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--on-accent) 88%, transparent);
}

.revisar-sessao .revisar-sessao-rotulo {
  margin-bottom: 4px;
  font-size: 14px;
}

.revisar-sessao .revisar-sessao-meta {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  line-height: 1.15;
  color: var(--on-accent);
}

.revisar-comecar {
  min-width: 140px;
  justify-content: center;
  background: var(--surface);
  color: var(--accent);
  border-color: transparent;
  font-weight: 700;
}

.revisar-comecar:hover {
  background: var(--surface-2);
  color: var(--accent);
}

.revisar-comecar:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: 2px;
}

.revisar-previsao h2,
.revisar-cadernos h2,
.revisar-ritmo h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 1.3rem;
}

.previsao-dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.previsao-dia {
  display: grid;
  grid-template-rows: auto auto;
  min-height: 46px;
  padding: 4px 5px;
  border-radius: 7px;
  background: var(--surface-2);
  font-size: 11px;
  color: var(--muted);
}

.previsao-semana {
  text-transform: lowercase;
}

.previsao-data {
  justify-self: end;
  grid-row: 1;
  grid-column: 2;
}

.previsao-qtd {
  grid-column: 1 / 3;
  align-self: end;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.previsao-n1 { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.previsao-n2 { background: color-mix(in srgb, var(--accent) 42%, var(--surface)); }
.previsao-n3 { background: color-mix(in srgb, var(--accent) 66%, var(--surface)); }
.previsao-n4 { background: var(--accent); }

.previsao-n3,
.previsao-n4,
.previsao-n3 .previsao-qtd,
.previsao-n4 .previsao-qtd {
  color: var(--on-accent);
}

.previsao-hoje {
  outline: 2px solid var(--acc2);
  outline-offset: -2px;
}

.revisar-legenda {
  margin: 10px 0 0;
  font-size: 13px;
}

.revisar-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.revisar-lista li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 7.5em;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.revisar-lista-titulo {
  font-weight: 700;
  color: var(--text);
}

.revisar-consolidadas {
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.revisar-barra {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.revisar-barra span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.revisar-proxima {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 520px) {
  .revisar-lista li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .revisar-lista .revisar-consolidadas {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.revisar-filtros label {
  display: flex;
  flex: 1 1 10rem;
}

.revisar-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.revisar-paginas {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.revisar-pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 16px;
}

.revisar-pagina-info {
  display: grid;
}

.revisar-pagina-info .muted {
  font-size: 13px;
}

.revisar-pagina-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 14px;
  grid-column: 1 / -1;
}

.revisar-pagina-acoes .revisao-mudar form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.etapa-aprendendo { background: var(--surface-2); }
.etapa-firme { background: color-mix(in srgb, var(--accent) 25%, var(--surface)); }
.etapa-consolidada { background: var(--accent); color: var(--on-accent); }

.revisar-ritmo {
  max-width: 640px;
  margin-bottom: 16px;
}

.revisar-ritmo-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0;
}

.revisar-ritmo input[type="number"] {
  width: 6em;
}

.revisao-convite {
  flex-basis: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--accent-soft);
}

.revisao-convite form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.revisar-retencoes fieldset {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.revisar-retencao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}

.revisar-retencao:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.revisar-retencao input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.revisar-provas {
  margin-bottom: 16px;
}

.revisar-prova-cancelar {
  display: inline;
  margin-left: 8px;
}

.revisar-prova-nova {
  margin-top: 12px;
}

.revisar-prova-nova summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

.revisar-prova-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: end;
  gap: 10px;
}

.revisar-prova-form label {
  display: grid;
  gap: 4px;
  font-size: 14px;
}

.revisar-prova-form select,
.revisar-prova-form input {
  font: inherit;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.revisar-prova-curta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.revisao-pergunta-aberta .questao-enunciado {
  font-weight: 600;
}

.revisao-resposta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-strong);
}

/* Perguntas sugeridas pela IA, esperando aprovação (ADR 023) */
.sugeridas {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px dashed var(--acc2);
  border-radius: 14px;
  background: color-mix(in srgb, var(--acc2) 6%, var(--surface));
}

.sugeridas-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sugeridas h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--acc2-texto);
}

.sugeridas > .muted {
  margin: 6px 0 4px;
  font-size: 13px;
}

.sugeridas-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sugerida {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.sugerida p {
  margin: 0 0 6px;
}

.sugerida-pergunta {
  font-weight: 700;
}

.sugerida-resposta {
  color: var(--muted);
}

.sugerida-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.sugerida-editar {
  margin-top: 6px;
}

.sugerida-editar form {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.sugerida-editar label {
  display: grid;
  gap: 4px;
  font-size: 14px;
}

.sugerida-editar input,
.sugerida-editar textarea {
  font: inherit;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

/* Semanas ativas: constância sem cobrar todo dia (ADR 023) */
.semanas-quadro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.semanas-quadro li {
  height: 22px;
  border-radius: 6px;
  background: var(--surface-2);
}

.semanas-quadro .semana-ativa {
  background: var(--accent);
}

.semanas-quadro .semana-pausa {
  background: repeating-linear-gradient(45deg, var(--surface-2) 0 4px, var(--border) 4px 8px);
}

.semanas-quadro .semana-atual {
  outline: 2px solid var(--acc2);
  outline-offset: -2px;
}

.semanas-numero {
  font-family: var(--serif);
  font-size: 1.8rem;
  line-height: 1.1;
}

.revisar-sugeridas-lista {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.revisar-sugeridas-lista li {
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.revisar-sugeridas-lista a {
  font-weight: 700;
}

/* Busca de páginas avulsas na seção Revisar */
.busca-form {
  display: flex;
  gap: 8px;
}

.busca-form input,
.revisar-filtros input[type="search"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.busca-lista {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.busca-lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.busca-marcar input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.busca-pagina {
  display: grid;
  gap: 2px;
}

.busca-pagina a {
  font-weight: 700;
  color: var(--text);
}

.busca-pagina .muted {
  font-size: 13px;
}

.busca-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 12px;
}

.busca-prova {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.busca-prova > p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
}

@media (max-width: 560px) {
  .busca-lista li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .busca-acoes {
    grid-column: 2;
    justify-content: flex-start;
  }
}

.busca-dica {
  margin: 10px 0 0;
  font-size: 13px;
}

.revisar-busca {
  margin-bottom: 16px;
}

/* Aviso de link já guardado (M3) */
.aviso-link {
  margin: -4px 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--study-bg);
  border: 1px solid var(--study-bd);
  color: var(--study-fg);
  font-size: 0.92rem;
}

.aviso-link[hidden] {
  display: none;
}

.aviso-link p {
  margin: 0 0 4px;
}

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

/* Anexos da página (M10) */
.anexos .anexo {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.anexo-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.anexo-cabecalho > a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.anexo-acoes {
  display: inline-flex;
  gap: 12px;
  margin-left: auto;
}

.anexo-acoes form {
  display: inline;
}

.anexo-visor iframe {
  width: 100%;
  height: 70vh;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.anexos audio,
.anexos video {
  display: block;
  width: 100%;
  margin-top: 8px;
}

.anexo-enviar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.anexo-enviar label {
  width: 100%;
  font-weight: 600;
}

.anexo-enviar .ajuda {
  width: 100%;
  margin: 0;
}

/* Coleções (ADR 033): lista de registros, campos do registro e formulário */
.col-lista-rolagem {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.col-lista {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.col-lista th,
.col-lista td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.col-lista tbody tr:last-child > * {
  border-bottom: 0;
}

.col-lista thead th {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
}

.col-lista thead a {
  color: inherit;
  text-decoration: none;
}

.col-lista thead a:hover,
.col-lista thead a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

.col-lista tbody th {
  font-weight: 500;
  white-space: normal;
  min-width: 10em;
}

.col-lista .n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.col-lista-total {
  font-size: 13px;
  margin: 8px 0 0;
}

.col-vazia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
}

.col-vazia p {
  margin: 0;
}

.reg-campos {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.reg-campos-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.reg-campos-titulo {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
}

.reg-valores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px 18px;
  margin: 0;
}

.reg-valor dt {
  font-size: 12px;
  color: var(--muted);
}

.reg-valor dd {
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}

.reg-valor-tabela {
  grid-column: 1 / -1;
}

.reg-valor-tabela .col-lista-rolagem {
  margin-top: 4px;
}

.reg-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  min-width: 0;
}

.reg-form legend {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 6px;
  padding: 0;
}

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

.reg-opcao {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

/* O checkbox fica invisível sobre a pílula; senão herda o estilo de campo de texto. */
.reg-form .reg-opcao input {
  position: absolute;
  inset: 0;
  width: auto;
  min-height: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.reg-opcao:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.reg-opcao:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.reg-sim-nao label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 15px;
  min-height: 44px;
}

.reg-sim-nao input,
.reg-tabela input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  accent-color: var(--accent);
}

.reg-numero {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reg-form .campo select {
  width: 100%;
  min-height: 44px;
}

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

.reg-tabela th {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  padding: 6px 6px 4px;
  white-space: nowrap;
}

.reg-tabela td {
  padding: 3px;
  min-width: 90px;
}

.reg-tabela td:first-child {
  min-width: 180px;
}

.reg-tabela-rolagem {
  overflow-x: auto;
}

.reg-tabela input,
.reg-tabela select {
  width: 100%;
  min-height: 40px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 8px;
}

.reg-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.col-abas {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.col-abas a {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.col-abas a:hover,
.col-abas a:focus-visible {
  color: var(--text);
}

.col-abas a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.col-andamento {
  margin: 0 0 14px;
}

.col-andamento-rotulo {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 6px;
}

.col-andamento-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.col-andamento-barra i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.col-colunas {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}

.col-coluna {
  flex: 1 0 min(78vw, 220px);
  max-width: 320px;
  scroll-snap-align: start;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px;
}

.col-coluna.col-alvo {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.col-coluna-titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
}

.col-conta {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.col-coluna-cancelada .col-cartao a {
  text-decoration: line-through;
  color: var(--muted);
}

.col-cartoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  min-height: 40px;
}

.col-cartao {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 14px;
  cursor: grab;
}

.col-cartao.col-arrastando {
  opacity: 0.5;
}

.col-cartao > a {
  display: block;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  padding-right: 52px;
}

.col-cartao > a:hover,
.col-cartao > a:focus-visible {
  text-decoration: underline;
}

.col-cartao small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.col-mover {
  position: absolute;
  top: 6px;
  right: 6px;
}

.col-mover summary {
  list-style: none;
  font-size: 12px;
  color: var(--muted);
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.col-mover summary::-webkit-details-marker {
  display: none;
}

.col-mover[open] summary {
  background: var(--surface-2);
}

.col-mover-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  display: grid;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
}

.col-mover-lista button {
  border: 0;
  text-align: left;
  border-radius: 6px;
  padding: 9px 10px;
  background: transparent;
}

.col-mover-lista button:hover,
.col-mover-lista button:focus-visible {
  background: var(--surface-2);
}

.col-editar-colunas {
  margin-top: 12px;
}

.col-colunas-form {
  margin-top: 10px;
  max-width: 640px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.col-colunas-lista {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.col-coluna-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.col-coluna-linha input[name="nome"] {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 40px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 10px;
}

.col-coluna-linha select,
.col-colunas-form .campo select {
  min-height: 40px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 8px;
}

.col-linha-conta {
  font-size: 12px;
}

.col-linha-acoes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.col-linha-acoes button {
  padding: 4px 10px;
  min-height: 36px;
}

.col-tirar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  margin-left: 6px;
}

.col-cal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.col-cal-mes {
  font-size: 18px;
  margin: 0;
}

.col-cal-resumo {
  font-size: 13px;
  margin: 4px 0 10px;
  text-align: center;
}

.col-cal {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 3px;
}

.col-cal th {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 2px 0 4px;
}

.col-cal abbr {
  text-decoration: none;
}

.col-cal td {
  vertical-align: top;
  height: 78px;
  padding: 4px 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.col-cal td.fora {
  background: transparent;
  border-color: transparent;
}

.col-cal td.fora .col-cal-dia {
  color: var(--muted);
  opacity: 0.6;
}

.col-cal td.hoje {
  border-color: var(--accent);
}

.col-cal-dia {
  display: block;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.col-cal td.hoje .col-cal-dia {
  color: var(--accent);
  font-weight: 700;
}

.col-cal ul {
  list-style: none;
  margin: 3px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.col-cal li {
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-cal li a {
  display: block;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-cal li a:hover,
.col-cal li a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .col-cal td {
    height: 52px;
    padding: 3px;
  }

  .col-cal li a {
    font-size: 0;
    height: 6px;
    padding: 0;
    background: var(--accent);
  }

  .col-cal li a:focus-visible {
    outline-offset: 1px;
  }

  .col-cal li.muted {
    font-size: 10px;
  }
}

.col-cal-lista {
  margin-top: 12px;
  font-size: 14px;
}

.col-cal-lista summary {
  cursor: pointer;
  color: var(--muted);
}

.col-cal-lista ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.col-cal-lista .muted {
  display: inline-block;
  min-width: 7.5em;
  font-variant-numeric: tabular-nums;
}

.col-evo-grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--muted);
}

.col-evo-grupo select {
  min-height: 40px;
  min-width: 0;
  flex: 0 1 280px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 8px;
}

.col-evo {
  margin: 0;
  padding: 12px 14px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.col-evo-legenda {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.col-evo-numeros strong {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.col-evo-var {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.col-evo-var.sobe {
  color: var(--done-fg);
}

.col-evo-var.desce {
  color: var(--acc2-texto);
}

.col-evo-grafico {
  display: block;
  width: 100%;
  height: auto;
}

.col-evo-grafico .grade {
  stroke: var(--border);
  stroke-width: 1;
}

.col-evo-grafico .eixo {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.col-evo-grafico .area {
  fill: var(--accent-soft);
}

.col-evo-grafico .linha {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.col-evo-grafico .ponto {
  fill: var(--accent);
}

.col-evo-grafico .fim {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2.5;
}

.col-evo-tabela {
  margin-top: 10px;
  font-size: 14px;
}

.col-evo-tabela summary {
  cursor: pointer;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Modo treino (biblioteca/treino.html): séries grandes para o toque, barra de descanso fixa. */
.treino {
  display: grid;
  gap: 16px;
  padding-bottom: 96px;
}
.treino-topo h1 {
  margin-bottom: 4px;
}
.treino-estado {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.treino-ex {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 14px 8px;
}
.treino-ex-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.treino-ex h2 {
  font-size: 1.15rem;
  margin: 0;
}
.treino-ex-check {
  color: var(--done-fg);
  background: var(--done-bg);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.85rem;
}
.treino-ex-plano {
  color: var(--muted);
  margin: 4px 0 8px;
}
.treino-sobe {
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 8px;
}
.treino-series {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.treino-series th {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  padding: 4px;
}
.treino-series td {
  padding: 4px;
  border-top: 1px solid var(--border);
}
.treino-series input {
  width: 4.5em;
  min-height: 40px;
  font: inherit;
  text-align: center;
}
.treino-anterior {
  color: var(--muted);
  white-space: nowrap;
}
.treino-ok {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
}
.treino-ok:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
tr.feita td {
  background: var(--done-bg);
}
tr.feita .treino-ok {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.treino-fim {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.treino-fim .campo,
.treino-fim textarea {
  width: 100%;
}
.treino-descanso {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  font-variant-numeric: tabular-nums;
}
.treino-descanso p {
  margin: 0 auto 0 0;
}
.treino-descanso strong {
  font-size: 1.6rem;
}
.treino-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 12px 0 20px;
}
.treino-numeros dt {
  color: var(--muted);
  font-size: 0.85rem;
}
.treino-numeros dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
.treino-lista {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}
.treino-lista li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.treino-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Treino da vez no Hoje (reaproveita o aviso da revisão) e o modo na ficha. */
.aviso-treino-meta {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
}
.aviso-treino-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
@media (min-width: 640px) {
  .aviso-treino-acoes {
    margin-left: auto;
  }
}
.aviso-treino .aviso-treino-acoes .botao {
  margin-left: 0;
}
.treino-modo {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin-bottom: 16px;
}
.treino-modo fieldset {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
}
.treino-modo legend {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0 4px;
}

/* Finanças (biblioteca/_financas_colecao.html): saldo, categorias e os meses lado a lado. */
.fin {
  display: grid;
  gap: 14px;
}
.fin-periodo {
  display: inline-flex;
  gap: 4px;
  justify-self: start;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-2, var(--topo));
}
.fin-periodo a {
  padding: 6px 16px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.fin-periodo a[aria-current] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
.fin-periodo a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.fin-saldo,
.fin-bloco {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
.fin-saldo p {
  margin: 0;
}
.fin-rotulo {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.fin-grande {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.fin-grande.negativo {
  color: var(--acc2-texto);
}
.fin-pares {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}
.fin-pares dt {
  color: var(--muted);
  font-size: 0.85rem;
}
.fin-pares dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fin-meta {
  color: var(--muted);
  font-size: 0.88rem;
}
.fin-pt {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
}
.fin-pt.rec {
  background: var(--accent);
}
.fin-pt.desp {
  background: var(--acc2);
}
.fin-pendente {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--study-bg);
  color: var(--study-fg);
}
.fin-bloco-topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 0.85rem;
}
.fin-bloco-topo h3 {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--sans);
}
.fin-traco {
  display: inline-block;
  width: 2px;
  height: 12px;
  background: var(--text);
  opacity: 0.55;
  vertical-align: middle;
}
.fin-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.fin-cats li {
  display: grid;
  gap: 4px;
}
.fin-cat-topo {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.fin-cat-topo strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fin-cat-barra {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2, var(--topo));
}
.fin-cat-barra i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--acc2);
}
.fin-cat-barra em {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text);
  opacity: 0.55;
}
.fin-cats small {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.fin-cats .sobe {
  color: var(--acc2-texto);
}
.fin-cats .desce {
  color: var(--accent);
}
.fin-legenda {
  display: flex;
  gap: 12px;
  color: var(--muted);
}
.fin-grafico {
  display: block;
  width: 100%;
  height: auto;
}
.fin-grafico .grade {
  stroke: var(--border);
}
.fin-grafico .zero {
  stroke: var(--border-strong);
}
.fin-grafico .eixo {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.fin-grafico .eixo.atual {
  fill: var(--text);
  font-weight: 700;
}
.fin-grafico .b-rec {
  fill: var(--accent);
}
.fin-grafico .b-desp {
  fill: var(--acc2);
}
.fin-grafico .linha {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.fin-grafico .ponto {
  fill: var(--accent);
}
.fin-grafico .fim {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2.5;
}
.fin-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 0;
}
.fin-numeros div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column-reverse;
}
.fin-numeros dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}
.fin-numeros dt {
  color: var(--muted);
  font-size: 0.82rem;
}
.fin-ativar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 0;
}
.fin-cartao {
  margin-block: 12px 20px;
}
.fin-fatura-fechada {
  align-items: center;
  flex-wrap: wrap;
}
.fin-lancs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.fin-lancs li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.fin-lancs li > span {
  display: grid;
  min-width: 0;
}
.fin-renomear summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85em;
  width: fit-content;
}
.fin-renomear form {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.fin-renomear input {
  flex: 1;
  min-width: 0;
}
.fin-grafico .b-desp.apagada {
  opacity: 0.55;
}
.fin-grafico .media {
  stroke: var(--text);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  opacity: 0.7;
}
.fin-media {
  display: inline-block;
  width: 18px;
  border-top: 2px dashed var(--text);
  opacity: 0.7;
  vertical-align: middle;
}
.fin-cat-topo a {
  color: inherit;
}
.lanc {
  display: grid;
  gap: 16px;
  max-width: 34rem;
}
.lanc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 0;
}
.lanc-chips legend {
  font-weight: 600;
  margin-bottom: 6px;
  padding: 0;
}
.lanc-chips label {
  position: relative;
}
.lanc-chips input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
}
.lanc-chips label > span {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}
.lanc-chips input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
  font-weight: 600;
}
.lanc-chips input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lanc-tipo span {
  padding: 10px 20px;
}
.lanc-valor input {
  font-family: var(--serif);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}
/* O lançamento rápido mostra só o que vale para o tipo escolhido (despesa, receita ou
   transferência) e as parcelas só no cartão. Sem :has(), aparece tudo e o servidor ignora o resto. */
.lanc:has([data-papel="transferencia"]:checked) .lanc-so-gasto,
.lanc:has([data-papel="receita"]:checked) .lanc-so-despesa,
.lanc:has([data-papel="receita"]:checked) .lanc-rotulo-despesa,
.lanc:not(:has([data-papel="receita"]:checked)) .lanc-rotulo-receita,
.lanc:not(:has([data-papel="transferencia"]:checked)) .lanc-so-transferencia,
.lanc:not(:has([data-papel="cartao"]:checked)) .lanc-parcelas,
.lanc:has([data-papel="receita"]:checked) .lanc-parcelas,
.lanc:has([data-papel="receita"]:checked) .lanc-pessoa,
.lanc:has([data-papel="transferencia"]:checked):not(:has([data-papel="pessoa"]:checked)) .lanc-pessoa,
.lanc:not(:has([data-papel="transferencia"]:checked)) .lanc-so-pessoa,
.lanc:not(:has([data-papel="pessoa"]:checked)) .lanc-so-pessoa,
.lanc:has([data-papel="pessoa"]:checked) .lanc-so-conta,
.lanc:has([data-papel="pessoa"]:checked) .lanc-rotulo-conta,
.lanc:not(:has([data-papel="pessoa"]:checked)) .lanc-rotulo-pessoa,
.cartao-form:not(:has(input[name="antes"][value="0"]:checked)) .cartao-dia-fechamento {
  display: none;
}
.lanc-categoria {
  display: grid;
  gap: 8px;
}
.lanc-nova summary,
.fin-andamento summary {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
}
.lanc-nova input {
  margin-top: 8px;
  width: 100%;
  max-width: 20rem;
}
.fin-andamento {
  margin-top: 8px;
}
.fin-andamento .linha-2 {
  margin-top: 8px;
}
.ext-resumo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  list-style: none;
}
.ext-resumo li {
  text-align: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.ext-resumo strong {
  display: block;
  font-size: 1.3rem;
}
.ext-item {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.ext-topo {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ext-topo .ext-original {
  flex: 1;
}
.ext-original {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.ext-campos {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 8px;
}
.ext-liga {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.fin-orc {
  display: grid;
  gap: 2px;
  margin-top: 4px;
}
.fin-orc progress {
  width: 100%;
  height: 6px;
  accent-color: var(--accent);
}
.fin-orc.estourou progress {
  accent-color: var(--acc2);
}
.fin-orc.estourou small {
  color: var(--acc2-texto);
}
.fin-previsao summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  padding: 8px 0;
}
.fin-progresso {
  width: 100%;
  height: 10px;
  accent-color: var(--accent);
}
.fin-compra li[aria-current] {
  background: var(--accent-soft);
}
.lanc-quando {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.linha-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 12px;
}
.dias-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  border: 0;
  margin: 0;
  padding: 0;
  max-width: 24rem;
}
.dias-grade legend {
  font-weight: 600;
  margin-bottom: 6px;
  padding: 0;
}
.dias-grade label {
  position: relative;
}
.dias-grade input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
}
.dias-grade span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.dias-grade input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.dias-grade input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cartao-previa {
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0;
}
.cartao-previa:empty {
  display: none;
}
.fin-contas {
  display: grid;
  gap: 8px;
  margin-block: 4px 20px;
}
.fin-contas-topo p {
  margin: 0;
}
.fin-lancs strong.negativo {
  color: var(--acc2-texto);
}
.fin-lancs strong.positivo {
  color: var(--accent);
}
.fin-corrigir {
  display: grid;
  gap: 6px;
  margin-block: 12px;
}
.fin-corrigir-linha {
  display: flex;
  gap: 8px;
}
.fin-corrigir-linha input {
  flex: 1;
  min-width: 0;
  max-width: 14rem;
}
.comecar {
  display: grid;
  gap: 16px;
  max-width: 36rem;
}
.comecar-topo {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.comecar-passos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.comecar-passos li {
  border-top: 4px solid var(--border);
  padding-top: 6px;
  font-size: 0.9rem;
}
.comecar-passos li.feito {
  border-top-color: var(--accent);
}
.comecar-passos a {
  color: var(--muted);
  text-decoration: none;
}
.comecar-passos a[aria-current="step"] {
  color: var(--text);
  font-weight: 600;
}
.comecar h1 {
  margin: 0;
}
.comecar-intro {
  color: var(--muted);
  margin: 0;
}
.comecar-sub {
  font-size: 1.1rem;
  margin: 0;
}
.comecar-form {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.lanc-liga {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.lanc-liga small {
  display: block;
}

/* Página e tópico (navegação, etapa 3): um só controle de estado, revisão como selo,
   "Comentar" discreto e anexos recolhidos. */
.menu-status,
.revisao-selo {
  position: relative;
}

.menu-status > summary,
.revisao-selo > summary,
.anexo-novo > summary {
  list-style: none;
  cursor: pointer;
}

.menu-status > summary::-webkit-details-marker,
.revisao-selo > summary::-webkit-details-marker,
.anexo-novo > summary::-webkit-details-marker {
  display: none;
}

.chip-status .seta {
  font-size: 10px;
  opacity: 0.7;
}

.chip-status.s-pulado {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  color: var(--muted);
}

.menu-status-lista,
.revisao-selo-lista {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 6;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.35);
}

.menu-status-lista {
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px;
}

.menu-status-lista button[class] {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 6px;
  padding: 9px 10px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  text-align: left;
}

.menu-status-lista button[class]:hover,
.menu-status-lista button[aria-current] {
  background: var(--surface-2);
}

.menu-status-lista button[aria-current] {
  font-weight: 600;
}

.revisao-selo > summary {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
}

.revisao-selo > summary:hover,
.revisao-selo[open] > summary {
  background: var(--surface-2);
}

.revisao-selo-lista {
  display: grid;
  gap: 8px;
  width: min(300px, calc(100vw - 32px));
  padding: 12px;
}

.revisao-selo-lista p {
  margin: 4px 0 0;
  font-size: 13px;
}

.revisao-selo-lista form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.revisao-selo-lista input[type="date"] {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 4px 8px;
}

.leitura-meta .ed-menu-lista form {
  display: contents;
}

/* "Comentar" só aparece ao passar o mouse no bloco (ou com o foco); o contador fica sempre. */
@media (hover: hover) {
  .comentarios:not([open]) > summary.sem-comentarios {
    opacity: 0;
    transition: opacity 0.15s;
  }

  .bloco:hover .comentarios > summary,
  .comentarios > summary:focus-visible {
    opacity: 1;
  }
}

/* No toque, fica só o ícone, pequeno e apagado. */
@media (hover: none) {
  .comentarios > summary.sem-comentarios {
    opacity: 0.55;
  }

  .comentarios > summary.sem-comentarios .comentar-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.anexos-vazio {
  margin-top: 8px;
}

.anexo-novo > p,
.anexo-novo > form {
  margin-top: 10px;
}

/* Módulo Treinos (ADR 034) */
.trn {
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin-inline: auto;
}
.trn-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.trn-topo h1 {
  margin: 0;
}
.trn-topo p {
  margin: 2px 0 0;
}
.trn-abas {
  margin: 0;
  overflow-x: auto;
}
.trn-abas a {
  white-space: nowrap;
}
.trn-cartao {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
.trn-cartao p {
  margin: 0;
}
.trn-rotulo {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.trn-grande {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.trn-forte {
  font-weight: 600;
}
.trn-meta {
  font-size: 0.85rem;
  color: var(--muted);
}
.trn-dias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}
.trn-dias li {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.trn-dia {
  font-size: 0.72rem;
  color: var(--muted);
}
.trn-dias li[aria-current="date"] .trn-dia {
  color: var(--text);
  font-weight: 600;
}
.trn-q,
.trn-letra {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--surface-2);
  flex: none;
}
.trn-sugerida {
  background: transparent;
  border: 2px dashed var(--accent);
  color: var(--accent);
}
.trn-cor-0 { background: var(--accent); color: var(--on-accent); }
.trn-cor-1 { background: var(--acc2); color: var(--on-accent); }
.trn-cor-2 { background: var(--acc3); color: var(--text); }
.trn-cor-3 { background: var(--mar); color: var(--text); }
.trn-cor-4 { background: var(--terra); color: var(--text); }
.trn-cor-5 { background: var(--ramo); color: var(--text); }
.trn-proximo {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.trn-proximo > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.trn-recorde {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--study-bg);
  color: var(--study-fg);
  font-size: 0.9rem;
}
.trn-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.trn-lista li {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.trn-lista li:last-child {
  border-bottom: 0;
}
.trn-lista li > a:first-child {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  color: inherit;
  text-decoration: none;
}
.trn-lista li > a:first-child:hover .trn-item > span {
  text-decoration: underline;
}
.trn-item {
  flex: 1;
  min-width: 0;
  display: grid;
}
.trn-item small {
  color: var(--muted);
  font-size: 0.78rem;
}
.trn-lista b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.trn-inativa {
  opacity: 0.65;
}
.trn-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--done-bg);
  color: var(--done-fg);
}
.trn-ha {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}
.trn-nova {
  justify-self: start;
}
.trn-ajustes fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.trn-ajustes legend {
  font-weight: 600;
  margin-bottom: 4px;
}
.trn-meta-campo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trn-ajustes .botao {
  justify-self: start;
}
.trn-dados {
  font-size: 0.85rem;
  margin: 4px 0 0;
}
.trn-comeco {
  max-width: 560px;
  margin-inline: auto;
}
.trn-comeco h1 {
  margin: 0;
}
.trn-lead {
  font-size: 1.1rem;
  margin: 0;
}
.trn-vantagens {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.trn-vantagens li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.trn-vantagens b {
  display: block;
}
.modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.modulo-atalho {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}
.modulo-atalho:hover {
  border-color: var(--border-strong);
}
.modulo-atalho .trn-letra {
  grid-row: 1 / span 2;
}
.modulo-atalho small {
  color: var(--muted);
  font-size: 0.78rem;
}
.aviso-modulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--accent-soft);
  margin: 0 0 14px;
}
.aviso-modulo p {
  margin: 0;
}
.inicio-modulos {
  margin: 0 0 24px;
}

/* Vídeo do exercício no modo treino: o botão abre o "Como fazer", onde o vídeo toca. */
.treino-video-botao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.treino-video-botao:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.treino-video-add {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
}
.treino-descanso[hidden] {
  display: none;
}
.trn-comeco-form {
  display: grid;
  gap: 14px;
}
.trn-comeco-form fieldset {
  min-width: 0;
}
.trn-comeco-form legend {
  padding: 0;
  margin-bottom: 4px;
  float: left;
  width: 100%;
}
.trn-comeco-form .botao-grande {
  justify-self: start;
}
.trn-escolha-dias {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.trn-escolha-dias label,
.trn-plano {
  position: relative;
  cursor: pointer;
}
.trn-escolha-dias input,
.trn-plano input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.trn-escolha-dias span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--surface-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.trn-escolha-dias input:checked + span {
  background: var(--accent);
  color: var(--on-accent);
}
.trn-escolha-dias input:focus-visible + span,
.trn-plano input:focus-visible + .trn-plano-corpo {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.trn-planos {
  display: grid;
  gap: 8px;
}
.trn-plano-corpo {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.trn-plano-corpo small {
  color: var(--muted);
}
.trn-plano input:checked + .trn-plano-corpo {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-soft);
}
.trn-plano-fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.trn-plano-fichas span {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
}

/* Editor da ficha (módulo Treinos) */
.fx h1 {
  margin: 0;
}
.fx-titulo {
  display: grid;
  gap: 6px;
}
.fx-titulo input {
  font-size: 1.15rem;
  padding: 10px 12px;
}
.fx-secao {
  display: grid;
  gap: 10px;
}
.fx-secao-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.fx-secao-topo h2 {
  margin: 0;
}
.fx-cartoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.fx-cartao {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px 12px;
  display: grid;
  gap: 8px;
}
.fx-cartao-topo {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fx-num {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  flex: none;
  margin-right: 6px;
}
.fx-nome {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.fx-trocar {
  flex: none;
  padding: 4px 10px;
  font-size: 0.82rem;
}
.fx-icone {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex: none;
}
.fx-icone:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}
.fx-icone:disabled {
  opacity: 0.3;
  cursor: default;
}
.fx-tirar:hover:not(:disabled) {
  color: var(--danger);
}
.fx-campos {
  display: grid;
  grid-template-columns: 0.8fr 1.6fr 1fr 1.2fr;
  gap: 6px;
}
.fx-campos label {
  display: grid;
  gap: 2px;
  min-width: 0;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 5px 8px 6px;
}
.fx-campos small {
  font-size: 0.68rem;
  color: var(--muted);
}
.fx-campos input,
.fx-campos select {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.fx-campos input:focus-visible,
.fx-campos select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.fx-faixa span {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}
.fx-faixa i {
  font-style: normal;
  color: var(--muted);
}
@media (max-width: 420px) {
  .fx-campos {
    grid-template-columns: 1fr 1.5fr;
  }
}
.fx-adicionar {
  justify-self: stretch;
  border-style: dashed;
  color: var(--accent);
}
.fx-ajustes legend {
  font-weight: 600;
  margin-bottom: 6px;
}
.fx-liga {
  display: flex;
  gap: 8px;
  align-items: center;
}
.fx-dias {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fx-dias legend {
  width: 100%;
}
.fx-dias label {
  position: relative;
}
.fx-dias input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.fx-dias span {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.85rem;
}
.fx-dias input:checked + span {
  background: var(--accent);
  color: var(--on-accent);
}
.fx-dias input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fx-salvar {
  position: sticky;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 0;
  background: linear-gradient(transparent, var(--bg) 35%);
}
@media (min-width: 900px) {
  .fx-salvar {
    bottom: 0;
  }
}
.fx-folha {
  width: min(560px, calc(100vw - 16px));
  max-height: min(80vh, 720px);
  margin: auto auto 0;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 18px 18px 0 0;
  background: var(--surface);
  color: var(--text);
  display: none;
  flex-direction: column;
  gap: 10px;
}
.fx-folha[open] {
  display: flex;
  animation: fx-sobe 0.2s ease-out;
}
@media (min-width: 700px) {
  .fx-folha {
    margin: auto;
    border-radius: 18px;
  }
}
@keyframes fx-sobe {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx-folha[open] {
    animation: none;
  }
}
.fx-folha::backdrop {
  background: rgb(0 0 0 / 0.35);
}
.fx-folha-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.fx-folha-topo h2 {
  margin: 0;
  font-size: 1.15rem;
}
.fx-busca input {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
}
.fx-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  flex: none;
}
.fx-chips button {
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  border: 0;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.fx-chips button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.fx-aviso {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.82rem;
  color: var(--accent);
}
.fx-resultados {
  overflow-y: auto;
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 0;
}
.fx-resultados section {
  display: grid;
  gap: 4px;
}
.fx-resultados h3 {
  margin: 0;
}
.fx-resultados ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fx-opcao {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fx-opcao:hover {
  background: var(--surface-2);
}
.fx-opcao > span:first-child {
  display: grid;
  min-width: 0;
}
.fx-opcao small {
  color: var(--muted);
  font-size: 0.75rem;
}
.fx-opcao-marca {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  flex: none;
}
.fx-opcao.na-ficha .fx-opcao-marca {
  background: var(--accent);
  color: var(--on-accent);
}
.fx-criar {
  justify-self: start;
}

/* Treinos: Evolução, Calendário e a tela de um exercício (ADR 034) */
.trn-cartao-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.trn-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.trn-chips a {
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
}
.trn-chips a[aria-current] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.trn-ganho {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.trn-grafico {
  width: 100%;
  height: auto;
}
.trn-grafico .trn-apagada {
  opacity: 0.45;
}
.trn-mais {
  font-size: 0.85rem;
  justify-self: start;
}
.trn-freq {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.trn-freq li {
  display: grid;
  gap: 4px;
}
.trn-freq-col {
  height: 56px;
  border-radius: 6px;
  background: var(--surface-2);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.trn-freq-col span {
  width: 100%;
  height: calc(min(var(--n) / var(--meta), 1) * 100%);
  background: var(--muted);
  opacity: 0.55;
}
.trn-freq-col span.bateu {
  background: var(--accent);
  opacity: 1;
}
.trn-freq li[aria-current] b {
  color: var(--accent);
}
.trn-freq b {
  font-weight: 600;
}
.trn-numeros {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}
.trn-numeros > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.trn-numeros dt {
  font-size: 0.72rem;
  color: var(--muted);
}
.trn-numeros dd {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.trn-numeros dd.trn-meta {
  font-family: inherit;
  font-size: 0.75rem;
}
.trn-mes-topo {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  text-align: center;
}
.trn-mes-topo h2 {
  margin: 0;
  font-size: 1.05rem;
}
.trn-cal {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.trn-cal th {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: lowercase;
}
.trn-cal td > * {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 44px;
  margin: 0 auto;
  border-radius: 10px;
  font-size: 0.85rem;
}
.trn-cal td.fora {
  opacity: 0.35;
}
.trn-cal td[aria-current] > * {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.trn-dia-feito {
  font-weight: 700;
  text-decoration: none;
}
.trn-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.85rem;
}
.trn-legenda a {
  color: inherit;
  text-decoration: none;
}
.trn-pt {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: baseline;
}
.trn-voltar {
  font-size: 0.85rem;
  text-decoration: none;
}
.trn-sessoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.trn-sessoes a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.trn-sessoes li:first-child a {
  border-top: 0;
}
.trn-sessao-series {
  min-width: 0;
  font-size: 0.85rem;
}
.trn-letra-mini {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
}
.trn-numeros dd.trn-num-texto {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Caderno em tabela (?ver=tabela): todas as páginas em linhas, na largura toda. */
.tabela-paginas-rolagem {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.tabela-paginas {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabela-paginas th,
.tabela-paginas td {
  padding: 8px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.tabela-paginas thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tabela-paginas tbody tr:last-child > * {
  border-bottom: 0;
}

.tabela-paginas tbody tr {
  transition: background-color 0.15s ease;
}

.tabela-paginas tbody tr:hover {
  background: var(--accent-soft);
}

.tabela-paginas .tp-titulo {
  font-weight: 500;
  width: 100%;
  white-space: normal;
  padding-left: calc(14px + var(--nivel, 0) * 22px);
}

.tp-titulo a {
  color: var(--text);
  text-decoration: none;
}

.tp-titulo a:hover,
.tp-titulo a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.tp-icone {
  display: inline-flex;
  vertical-align: -4px;
  margin-right: 8px;
  color: var(--muted);
}

.tp-icone svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.tabela-paginas .tp-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* No computador as telas usam mais da largura; o texto corrido continua
   na medida de leitura (.leitura, 720px). */
@media (min-width: 1100px) {
  main,
  .topo-interno {
    max-width: 1320px;
    padding-left: 32px;
    padding-right: 32px;
  }

  main.estudo,
  main.largo,
  .estudo-rodape-interno {
    max-width: 1480px;
  }
}

/* ------------------------------------------------------------------
   Barra lateral do computador (ADR 035). Recolhe para um trilho de
   ícones; no celular quem navega é a barra de baixo.
   ------------------------------------------------------------------ */
:root {
  --lat-w: 0px;
  --mola: cubic-bezier(0.34, 1.4, 0.64, 1);
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
}

.icone {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lateral {
  display: none;
}

@media (min-width: 1100px) {
  .com-lateral {
    --lat-w: 260px;
  }

  .com-lateral.lateral-recolhida {
    --lat-w: 56px;
  }

  .com-lateral body,
  .com-lateral .estudo-rodape {
    padding-left: var(--lat-w);
  }

  .com-lateral .treino-descanso {
    padding-left: calc(var(--lat-w) + 16px);
  }

  .com-lateral.com-painel-biblioteca body,
  .com-lateral.com-painel-biblioteca .estudo-rodape {
    padding-left: calc(var(--lat-w) + var(--pl-largura));
  }

  .com-lateral .pl-esquerda {
    left: var(--lat-w);
  }

  /* A marca e as seções do topo moram na barra lateral. */
  .com-lateral .topo .marca,
  .com-lateral .topo-nav {
    display: none;
  }

  .com-lateral .topo-interno {
    max-width: none;
  }

  .com-lateral .lateral {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    width: var(--lat-w);
    background: var(--regiao-1);
    border-right: 1px solid var(--border);
    overflow: hidden;
    transition: width 0.38s var(--mola);
  }

  .com-lateral body,
  .com-lateral .pl-esquerda {
    transition: padding-left 0.38s var(--mola), left 0.38s var(--mola);
  }
}

@media (prefers-reduced-motion: reduce) {
  .com-lateral .lateral,
  .com-lateral body,
  .com-lateral .pl-esquerda,
  .lat-gaveta,
  .lat-secao-t .icone {
    transition: none !important;
  }
}

.lat-topo {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 57px;
  padding: 0 10px;
  flex: none;
}

.lat-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}

.lat-marca svg {
  width: 20px;
  height: 22px;
  flex: none;
}

.lat-marca .lat-texto {
  font: 600 1.1rem var(--serif);
}

.lat-ic {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.lat-ic:hover,
.lat-it:hover {
  background: var(--surface-2);
  color: var(--text);
}

.lat-rolar {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 8px 8px;
}

.lat-it {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s;
}

.lat-it .icone {
  color: var(--muted);
}

.lat-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s;
}

.lat-it[aria-current="page"] {
  background: var(--accent-soft);
  font-weight: 600;
}

.lat-it[aria-current="page"] .icone {
  color: var(--accent);
}

.lat-it[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  animation: lat-marca-entra 0.3s var(--mola);
}

@keyframes lat-marca-entra {
  from {
    transform: scaleY(0);
  }
}

.lat-extra {
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
}

.lat-selo {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--acc2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.lat-secao {
  margin-top: 12px;
}

.lat-secao-t {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.lat-secao-t:hover {
  background: var(--surface-2);
  color: var(--text);
}

.lat-secao-t .icone {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
  transition: transform 0.25s var(--mola);
}

.lat-secao.fechada .lat-secao-t .icone {
  transform: none;
}

/* Gaveta que abre e fecha com a altura certa (grid 0fr → 1fr). */
.lat-gaveta {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s var(--suave);
}

.lat-gaveta > div {
  overflow: hidden;
  min-height: 0;
}

.lat-secao.fechada .lat-gaveta {
  grid-template-rows: 0fr;
}

.lat-gaveta .lat-it {
  transition: opacity 0.25s, transform 0.3s var(--mola), background-color 0.12s;
}

.lat-secao.fechada .lat-gaveta .lat-it {
  opacity: 0;
  transform: translateX(-6px);
}

.lat-todos {
  color: var(--muted);
  font-size: 13px;
  padding-left: 38px;
}

/* Trilho de ícones */
.lateral-recolhida .lat-texto,
.lateral-recolhida .lat-extra,
.lateral-recolhida .lat-todos {
  opacity: 0;
  pointer-events: none;
}

.lateral-recolhida .lat-topo {
  padding: 0 12px;
}

.lateral-recolhida .lat-marca {
  display: none;
}

.lateral-recolhida .lat-it {
  padding: 0 11px;
}

.lateral-recolhida .lat-selo {
  position: absolute;
  left: 22px;
  top: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 9.5px;
}

.lateral-recolhida .lat-secao-t {
  justify-content: center;
  padding: 0;
}

.lateral-recolhida .lat-secao-t span,
.lateral-recolhida .lat-secao-t .icone {
  display: none;
}

/* No trilho o título da seção vira um traço que separa os grupos. */
.lateral-recolhida .lat-secao-t::before {
  content: "";
  width: 20px;
  border-top: 1px solid var(--border-strong);
}

/* Celular: o ☰ do topo abre a mesma barra como gaveta; os botões do app
   continuam na barra de baixo. */
.botao-gaveta,
.lat-fechar {
  display: none;
}

.lat-veu {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgb(10 14 12 / 0.38);
  animation: lat-veu-entra 0.25s ease;
}

.lat-veu[hidden] {
  display: none;
}

@keyframes lat-veu-entra {
  from {
    opacity: 0;
  }
}

@media (max-width: 1099px) {
  .com-lateral .botao-gaveta {
    display: inline-grid;
    place-items: center;
  }

  .com-lateral .lateral {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 46;
    display: flex;
    flex-direction: column;
    width: min(300px, 84vw);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--regiao-1);
    box-shadow: 0 0 40px rgb(0 0 0 / 0.25);
    transform: translateX(-105%);
    visibility: hidden;
    transition:
      transform 0.42s var(--mola),
      visibility 0s 0.42s;
  }

  .gaveta-aberta .lateral {
    transform: none;
    visibility: visible;
    transition: transform 0.42s var(--mola);
  }

  .com-lateral .lat-recolher,
  .com-lateral .lat-extra {
    display: none;
  }

  .com-lateral .lat-fechar {
    display: grid;
  }

  .com-lateral .lat-it {
    height: 42px;
    font-size: 15px;
  }

  /* No celular a barra nunca fica recolhida: o trilho é só do computador. */
  .lateral-recolhida .lat-texto,
  .lateral-recolhida .lat-todos {
    opacity: 1;
    pointer-events: auto;
  }

  .lateral-recolhida .lat-marca {
    display: flex;
  }

  .lateral-recolhida .lat-it {
    padding: 0 10px;
  }

  .lateral-recolhida .lat-secao-t {
    justify-content: flex-start;
    padding: 0 10px;
  }

  .lateral-recolhida .lat-secao-t span,
  .lateral-recolhida .lat-secao-t .icone {
    display: inline;
  }

  .lateral-recolhida .lat-secao-t::before {
    display: none;
  }

  .lateral-recolhida .lat-selo {
    position: static;
    min-width: 20px;
    height: 20px;
    font-size: 11px;
  }

  /* Tabela do caderno em tela estreita: título e situação. */
  .tabela-paginas th:nth-child(4),
  .tabela-paginas td:nth-child(4),
  .tabela-paginas th:nth-child(5),
  .tabela-paginas td:nth-child(5) {
    display: none;
  }

  .tabela-paginas th,
  .tabela-paginas td {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .com-lateral .lateral {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Janela flutuante e menu de contexto (ADR 035)
   ------------------------------------------------------------------ */
[x-cloak] {
  display: none !important;
}

.janela {
  position: fixed;
  z-index: 60;
  min-width: 340px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.04),
    0 12px 28px rgb(0 0 0 / 0.14),
    0 40px 80px -30px rgb(0 0 0 / 0.4);
}

.janela.abrindo {
  animation: janela-abre 0.45s var(--mola);
}

@keyframes janela-abre {
  from {
    opacity: 0;
    transform: translate(var(--dx, 0), var(--dy, 40px)) scale(0.2);
  }
}

.janela.minimizada {
  height: 46px !important;
  min-height: 0;
  resize: none;
  transition: height 0.35s var(--mola);
}

.janela-barra {
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.janela-barra:active {
  cursor: grabbing;
}

.janela-barra b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.janela-alca {
  display: none;
}

.janela-corpo {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--bg);
}

/* Celular: folha que sobe de baixo; puxar a alça para baixo fecha. */
.janela.folha {
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  top: 12vh;
  width: auto;
  min-width: 0;
  resize: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 0 0 100vmax rgb(10 14 12 / 0.38);
  transition: transform 0.3s var(--mola);
}

.janela.folha.abrindo {
  animation: folha-sobe 0.45s var(--mola);
}

@keyframes folha-sobe {
  from {
    transform: translateY(100%);
  }
}

.janela.folha .janela-barra {
  position: relative;
  height: 54px;
  padding-top: 10px;
  background: var(--surface);
}

.janela.folha .janela-alca {
  display: block;
  position: absolute;
  top: 7px;
  left: 50%;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 3px;
  background: var(--border-strong);
}

.janela.folha .janela-min {
  display: none;
}

/* Dentro da janela: só o conteúdo da página. */
.em-janela .topo,
.em-janela .barra-inferior,
.em-janela .painel-lateral,
.em-janela .pl-fundo {
  display: none !important;
}

.em-janela body {
  padding: 0 !important;
}

.em-janela main {
  padding-top: 16px;
}

/* Botão "Janela" nas linhas da tabela do caderno. */
.tp-titulo {
  position: relative;
}

.tp-janela {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}

.tp-janela .icone {
  width: 13px;
  height: 13px;
}

.tabela-paginas tr:hover .tp-janela,
.tp-janela:focus-visible {
  opacity: 1;
}

.tp-janela:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

@media (hover: none) {
  .tp-janela {
    opacity: 1;
  }

  .tp-janela span {
    display: none;
  }
}

.menu-ctx {
  position: fixed;
  z-index: 70;
  min-width: 240px;
  padding: 5px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow:
    0 6px 16px rgb(0 0 0 / 0.1),
    0 24px 48px -12px rgb(0 0 0 / 0.22);
  transform-origin: top left;
  animation: menu-ctx-abre 0.2s var(--mola);
}

@keyframes menu-ctx-abre {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
}

.menu-ctx-titulo {
  margin: 0;
  padding: 6px 10px 4px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.menu-ctx a,
.menu-ctx button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  animation: menu-ctx-item 0.3s var(--suave) both;
}

.menu-ctx-lista > :nth-child(2) {
  animation-delay: 20ms;
}

.menu-ctx-lista > :nth-child(3) {
  animation-delay: 40ms;
}

.menu-ctx-lista > :nth-child(n + 4) {
  animation-delay: 60ms;
}

.menu-ctx {
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}

.menu-ctx hr {
  margin: 4px 6px;
  border: 0;
  border-top: 1px solid var(--border);
}

.menu-ctx .menu-ctx-perigo,
.menu-ctx .menu-ctx-perigo .icone {
  color: var(--danger);
}

/* Situação da página: quatro botões numa linha, sem submenu. */
.menu-ctx-situ {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 6px 6px;
}

.menu-ctx .menu-ctx-situ button {
  width: auto;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 13px;
}

.menu-ctx .menu-ctx-situ button[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

@keyframes menu-ctx-item {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.menu-ctx a:hover,
.menu-ctx button:hover,
.menu-ctx a:focus-visible,
.menu-ctx button:focus-visible {
  background: var(--surface-2);
}

.menu-ctx .icone {
  color: var(--muted);
}

.menu-ctx.folha {
  left: 12px !important;
  right: 12px;
  top: auto !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-radius: 16px;
  padding: 8px;
  animation: folha-sobe 0.35s var(--mola);
}

.menu-ctx.folha {
  max-height: 80vh;
}

.menu-ctx.folha a,
.menu-ctx.folha > div > button {
  height: 46px;
  font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .janela.abrindo,
  .janela.folha.abrindo,
  .menu-ctx,
  .menu-ctx a,
  .menu-ctx button {
    animation: none;
  }
}

/* Menu "+ Novo" em grade, com ícones (ADR 035). */
.menu-novo-lista {
  width: min(400px, calc(100vw - 24px));
}

.menu-novo-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}

/* Ações do "+" em ladrilhos: ícone em cima, nome curto embaixo (as outras ficam em "Mais"). */
.menu-novo-grade a,
.mn-botao-mais {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 72px;
  padding: 8px 2px !important;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.3s var(--mola),
    background-color 0.15s;
  animation: menu-ctx-item 0.3s var(--suave) both;
}

.menu-novo-grade li:nth-child(2) a { animation-delay: 20ms; }
.menu-novo-grade li:nth-child(3) a { animation-delay: 40ms; }
.menu-novo-grade li:nth-child(4) a { animation-delay: 60ms; }
.menu-novo-grade li:nth-child(5) a { animation-delay: 80ms; }
.menu-novo-grade li:nth-child(6) a { animation-delay: 100ms; }

.menu-novo-grade a:hover,
.mn-botao-mais:hover {
  transform: translateY(-2px);
  background: var(--surface-2);
}

.menu-novo-grade b {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.mn-botao-mais .mn-ic {
  border: 1px solid var(--border-strong);
}

.menu-novo-resto {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.menu-novo-lista .mn-escolher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: none;
}

.mn-escolher .icone {
  width: 16px;
  height: 16px;
}

/* No "+", só o lançamento mais recente (os outros ficam na tela /lancar/). */
.menu-novo-lista .lancar-recentes li:nth-child(n + 2) {
  display: none;
}

.mn-ic {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}

.mn-1 { background: var(--accent-soft); color: var(--accent); }
.mn-2 { background: var(--study-bg); color: var(--study-fg); }
.mn-3 { background: var(--surface-2); color: var(--muted); }
.mn-4 { background: var(--done-bg); color: var(--done-fg); }
.mn-5 { background: var(--surface-2); color: var(--acc2-texto); }
.mn-6 { background: var(--surface-2); color: var(--accent); }
.mn-7 { background: var(--accent-soft); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .menu-novo-grade a,
  .mn-botao-mais {
    animation: none;
  }
}

#menu-conta a,
#menu-conta .menu-suspenso-sair {
  display: flex;
  align-items: center;
  gap: 10px;
}

#menu-conta .icone {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.barra-inferior .menu-novo-lista {
  width: auto;
}

/* Início com cara de sistema: saudação com atalhos, painéis e percursos (ADR 035). */
.ini {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a fileira de atalhos rola sem alargar a página */
  gap: 22px;
}

.ini-saud {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}

.ini-saud h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.ini-saud h1 em {
  color: var(--accent);
  font-weight: 400;
}

.ini-saud-data {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
}

.ini-saud-data .sol {
  width: 12px;
  height: 12px;
}

.ini-saud-frase {
  margin: 6px 0 0;
}

.ini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.ini-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.3s var(--mola),
    box-shadow 0.2s;
}

.ini-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -12px rgb(0 0 0 / 0.35);
}

.ini-chip .icone {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.ini-chip b {
  color: var(--acc2-texto);
}

.ini-chip small {
  color: var(--muted);
  font-weight: 500;
}

.ini-painel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.ini-painel-t {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.ini-painel-t > .icone {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.ini-painel-mais {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
}

.ini-painel-mais:hover {
  color: var(--accent);
}

.ini-painel-mais .icone {
  width: 14px;
  height: 14px;
}

.ini-painel-meta {
  margin: 0;
  padding: 0 14px 10px;
  color: var(--muted);
  font-size: 13px;
}

.ini-painel-vazio {
  padding: 4px 14px 16px;
}

.ini-painel-vazio h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.ini-painel-vazio p {
  margin: 0;
}

.ini-linhas {
  margin: 0;
  padding: 0 6px 8px;
  list-style: none;
}

.ini-linha {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.12s;
}

.ini-linha:hover {
  background: var(--surface-2);
}

.ini-ic {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--muted);
}

.ini-ic .icone {
  width: 15px;
  height: 15px;
}

.ini-linha-t {
  min-width: 0;
}

.ini-linha-t b,
.ini-linha-t small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ini-linha-t b {
  font-weight: 600;
}

.ini-linha-t small {
  color: var(--muted);
  font-size: 12px;
}

.ini-linha-q {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.ini-linha-trilha {
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.ini-linha .capa-ini-linha {
  width: 40px;
  height: 28px;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
}

.ini-linha .capa-ini-linha img,
.ini-linha .capa-ini-linha svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ini-linha-pct {
  width: 38px;
  color: var(--text);
  text-align: right;
}

.ini-linha-nova {
  color: var(--muted);
}

.ini-cartoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0 12px 12px;
  list-style: none;
}

.ini-cont {
  display: grid;
  gap: 8px;
  height: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition:
    transform 0.3s var(--mola),
    box-shadow 0.2s,
    border-color 0.2s;
}

.ini-cont:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 10px 22px -16px rgb(0 0 0 / 0.4);
}

.ini-cont-topo {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.ini-cont-topo .icone {
  flex: none;
  width: 14px;
  height: 14px;
}

.ini-cont-origem {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ini-cont-conta {
  margin-left: auto;
  white-space: nowrap;
}

.ini-cont-aqui {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--acc2);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.ini-cont-conta + .ini-cont-aqui {
  margin-left: 0;
}

.ini-cont b {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
}

/* Percurso: o mesmo desenho da trilha, em miniatura; o trecho feito se desenha. */
.mini-percurso {
  display: block;
  width: 100%;
  height: 34px;
  overflow: visible;
}

.mini-percurso-curto {
  width: 120px;
  height: 16px;
}

.mini-percurso path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.mini-percurso-falta {
  stroke: var(--border-strong);
  stroke-width: 2;
  stroke-dasharray: 2 6;
}

.mini-percurso-feito {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: var(--p) 200;
  stroke-dashoffset: var(--p);
  animation: percurso-anda 1.4s 0.15s var(--suave) forwards;
}

@keyframes percurso-anda {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mini-percurso-feito {
    animation: none;
    stroke-dashoffset: 0;
  }
}

@media (max-width: 899px) {
  .ini {
    gap: 16px;
  }

  .ini-chips {
    flex-wrap: nowrap;
    max-width: 100%;
    margin-left: 0;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .ini-cartoes {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .ini-cartoes > li {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .mini-percurso-curto {
    width: 70px;
  }
}

/* Caminho no topo e abas com pílula (ADR 035). */
.topo-migalha {
  display: none;
  align-items: center;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
}

.topo-migalha a,
.topo-migalha .atual {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 7px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.topo-migalha a {
  flex: none;
  max-width: 220px;
}

.topo-migalha .atual {
  color: var(--text);
  font-weight: 600;
}

.topo-migalha .atual span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo-migalha a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.topo-migalha .icone {
  flex: none;
  width: 15px;
  height: 15px;
}

.topo-migalha .sep {
  color: var(--border-strong);
}

@media (min-width: 1100px) {
  .com-lateral .topo-migalha:not([hidden]) {
    display: flex;
    flex: 1;
  }

  .com-lateral.migalha-no-topo #conteudo .migalha {
    display: none;
  }
}

.abas,
.col-abas {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.abas a,
.col-abas a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 12px;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  transition: color 0.2s;
}

.abas a .icone,
.col-abas a .icone {
  width: 15px;
  height: 15px;
}

.abas a[aria-current="page"],
.col-abas a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.abas:not(.com-pilula) a[aria-current="page"],
.col-abas:not(.com-pilula) a[aria-current="page"] {
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.abas .pilula,
.col-abas .pilula {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 0;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  transition:
    left 0.35s var(--mola),
    width 0.35s var(--mola);
}

@media (prefers-reduced-motion: reduce) {
  .abas .pilula,
  .col-abas .pilula {
    transition: none;
  }
}

/* Seleção em lote na tabela do caderno (ADR 035). */
.tabela-paginas .tp-cx {
  width: 36px;
  padding-right: 0;
}

.tp-cx input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  vertical-align: middle;
}

.tp-lote.com-js .tp-cx input {
  opacity: 0;
  transition: opacity 0.12s;
}

.tp-lote.com-js tr:hover .tp-cx input,
.tp-lote.com-js .tp-cx input:focus-visible,
.tp-lote.com-js .tp-cx input:checked,
.tp-lote.tem-escolha .tp-cx input {
  opacity: 1;
}

@media (hover: none) {
  .tp-lote.com-js .tp-cx input {
    opacity: 1;
  }
}

.tabela-paginas tr:has(.tp-cx input:checked) {
  background: var(--accent-soft);
}

.tp-selecao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 6px 8px 6px 14px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
}

.tp-lote.com-js .tp-selecao {
  position: fixed;
  left: calc(50% + var(--lat-w, 0px) / 2);
  bottom: 24px;
  z-index: 40;
  flex-wrap: nowrap;
  margin: 0;
  max-width: calc(100vw - 24px);
  white-space: nowrap;
  box-shadow: 0 16px 36px -16px rgb(0 0 0 / 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition:
    transform 0.35s var(--mola),
    opacity 0.2s;
}

.tp-lote.tem-escolha .tp-selecao {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.tp-sel-n {
  margin-right: 6px;
}

.tp-selecao button,
.tp-selecao summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  list-style: none;
}

.tp-selecao summary::-webkit-details-marker {
  display: none;
}

.tp-selecao > button:hover,
.tp-selecao summary:hover,
.tp-sel-menu[open] summary {
  background: rgb(128 128 128 / 0.25);
}

.tp-selecao .icone {
  width: 15px;
  height: 15px;
}

.tp-sel-menu {
  position: relative;
}

.tp-sel-opcoes {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: grid;
  min-width: 180px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 16px 36px -16px rgb(0 0 0 / 0.4);
}

.tp-sel-opcoes button {
  justify-content: flex-start;
  padding: 8px 10px;
}

.tp-sel-opcoes button:hover {
  background: var(--surface-2);
}

@media (max-width: 1099px) {
  .tp-lote.com-js .tp-selecao {
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .tp-selecao .tp-sel-n ~ * > summary,
  .tp-selecao > button[value] {
    font-size: 0;
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-lote.com-js .tp-selecao {
    transition: none;
  }
}

/* Título das telas principais com o ícone da seção (ADR 035). */
.titulo-com-icone {
  display: flex;
  align-items: center;
  gap: 14px;
}

.titulo-ic {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}

.titulo-ic .icone {
  width: 24px;
  height: 24px;
}

@media (max-width: 599px) {
  .titulo-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .titulo-ic .icone {
    width: 20px;
    height: 20px;
  }
}

/* Ícone (emoji) de página, caderno e trilha: no lugar do ícone padrão e da miniatura da capa. */
.emoji-icone {
  display: inline-grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  font-size: 1em;
  line-height: 1;
  flex: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.emoji-mini {
  display: inline-grid;
  place-items: center;
  background: none;
  font-size: 22px;
  line-height: 1;
}

.migalha-caderno .emoji-mini,
.pagina-trilha .emoji-mini {
  font-size: 15px;
}

.pl-item .emoji-mini {
  font-size: 18px;
}

.emoji-cabecalho {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 4px;
  font-size: 56px;
}

.ini-ic-trilha {
  font-size: 18px;
}

.tp-icone .emoji-icone,
.bib-linha-icone .emoji-icone {
  font-size: 15px;
}

.org-icone {
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Cartões: o emoji fica sobre a capa, no canto. Compacta e lista: no lugar da capa. */
.org-cartoes .org-icone {
  position: absolute;
  top: 100px;
  left: 14px;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
}

.org-cartoes .org-item:has(> .org-icone) .org-corpo {
  padding-top: 20px;
}

.org-compacta .org-item:has(> .org-icone) > .org-capa,
.org-lista .org-item:has(> .org-icone) > .org-capa {
  display: none;
}

.org-compacta .org-icone {
  height: 84px;
  font-size: 40px;
  background: var(--surface-2);
}

.org-lista .org-icone {
  grid-row: 1 / span 3;
  width: 56px;
  height: 36px;
  font-size: 26px;
}

.icone-edicao {
  margin-bottom: 8px;
}

.icone-escolha {
  position: relative;
  display: inline-block;
}

.icone-atual {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
}

.icone-atual::-webkit-details-marker {
  display: none;
}

.icone-atual:hover,
.icone-atual:focus-visible {
  background: var(--surface-2);
}

.icone-atual .emoji-icone {
  font-size: 48px;
}

.sem-icone {
  color: var(--muted);
  font-size: 0.875rem;
}

.icone-painel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  width: min(340px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.16);
}

.icone-grade {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}

.icone-busca {
  width: 100%;
  margin-bottom: 8px;
}

.icone-abas {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.icone-abas button {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 18px;
  cursor: pointer;
}

.icone-abas button[aria-pressed="true"] {
  border-bottom-color: var(--accent);
}

.icone-vazio {
  margin: 8px 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.icone-grade {
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.icone-grade button {
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.icone-grade button:hover,
.icone-grade button[aria-pressed="true"] {
  background: var(--surface-2);
}

.icone-outro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.icone-outro label,
.icone-outro .ajuda {
  grid-column: 1 / -1;
  margin: 0;
}

.icone-outro .ajuda {
  color: var(--muted);
  font-size: 0.8125rem;
}

.emoji-titulo {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 2px;
  font-size: 40px;
}

/* Treinos: biblioteca de exercícios, "Como fazer" e exercício novo (ADR 037) */
.trn-filtros-linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.trn-filtros-linha label,
.trn-campo {
  display: grid;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.trn-busca input,
.trn-filtros select,
.trn-campo input,
.trn-campo select,
.trn-campo textarea {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}
.trn-filtros-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
fieldset.trn-campo {
  border: 0;
  padding: 0;
}
.trn-marcar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.trn-marcar label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
}
.trn-marcar label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.trn-form {
  gap: 16px;
}
.trn-passos,
.trn-cuidados {
  margin: 0;
  padding-left: 1.3em;
  display: grid;
  gap: 6px;
  max-width: 65ch;
}
.trn-cuidados {
  color: var(--muted);
}
.trn-cartao h3.trn-forte {
  margin: 4px 0 0;
  font-size: 0.95rem;
}
.trn-video-form {
  display: grid;
  gap: 8px;
}
.trn-exercicios .trn-chip {
  vertical-align: 1px;
}

/* Página de leitura (protótipo aprovado em 11/10): ficha sob o título, coluna ao lado com
   sumário, anotações e conexões, e barra de ações no celular. */
.leitura-topo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.leitura-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.leitura-ficha {
  display: grid;
  gap: 6px;
  margin: 0 0 28px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.ficha-linha {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 34px;
}

.ficha-linha dt {
  color: var(--muted);
}

.ficha-linha dd {
  margin: 0;
  min-width: 0;
}

/* Sem revisão periódica ligada, a linha some (o "Revisar periodicamente" fica no "⋯"). */
.ficha-revisao:not(:has(.revisao-pagina > *)) {
  display: none;
}

.ficha-leitura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  color: var(--muted);
}

.leitura-ficha .pagina-trilhas {
  margin: 0;
}

@media (max-width: 699px) {
  .leitura-ficha {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    border: 0;
  }

  .ficha-linha {
    display: flex;
    min-height: 0;
  }

  .ficha-linha dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ficha-leitura > span {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
  }
}

.leitura-lateral {
  display: grid;
  align-content: start;
  gap: 24px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  font-size: 14px;
}

@media (min-width: 1100px) {
  .estudo-layout.com-coluna {
    grid-template-columns: minmax(0, 1fr) 272px;
    gap: 48px;
  }

  .leitura-lateral {
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow: auto;
  }
}

.leitura-lateral .sumario {
  position: static;
  max-height: none;
  overflow: visible;
}

.leitura-lateral .sumario ol {
  border-left: 2px solid var(--border);
}

.leitura-lateral .sumario li {
  margin: 0;
}

.leitura-lateral .sumario a {
  display: block;
  margin-left: -2px;
  padding: 5px 12px;
  border-left: 2px solid transparent;
}

.leitura-lateral .sumario a[aria-current] {
  border-left-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

.leitura-lateral .sumario-n3 a {
  padding-left: 24px;
}

.lateral-cartao {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.lateral-cartao h2 {
  margin: 0 0 4px;
  font-size: 15px;
}

.lateral-cartao > p.muted {
  margin: 0 0 8px;
}

.lateral-secao p.muted {
  margin: 0 0 4px;
}

.lateral-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lateral-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  color: var(--text);
}

.lateral-links .icone {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.leitura-barra {
  display: none;
}

@media (max-width: 899px) {
  .leitura-barra {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 25;
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 6px 24px rgb(0 0 0 / 0.16);
  }

  .leitura-barra > a,
  .leitura-barra > form {
    flex: 1;
  }

  .leitura-barra > form {
    flex: 1.4;
  }

  .leitura-barra .botao,
  .leitura-barra button {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  /* A barra da página toma o lugar da barra de baixo do app. */
  body:has(.leitura-barra) {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  body:has(.leitura-barra) .barra-inferior {
    display: none;
  }
}

/* Cabeçalho da trilha (protótipo aprovado em 11/10): cartão com ícone, anel de progresso e
   "Continuar de onde parou"; a capa vira uma faixa no alto. */
.trilha-cabecalho {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}

.trilha-cabecalho .capa-faixa {
  display: block;
  width: 100%;
  height: clamp(110px, 16vw, 180px);
  border-radius: 0;
}

.trilha-cabecalho .capa-topo {
  margin: 0;
}

.trilha-cabecalho:has(.capa-topo[hidden]) .trilha-cabecalho-icone {
  margin-top: 0;
}

.trilha-cabecalho .capa-adicionar {
  margin-bottom: 4px;
}

.capa-faixa.capa-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trilha-cabecalho-corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 20px 24px 8px;
}

.trilha-cabecalho-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-top: -48px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.16);
  font-size: 34px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.trilha-cabecalho-icone .icone {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.trilha-cabecalho-texto {
  flex: 1 1 320px;
  min-width: 0;
}

.trilha-cabecalho-texto h1 {
  margin: 0 0 4px;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.1;
}

.trilha-cabecalho-texto .texto-md {
  margin: 0;
}

.trilha-cabecalho-texto .cabecalho-categorias {
  margin-top: 8px;
}

.trilha-anel {
  flex: none;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--border) 0);
}

.trilha-anel span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--surface);
  font-weight: 700;
  font-size: 17px;
}

.trilha-continuar {
  flex: none;
  display: grid;
  gap: 2px;
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}

.trilha-continuar:hover {
  color: var(--on-accent);
  filter: brightness(1.08);
}

.trilha-continuar span {
  font-size: 12px;
  opacity: 0.88;
}

.trilha-cabecalho > .acoes-trilha {
  padding: 4px 24px 18px;
}

@media (max-width: 699px) {
  .trilha-cabecalho-corpo {
    padding: 16px 16px 8px;
    gap: 12px 14px;
  }

  .trilha-cabecalho-icone {
    width: 48px;
    height: 48px;
    font-size: 28px;
  }

  .trilha-cabecalho-texto {
    flex-basis: calc(100% - 140px);
  }

  .trilha-anel {
    width: 58px;
    height: 58px;
  }

  .trilha-anel span {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }

  .trilha-continuar {
    flex: 1 1 100%;
    min-height: 56px;
    align-content: center;
  }

  .trilha-cabecalho > .acoes-trilha {
    padding: 4px 16px 16px;
  }
}

.trilha-hoje h2 {
  margin: 0 0 8px;
  font-size: 15px;
}

.trilha-hoje p {
  margin: 0 0 8px;
  font-size: 14px;
}

/* Como fazer dentro do modo treino (ADR 037) */
.treino-como {
  margin: 4px 0 8px;
}
.treino-como summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.9rem;
  padding: 6px 0;
}
.treino-como summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.treino-como .video-quadro {
  margin: 4px 0 12px;
}
.treino-como-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

a.trilha-cabecalho-icone {
  color: inherit;
  text-decoration: none;
}

a.trilha-cabecalho-icone:hover,
a.trilha-cabecalho-icone:focus-visible {
  background: var(--surface-2);
}

a.trilha-cabecalho-icone .icone {
  color: var(--muted);
}

.caderno-topo-texto .icone-edicao {
  margin-bottom: 2px;
}

/* Tarefas (ADR 038): as tarefas de todas as páginas, por dia. */
.tf {
  display: grid;
  gap: 16px;
  max-width: 680px;
  margin-inline: auto;
}
.tf h1 {
  margin: 0;
}
.tf-topo p {
  margin: 4px 0 0;
}
.tf-alerta {
  color: var(--acc2-texto);
}
.tf-rapido {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  align-items: center;
}
.tf-rapido input {
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  min-width: 0;
}
.tf-rapido input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.tf-rapido .botao {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 520px) {
  .tf-rapido .botao span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}
.tf-dica {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.tf-abas {
  margin: 0;
  overflow-x: auto;
}
.tf-abas a {
  white-space: nowrap;
}
.tf-conta {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tf-abas a[aria-current="page"] .tf-conta {
  background: var(--accent-soft);
  color: var(--accent);
}
.tf-grupo {
  display: grid;
  gap: 6px;
}
.tf-rotulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 4px;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.tf-rotulo.tf-alerta {
  color: var(--acc2-texto);
}
.tf-rotulo a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
.tf-rotulo a:hover {
  color: var(--text);
}
.tf-rotulo .icone,
.tf-rotulo .icone-emoji {
  width: 15px;
  height: 15px;
}
.tf-lista {
  list-style: none;
  margin: 0;
  padding: 2px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.tf-linha {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 2px 12px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.tf-linha:last-child {
  border-bottom: 0;
}
.tf-linha > form {
  grid-row: 1 / span 2;
  margin: 0;
}
.tf-caixa {
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.tf-caixa::after {
  content: "";
  width: 9px;
  height: 5px;
  border: 2px solid var(--on-accent);
  border-top: 0;
  border-right: 0;
  transform: translate(0, -1px) rotate(-45deg);
  opacity: 0;
}
.tf-caixa:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.tf-caixa:hover::after {
  opacity: 0.6;
  border-color: var(--accent);
}
.tf-caixa:active {
  transform: scale(0.88);
}
.tf-linha.alta .tf-caixa {
  border-color: var(--acc2);
  border-width: 2.5px;
}
.tf-linha.feita .tf-caixa {
  background: var(--accent);
  border-color: var(--accent);
}
.tf-linha.feita .tf-caixa::after {
  opacity: 1;
  border-color: var(--on-accent);
}
.tf-texto {
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
  line-height: 1.4;
  min-width: 0;
}
.tf-texto:hover {
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}
.tf-linha.feita .tf-texto {
  color: var(--muted);
  text-decoration: line-through;
}
.tf-linha.baixa .tf-texto {
  color: var(--muted);
}
.tf-quando {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.tf-quando.atrasada {
  color: var(--acc2-texto);
  font-weight: 600;
}
.tf-meta {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--muted);
  font-size: 0.76rem;
}
.tf-origem,
.tf-repete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.tf-origem {
  color: inherit;
  text-decoration: none;
}
.tf-origem:hover {
  color: var(--text);
}
.tf-origem span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tf-meta .icone,
.tf-meta .icone-emoji {
  width: 13px;
  height: 13px;
  flex: none;
}
.tf-repete {
  color: var(--accent);
  font-weight: 600;
}
.tf-vazio {
  padding: 22px 18px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 14px;
  text-align: center;
}
.tf-vazio p {
  margin: 0;
}
.tf-vazio p + p {
  margin-top: 4px;
  font-size: 0.86rem;
}
.tf-dias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.tf-dia {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: start;
}
.tf-dia-d {
  display: grid;
  justify-items: center;
  padding-top: 8px;
  line-height: 1.1;
}
.tf-dia-d small {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: lowercase;
}
.tf-dia-d b {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
}
.tf-dia-vazio {
  margin: 0;
  padding: 10px 2px;
  font-size: 0.86rem;
  border-bottom: 1px dashed var(--border);
}
.tf-voltar {
  margin: 0;
}
.tf-voltar a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  text-decoration: none;
}
.tf-seta {
  transform: rotate(180deg);
}
.tf-form {
  display: grid;
  gap: 18px;
}
.tf-campo {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.tf-campo > span,
.tf-campo legend {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0;
  margin-bottom: 6px;
}
.tf-campo input[type="text"],
.tf-campo input[type="date"],
.tf-campo input[type="time"],
.tf-campo select {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
}
.tf-quando-campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 9rem);
  gap: 8px;
}
.tf-chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tf-chip {
  min-height: 34px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.84rem;
}
.tf-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tf-opcoes {
  display: flex;
  gap: 6px;
}
.tf-opcoes label {
  flex: 1;
}
.tf-opcoes input {
  position: absolute;
  opacity: 0;
}
.tf-opcoes span {
  display: block;
  padding: 9px;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  font-size: 0.9rem;
}
.tf-opcoes input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.tf-opcoes input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tf-form .tf-meta a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tf-acoes {
  display: flex;
  gap: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .tf-caixa {
    transition: none;
  }
}
.tarefa-quando {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.tarefa-quando .icone {
  width: 13px;
  height: 13px;
}
.tarefa-alta {
  font-weight: 600;
}
.ini-tarefas {
  padding: 0 14px;
  border: 0;
  background: none;
}
.ini-tarefas .tf-linha {
  padding: 8px 0;
}

/* ---------------------------------------------------------- Projetos (ADR 039) */
.col-cartao small.col-atrasado {
  color: var(--acc2-texto);
  font-weight: 600;
}
.pj-novo > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
}
.pj-novo > summary::-webkit-details-marker {
  display: none;
}
.pj-novo[open] > summary {
  display: none;
}
.pj-novo-form,
.pj-ajustes-form {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.pj-novo-form .campo,
.pj-ajustes-form .campo {
  margin: 0;
}
.pj-novo-form button,
.pj-ajustes-form button {
  justify-self: start;
}
.pj-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pj-cartao {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.pj-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.pj-topo:hover b,
.pj-topo:focus-visible b {
  text-decoration: underline;
}
.pj-topo b {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pj-ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
}
.pj-ic svg {
  width: 17px;
  height: 17px;
}
.pj-selo {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.pj-selo.atrasado {
  color: var(--acc2-texto);
}
.pj-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  color: var(--muted);
  font-size: 12.5px;
}
.pj-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 14px;
  font-size: 13px;
}
.pj-faixa-volta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-weight: 600;
}
.pj-faixa-volta svg {
  width: 15px;
  height: 15px;
}
.pj-situacao {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.pj-situacao.pj-pausado {
  background: var(--surface-2);
  color: var(--muted);
}
.pj-situacao.pj-concluido {
  background: var(--done-bg);
  color: var(--done-fg);
}
.pj-ajustes {
  margin-left: auto;
}
.pj-ajustes[open] {
  flex-basis: 100%;
  margin-left: 0;
}
.pj-ajustes-form {
  margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
}

/* ---------------------------------------------------------- Hábitos (ADR 040) */
.hb-marcar {
  display: contents;
}
.hb-bola {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
}
.hb-bola svg {
  width: 18px;
  height: 18px;
}
.hb-bola.ok {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
/* Quantidade: o anel enche até a meta (--p, de 0 a 100). */
.hb-anel {
  position: relative;
  border: none;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-2) 0);
  color: var(--text);
  font-size: 10.5px;
  font-weight: 700;
}
.hb-anel::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--surface);
}
.hb-anel > span {
  position: relative;
  display: grid;
  place-items: center;
}
.hb-anel.ok {
  background: var(--accent);
}
.hb-anel.ok::before {
  display: none;
}
/* Evitar: os dias sem escorregar. */
.hb-escudo {
  border: none;
  border-radius: 12px;
  background: var(--done-bg);
  color: var(--done-fg);
  font-size: 13px;
  font-weight: 700;
  cursor: default;
}
.hb-escudo.caiu {
  background: var(--danger);
  color: var(--surface);
}
.hb-escorreguei {
  font-size: 12.5px;
}
.hb-hoje {
  display: grid;
  gap: 8px;
}
.hb-total b {
  font-size: 1.8rem;
}
.hb-passos {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 8px;
}
.hb-digitar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.hb-digitar-form input {
  width: 7em;
}
/* Rotina: selo de prazo (verde no prazo, amarelo vence, vermelho atrasada) e a barrinha. */
.hb-selo {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--done-bg);
  color: var(--done-fg);
  font-weight: 700;
  white-space: nowrap;
}
.hb-selo.vence {
  background: var(--study-bg);
  color: var(--study-fg);
}
.hb-selo.atrasada {
  background: var(--danger);
  color: var(--surface);
}
.hb-rotina {
  grid-template-columns: auto 1fr auto;
}
.hb-fiz {
  min-height: 36px;
  padding: 4px 14px;
}
.hb-fiz.ok {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.hb-barra {
  grid-column: 2;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.hb-barra i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.hb-barra.atrasada i {
  background: var(--danger);
}
.hb-rotina-campos {
  display: grid;
  gap: 10px;
}
.hb-avisar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hb-meta-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hb-bola:focus-visible,
.hb-cel:focus-visible,
.hb-dia:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.hb-lista {
  list-style: none;
  margin: 0;
  padding: 2px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.hb-linha {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 2px 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.hb-linha:last-child {
  border-bottom: none;
}
.hb-linha > form,
.hb-linha > .hb-bola {
  grid-row: 1 / span 2;
}
.hb-nome {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.hb-nome:hover,
.hb-nome:focus-visible {
  text-decoration: underline;
}
.hb-linha.feito .hb-nome {
  color: var(--muted);
}
.hb-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--muted);
  font-size: 12.5px;
}
.hb-linha .hb-seq {
  grid-row: 1 / span 2;
  grid-column: 3;
}
.hb-seq {
  color: var(--acc2-texto);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.hb-pontos {
  display: inline-flex;
  gap: 3px;
}
.hb-pontos i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-2);
}
.hb-pontos i.ok {
  background: var(--accent);
}
.hb-pontos i.caiu {
  background: var(--danger);
}
.hb-pontos i.livre {
  background: transparent;
  border: 1px dashed var(--border-strong);
}
.hb-bolinhas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.hb-bolinhas li {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 60px;
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  overflow-wrap: anywhere;
}
.hb-grade {
  display: grid;
  gap: 4px;
  overflow-x: auto;
}
.hb-grade-linha {
  display: grid;
  grid-template-columns: minmax(110px, 1.6fr) repeat(14, minmax(26px, 1fr)) 48px;
  gap: 4px;
  align-items: center;
}
.hb-grade-nome {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.hb-grade-nome span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hb-grade-nome svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.hb-d {
  display: grid;
  justify-items: center;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
}
.hb-d small {
  font-size: 10px;
}
.hb-cel,
.hb-dia {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.hb-cel.ok,
.hb-dia.ok {
  background: var(--accent);
  color: var(--on-accent);
}
.hb-cel.caiu,
.hb-dia.caiu {
  background: var(--danger);
  color: var(--surface);
}
.hb-cel.livre,
.hb-dia.livre {
  background: transparent;
  border: 1px dashed var(--border-strong);
}
.hb-dia.futuro {
  display: grid;
  place-items: center;
  cursor: default;
  opacity: 0.5;
}
/* 28 dias na grade: o computador mostra todos, o tablet os 14 últimos e o celular os 7. */
.hb-grade-linha > :nth-child(n + 2):nth-child(-n + 15) {
  display: none;
}
@media (max-width: 640px) {
  .hb-grade-linha {
    grid-template-columns: minmax(96px, 1.6fr) repeat(7, minmax(28px, 1fr)) 40px;
  }
  .hb-grade-linha > :nth-child(n + 2):nth-child(-n + 22) {
    display: none;
  }
}
@media (min-width: 1100px) {
  .hb-grade-linha {
    grid-template-columns: minmax(160px, 1.6fr) repeat(28, minmax(18px, 1fr)) 48px;
    gap: 3px;
  }
  .hb.mc .hb-grade-linha > .hb-d {
    display: grid;
  }
  .hb.mc .hb-d-sem {
    display: none;
  }
  .hb.mc .hb-grade {
    gap: 8px;
  }
}
.hb-numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hb-numeros div {
  display: grid;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.hb-numeros b {
  font-family: var(--serif, inherit);
  font-size: 1.35rem;
}
.hb-numeros small {
  color: var(--muted);
  font-size: 12px;
}
.hb-mes {
  display: grid;
  gap: 5px;
  max-width: 420px;
}
.hb-mes-linha {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.hb-mes-cab {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.hb-regra fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
.hb-regra legend {
  margin-bottom: 6px;
  font-weight: 600;
}
.hb-quando,
.hb-dias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.hb-dias label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hb .pj-ajustes {
  justify-self: start;
  margin-left: 0;
}
.hb-nome-campos {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
}

/* Tela "Módulos": uma chave por módulo (ligar e desligar) */
.mod-lista {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: 640px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.mod-item {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.mod-item + .mod-item {
  border-top: 1px solid var(--border);
}

.mod-item form {
  margin: 0;
}

.mod-ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.mod-desligado .mod-ic {
  background: var(--surface-2);
  color: var(--muted);
}

.mod-t b {
  display: block;
}

.mod-t small {
  display: block;
  color: var(--muted);
}

.chave {
  position: relative;
  width: 46px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  cursor: pointer;
}

.chave::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 22px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  transition: left 0.15s;
}

.chave[aria-checked="false"] {
  background: var(--border-strong);
}

.chave[aria-checked="false"]::after {
  left: 4px;
}

.chave:disabled {
  opacity: 0.5;
  cursor: default;
}

.chave:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .chave::after {
    transition: none;
  }
}

.mod-off {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 420px;
  margin: 48px auto;
  text-align: center;
}

.mod-off .mod-ic {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--muted);
}

.mod-off h1,
.mod-off p,
.mod-off form {
  margin: 0;
}

/* Agenda (ADR 042): o dia com a régua de horas e o mês com um ponto por tipo. */
.ag .tf-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.ag-passos {
  display: flex;
  gap: 6px;
}
.ag-passos .botao {
  min-width: 40px;
  justify-content: center;
}
.ag-semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}
.ag-semana a {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 6px 0;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  text-decoration: none;
}
.ag-semana a:hover {
  background: var(--surface-2);
}
.ag-semana b {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--text);
}
.ag-semana b.hoje {
  color: var(--accent);
}
.ag-semana i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acc2);
}
.ag-semana a.sel {
  background: var(--accent-soft);
}
.ag-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
/* Cada tipo tem a sua cor, igual em todos os temas: fundo claro, barra forte e texto escuro do mesmo tom. */
.ag-ev,
.ag-bloco {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
  border-left: 3px solid var(--ag-cor, var(--border-strong));
  border-radius: 8px;
  background: var(--ag-fundo, color-mix(in srgb, var(--ag-cor, var(--muted)) 13%, var(--surface)));
  color: color-mix(in srgb, var(--ag-cor, var(--text)) 55%, var(--text));
  font-size: 0.9rem;
}
.ag-ev > form,
.ag-bloco > form {
  display: contents;
}
.ag-ev > a,
.ag-bloco > a {
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ag-ev > a:hover,
.ag-bloco > a:hover {
  text-decoration: underline;
}
.ag-ev > small,
.ag-bloco > small {
  margin-left: auto;
  color: inherit;
  opacity: 0.8;
  font-size: 0.75rem;
  white-space: nowrap;
}
.ag-ic .icone {
  width: 16px;
  height: 16px;
}
.ag-atrasada {
  color: var(--acc2-texto);
}
.ag-comp,
.ag-c-comp {
  --ag-cor: var(--text);
  --ag-fundo: var(--surface-2);
}
.ag-tar,
.ag-c-tar {
  --ag-cor: #6a4bc4;
}
.ag-pro,
.ag-c-pro {
  --ag-cor: #b7791f;
}
.ag-trn,
.ag-c-trn {
  --ag-cor: #d93a3f;
}
.ag-fin,
.ag-c-fin {
  --ag-cor: #2f7d5b;
}
.ag-rev,
.ag-c-rev {
  --ag-cor: #2e6fd8;
}
.ag-regua {
  position: relative;
  display: grid;
  grid-auto-rows: 48px;
  border-bottom: 1px solid var(--border);
}
.ag-h {
  border-top: 1px solid var(--border);
  padding: 2px 0 0;
  font-size: 0.7rem;
  color: var(--muted);
}
.ag-bloco {
  position: absolute;
  left: 44px;
  right: 0;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 2px 6px;
  overflow: hidden;
  padding: 4px 8px;
  font-size: 0.82rem;
}
.ag-bloco > a {
  flex: 1;
  font-weight: 600;
}
/* Na régua, o detalhe (onde, de qual caderno) vai na linha de baixo, como no Fantastical. */
.ag-bloco > small {
  order: 5;
  flex-basis: 100%;
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-agora {
  position: absolute;
  left: 40px;
  right: 0;
  height: 2px;
  background: #d93a3f;
  pointer-events: none;
}
.ag-agora::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d93a3f;
}
.ag-nada {
  margin: 8px 0 0;
}
.ag-mes {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  table-layout: fixed;
  text-align: center;
}
.ag-mes th {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.ag-mes a {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 6px 0 8px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
}
.ag-mes a:hover {
  background: var(--surface-2);
}
.ag-mes a.fora {
  color: var(--border-strong);
}
.ag-mes a.sel {
  background: var(--accent-soft);
}
.ag-mes a.hoje {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.ag-mes .ag-n {
  font-weight: inherit;
}
.ag-pts {
  display: flex;
  gap: 2px;
  height: 5px;
}
.ag-pts i,
.ag-legenda i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}
.ag-mes a.hoje .ag-pts i {
  background: var(--on-accent);
}
.ag-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}
.ag-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ag-legenda i {
  width: 8px;
  height: 8px;
}
.ag-c-comp,
.ag-c-tar,
.ag-c-pro,
.ag-c-trn,
.ag-c-fin,
.ag-c-rev {
  background: var(--ag-cor);
}
.ag-bloco .tf-caixa {
  width: 18px;
  height: 18px;
}
.ag-bloco.ag-tar,
.ag-bloco.ag-pro {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* "⋯" de cada linha: editar e apagar sem abrir a página. */
.tf-linha {
  grid-template-columns: 24px 1fr auto 32px;
}
.tf-linha .linha-menu {
  grid-column: 4;
  grid-row: 1 / span 2;
}
.tf-linha .tf-meta {
  grid-column: 2 / 4;
}
.linha-menu summary {
  width: 32px;
  height: 32px;
}
.linha-menu .ed-menu-lista {
  top: 36px;
  min-width: 200px;
}
.aviso-desfazer {
  display: inline;
  margin-left: 8px;
}
.ag-bloco:has(details[open]) {
  z-index: 6;
}
.ag-ev .linha-menu,
.ag-bloco .linha-menu {
  margin: -4px -6px -4px 0;
}
.ag-bloco .linha-menu summary {
  height: 24px;
}
.hb-linha {
  grid-template-columns: 40px 1fr auto 32px;
}
.hb-linha .linha-menu {
  grid-row: 1 / span 2;
  grid-column: 4;
}
.pj-linha-topo {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pj-linha-topo .pj-topo {
  flex: 1;
  min-width: 0;
}
/* Seletor de ícone dentro do formulário de criar (hábito, projeto). */
.icone-campo {
  align-self: end;
}
.icone-campo .icone-atual {
  min-height: 44px;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
}
.icone-campo .icone-atual .emoji-icone {
  font-size: 24px;
}
.hb-nome-campos {
  grid-template-columns: auto 1fr;
  align-items: end;
}
.reg-cabeca .campo {
  margin-bottom: 0;
}

/* Agenda, Semana: sete colunas com a régua de horas; no celular, rola para o lado. */
.ag-sem-rolar {
  overflow-x: auto;
}
.ag-sem {
  display: grid;
  grid-template-columns: 40px repeat(7, minmax(110px, 1fr));
  min-width: 820px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.ag-sem-cab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.ag-sem-cab b {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--text);
}
.ag-sem-cab.hoje b {
  background: var(--accent);
  color: var(--on-accent);
}
.ag-sem-rot {
  font-size: 0.65rem;
  color: var(--muted);
  padding: 6px 6px 0 0;
  text-align: right;
}
.ag-sem-todo {
  display: grid;
  gap: 3px;
  align-content: start;
  min-height: 34px;
  padding: 3px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.ag-sem-todo .ag-ev {
  padding: 3px 6px;
  font-size: 0.75rem;
  gap: 4px;
}
.ag-sem-todo .ag-ev > small {
  display: none;
}
.ag-sem-horas {
  display: grid;
  grid-auto-rows: 48px;
  text-align: right;
}
.ag-sem-horas .ag-h {
  border-top: 0;
  padding-right: 6px;
  transform: translateY(-7px);
}
.ag-sem-col {
  position: relative;
  border-left: 1px solid var(--border);
  background: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 48px);
}
.ag-sem-col.hoje {
  background-color: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.ag-sem-col .ag-bloco {
  left: 3px;
  right: 3px;
  font-size: 0.78rem;
  padding: 4px 6px;
}
.ag-sem-col .ag-agora {
  left: 0;
}
.ag-sem-col .ag-ic {
  display: none;
}
/* Na semana o "⋯" flutua no canto e, com mouse, só aparece ao passar por cima: o título fica inteiro. */
.ag-sem-col .ag-bloco .linha-menu {
  position: absolute;
  top: 2px;
  right: 2px;
  margin: 0;
}
@media (hover: hover) {
  .ag-sem-col .ag-bloco .linha-menu {
    opacity: 0;
  }
  .ag-sem-col .ag-bloco:hover .linha-menu,
  .ag-sem-col .ag-bloco:focus-within .linha-menu {
    opacity: 1;
  }
}
.ag-sem [draggable="true"] {
  cursor: grab;
}
.ag-sem .tf-caixa {
  width: 16px;
  height: 16px;
  flex: none;
}
.ag-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  border: 0;
  padding: 0;
  margin: 0;
}
.ag-filtro label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ag-filtro i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.ag-ajustes {
  display: grid;
  gap: 10px;
}
.tf.ag-larga {
  max-width: 1280px;
}
.ag-sem-todo .linha-menu summary,
.ag-sem-col .linha-menu summary {
  width: 22px;
}

/* Acesso rápido no computador: a mesma barra, flutuando embaixo no meio do conteúdo. */
@media (min-width: 900px) {
  body:has(.barra-inferior) {
    padding-bottom: 88px;
  }

  body:has(.estudo-rodape, .ed-barra-fixa, .treino-descanso) {
    padding-bottom: 0;
  }

  body:has(.estudo-rodape, .ed-barra-fixa, .treino-descanso) .barra-inferior {
    display: none;
  }

  .barra-inferior {
    position: fixed;
    bottom: 14px;
    left: calc((100% + var(--lat-w, 0px) + var(--pl-esq, 0px) - var(--pl-dir, 0px)) / 2);
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 10px 28px -8px rgb(0 0 0 / 0.22);
    transform: translateX(-50%);
    transition: transform 0.3s var(--mola), opacity 0.2s;
  }

  .barra-inferior > a {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1px;
    min-width: 64px;
    padding: 6px 10px;
    border-radius: 12px;
    color: var(--muted);
    font-size: 11px;
    text-decoration: none;
  }

  .barra-inferior > a:hover {
    background: var(--surface-2);
    color: var(--text);
  }

  .barra-inferior > a[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
  }

  .barra-inferior .icone {
    width: 20px;
    height: 20px;
  }

  .barra-inferior-contador {
    position: absolute;
    top: 0;
    left: calc(50% + 6px);
    min-width: 17px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 17px;
  }

  .barra-inferior-novo {
    position: relative;
    margin: 0 6px;
  }

  .barra-inferior-mais {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 6px 14px -6px var(--accent);
    cursor: pointer;
    transition: transform 0.35s var(--mola);
  }

  .barra-inferior-mais:hover,
  .barra-inferior-mais[aria-expanded="true"] {
    transform: rotate(90deg);
  }

  .barra-inferior .menu-novo-lista {
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 16px);
    width: min(400px, calc(100vw - 24px));
    transform: translateX(-50%);
  }

  /* Esconder sozinha: fica uma faixa fina na beira; o mouse ou o Tab trazem a barra de volta. */
  .barra-esconde {
    transform: translate(-50%, calc(100% + 8px));
  }

  .barra-esconde::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    width: 64px;
    height: 4px;
    margin-left: -32px;
    border-radius: 2px;
    background: var(--border-strong);
  }

  /* Área invisível acima da barra escondida, para o mouse achar. */
  .barra-esconde::after {
    content: "";
    position: absolute;
    left: -24px;
    right: -24px;
    bottom: 100%;
    height: 40px;
  }

  .barra-esconde:hover,
  .barra-esconde:focus-within {
    transform: translateX(-50%);
  }

  .barra-esconde:hover::before,
  .barra-esconde:focus-within::before {
    opacity: 0;
  }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .barra-inferior,
  .barra-inferior-mais {
    transition: none;
  }
}

/* Barra lateral: rolagem discreta (linha fina só com o mouse em cima) e as pontas esmaecidas. */
.lat-rolar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  mask-image: linear-gradient(transparent, #000 16px, #000 calc(100% - 16px), transparent);
}

.lat-rolar:hover,
.lat-rolar:focus-within {
  scrollbar-color: var(--border-strong) transparent;
}

/* Tela "Módulos": acesso rápido */
.atalhos {
  max-width: 640px;
  margin-top: 40px;
}

.atalhos h2 {
  margin: 0 0 4px;
}

.atalhos .mod-lista {
  margin-top: 14px;
}

.atalho-acoes {
  display: flex;
  gap: 4px;
}

.atalho-acoes form,
.atalhos-opcoes form {
  margin: 0;
}

.atalhos-rot {
  margin: 16px 0 8px;
  font-weight: 600;
}

.atalhos-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.atalhos-opcoes .botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.atalhos-opcoes .icone {
  width: 16px;
  height: 16px;
}

.atalhos-opcoes .botao:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Avisos (ADR 043): Conta › Avisos e o convite do Início. */
.avisos-ligar { display: grid; gap: 8px; }
.avisos-ligar p { margin: 0; }
.passos-avisos { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; }
.avisos-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.avisos-linha .avisos-campo { width: auto; }
.avisos-chave { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.ini-avisos { display: grid; gap: 10px; margin-block: 16px; border-color: var(--accent); }
.ini-avisos h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; }
.ini-avisos form { justify-self: start; }

/* Barra lateral: o item sendo arrastado para outra posição. */
.lat-arrastando {
  opacity: 0.4;
}

/* Sineta do topo (ADR 043). */
.menu-sineta { position: relative; }
.botao-sineta { position: relative; width: 40px; height: 40px; color: inherit; background: none; border: 0; cursor: pointer; }
.botao-sineta svg { width: 21px; height: 21px; }
.selo-sineta { position: absolute; top: 3px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; border: 2px solid var(--surface); box-sizing: content-box; }
.caixa-sineta { width: min(360px, calc(100vw - 24px)); right: -48px; padding: 0; overflow: hidden; }
.caixa-sineta-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.menu-suspenso .caixa-sineta-topo form { margin: 0; padding: 0; border: 0; }
@media (max-width: 600px) {
  .caixa-sineta { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }
}
.lista-sineta { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 420px); overflow-y: auto; }
.lista-sineta li + li { border-top: 1px solid var(--border); }
.menu-suspenso .lista-sineta a { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 0; font-size: 13px; color: var(--muted); }
.lista-sineta b { display: block; color: var(--text); font-size: 14px; }
.lista-sineta .lido b { font-weight: 500; color: var(--muted); }
.lista-sineta .ponto { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.lista-sineta .lido .ponto { background: transparent; }
.lista-sineta small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.vazio-sineta { padding: 16px 12px; color: var(--muted); font-size: 14px; }
.menu-suspenso .caixa-sineta-pe { text-align: center; border-top: 1px solid var(--border); border-radius: 0; color: var(--accent); font-weight: 600; background: var(--surface-2); }

/* ------------------------------------------------------------------
   Telas em colunas (estilo Fantastical): no computador o módulo ocupa
   a largura toda, com uma coluna de apoio à esquerda (.mc-lado) e,
   quando houver, o detalhe à direita (.mc-direita).
   ------------------------------------------------------------------ */
.mc-centro,
.mc-lado {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.mc-so-largo {
  display: none;
}

@media (min-width: 1100px) {
  main.tela-cheia {
    max-width: none;
    padding: 0;
  }

  .tf.mc {
    max-width: none;
    margin: 0;
    gap: 0;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: stretch;
    min-height: calc(100vh - 61px);
  }

  .tf.mc:has(> .mc-direita) {
    grid-template-columns: 220px minmax(0, 1fr) 340px;
  }

  .mc-lado {
    grid-column: 1;
    grid-row: 1;
    gap: 26px;
    padding: 24px 20px 96px;
    background: var(--regiao-1);
    border-right: 1px solid var(--border);
  }

  .mc-centro {
    grid-column: 2;
    grid-row: 1;
    padding: 28px 32px 40px;
  }

  .mc-direita {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 24px 24px 96px;
    background: var(--regiao-1);
    border-left: 1px solid var(--border);
  }

  .mc-so-largo {
    display: grid;
    gap: 10px;
  }
}

/* Agenda: o mês pequeno e os próximos na coluna da esquerda. */
.ag-mini-topo {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ag-mini-topo h2 {
  flex: 1;
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
}

.ag-mini-topo h2 span {
  color: var(--accent);
}

.ag-mini-topo .botao-icone {
  text-decoration: none;
}

.ag-mini .ag-mes a {
  padding: 5px 0 6px;
  border-radius: 8px;
  font-size: 0.8rem;
}

.ag-mini .ag-pts {
  height: 4px;
}

.ag-mini .ag-pts i {
  width: 4px;
  height: 4px;
}

.ag-prox ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ag-prox li {
  display: flex;
  gap: 10px;
  align-items: stretch;
  padding: 6px;
  border-radius: 9px;
}

.ag-prox li:hover {
  background: var(--surface-2);
}

.ag-prox li > i {
  width: 4px;
  flex: none;
  border-radius: 2px;
}

.ag-prox a {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.ag-prox a > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ag-prox small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
}

@media (min-width: 1100px) {
  .ag .ag-sem {
    min-width: 0;
    grid-template-columns: 48px repeat(7, minmax(0, 1fr));
  }

}

/* Agenda: o título é o período (dia, semana ou mês), sem o ícone da seção. */
.ag .tf-topo h1 {
  font-size: 1.5rem;
}

.ag .tf-topo .titulo-ic {
  display: none;
}

@media (min-width: 1100px) {
  /* Agenda: título, visões e "Novo compromisso" numa linha só; o formulário abre por cima. */
  .ag .mc-centro {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .ag .mc-centro > * {
    grid-column: 1 / -1;
  }

  .ag .mc-centro > .tf-topo {
    grid-column: 1;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
  }

  .ag .tf-topo h1 {
    min-width: 0;
    overflow: hidden;
    font-size: 1.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ag .tf-topo .ag-passos {
    flex: none;
  }

  .ag .mc-centro > .tf-abas {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: auto;
    max-width: none;
  }

  .ag .mc-centro > .pj-novo {
    grid-column: 3;
    grid-row: 1;
    position: relative;
  }

  .ag .pj-novo[open] > summary {
    display: inline-flex;
  }

  .ag .pj-novo > .pj-novo-form {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    width: 380px;
    box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.25);
  }
}

@media (min-width: 1100px) and (max-width: 1399px) {
  /* Sem espaço para o título inteiro: "Novo compromisso" fica só com o "+". */
  .ag .pj-novo > summary span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* Agenda, Mês no computador: cada dia mostra os três primeiros itens. */
.ag-mes-itens {
  display: none;
}

@media (min-width: 1100px) {
  .ag-mes-grande a {
    min-height: 92px;
    align-content: start;
    justify-items: stretch;
    padding: 6px;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
  }

  .ag-mes-grande a.fora {
    background: transparent;
  }

  .ag-mes-grande .ag-pts {
    display: none;
  }

  .ag-mes-itens {
    display: grid;
    gap: 2px;
  }

  .ag-mes-grande a.hoje {
    background: var(--surface);
    color: var(--text);
    font-weight: 400;
  }

  .ag-mes-grande a.sel {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
  }

  .ag-mes-grande .ag-n {
    justify-self: start;
    min-width: 24px;
    padding: 0 4px;
    border-radius: 999px;
    text-align: center;
  }

  .ag-mes-grande a.hoje .ag-n {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
  }

  .ag-mes-itens > span {
    overflow: hidden;
    padding: 1px 5px;
    border-left: 3px solid var(--ag-cor);
    background: var(--ag-fundo, color-mix(in srgb, var(--ag-cor) 13%, var(--surface)));
    color: color-mix(in srgb, var(--ag-cor) 55%, var(--text));
    border-radius: 5px;
    font-size: 0.72rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ag-mes-itens .ag-mais {
    border: 0;
    background: none;
    color: var(--muted);
  }
}

/* Tarefas: as listas na coluna da esquerda e a tarefa escolhida no painel da direita. */
.tf-linha.sel {
  background: var(--accent-soft);
  border-radius: 10px;
}

.tf-detalhe-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tf-detalhe-topo h2 {
  margin: 0;
  font-size: 1.15rem;
}

.tf-detalhe-topo .botao-icone {
  font-size: 22px;
  text-decoration: none;
}

.tf-aba-titulo {
  margin: 0;
  font-size: 1.6rem;
}

/* No celular a tarefa escolhida abre numa folha que sobe de baixo. */
@media (max-width: 1099px) {
  .tf-detalhe {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    gap: 14px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    background: var(--regiao-1);
    box-shadow: 0 -12px 32px rgb(0 0 0 / 0.18);
  }
}

@media (min-width: 1100px) {
  .tf-lado .tf-topo h1 {
    font-size: 1.9rem;
  }

  .tf-lado .tf-abas {
    display: grid;
    gap: 2px;
    padding: 0;
    background: none;
    overflow: visible;
  }

  .tf-lado .tf-abas .pilula {
    display: none;
  }

  .tf-lado .tf-abas a {
    justify-content: space-between;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--text);
  }

  .tf-lado .tf-abas a:hover {
    background: var(--surface-2);
  }

  .tf-lado .tf-abas a[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: none;
  }

  .tf.mc .tf-lista {
    max-width: none;
  }
}

/* Mostrar só no computador (.so-largo) ou só até o tablet (.so-estreito). */
@media (max-width: 1099px) {
  .so-largo {
    display: none !important;
  }

  .hb-lado {
    display: none;
  }
}

@media (min-width: 1100px) {
  .so-estreito {
    display: none !important;
  }
}

/* Hábitos: sem coluna da esquerda; números no alto e o hábito escolhido à direita. */
@media (min-width: 1100px) {
  .tf.mc.sem-lado {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .tf.mc.sem-lado > .mc-centro {
    grid-column: 1;
  }

  .tf.mc.sem-lado > .mc-direita {
    grid-column: 2;
  }

  .hb-cartoes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

.hb-cartoes > div {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.hb-cartoes small {
  color: var(--muted);
  font-size: 0.78rem;
}

.hb-cartoes b {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
}

.hb-grade-nome > a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.hb-grade-nome > a[aria-current="true"],
.hb-nome[aria-current="true"] {
  color: var(--accent);
}

.hb-lado h2 {
  margin: -8px 0 0;
  font-size: 1.5rem;
}

.hb-lado p {
  margin: 0;
}

/* Treinos: no computador a Semana vira um painel em duas colunas. */
.trn-painel,
.trn-col {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

@media (min-width: 1100px) {
  .trn.trn-larga {
    max-width: none;
  }

  .trn-painel {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 18px;
  }

  .trn-larga .trn-abas {
    justify-self: start;
  }
}

@media (min-width: 1100px) {
  .trn-larga .trn-exercicios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    column-gap: 24px;
  }

  .trn-larga .trn-filtros {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    gap: 12px;
    align-items: end;
  }
}

/* ------------------------------------------------------------------
   Tela do projeto (ADR 045): topo com as visões, barra de filtros e o quadro.
   As opções (etiquetas, colunas) ganham .pj-cor-N: uma cor clara de fundo e texto escuro.
   ------------------------------------------------------------------ */
.pj-cor-0 { --pj-c: #8a8380; }
.pj-cor-1 { --pj-c: #2e6fd8; }
.pj-cor-2 { --pj-c: #b7791f; }
.pj-cor-3 { --pj-c: #2f7d5b; }
.pj-cor-4 { --pj-c: #d93a3f; }
.pj-cor-5 { --pj-c: #6a4bc4; }
.pj-cor-6 { --pj-c: #0f8a8a; }
.pj-cor-7 { --pj-c: #c2558c; }

.pjt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100vh - 61px);
}

.pjt-topo {
  display: grid;
  gap: 10px;
  padding: 14px 16px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.pjt-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.pjt-volta {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.pjt-volta:hover { color: var(--accent); }

.pjt-barra { color: var(--border-strong); }

.pjt-ic {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 16px;
}

.pjt-ic .icone { width: 16px; height: 16px; }

/* No topo do projeto, o seletor de ícone fica do tamanho do título. */
.pjt-topo .icone-edicao { margin: 0; }
.pjt-topo .icone-atual { padding: 2px 4px; }
.pjt-topo .icone-atual .emoji-icone { font-size: 22px; }
.pjt-topo .sem-icone > span:not(.so-leitor) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.pjt-topo h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.pj-saude {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.pj-saude-prazo { background: color-mix(in srgb, #2f7d5b 14%, var(--surface)); color: color-mix(in srgb, #2f7d5b 60%, var(--text)); }
.pj-saude-risco { background: color-mix(in srgb, #b7791f 16%, var(--surface)); color: color-mix(in srgb, #b7791f 55%, var(--text)); }
.pj-saude-atrasado { background: color-mix(in srgb, #d93a3f 14%, var(--surface)); color: color-mix(in srgb, #d93a3f 60%, var(--text)); }

.pjt-meta { font-size: 13px; color: var(--muted); }

.pjt-andamento {
  width: 120px;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}

.pjt-andamento i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.pjt-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.pjt-menu,
.pjt-escolha,
.pjt-novo { position: relative; }

.pjt-menu > summary,
.pjt-escolha > summary,
.pjq-novo > summary,
.pjq-mais-coluna > summary,
.pjk-mover > summary { list-style: none; cursor: pointer; }

.pjt-menu > summary::-webkit-details-marker,
.pjt-escolha > summary::-webkit-details-marker,
.pjq-novo > summary::-webkit-details-marker,
.pjq-mais-coluna > summary::-webkit-details-marker,
.pjk-mover > summary::-webkit-details-marker { display: none; }

.pjt-menu-caixa,
.pjt-escolha-caixa,
.pjt-novo > .pj-novo-form {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 10px;
  min-width: 240px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
}

.pjt-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}

.pjt-visoes {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.pjt-visoes a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.pjt-visoes a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.pjt-visoes .icone { width: 16px; height: 16px; }

.pjt-ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  background: var(--regiao-1);
  border-bottom: 1px solid var(--border);
}

.pj-pilula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.pj-pilula-ativa {
  font-weight: 600;
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--surface));
}

.pj-pilula-nova {
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
}

.pj-pilula .icone,
.pjt-escolha .icone { width: 14px; height: 14px; }

.pjt-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--border);
}

.pjt-info,
.pjt-escolha > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  color: var(--muted);
  border-radius: 8px;
}

.pjt-escolha > summary:hover { background: var(--surface-2); }
.pjt-info b,
.pjt-escolha b { color: var(--text); }

.pjt-escolha-caixa {
  right: auto;
  left: 0;
  gap: 2px;
  min-width: 180px;
  max-height: 60vh;
  overflow: auto;
  padding: 6px;
}

.pjt-escolha-caixa a {
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}

.pjt-escolha-caixa a:hover,
.pjt-escolha-caixa a[aria-current="true"] { background: var(--surface-2); }

.pjt-escolha-titulo {
  margin: 6px 10px 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pjt-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 180px;
  max-width: 240px;
  height: 32px;
  margin-left: auto;
  padding: 0 10px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.pjt-busca .icone { width: 14px; height: 14px; flex: none; }

.pjt-busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
}

.pjt-busca:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.pjt-busca input:focus { outline: none; }

.pjt-vazio { padding: 24px 16px; }

/* O quadro: colunas lado a lado que rolam na horizontal; com raias, uma faixa por valor. */
.pjq {
  flex: 1;
  min-height: 0;
  position: relative;
}

.pjq-rolagem {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  overflow-x: auto;
  scroll-snap-type: none;
}

.pjq-colunas {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pjq-raia {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
}

.pjq-coluna {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 272px;
  flex: none;
  padding: 10px;
  background: var(--surface-2);
  border-radius: 12px;
}

.pjq-coluna.col-alvo { outline: 2px dashed var(--accent); outline-offset: -2px; }
.pjq-cancelada { opacity: 0.7; }

.pjq-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 2px 4px 4px;
  font-size: 13px;
  font-weight: 700;
}

.pjq-ponto {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--pj-c, var(--border-strong));
}

.pjq-conta {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.pjq-cartoes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pjq-novo > summary,
.pjq-mais-coluna > summary {
  padding: 6px;
  font-size: 13px;
  border-radius: 8px;
  color: var(--muted);
}

.pjq-novo > summary:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }

.pjq-novo input {
  width: 100%;
  margin-top: 4px;
}

.pjq-mais-coluna {
  width: 200px;
  flex: none;
}

.pjq-mais-coluna > summary {
  padding: 12px;
  font-weight: 600;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
}

.pjq-mais-coluna[open] { width: min(560px, 90vw); }

.pjq-colunas-form {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* O cartão. */
.pjk {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(29 27 27 / 0.04);
}

.pjk:has(.pjk-mover[open]) { z-index: 5; }

.pjk[draggable="true"] { cursor: grab; }
.pjk.col-arrastando { opacity: 0.5; }
.pjk-fechado .pjk-titulo { color: var(--muted); }

.pjk-capa {
  display: block;
  height: 72px;
  margin: -10px -12px 0;
  border-radius: 9px 9px 0 0;
  overflow: hidden;
}

.pjk-capa img,
.pjk-capa svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.pjk-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

.pjk-etiquetas .pj-pilula {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--pj-c) 15%, var(--surface));
  color: color-mix(in srgb, var(--pj-c) 60%, var(--text));
}

.pjk-titulo {
  padding-right: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  text-decoration: none;
}

.pjk-titulo::after { content: ""; position: absolute; inset: 0; } /* o cartão todo abre a página */
.pjk-titulo:hover { color: var(--accent); }

.pjk-depende,
.pjk-rodape {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.pjk-depende .icone,
.pjk-rodape .icone { width: 12px; height: 12px; }

.pjk-data,
.pjk-sub { display: inline-flex; align-items: center; gap: 4px; }

.pjk-atrasado { color: var(--danger); font-weight: 600; }
.pjk-prio { font-weight: 600; }
.pjk-prio-0 { color: var(--danger); }
.pjk-prio-1 { color: #b7791f; }
.pjk-prio-2 { color: var(--muted); font-weight: 500; }

.pjk-quem {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
}

.pjk-mover {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
}

.pjk:has(.pjk-capa) .pjk-mover { top: 80px; }

.pjk-mover > summary {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--muted);
  opacity: 0;
}

.pjk:hover .pjk-mover > summary,
.pjk-mover > summary:focus-visible,
.pjk-mover[open] > summary { opacity: 1; background: var(--surface-2); }

@media (hover: none) {
  .pjk-mover > summary { opacity: 1; }
}

.pjk-mover .icone { width: 16px; height: 16px; }

.pjk-mover .col-mover-lista {
  position: absolute;
  right: 0;
  top: 28px;
  display: grid;
  gap: 2px;
  min-width: 160px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
}

.pjk-mover-titulo {
  margin: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.pjk-mover button {
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  text-align: left;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.pjk-mover button:hover { background: var(--surface-2); }

@media (min-width: 1100px) {
  .pjt-topo { padding: 16px 28px 0; }
  .pjt-topo h1 { font-size: 26px; }
  .pjt-ferramentas { padding: 10px 28px; }
  .pjq-rolagem { padding: 18px 28px; }
}

/* Tabela do projeto: linhas finas, cabeçalho com o símbolo do tipo, células que se editam no lugar. */
.pjtb {
  flex: 1;
  min-height: 0;
  padding: 16px;
}

.pjtb-rolagem {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.pjtb-rolagem:has(details[open]) { overflow: visible; }

.pjtb-tabela {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pjtb-tabela th,
.pjtb-tabela td {
  padding: 0;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, var(--surface));
  border-right: 1px solid color-mix(in srgb, var(--border) 60%, var(--surface));
}

.pjtb-tabela tr > :last-child { border-right: 0; }

.pjtb-tabela thead th {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  background: var(--regiao-1);
}

.pjtb-cab > summary,
.pjtb-cab-fixo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
}

.pjtb-cab > summary { list-style: none; cursor: pointer; }
.pjtb-cab > summary::-webkit-details-marker { display: none; }
.pjtb-cab > summary:hover { color: var(--text); }

.pjtb-simbolo {
  min-width: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: color-mix(in srgb, var(--muted) 75%, var(--surface));
}

.pjtb-mais-col { width: 40px; }

.pjtb-nova > summary {
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
}

.pjtb-pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  gap: 8px;
  width: 300px;
  padding: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: normal;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgb(29 27 27 / 0.28);
}

.pjtb-pop-direita { left: auto; right: 0; }
.pjtb-pop label { font-size: 12px; font-weight: 600; color: var(--muted); }

.pjtb-pop-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.pjtb-tipos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

.pjtb-tipos legend {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.pjtb-tipos label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--regiao-1);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.pjtb-tipos label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.pjtb-tipos label:has(input:focus-visible) { outline: 2px solid var(--accent); }

.pjtb-tipos input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pjtb-opcoes { display: grid; gap: 6px; }

.pjtb-titulo-col { min-width: 240px; }

.pjtb-tabela tbody .pjtb-titulo-col {
  padding: 6px 10px;
  font-weight: 600;
}

.pjtb-tabela tbody .pjtb-titulo-col a {
  color: var(--text);
  text-decoration: none;
}

.pjtb-tabela tbody .pjtb-titulo-col a:hover { color: var(--accent); }

.pjtb-tabela tbody td:not(.pjtb-cel),
.pjtb-tabela tfoot td { padding: 6px 10px; }

.pjtb-grupo th {
  padding: 8px 12px !important;
  background: var(--surface);
}

.pjtb-grupo .pj-pilula {
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--pj-c, var(--muted)) 15%, var(--surface));
  color: color-mix(in srgb, var(--pj-c, var(--muted)) 60%, var(--text));
}

.pjtb-cel form { display: flex; align-items: center; min-height: 36px; }

.pjtb-cel input:not([type="checkbox"]),
.pjtb-cel select {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.pjtb-cel input:hover,
.pjtb-cel select:hover { background: var(--regiao-1); }

.pjtb-cel input:focus,
.pjtb-cel select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--surface);
}

.pjtb-cel input[type="checkbox"] { margin: 0 10px; }
.pjtb-cel .reg-numero { display: flex; align-items: center; width: 100%; }
.pjtb-num,
.pjtb-num input { text-align: right; font-variant-numeric: tabular-nums; }

.pjtb-valor { display: flex; width: 100%; }

.pjtb-pilula select {
  width: auto;
  margin: 0 8px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  appearance: none;
  background: color-mix(in srgb, var(--pj-c) 15%, var(--surface));
  color: color-mix(in srgb, var(--pj-c) 60%, var(--text));
}

.pjtb-periodo {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--muted);
}

.pjtb-periodo input { width: 116px !important; padding: 6px 4px !important; }
.pjtb-atrasado input:last-child { color: var(--danger); font-weight: 600; }

.pjtb-multi { position: relative; width: 100%; }

.pjtb-multi > summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px;
  list-style: none;
  cursor: pointer;
}

.pjtb-multi > summary::-webkit-details-marker { display: none; }

.pjtb-multi .pj-pilula,
.pjtb-tabela .pjtb-multi .pj-pilula {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--pj-c) 15%, var(--surface));
  color: color-mix(in srgb, var(--pj-c) 60%, var(--text));
}

.pjtb-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.pjtb-sub-barra {
  flex: 1;
  height: 5px;
  min-width: 40px;
  border-radius: 9px;
  background: var(--surface-2);
  overflow: hidden;
}

.pjtb-sub-barra i { display: block; height: 100%; background: #2f7d5b; }

.pjtb-fechada .pjtb-titulo-col a { color: var(--muted); }

.pjtb-tabela tfoot td {
  font-size: 12px;
  color: var(--muted);
  background: var(--regiao-1);
  border-bottom: 0;
}

.pjtb-tabela tfoot .pjtb-num { color: var(--text); font-weight: 600; }

.pjtb-nova-linha input {
  width: 100%;
  padding: 4px 0;
  font: inherit;
  background: transparent;
  border: 0;
}

@media (min-width: 1100px) {
  .pjtb { padding: 18px 28px; }
}

.pjtb-cel input::placeholder { color: transparent; }
.pjtb-cel input:focus::placeholder { color: var(--muted); }
.pjtb-cel input[type="date"][value=""]:not(:focus) { color: transparent; }
.pjtb-cel input[type="date"][value=""]:not(:focus)::-webkit-calendar-picker-indicator { opacity: 0.3; }
.pjtb-cel:has(.pjtb-multi) { min-width: 170px; }
.pjtb-tabela td.pjtb-cel { min-width: 110px; }
.pjtb-titulo-col {
  position: sticky;
  left: 0;
  z-index: 1;
  max-width: 280px;
  background: var(--surface);
}
.pjtb-tabela thead .pjtb-titulo-col { background: var(--regiao-1); }
.pjtb-cel .reg-numero > .muted { display: none; }
.pjtb-tabela tfoot td { white-space: nowrap; }

/* Roadmap do projeto: lista à esquerda e linha do tempo que rola na horizontal. */
.pjt-escala {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  padding: 3px;
  background: var(--surface-2);
  border-radius: 9px;
}

.pjt-escala a {
  padding: 3px 10px;
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
}

.pjt-escala a[aria-current="true"] {
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.pjt-escala + .pjt-hoje + .pjt-busca { margin-left: 0; }

.pjt-hoje {
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
}

.pjr {
  --pjr-linha: 36px;
  display: grid;
  grid-template-columns: minmax(150px, 40%) minmax(0, 1fr);
  margin: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.pjr-cab {
  height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.pjr-lista {
  min-width: 0;
  border-right: 1px solid var(--border);
}

.pjr-lista ul { margin: 0; padding: 0; list-style: none; }

.pjr-lista li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--pjr-linha);
  box-sizing: border-box;
  padding: 0 16px 0 30px;
  font-size: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, var(--surface));
}

.pjr-lista a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

.pjr-lista a:hover { color: var(--accent); }

.pjr-lista .pjr-grupo {
  justify-content: space-between;
  padding-left: 16px;
  font-weight: 700;
  background: var(--regiao-1);
}

.pjr-item-marco { padding-left: 14px !important; }
.pjr-item-marco a { font-weight: 600; }

.pjr-losango { width: 12px; height: 12px; flex: none; fill: var(--text); }

.pjr-lista .pjr-vazio { height: auto; padding: 16px; white-space: normal; }

.pjr-tempo {
  min-width: 0;
  overflow-x: auto;
}

.pjr-trilho { position: relative; }

.pjr-marcas {
  position: relative;
  padding: 0;
}

.pjr-marcas span {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 6px;
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  border-left: 1px solid color-mix(in srgb, var(--border) 60%, var(--surface));
}

.pjr-marcas b { min-height: 1em; font-size: 10px; font-weight: 700; color: var(--text); }
.pjr-marca-hoje { color: var(--accent); }

.pjr-corpo {
  position: relative;
  height: var(--pjr-altura);
  min-height: 120px;
}

.pjr-grade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--border) 60%, var(--surface));
}

.pjr-faixa-grupo {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--pjr-linha);
  background: color-mix(in srgb, var(--regiao-1) 70%, transparent);
}

.pjr-barra {
  position: absolute;
  height: 24px;
  margin-top: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 7px;
  background: color-mix(in srgb, var(--pj-c) 15%, var(--surface));
  color: color-mix(in srgb, var(--pj-c) 60%, var(--text));
  border: 1px solid color-mix(in srgb, var(--pj-c) 30%, var(--surface));
}

.pjr-barra:hover { border-color: var(--pj-c); }

.pjr-barra i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--pj-c);
  opacity: 0.22;
}

.pjr-barra span {
  position: relative;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pjr-marco {
  position: absolute;
  margin-top: 10px;
  transform: translateX(-8px);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  text-decoration: none;
}

.pjr-marco .pjr-losango { width: 16px; height: 16px; }

.pjr-setas {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: #8a8380;
  stroke-width: 1.5;
}

.pjr-setas marker path { fill: #8a8380; stroke: none; }
.pjr-setas .pjr-seta-conflito { stroke: var(--danger); stroke-dasharray: 4 3; }

.pjr-hoje {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  pointer-events: none;
}

.pjr-hoje b {
  position: absolute;
  top: 2px;
  left: -18px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 5px;
}

.pjr-sem-data {
  margin: 0 16px 16px;
  font-size: 13px;
}

.pjr-sem-data summary { cursor: pointer; color: var(--muted); }
.pjr-sem-data ul { margin: 8px 0 0; padding-left: 18px; }

@media (min-width: 1100px) {
  .pjr { margin: 18px 28px; grid-template-columns: 300px minmax(0, 1fr); }
  .pjr-sem-data { margin: 0 28px 18px; }
}
.pjr-curta { overflow: visible; }
.pjr-curta span {
  position: absolute;
  left: 100%;
  padding-left: 8px;
  color: var(--text);
  font-weight: 500;
}

/* Calendário do projeto: mês em semanas com barras de várias datas e a bandeja "Sem data". */
.pjc {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.pjc-mes { display: grid; gap: 10px; min-width: 0; }

.pjc-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pjc-nav h2 {
  margin: 0 6px 0 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}

.pjc-nav .botao { padding: 4px 12px; font-weight: 600; }
.pjc-seta { width: 32px; padding: 4px 0 !important; text-align: center; }
.pjc-dica { margin: 0 0 0 auto; font-size: 12px; }

.pjc-semana-nomes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
}

.pjc-semana-nomes span { padding: 0 8px; }

.pjc-grade {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.pjc-semana {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 30px repeat(var(--pjc-faixas), 24px);
  row-gap: 3px;
  min-height: 104px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, var(--surface));
}

.pjc-semana:last-child { border-bottom: 0; }

.pjc-dia {
  grid-row: 1 / -1;
  min-height: 100%;
  padding: 6px 8px 0;
  border-left: 1px solid color-mix(in srgb, var(--border) 60%, var(--surface));
}

.pjc-dia:first-child { border-left: 0; }
.pjc-dia:nth-child(n + 6) { background: var(--regiao-1); }
.pjc-alvo { background: var(--accent-soft) !important; }

.pjc-num {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}

.pjc-fora .pjc-num { color: color-mix(in srgb, var(--muted) 70%, var(--surface)); }
.pjc-hoje .pjc-num { color: var(--on-accent); background: var(--accent); }

.pjc-barra {
  position: relative;
  z-index: 1;
  margin: 0 4px;
  padding: 3px 8px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  border-radius: 6px;
  border-left: 3px solid var(--pj-c);
  background: color-mix(in srgb, var(--pj-c) 15%, var(--surface));
  color: color-mix(in srgb, var(--pj-c) 60%, var(--text));
}

.pjc-barra[draggable="true"] { cursor: grab; }
.pjc-antes { margin-left: 0; border-left: 0; border-radius: 0 6px 6px 0; }
.pjc-depois { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }

.pjc-sem-data {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  background: var(--regiao-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.pjc-sem-data h2 { margin: 0; font-size: 13px; font-weight: 700; }
.pjc-sem-data p { margin: 0; font-size: 12px; }
.pjc-sem-data ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.pjc-solta {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.pjc-solta[draggable="true"] { cursor: grab; }
.pjc-solta a { font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }

@media (min-width: 1100px) {
  .pjc {
    grid-template-columns: minmax(0, 1fr) 260px;
    padding: 18px 28px;
  }
}
.pjc-sem-data li.muted { font-size: 13px; }

/* Painel do cartão: abre à direita, por cima da visão. */
.pjp {
  position: fixed;
  z-index: 60;
  inset: 0 0 0 auto;
  width: min(560px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 48px -24px rgb(29 27 27 / 0.25);
}

.pjp-topo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 10px 20px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, var(--surface));
}

.pjp-caminho { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pjp-abrir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 8px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-radius: 7px;
}

.pjp-abrir:hover { background: var(--surface-2); }
.pjp-abrir .icone { width: 15px; height: 15px; }

.pjp-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 20px 28px;
}

.pjp-corpo h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
}

.pjp-corpo h2:focus { outline: none; }

.pjp-props {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  row-gap: 2px;
  align-items: center;
  margin: 0;
  font-size: 13px;
}

.pjp-props dt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--muted);
}

.pjp-props dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  margin: 0;
  border-radius: 7px;
}

.pjp-props dd form { flex: 1; min-width: 0; min-height: 32px; }
.pjp-num input { text-align: left !important; }
.pjp-faltam { padding-right: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }

.pjp-libera { padding: 6px 10px; }

.pjp-libera a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pjp-secao {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, var(--surface));
}

.pjp-secao-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.pjp-secao h3 { margin: 0; font-size: 14px; }

.pjp-subtarefas {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.pjp-subtarefas li { display: flex; align-items: center; gap: 10px; padding: 3px 2px; }

.pjp-marca {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: #fff;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  cursor: pointer;
}

.pjp-marca .icone { width: 13px; height: 13px; }
.pjp-feita { background: #2f7d5b; border-color: #2f7d5b; }
.pjp-riscada { color: var(--muted); text-decoration: line-through; }

.pjp-nova input {
  width: 100%;
  padding: 5px 2px;
  font: inherit;
  font-size: 14px;
  background: transparent;
  border: 0;
}

.pjp-notas { gap: 10px; font-size: 14px; line-height: 1.55; }
.pjp-notas p { margin: 0; }

.pjp-destaque {
  padding: 10px 12px;
  border-radius: 8px;
  color: color-mix(in srgb, #b7791f 55%, var(--text));
  background: color-mix(in srgb, #b7791f 14%, var(--surface));
}

.pjp-anotar { display: grid; gap: 6px; justify-items: end; }
.pjp-anotar textarea { width: 100%; font: inherit; font-size: 14px; }
.pjp-anotar .ed-visual { justify-self: stretch; }
.pjp-anotar .ed-area .ProseMirror { min-height: 64px; font-size: 15px; }

.pjp-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 10px 28px;
  font-size: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, var(--surface));
}

.pjp-atalho { margin-left: auto; }

/* Lista de projetos: resumo, tabela com saúde e andamento, linha do tempo. */
.pjm { display: flex; flex-direction: column; min-width: 0; }

.pjm-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.pjm-topo h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.pjm-abas {
  display: flex;
  gap: 2px;
  padding: 3px;
  overflow-x: auto;
  background: var(--surface-2);
  border-radius: 10px;
}

.pjm-abas a {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
}

.pjm-abas a span { font-weight: 500; color: var(--muted); }

.pjm-abas a[aria-current="page"] {
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.pjm-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  justify-content: flex-end;
  min-width: 0;
}

.pjm-acoes .pjt-busca { margin-left: 0; height: 36px; min-width: 0; }

.pjm-corpo {
  display: grid;
  gap: 22px;
  padding: 18px 16px 96px;
}

.pjm-resumo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pjm-resumo > div {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.pjm-resumo span { font-size: 12px; font-weight: 600; color: var(--muted); }
.pjm-resumo b { font-size: 24px; font-weight: 700; }
.pjm-resumo small { font-size: 12px; color: var(--muted); }
.pjm-alerta b { color: var(--danger); }
.pjm-bom b { color: #2f7d5b; }

.pjm-tabela,
.pjm-tempo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.pjm-tabela ul { margin: 0; padding: 0; list-style: none; }

.pjm-cab { display: none; }

.pjm-linha {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "nome menu"
    "andamento andamento"
    "detalhes detalhes";
  gap: 8px 12px;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, var(--surface));
}

.pjm-linha:last-child { border-bottom: 0; }

.pjm-nome {
  grid-area: nome;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.pjm-nome::after { content: ""; position: absolute; inset: 0; }
.pjm-nome > span:last-child { display: grid; min-width: 0; }
.pjm-nome b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pjm-nome small { font-size: 12px; color: var(--muted); }
.pjm-nome:hover b { color: var(--accent); }

.pjm-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  font-weight: 700;
  color: #fff;
  background: var(--pj-c);
  border-radius: 9px;
}

.pjm-linha .menu-linha,
.pjm-linha > details { grid-area: menu; position: relative; z-index: 1; }

.pjm-saude { grid-area: detalhes; justify-self: start; }

.pjm-andamento {
  grid-area: andamento;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pjm-andamento .pjt-andamento { flex: 1; width: auto; }
.pjm-andamento .pjt-andamento i { background: var(--pj-c); }
.pjm-andamento b { width: 38px; font-size: 12px; text-align: right; }

.pjm-proximo,
.pjm-prazo,
.pjm-abertas { display: none; font-size: 13px; }

.pjm-proximo { align-items: center; gap: 8px; min-width: 0; }
.pjm-proximo .pjr-losango { fill: var(--pj-c); }
.pjm-proximo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pjm-abertas { color: var(--muted); }

.pjm-tempo { display: grid; gap: 10px; padding: 16px 18px; overflow-x: auto; }

.pjm-tempo-topo { display: flex; align-items: baseline; gap: 10px; }
.pjm-tempo-topo h2 { margin: 0; font-size: 15px; font-weight: 700; }
.pjm-tempo-topo span { font-size: 12px; }

.pjm-tempo-meses {
  display: grid;
  min-width: 480px;
  margin-left: 140px;
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--surface-2);
}

.pjm-faixas {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 620px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pjm-faixas::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: calc(140px + (100% - 140px) * var(--hoje) / 100);
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.pjm-faixas li {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  height: 28px;
}

.pjm-faixas a {
  overflow: hidden;
  padding-right: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pjm-faixa { position: relative; height: 28px; }

.pjm-barra {
  position: absolute;
  top: 2px;
  height: 24px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: color-mix(in srgb, var(--pj-c) 15%, var(--surface));
  color: color-mix(in srgb, var(--pj-c) 60%, var(--text));
}

.pjm-barra i { position: absolute; inset: 0 auto 0 0; background: var(--pj-c); opacity: 0.18; }
.pjm-barra span { position: relative; padding: 0 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }

@media (min-width: 900px) {
  .pjm-resumo { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .pjm-cab,
  .pjm-linha {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) 120px minmax(0, 1.4fr) minmax(0, 1.6fr) 110px 150px 32px;
    grid-template-areas: none;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
  }

  .pjm-cab {
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 1px solid var(--surface-2);
  }

  .pjm-linha > * { grid-area: auto !important; }
  .pjm-proximo,
  .pjm-prazo,
  .pjm-abertas { display: flex; }
  .pjm-prazo,
  .pjm-abertas { display: block; }
  .pjm-faixas li,
  .pjm-faixas { --nome: 200px; }
  .pjm-faixas li { grid-template-columns: 200px minmax(0, 1fr); }
  .pjm-faixas::after { left: calc(200px + (100% - 200px) * var(--hoje) / 100); }
  .pjm-tempo-meses { margin-left: 200px; }
}

@media (min-width: 1100px) {
  .pjm-topo { padding: 18px 28px; }
  .pjm-corpo { padding: 24px 28px 40px; }
}
.pjm-acoes summary { white-space: nowrap; }
.pjp-abrir { white-space: nowrap; }
@media (max-width: 899px) {
  .pjc-dica { display: none; }
  .pjr { grid-template-columns: 130px minmax(0, 1fr); }
  .pjr-lista li { padding-left: 12px; }
}

/* Campo de várias páginas (depende de): links e o lápis para editar. */
.pjtb-paginas { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding-left: 10px; }
.pjtb-paginas > a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.pjtb-paginas > .pjtb-multi { width: auto; position: static; }
.pjtb-paginas > .pjtb-multi > summary { padding: 6px 4px; color: var(--muted); }
.pjtb-paginas > .pjtb-multi > summary .icone { width: 14px; height: 14px; }

/* Apagar subtarefa: o × aparece ao passar o mouse (sempre no toque). */
.pjp-tirar { margin-left: auto; }
.pjp-tirar .botao-icone { width: 26px; height: 26px; opacity: 0; }
.pjp-subtarefas li:hover .pjp-tirar .botao-icone,
.pjp-tirar .botao-icone:focus-visible { opacity: 1; }
@media (hover: none) { .pjp-tirar .botao-icone { opacity: .7; } }
.pjp-desfazer { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

/* Conta › Avisos: a lista de aparelhos. */
.avisos-aparelhos { display: grid; margin: 0; padding: 0; list-style: none; }
.avisos-aparelhos li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.avisos-aparelhos li:last-child { border-bottom: none; }
.avisos-aparelhos small { display: block; font-size: 12px; }

/* Tarefas: deslizar no celular (direita feita, esquerda amanhã) e arrastar entre dias. */
#tf-corpo [data-mudar] {
  touch-action: pan-y;
}
.tf-linha.tf-desliza-feita {
  box-shadow: inset 4px 0 0 var(--accent);
}
.tf-linha.tf-desliza-amanha {
  box-shadow: inset -4px 0 0 var(--muted);
}
.tf-dia [draggable="true"] {
  cursor: grab;
}
.tf-dia.solta {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Agenda: clicar num horário vazio cria ali (o dia e a hora escolhidos aparecem no formulário). */
.ag-sem-col,
.ag-regua {
  cursor: copy;
}
.ag-novo-quando {
  margin: 4px 0 0;
  font-weight: 600;
  color: var(--accent);
}

/* Lançamento rápido no "+": uma linha que vira o registro certo, com prévia e recentes. */
.lancar {
  display: grid;
  gap: 8px;
  padding: 4px 4px 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.lancar-campo {
  display: flex;
  gap: 6px;
}
.lancar-campo input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  padding: 9px 12px;
  font: inherit;
  background: var(--bg);
  color: var(--text);
}
.lancar-campo .botao {
  flex: none;
}
.lancar-previa:empty {
  display: none;
}
.lancar-previa {
  display: grid;
  gap: 6px;
  font-size: 0.86rem;
}
.lancar-previa p {
  margin: 0;
}
.lancar-para {
  color: var(--muted);
}
.lancar-para b {
  color: var(--text);
}
.lancar-campos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.lancar-campos li {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 8px;
  background: var(--surface);
}
.lancar-campos small,
.lancar-recentes small,
.lancar-nota {
  color: var(--muted);
}
.lancar-campos small {
  margin-right: 3px;
}
.lancar-nota {
  font-size: 0.8rem;
}
.lancar-nota.falta {
  color: var(--danger);
}
.lancar-outros {
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.lancar-chip {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: 999px;
  padding: 1px 9px;
  cursor: pointer;
}
.lancar-secao {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.lancar-recentes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* texto longo encurta em vez de empurrar "Repetir" */
  gap: 4px;
}
.lancar-recentes li {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.lancar-recentes span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lancar-recentes small {
  margin-left: 6px;
}
.lancar-recentes button {
  flex: none;
}
.lancar-tela {
  max-width: 640px;
  display: grid;
  gap: 14px;
}
.lancar-tela .lancar {
  border-bottom: 0;
}
.lancar-siri ol {
  display: grid;
  gap: 6px;
  padding-left: 1.2em;
}
.lancar-url {
  display: block;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
  user-select: all;
}

/* ---------------------------------------------------------- Livros e PDFs (M11, ADR 048) */
.livro {
  display: grid;
  gap: 16px;
  max-width: 720px;
}
.livro-form {
  display: grid;
  gap: 14px;
}
.livro-sumario {
  list-style: none;
  margin: 0;
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.livro-sumario li {
  border-bottom: 1px solid var(--border);
}
.livro-sumario li:last-child {
  border-bottom: none;
}
.livro-sumario label {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
}
.livro-sumario label span {
  flex: 1;
  min-width: 0;
}
.livro-sumario .livro-secao label {
  padding-left: 24px;
  font-size: 14px;
}
.livro-form fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
.livro-form legend {
  margin-bottom: 6px;
  font-weight: 600;
}

/* ---------------------------------------------------------- Cronômetro e pomodoro (ADR 049) */
.cr {
  display: grid;
  gap: 16px;
  max-width: 560px;
}
.cr-painel {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 20px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.cr-painel.pj-novo-form {
  justify-items: stretch;
}
.cr-relogio {
  position: relative;
  display: grid;
  place-items: center;
  width: 200px;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-2) 0);
}
.cr-relogio.pausa {
  background: conic-gradient(var(--done-fg) calc(var(--p) * 1%), var(--surface-2) 0);
}
.cr-relogio::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--surface);
}
.cr-relogio > div {
  position: relative;
  display: grid;
  justify-items: center;
}
.cr-relogio b {
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
}
.cr-relogio small {
  color: var(--muted);
}
.cr-botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.cr-parar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cr-ajustes {
  display: grid;
  gap: 10px;
}
.cr-faixa {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  padding: 6px 8px 6px 12px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
}
.cr-faixa a {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}
.cr-faixa a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-faixa a b {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.cr-faixa .botao-icone {
  border-color: transparent;
  background: transparent;
  color: inherit;
}
.cr-faixa small {
  font-weight: 500;
  opacity: 0.85;
}
.hb-play.rodando {
  background: var(--accent);
  color: var(--on-accent);
}
.hb-play.rodando::before {
  display: none;
}

/* Início personalizável (ADR 050): widgets em colunas que a pessoa arruma; no celular, uma lista
   com a ordem dela e widgets pequenos em meia largura. */
main.ini-tela {
  max-width: none;
  padding-inline: clamp(16px, 2.4vw, 32px);
}

.ini-quadro {
  position: relative;
  display: grid;
  gap: 16px;
  align-items: start;
}

.ini-col {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
  min-height: 60px;
  border-radius: 14px;
}

.ini-col-cel,
.ini-w-ed {
  display: none;
}

.ini-w {
  position: relative;
}

.ini-personalizar {
  align-self: flex-end;
}

.ini-personalizar .icone,
.ini-edicao .icone {
  width: 16px;
  height: 16px;
}

/* modo de edição */
.ini-edicao {
  position: sticky;
  top: 8px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.08);
  font-size: 14px;
}

.ini-edicao[hidden] {
  display: none;
}

.ini-edicao-t,
.ini-edicao-grupo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.ini-edicao-grupo {
  font-weight: 500;
  color: var(--muted);
}

.ini-edicao-esp {
  flex: 1;
}

.ini-edicao form {
  margin: 0;
}

.ini-passo {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

.ini-passo button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.ini-passo b {
  min-width: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ini-incluir {
  position: relative;
}

.ini-incluir summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
}

.ini-incluir summary::-webkit-details-marker {
  display: none;
}

.ini-incluir-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: min(380px, calc(100vw - 32px));
  max-height: 60vh;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 36px rgb(0 0 0 / 0.16);
}

.ini-incluir-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 9px;
}

.ini-incluir-item:hover {
  background: var(--surface-2);
}

.ini-incluir-item .ini-linha-t small {
  white-space: normal;
}

.ini-editando .ini-col {
  outline: 1.5px dashed var(--border-strong);
  outline-offset: 6px;
}

@media (min-width: 900px) {
  .ini-editando .ini-col:empty::after {
    content: "";
    display: block;
    min-height: 120px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 50%, transparent);
  }
}

.ini-editando .ini-w-ed {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.ini-w-ed button {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.ini-w-ed button:hover,
.ini-w-ed button[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--border-strong);
}

.ini-w-ed .icone {
  width: 16px;
  height: 16px;
}

.ini-w-alca {
  cursor: grab;
  touch-action: none;
}

.ini-editando .ini-w {
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.07);
}

/* editando, o conteúdo não navega nem marca nada: só os controles respondem */
.ini-editando .ini-w > :not(.ini-w-ed) {
  pointer-events: none;
  user-select: none;
}

.ini-editando .ini-painel-mais {
  visibility: hidden;
}

.ini-editando .ini-painel-t {
  padding-right: 84px;
}

.ini-w-fantasma {
  opacity: 0.35;
}

.ini-w-pego {
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.18);
}

.ini-divisoria {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 16px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: col-resize;
  touch-action: none;
  z-index: 5;
}

.ini-divisoria::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.25;
}

.ini-divisoria::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 3px;
  width: 10px;
  height: 40px;
  border-radius: 6px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg);
}

.ini-divisoria:hover::before,
.ini-divisoria:focus-visible::before {
  opacity: 0.9;
}

.ini-dica-largura {
  position: absolute;
  top: 0;
  z-index: 21;
  transform: translate(-50%, -50%);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* widgets novos */
/* a cor do tipo só tinge (o .ag-c-* da Agenda pinta o fundo inteiro) */
.ini-agenda .ini-linha {
  grid-template-columns: 44px minmax(0, 1fr);
  margin-bottom: 4px;
  border-left: 3px solid var(--ag-cor, var(--accent));
  padding-left: 10px;
  background: color-mix(in srgb, var(--ag-cor, var(--accent)) 8%, transparent);
}

.ini-agenda .ini-linha:hover {
  background: color-mix(in srgb, var(--ag-cor, var(--accent)) 16%, transparent);
}

.ini-agenda-hora {
  width: 44px;
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ini-mes {
  width: calc(100% - 28px);
  margin: 0 14px 14px;
  border-collapse: collapse;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ini-mes th {
  padding-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.ini-mes td {
  padding: 2px 0;
}

.ini-mes td.fora {
  color: var(--muted);
  opacity: 0.5;
}

.ini-mes span:not(.so-leitor) {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.ini-mes .tem {
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 6px;
}

.ini-mes .hoje {
  background: var(--acc2);
  color: #fff;
  font-weight: 700;
}

.ini-treino,
.ini-financas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 14px;
}

.ini-treino b,
.ini-treino small,
.ini-financas small {
  display: block;
}

.ini-treino b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
}

.ini-financas {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}

.ini-financas b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}

.ini-financas-pagar {
  color: var(--acc2-texto);
}

.ini-lancar {
  padding: 0 14px 14px;
}

.ini-so-cel {
  display: none;
}

@media (max-width: 899px) {
  .ini-so-pc {
    display: none;
  }

  .ini-so-cel {
    display: block;
  }

  .ini-quadro {
    grid-template-columns: 1fr 1fr !important; /* as larguras são do computador */
    gap: 12px;
  }

  .ini-col,
  .ini-col-cel {
    display: contents;
  }

  .ini-w {
    grid-column: 1 / -1;
    order: var(--ordem-cel);
  }

  .ini-w[data-meia] {
    grid-column: auto;
  }

  .ini-w[data-meia] .ini-painel-mais {
    display: none;
  }

  .ini-incluir-lista {
    position: fixed;
    top: auto;
    right: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    width: auto;
  }

  .ini-w:not([data-cel]) {
    display: none;
  }

  .ini-cel-lista {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ini-editando .ini-cel-lista .ini-w {
    animation: ini-tremer 0.5s ease-in-out infinite alternate;
  }

  .ini-editando .ini-cel-lista .ini-w:nth-child(2n) {
    animation-delay: -0.25s;
  }

  .ini-editando .ini-w-alca {
    display: none;
  }

  .ini-edicao {
    top: 4px;
  }
}

@media (min-width: 900px) {
  .ini-w-meia {
    display: none !important;
  }
}

@keyframes ini-tremer {
  from {
    transform: rotate(-0.3deg);
  }
  to {
    transform: rotate(0.3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ini-editando .ini-cel-lista .ini-w {
    animation: none;
  }
}

.ini-personalizar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ini-personalizar[hidden] {
  display: none;
}

/* Fundo do Início (ADR 050): o do tema escuro é opcional e, sem ele, vale o do claro. Os widgets
   viram vidro fosco com a transparência escolhida. */
.ini {
  --ini-fundo: var(--ini-fundo-claro, none);
  --ini-texto: var(--ini-texto-claro);
  --ini-alfa: var(--ini-alfa-claro, 0);
}

:root[data-tema="escuro"] .ini {
  --ini-fundo: var(--ini-fundo-escuro, var(--ini-fundo-claro, none));
  --ini-texto: var(--ini-texto-escuro, var(--ini-texto-claro));
  --ini-alfa: var(--ini-alfa-escuro, 0);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ini {
    --ini-fundo: var(--ini-fundo-escuro, var(--ini-fundo-claro, none));
    --ini-texto: var(--ini-texto-escuro, var(--ini-texto-claro));
    --ini-alfa: var(--ini-alfa-escuro, 0);
  }
}

.ini-fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--ini-fundo) center / cover no-repeat;
}

:root[data-tema="escuro"] .ini-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ini-fundo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.25);
  }
}

.ini-com-fundo .ini-saud,
.ini-com-fundo .ini-saud .muted,
.ini-com-fundo .ini-saud-data,
.ini-com-fundo .ini-saud h1 em,
.ini-com-fundo .ini-fundo-credito,
.ini-com-fundo .ini-fundo-credito a {
  color: var(--ini-texto, inherit);
}

.ini-com-fundo .ini-saud h1,
.ini-com-fundo .ini-saud p {
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}

.ini-com-fundo .ini-painel,
.ini-com-fundo .ini-chip,
.ini-com-fundo .ini-personalizar {
  background: color-mix(in srgb, var(--surface) calc(100% - var(--ini-alfa) * 1%), transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.ini-fundo-credito {
  margin: 0;
  justify-self: end;
  font-size: 12px;
}

.ini-fundo-opcoes .ini-incluir-lista {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.ini-fundo-opcoes form {
  margin: 0;
}

.ini-fundo-galeria {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.ini-fundo-galeria button {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.ini-transparencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.ini-transparencia label {
  flex-basis: 100%;
  font-weight: 600;
}

.ini-transparencia input {
  flex: 1;
  accent-color: var(--accent);
}

.ini-transparencia output {
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
}

.ini-fundo-envio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ini-fundo-envio label {
  flex-basis: 100%;
}

.ini-fundo-envio input {
  flex: 1;
  min-width: 0;
}

.ini-fundo-tema {
  display: grid;
  gap: 12px;
}

.ini-fundo-tema summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
}

.ini-fundo-tema summary .icone {
  width: 15px;
  height: 15px;
}

.ini-fundo-dica {
  margin: 0;
  font-size: 13px;
}

.ini-fundo-sugestao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.ini-fundo-sugestao small {
  display: block;
  font-size: 12px;
}

.ini-fundo-sugestao-fotos {
  display: flex;
  gap: 4px;
}

.ini-fundo-sugestao-fotos i {
  width: 44px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: center / cover no-repeat;
}

.ini-fundo-mini-claro {
  background-image: url("../img/fundos/claro.8904d1370824.jpg");
}

.ini-fundo-mini-escuro {
  background-image: url("../img/fundos/escuro.b9f7d6295892.jpg");
}