/* ==========================================================================
   e-PRAM — sistema de design
   Folha única, escrita à mão, sem build. Primeiro o celular, depois o desktop.
   Ordem: 1 fontes · 2 tokens · 3 base · 4 layout · 5 componentes · 6 utilitários
   Documentação: docs/arquitetura.md, seção "Design". Vitrine: /estilo/
   ========================================================================== */

/* 1. Fontes (OFL, servidas de static/fonts) ------------------------------- */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/eb-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-next-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/atkinson-hyperlegible-next-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/atkinson-hyperlegible-mono-latin-600-normal.woff2") format("woff2"); }

/* 2. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Cor: papel frio, tinta azul de Genebra, lacre só para assinatura. */
  --cor-papel: #eef1f0;            /* fundo da página */
  --cor-superficie: #ffffff;       /* cartões, tabelas, modal */
  --cor-superficie-2: #e4e9e8;     /* faixas, cabeçalhos de tabela, hover */
  --cor-texto: #1b242c;
  --cor-texto-suave: #4f5b65;      /* AA sobre papel e superfície */
  --cor-regua: #c9d1d0;            /* bordas e fios */
  --cor-regua-forte: #8f9c9e;

  --cor-tinta: #1f4a62;            /* primária: links, botões, títulos */
  --cor-tinta-forte: #163649;      /* hover / cabeçalho do sistema */
  --cor-tinta-fundo: #e1ebf0;
  --cor-sobre-tinta: #ffffff;
  --cor-topo: #14303f;             /* barra superior */
  --cor-topo-texto: #f1f5f6;
  --cor-topo-suave: #b6c8d1;

  --cor-lacre: #8b1e2d;            /* EXCLUSIVA de assinatura e validação */
  --cor-lacre-fundo: #f6e6e8;
  --cor-sobre-lacre: #ffffff;

  --cor-sucesso: #2c6544;  --cor-sucesso-fundo: #e2efe6;
  --cor-atencao: #7f5300;  --cor-atencao-fundo: #f8edd5;
  --cor-erro: #a5281c;     --cor-erro-fundo: #f8e5e1;
  --cor-info: #1f4a62;     --cor-info-fundo: #e1ebf0;
  --cor-colegiado: #533d7d; --cor-colegiado-fundo: #ece7f4;  /* Comissão Executiva, em pauta */
  --cor-neutra: #5a646c;   --cor-neutra-fundo: #e6eaeb;

  --cor-postit: #fbf3c8;   --cor-postit-borda: #e2cf6c;  --cor-postit-texto: #4a3f06;
  --cor-foco: #c98a0b;

  /* Tipografia */
  --fonte-titulo: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --fonte-texto: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-xs: .8125rem;   /* 13px: rubricas, metadados */
  --t-sm: .9375rem;   /* 15px: texto secundário, tabelas */
  --t-base: 1.0625rem;/* 17px: corpo */
  --t-lg: 1.25rem;    /* 20px */
  --t-xl: 1.5rem;     /* 24px: título de cartão */
  --t-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);  /* título de página */
  --t-3xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);         /* apresentação */
  --entrelinha: 1.55;
  --entrelinha-titulo: 1.15;

  /* Espaço: escala de 4px */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem;
  --margem-lateral: 16px;
  --largura-max: 76rem;
  --largura-texto: 42rem;

  /* Forma */
  --raio: 4px;
  --raio-g: 8px;
  --raio-pilula: 999px;
  --fio: 1px solid var(--cor-regua);
  --fio-duplo: 3px double var(--cor-regua-forte);
  --sombra-1: 0 1px 2px rgb(16 36 48 / .07);
  --sombra-2: 0 4px 14px rgb(16 36 48 / .10);
  --sombra-3: 0 18px 48px rgb(10 24 32 / .28);
  --alvo: 44px;               /* alvo mínimo de toque */
  --transicao: 140ms ease-out;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-papel: #0e161c;
    --cor-superficie: #152129;
    --cor-superficie-2: #1c2a33;
    --cor-texto: #e3e9ec;
    --cor-texto-suave: #a0adb6;
    --cor-regua: #2b3a44;
    --cor-regua-forte: #4c5d68;

    --cor-tinta: #8fc0db;
    --cor-tinta-forte: #b5d6e8;
    --cor-tinta-fundo: #1a3343;
    --cor-sobre-tinta: #0c1a22;
    --cor-topo: #0a1217;
    --cor-topo-texto: #e3e9ec;
    --cor-topo-suave: #93a7b2;

    --cor-lacre: #ec95a1;
    --cor-lacre-fundo: #3a1a20;
    --cor-sobre-lacre: #2a0b11;

    --cor-sucesso: #8fd0a6;  --cor-sucesso-fundo: #16301f;
    --cor-atencao: #ecc172;  --cor-atencao-fundo: #33270c;
    --cor-erro: #f29d90;     --cor-erro-fundo: #3a1a15;
    --cor-info: #8fc0db;     --cor-info-fundo: #1a3343;
    --cor-colegiado: #c4b2e8; --cor-colegiado-fundo: #2a2240;
    --cor-neutra: #a9b4bb;   --cor-neutra-fundo: #222e36;

    --cor-postit: #3a3412;   --cor-postit-borda: #7a6a1d;  --cor-postit-texto: #f1e6a8;
    --cor-foco: #f0b440;
    --sombra-1: 0 1px 2px rgb(0 0 0 / .4);
    --sombra-2: 0 4px 14px rgb(0 0 0 / .45);
    --sombra-3: 0 18px 48px rgb(0 0 0 / .6);
  }
}

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--cor-papel); color: var(--cor-texto);
  font-family: var(--fonte-texto); font-size: var(--t-base); line-height: var(--entrelinha);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo); font-weight: 500; line-height: var(--entrelinha-titulo);
  color: var(--cor-texto); margin: 0 0 var(--e-3); text-wrap: balance;
}
h1 { font-size: var(--t-2xl); letter-spacing: -.005em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); font-weight: 600; }
.titulo-1, .titulo-2, .titulo-3 { font-family: var(--fonte-titulo); font-weight: 500; line-height: var(--entrelinha-titulo); margin: 0 0 var(--e-3); }
.titulo-1 { font-size: var(--t-2xl); } .titulo-2 { font-size: var(--t-xl); } .titulo-3 { font-size: var(--t-lg); font-weight: 600; }
h4 { font-family: var(--fonte-texto); font-size: var(--t-base); font-weight: 700; }
p { margin: 0 0 var(--e-4); }
p, li { text-wrap: pretty; }
a { color: var(--cor-tinta); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--cor-tinta-forte); text-decoration-thickness: 2px; }
small { font-size: var(--t-sm); }
hr { border: 0; border-top: var(--fio); margin: var(--e-5) 0; }
code, kbd, samp, .mono { font-family: var(--fonte-mono); font-size: .92em; }
img, svg { max-width: 100%; }
::selection { background: var(--cor-tinta-fundo); color: var(--cor-texto); }
:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }

.pular { position: absolute; left: -9999px; top: var(--e-3); z-index: 100; padding: var(--e-2) var(--e-4); background: var(--cor-superficie); color: var(--cor-tinta); font-weight: 700; border-radius: var(--raio); }
.pular:focus { left: var(--e-3); }
.inline { display: inline; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.icone { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; stroke-width: 1.75; }
.icone--p { width: 1em; height: 1em; vertical-align: -.15em; }

/* 4. Layout ---------------------------------------------------------------- */

/* 4.1 Barra superior: marca, usuário, navegação */
.topo { background: var(--cor-topo); color: var(--cor-topo-texto); border-bottom: 1px solid rgb(255 255 255 / .06); }
.topo__linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  max-width: var(--largura-max); margin: 0 auto; padding: var(--e-3) var(--margem-lateral);
}
.marca { display: flex; align-items: baseline; gap: var(--e-3); color: inherit; text-decoration: none; min-width: 0; }
.marca:hover { color: inherit; }
.marca__sigla { font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 600; letter-spacing: .01em; line-height: 1; }
.marca__sigla em { font-style: italic; font-weight: 500; color: var(--cor-topo-suave); margin-right: .04em; }
.marca__nome {
  font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--cor-topo-suave);
  border-left: 1px solid rgb(255 255 255 / .22); padding-left: var(--e-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topo__usuario { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); min-width: 0; }
.topo__nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 10rem; color: var(--cor-topo-texto); }
.topo .botao--discreto { color: var(--cor-topo-texto); border-color: rgb(255 255 255 / .35); }
.topo .botao--discreto:hover { background: rgb(255 255 255 / .1); color: #fff; }

/* Navegação: faixa de abas; no celular rola na horizontal dentro de si mesma. */
.nav { border-top: 1px solid rgb(255 255 255 / .1); }
.nav__lista {
  display: flex; gap: var(--e-1); list-style: none; margin: 0 auto; padding: 0 var(--margem-lateral);
  max-width: var(--largura-max); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nav__lista::-webkit-scrollbar { display: none; }
.nav__link {
  display: flex; align-items: center; gap: var(--e-2); min-height: var(--alvo); padding: 0 var(--e-3);
  color: var(--cor-topo-suave); text-decoration: none; white-space: nowrap; font-size: var(--t-sm); font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.nav__link:hover { color: var(--cor-topo-texto); }
.nav__link[aria-current="page"] { color: var(--cor-topo-texto); border-bottom-color: var(--cor-topo-texto); }
.nav__contador {
  min-width: 1.4rem; padding: 0 .35rem; border-radius: var(--raio-pilula); background: rgb(255 255 255 / .16);
  color: var(--cor-topo-texto); font-size: var(--t-xs); text-align: center; line-height: 1.4rem;
}

/* 4.2 Faixa de atuação: sempre diz em nome de que órgão o usuário age */
.atuacao { background: var(--cor-superficie); border-bottom: var(--fio); }
.atuacao__linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4);
  max-width: var(--largura-max); margin: 0 auto; padding: var(--e-2) var(--margem-lateral); font-size: var(--t-sm);
}
.atuacao__rotulo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--cor-texto-suave); }
.atuacao__orgao { font-weight: 700; }
.atuacao__qualificacao { color: var(--cor-texto-suave); font-style: italic; }
.atuacao--substituicao { background: var(--cor-atencao-fundo); }
.atuacao--substituicao .atuacao__qualificacao { color: var(--cor-atencao); font-style: normal; font-weight: 600; }

/* Seletor de órgão (details/summary: funciona sem JavaScript) */
.seletor-orgao { position: relative; margin-left: auto; }
.seletor-orgao > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--e-1);
  min-height: 36px; padding: 0 var(--e-3); border: var(--fio); border-radius: var(--raio);
  color: var(--cor-tinta); font-weight: 600; background: var(--cor-superficie);
}
.seletor-orgao > summary::-webkit-details-marker { display: none; }
.seletor-orgao > summary:hover { background: var(--cor-superficie-2); }
.seletor-orgao[open] > summary .icone { transform: rotate(180deg); }
.seletor-orgao__painel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(22rem, calc(100vw - 2 * var(--margem-lateral)));
  background: var(--cor-superficie); border: var(--fio); border-radius: var(--raio-g); box-shadow: var(--sombra-2); padding: var(--e-2);
}
.seletor-orgao__titulo { margin: var(--e-2) var(--e-2) var(--e-2); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--cor-texto-suave); }
.seletor-orgao__lista { list-style: none; margin: 0; padding: 0; }
.seletor-orgao__opcao {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: var(--alvo);
  padding: var(--e-2) var(--e-3); border: 0; border-radius: var(--raio); background: none; text-align: left;
  font: inherit; color: var(--cor-texto); cursor: pointer;
}
.seletor-orgao__opcao:hover { background: var(--cor-superficie-2); }
.seletor-orgao__opcao[aria-current="true"] { background: var(--cor-tinta-fundo); }
.seletor-orgao__opcao strong { font-weight: 700; }
.seletor-orgao__opcao span { font-size: var(--t-xs); color: var(--cor-texto-suave); }

/* 4.3 Conteúdo e rodapé */
.conteudo { flex: 1; width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: var(--e-5) var(--margem-lateral) var(--e-7); }
.conteudo--estreito { max-width: calc(var(--largura-texto) + 2 * var(--margem-lateral)); }
.rodape { border-top: var(--fio); color: var(--cor-texto-suave); font-size: var(--t-xs); }
.rodape__linha {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2) var(--e-5);
  max-width: var(--largura-max); margin: 0 auto; padding: var(--e-4) var(--margem-lateral) var(--e-5);
}
.rodape p { margin: 0; }
.rodape a { color: inherit; }

/* Cabeçalho de página: rubrica, título, fio duplo, ações */
.cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-5); padding-bottom: var(--e-4); margin-bottom: var(--e-5); border-bottom: var(--fio-duplo); }
.cabecalho-pagina h1 { margin: 0; }
.cabecalho-pagina__texto { min-width: 0; flex: 1 1 20rem; }
.cabecalho-pagina__subtitulo { margin: var(--e-2) 0 0; color: var(--cor-texto-suave); }
.cabecalho-pagina__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.rubrica { display: block; margin-bottom: var(--e-2); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--cor-texto-suave); }

.trilha { font-size: var(--t-xs); margin-bottom: var(--e-3); }
.trilha ol { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); list-style: none; margin: 0; padding: 0; }
.trilha li + li::before { content: "›"; margin-right: var(--e-2); color: var(--cor-regua-forte); }
.trilha a { color: var(--cor-texto-suave); }
.trilha [aria-current] { color: var(--cor-texto); }

/* Grades */
.grade { display: grid; gap: var(--e-4); }
.grade--2, .grade--3, .grade--autos { grid-template-columns: 1fr; }
.pilha > * + * { margin-top: var(--e-4); }
.pilha--g > * + * { margin-top: var(--e-6); }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.linha--fim { justify-content: flex-end; }
.linha--entre { justify-content: space-between; }

/* 5. Componentes ----------------------------------------------------------- */

/* 5.1 Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--alvo); padding: .55rem 1.1rem; border: 1px solid var(--cor-tinta); border-radius: var(--raio);
  background: var(--cor-tinta); color: var(--cor-sobre-tinta);
  font: inherit; font-size: var(--t-sm); font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.botao:hover { background: var(--cor-tinta-forte); border-color: var(--cor-tinta-forte); color: var(--cor-sobre-tinta); text-decoration: none; }
.botao:active { transform: translateY(1px); }
.botao--secundario { background: var(--cor-superficie); color: var(--cor-tinta); border-color: var(--cor-regua-forte); }
.botao--secundario:hover { background: var(--cor-tinta-fundo); color: var(--cor-tinta-forte); border-color: var(--cor-tinta); }
.botao--discreto { background: transparent; color: var(--cor-tinta); border-color: transparent; }
.botao--discreto:hover { background: var(--cor-superficie-2); color: var(--cor-tinta-forte); border-color: transparent; }
.botao--perigo { background: var(--cor-superficie); color: var(--cor-erro); border-color: currentColor; }
.botao--perigo:hover { background: var(--cor-erro-fundo); color: var(--cor-erro); border-color: currentColor; }
.botao--assinar { background: var(--cor-lacre); border-color: var(--cor-lacre); color: var(--cor-sobre-lacre); }
.botao--assinar:hover { background: var(--cor-lacre); border-color: var(--cor-lacre); color: var(--cor-sobre-lacre); filter: brightness(1.12); }
.botao--pequeno { min-height: 36px; padding: .35rem .75rem; font-size: var(--t-xs); }
.botao--bloco { display: flex; width: 100%; }
.botao[disabled], .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.botao.htmx-request { opacity: .7; cursor: progress; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
.acoes--fim { justify-content: flex-end; }

/* 5.2 Formulários */
.formulario { max-width: var(--largura-texto); }
.campo { display: flex; flex-direction: column; gap: var(--e-1); margin-bottom: var(--e-4); }
.campo > label, .campo__rotulo { font-weight: 700; font-size: var(--t-sm); }
.campo__opcional { font-weight: 400; color: var(--cor-texto-suave); }
.campo__ajuda { font-size: var(--t-xs); color: var(--cor-texto-suave); margin: 0; }
.campo__erro, .erro { color: var(--cor-erro); font-size: var(--t-sm); font-weight: 600; margin: 0; }
.campo__erro ul, .erro ul, ul.errorlist { list-style: none; margin: 0; padding: 0; color: var(--cor-erro); font-size: var(--t-sm); font-weight: 600; }
input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="hidden"]), select, textarea {
  width: 100%; min-height: var(--alvo); padding: .55rem .75rem;
  font: inherit; font-size: max(16px, var(--t-base)); /* 16px+ evita o zoom do iOS */
  color: var(--cor-texto); background: var(--cor-superficie);
  border: 1px solid var(--cor-regua-forte); border-radius: var(--raio);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
textarea { min-height: 8rem; resize: vertical; line-height: var(--entrelinha); }
select { appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 1.15rem center, right .8rem center; background-size: .35rem .35rem; background-repeat: no-repeat; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--cor-tinta); box-shadow: 0 0 0 3px var(--cor-foco); }
input::placeholder, textarea::placeholder { color: var(--cor-texto-suave); opacity: .8; }
input[readonly], input[disabled], select[disabled], textarea[disabled] { background: var(--cor-superficie-2); color: var(--cor-texto-suave); }
.campo--erro input, .campo--erro select, .campo--erro textarea, [aria-invalid="true"] { border-color: var(--cor-erro); border-width: 2px; }
input[type="file"] { font: inherit; font-size: var(--t-sm); width: 100%; padding: var(--e-3); border: 1px dashed var(--cor-regua-forte); border-radius: var(--raio); background: var(--cor-superficie); }
input[type="file"]::file-selector-button { font: inherit; font-weight: 700; margin-right: var(--e-3); padding: .45rem .9rem; border: 1px solid var(--cor-regua-forte); border-radius: var(--raio); background: var(--cor-superficie-2); color: var(--cor-tinta); cursor: pointer; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--cor-tinta); flex: none; }
fieldset { border: var(--fio); border-radius: var(--raio-g); padding: var(--e-4); margin: 0 0 var(--e-4); min-width: 0; }
legend { padding: 0 var(--e-2); font-weight: 700; font-size: var(--t-sm); }
.opcoes { display: flex; flex-direction: column; gap: var(--e-1); }
.opcao { display: flex; gap: var(--e-3); align-items: flex-start; min-height: var(--alvo); padding: var(--e-2) 0; cursor: pointer; }
.opcao__texto small { display: block; font-weight: 400; color: var(--cor-texto-suave); font-size: var(--t-xs); }
/* Opções em cartão (ex.: escolha da qualidade ao peticionar, voto) */
.opcoes--cartao .opcao { padding: var(--e-3) var(--e-4); border: var(--fio); border-radius: var(--raio-g); background: var(--cor-superficie); }
.opcoes--cartao .opcao:has(input:checked) { border-color: var(--cor-tinta); box-shadow: inset 0 0 0 1px var(--cor-tinta); background: var(--cor-tinta-fundo); }
.grupo-entrada { display: flex; align-items: stretch; }
.grupo-entrada__prefixo { display: flex; align-items: center; padding: 0 var(--e-3); border: 1px solid var(--cor-regua-forte); border-right: 0; border-radius: var(--raio) 0 0 var(--raio); background: var(--cor-superficie-2); color: var(--cor-texto-suave); font-weight: 600; }
.grupo-entrada input { border-radius: 0 var(--raio) var(--raio) 0 !important; }

/* 5.3 Cartões e blocos */
.cartao { background: var(--cor-superficie); border: var(--fio); border-radius: var(--raio-g); padding: var(--e-4); box-shadow: var(--sombra-1); min-width: 0; }
.cartao--estreito { max-width: 28rem; margin-left: auto; margin-right: auto; }
.cartao--plano { box-shadow: none; }
.cartao--destaque { border-top: 3px solid var(--cor-tinta); }
.cartao__cabecalho { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-3); }
.cartao__cabecalho h2, .cartao__cabecalho h3 { margin: 0; }
.cartao__rodape { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-4) calc(-1 * var(--e-4)) calc(-1 * var(--e-4)); padding: var(--e-3) var(--e-4); border-top: var(--fio); background: var(--cor-superficie-2); border-radius: 0 0 var(--raio-g) var(--raio-g); }
.cartao > :last-child:not(.cartao__rodape) { margin-bottom: 0; }

/* Lista de dados (dl): "Assunto", "Requerente", "Órgão atual"… */
.dados { display: grid; grid-template-columns: 1fr; gap: var(--e-1) var(--e-4); margin: 0; }
.dados dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--cor-texto-suave); font-weight: 600; margin-top: var(--e-2); }
.dados dd { margin: 0; overflow-wrap: anywhere; }
.em-nome-de { font-family: var(--fonte-titulo); font-style: italic; font-size: 1.08em; }

/* 5.4 Selo do processo: o número como registro oficial (assinatura visual do e-PRAM) */
.selo-processo {
  display: inline-flex; flex-direction: column; gap: 2px; padding: var(--e-2) var(--e-4);
  border: 3px double var(--cor-tinta); border-radius: 2px; color: var(--cor-tinta); background: var(--cor-superficie);
  line-height: 1.1;
}
.selo-processo__rotulo { font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.selo-processo__numero { font-family: var(--fonte-titulo); font-size: 1.75rem; font-weight: 600; white-space: nowrap; }
.selo-processo__numero .mono { font-family: var(--fonte-mono); font-size: .82em; font-weight: 600; letter-spacing: .02em; }
.selo-processo--pequeno { padding: 2px var(--e-2); border-width: 3px; }
.selo-processo--pequeno .selo-processo__numero { font-size: 1.05rem; }
/* Número em linha (listas, tabelas) */
.numero-processo { font-family: var(--fonte-mono); font-weight: 600; white-space: nowrap; letter-spacing: .01em; }

/* 5.5 Etiquetas (situação, resultado, marcas) */
.etiqueta {
  display: inline-flex; align-items: center; gap: .35em; padding: .15rem .55rem; border-radius: var(--raio);
  font-family: var(--fonte-texto); font-size: var(--t-xs); vertical-align: middle; font-weight: 700; line-height: 1.35; white-space: nowrap; letter-spacing: .01em;
  color: var(--cor-neutra); background: var(--cor-neutra-fundo); border: 1px solid transparent;
}
.etiqueta::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.etiqueta--sem-ponto::before { display: none; }
.etiqueta--em-tramitacao { color: var(--cor-info); background: var(--cor-info-fundo); }
.etiqueta--concluso { color: var(--cor-sobre-tinta); background: var(--cor-tinta); }
.etiqueta--aguardando-informacao, .etiqueta--aguardando-cumprimento { color: var(--cor-atencao); background: var(--cor-atencao-fundo); }
.etiqueta--sobrestado { color: var(--cor-neutra); background: transparent; border-color: currentColor; border-style: dashed; }
.etiqueta--em-pauta { color: var(--cor-colegiado); background: var(--cor-colegiado-fundo); }
.etiqueta--arquivado { color: var(--cor-neutra); background: var(--cor-neutra-fundo); }
.etiqueta--arquivado::before { border-radius: 1px; }
/* Resultado: borda cheia, sem ponto, para não confundir com a situação */
.etiqueta--deferido, .etiqueta--aprovado { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); border-color: currentColor; }
.etiqueta--deferido-em-parte { color: var(--cor-sucesso); background: var(--cor-superficie); border-color: currentColor; border-style: dashed; }
.etiqueta--indeferido, .etiqueta--rejeitado { color: var(--cor-erro); background: var(--cor-erro-fundo); border-color: currentColor; }
.etiqueta--resultado::before { display: none; }
/* Marcas */
.etiqueta--prioridade { color: var(--cor-erro); background: transparent; border-color: currentColor; }
.etiqueta--prioridade::before { display: none; }
.etiqueta--interno { color: var(--cor-texto-suave); background: transparent; border-color: var(--cor-regua-forte); }
.etiqueta--interno::before { display: none; }
.etiqueta--novo { color: var(--cor-sobre-tinta); background: var(--cor-tinta); }
.etiqueta--novo::before { display: none; }
/* Novidade (WP6): documento do requerente ainda não visto pelo órgão */
.etiqueta--novidade { color: var(--cor-atencao); background: var(--cor-atencao-fundo); border-color: currentColor; }
.etiqueta--novidade::before { display: none; }
.etiqueta--minuta { color: var(--cor-atencao); background: transparent; border-color: currentColor; border-style: dashed; }
.etiqueta--minuta::before { display: none; }
.etiqueta--assinado { color: var(--cor-lacre); background: var(--cor-lacre-fundo); }
.etiqueta--pendente { color: var(--cor-atencao); background: var(--cor-atencao-fundo); }
.etiqueta--aprovada { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.etiqueta--recusada { color: var(--cor-erro); background: var(--cor-erro-fundo); }
.etiqueta--colegiado { color: var(--cor-colegiado); background: var(--cor-colegiado-fundo); }

/* 5.6 Avisos (mensagens do Django e alertas fixos) */
.mensagens { list-style: none; padding: 0; margin: 0 0 var(--e-5); display: grid; gap: var(--e-2); }
.aviso, .mensagem {
  display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4);
  border-radius: var(--raio); border: 1px solid transparent; border-left-width: 4px;
  background: var(--cor-info-fundo); color: var(--cor-texto); border-left-color: var(--cor-info);
}
.aviso > .icone, .mensagem > .icone { color: var(--cor-info); margin-top: .1rem; }
.aviso__corpo { min-width: 0; flex: 1; }
.aviso__corpo > :last-child { margin-bottom: 0; }
.aviso__titulo { display: block; font-weight: 700; margin-bottom: var(--e-1); }
.aviso--sucesso, .mensagem--success { background: var(--cor-sucesso-fundo); border-left-color: var(--cor-sucesso); }
.aviso--sucesso > .icone, .mensagem--success > .icone { color: var(--cor-sucesso); }
.aviso--atencao, .mensagem--warning { background: var(--cor-atencao-fundo); border-left-color: var(--cor-atencao); }
.aviso--atencao > .icone, .mensagem--warning > .icone { color: var(--cor-atencao); }
.aviso--erro, .mensagem--error { background: var(--cor-erro-fundo); border-left-color: var(--cor-erro); }
.aviso--erro > .icone, .mensagem--error > .icone { color: var(--cor-erro); }
.aviso--colegiado { background: var(--cor-colegiado-fundo); border-left-color: var(--cor-colegiado); }
.aviso--colegiado > .icone { color: var(--cor-colegiado); }

/* 5.7 Tabelas: viram cartões abaixo de 640px (cada <td> leva data-rotulo) */
.tabela-envoltorio { width: 100%; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela caption { text-align: left; font-family: var(--fonte-titulo); font-size: var(--t-lg); padding-bottom: var(--e-2); }
.tabela th { text-align: left; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--cor-texto-suave); font-weight: 700; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela thead { display: none; }
.tabela tr { display: block; background: var(--cor-superficie); border: var(--fio); border-radius: var(--raio-g); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-2); }
.tabela td { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; gap: var(--e-3); padding: var(--e-1) 0; overflow-wrap: anywhere; }
.tabela td::before { content: attr(data-rotulo); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--cor-texto-suave); font-weight: 700; padding-top: .15rem; }
.tabela td.num { text-align: left; }
.tabela tfoot td { font-weight: 700; }

/* 5.8 Caixa do órgão (requisitos.md, §3, "Leiaute da caixa"): blocos com contadores e subcaixas à esquerda,
   lista com busca à direita. No celular, os blocos em grade compacta em cima e a lista embaixo. */
.caixa-painel { display: grid; gap: var(--e-5); min-width: 0; }
.caixa-painel__blocos { display: grid; gap: var(--e-5); min-width: 0; align-content: start; }
.blocos { min-width: 0; }
.blocos__titulo {
  display: flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-3); padding-bottom: var(--e-2);
  border-bottom: var(--fio); font-size: var(--t-lg); font-weight: 600;
}
.blocos__titulo .icone { color: var(--cor-tinta); }
.blocos__grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.bloco {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  min-height: var(--alvo); height: 100%; padding: var(--e-2) var(--e-3);
  background: var(--cor-superficie); border: var(--fio); border-radius: var(--raio-g); box-shadow: var(--sombra-1);
  color: var(--cor-texto); text-decoration: none; transition: border-color var(--transicao), background var(--transicao);
}
.bloco:hover { border-color: var(--cor-tinta); color: var(--cor-texto); text-decoration: none; }
.bloco__rotulo { min-width: 0; font-size: var(--t-sm); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.bloco__orgao { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-suave); }
.bloco__valor { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--cor-tinta); flex: none; }
.bloco__icone { width: 1.1rem; height: 1.1rem; }
.bloco__contagem { font-family: var(--fonte-titulo); font-size: var(--t-lg); font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.bloco--zero .bloco__valor { color: var(--cor-texto-suave); }
.bloco[aria-current="page"] { background: var(--cor-tinta); border-color: var(--cor-tinta); color: var(--cor-sobre-tinta); box-shadow: inset 0 -3px 0 var(--cor-foco); }
.bloco[aria-current="page"] .bloco__valor, .bloco[aria-current="page"] .bloco__orgao { color: var(--cor-sobre-tinta); }
.blocos__vazio { margin: 0; font-size: var(--t-sm); color: var(--cor-texto-suave); }
.blocos__gerir { margin: var(--e-3) 0 0; font-size: var(--t-sm); font-weight: 600; }
.blocos__gerir a { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--alvo); }

.caixa-lista { min-width: 0; }
.caixa-lista__topo {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3);
  margin-bottom: var(--e-3); padding-bottom: var(--e-2); border-bottom: var(--fio);
}
.caixa-lista__titulo { margin: 0; font-size: var(--t-xl); min-width: 0; overflow-wrap: anywhere; }
.caixa-lista__rubrica { display: block; font-family: var(--fonte-texto); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-texto-suave); }
.caixa-lista__total { margin: 0 0 var(--e-2); font-size: var(--t-xs); color: var(--cor-texto-suave); }
.busca { display: flex; align-items: center; gap: var(--e-2); flex: 1 1 18rem; max-width: 28rem; min-width: 0; }
.busca__campo { position: relative; flex: 1 1 auto; min-width: 0; }
.busca__campo input { padding-left: 2.4rem; }
.busca__icone { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--cor-texto-suave); pointer-events: none; }
.busca__botao { flex: none; }

.caixa { list-style: none; margin: 0; padding: 0; background: var(--cor-superficie); border: var(--fio); border-radius: var(--raio-g); overflow: hidden; }
.caixa__item { position: relative; border-top: var(--fio); }
.caixa__item:first-child { border-top: 0; }
.caixa__link {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 2px var(--e-3);
  padding: var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) + 4px); color: inherit; text-decoration: none;
}
.caixa__link:hover { background: var(--cor-superficie-2); color: inherit; }
.caixa__cabeca { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; }
.caixa__numero { font-size: var(--t-sm); }
.caixa__situacao { min-width: 0; }
.caixa__situacao .etiqueta { white-space: normal; }
.caixa__quando {
  grid-column: 2; grid-row: 1; justify-self: end; align-self: start; display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-xs); color: var(--cor-texto-suave); white-space: nowrap; padding-top: .2rem;
}
.caixa__leitura { display: inline-flex; color: var(--cor-tinta); }
.caixa__assunto { grid-column: 1 / -1; font-weight: 600; margin-top: var(--e-1); }
.caixa__requerente, .caixa__remetente { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--cor-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caixa__rotulo { font-family: var(--fonte-texto); font-style: normal; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-suave); }
.caixa__resumo {
  grid-column: 1 / -1; margin-top: var(--e-1); font-family: var(--fonte-titulo); font-style: italic; font-size: var(--t-base); line-height: 1.35;
  color: var(--cor-texto); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.caixa__movimento { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); margin-top: var(--e-1); font-size: var(--t-xs); color: var(--cor-texto-suave); }
.caixa__marcas { display: inline-flex; flex-wrap: wrap; gap: var(--e-1); }
.caixa__marcas:empty { display: none; }
/* Não aberto no órgão: faixa de tinta à esquerda e assunto em negrito */
.caixa__item--novo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cor-tinta); }
.caixa__item--novo .caixa__assunto { font-weight: 700; }
.caixa__item--novidade::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; background: var(--cor-atencao); }
.caixa__orgao { font-size: var(--t-xs); }
/* "Mover para subcaixa": fora do link do item, discreto até ser aberto */
.caixa__mover { padding: 0 var(--e-4) var(--e-2) calc(var(--e-4) + 4px); margin-top: calc(-1 * var(--e-2)); }
.caixa__mover > summary {
  display: inline-flex; align-items: center; gap: var(--e-1); min-height: 2rem; cursor: pointer; list-style: none;
  font-size: var(--t-xs); font-weight: 600; color: var(--cor-tinta);
}
.caixa__mover > summary::-webkit-details-marker { display: none; }
.caixa__mover-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding: var(--e-1) 0 var(--e-2); }
.caixa__mover-form select { flex: 1 1 12rem; max-width: 20rem; }
.subcaixa-autos__form select { flex: 1 1 10rem; }

/* Gestão das subcaixas */
.subcaixas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.subcaixas__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.subcaixas__dados { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 0; }
.subcaixas__nome { font-weight: 700; overflow-wrap: anywhere; }
.subcaixas__renomear { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); flex: 2 1 18rem; min-width: 0; }
.subcaixas__renomear input { flex: 1 1 10rem; min-width: 0; }
.subcaixas__renomear .campo__erro { flex-basis: 100%; }

/* Abaixo de 640px a lista é de cartões separados e os controles têm alvo de toque de 44px */
@media (max-width: 639.98px) {
  .caixa { background: none; border: 0; border-radius: 0; overflow: visible; display: grid; gap: var(--e-2); }
  .caixa__item, .caixa__item:first-child { border: var(--fio); border-radius: var(--raio-g); background: var(--cor-superficie); box-shadow: var(--sombra-1); overflow: hidden; }
  .caixa-painel__blocos { gap: var(--e-4); }
  .blocos__titulo { font-size: var(--t-base); margin-bottom: var(--e-2); }
  .caixa__mover > summary { min-height: var(--alvo); }
  .busca { flex-basis: 100%; max-width: none; }
  .bloco__icone { display: none; }
  .busca__botao { min-height: var(--alvo); }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  .blocos__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .caixa-painel { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); gap: var(--e-6); align-items: start; }
  .caixa-painel__blocos { position: sticky; top: var(--e-4); }
  .bloco { flex-direction: column; justify-content: center; gap: var(--e-1); min-height: 4.75rem; text-align: center; }
  .bloco__rotulo { font-size: var(--t-xs); color: var(--cor-texto-suave); letter-spacing: .02em; }
  .bloco[aria-current="page"] .bloco__rotulo { color: var(--cor-sobre-tinta); }
  .bloco__icone { width: 1.25rem; height: 1.25rem; }
  .bloco__contagem { font-size: 1.75rem; }
  .bloco--subcaixa { min-height: 3.75rem; }
  .bloco--subcaixa .bloco__contagem { font-size: var(--t-xl); }
}

/* 5.8b Autos digitais: dados, visualizador do PDF e lista de documentos com folhas */
.mono { font-family: var(--fonte-mono); }
.autos__assunto { font-family: var(--fonte-titulo); font-size: var(--t-xl); color: var(--cor-texto); }
.autos__descricao { white-space: normal; }
.autos__principal { min-width: 0; }
/* Tramitação (WP5): motivo da remessa, prazo e barra de movimentação */
.autos__motivo { display: block; margin-top: var(--e-1); font-size: var(--t-sm); color: var(--cor-texto-suave); white-space: pre-line; }
.autos__prazo { display: inline-flex; align-items: center; gap: var(--e-1); font-weight: 600; color: var(--cor-atencao); }
.movimentacao__acoes { align-items: stretch; }
.movimentacao__form { display: contents; }
@media (max-width: 639.98px) {
  .movimentacao__acoes > .botao, .movimentacao__acoes .botao { flex: 1 1 calc(50% - var(--e-2)); justify-content: center; }
}
/* Abas dos autos (requisitos.md, 6.4, decisão de 31/10/2026): Resumo, Linha do tempo, Documentos, Tramitação. */
.autos-acoes { margin-bottom: var(--e-4); }
.autos-acoes__botoes { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; }
.autos-acoes__botoes .botao { margin: 0; }
.abas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 3px; background: var(--cor-tinta-forte); border-radius: var(--raio-g) var(--raio-g) 0 0; }
.abas__aba { display: flex; align-items: center; justify-content: center; min-height: var(--alvo); padding: var(--e-2) var(--e-2); text-align: center; line-height: 1.2; font-size: var(--t-sm); font-weight: 600; color: var(--cor-topo-texto); text-decoration: none; border-radius: var(--raio); transition: background var(--transicao); }
.abas__aba:hover { background: rgb(255 255 255 / .1); color: #fff; }
.abas__aba[aria-selected="true"] { background: var(--cor-superficie); color: var(--cor-tinta); box-shadow: inset 0 -3px 0 var(--cor-foco); }
.abas__aba:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 1px; }
.abas__painel { padding: var(--e-4) 0 0; border-top: 3px solid var(--cor-tinta-forte); }
.abas__painel:focus { outline: none; }
.dados--grade > div { display: contents; }
.resumo__topo { display: grid; gap: var(--e-4); align-items: start; margin-bottom: var(--e-4); }
.resumo__rotulo { font-family: var(--fonte-texto); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--cor-texto-suave); margin: 0 0 var(--e-2); }
.subcaixa-autos .campo__ajuda { margin-top: var(--e-2); }
/* Post-it em forma de bilhete: papel amarelado, levemente inclinado, com sombra de papel colado. */
.postit--bilhete { font-family: var(--fonte-titulo); font-style: italic; font-size: var(--t-base); line-height: 1.4; border-radius: 1px; transform: rotate(-1.2deg); box-shadow: 0 1px 1px rgb(0 0 0 / .08), 3px 6px 12px rgb(74 63 6 / .18); padding: var(--e-4) var(--e-4) var(--e-3); }
.postit--bilhete:nth-of-type(even) { transform: rotate(.8deg); }
.postit--bilhete .postit__autor { font-family: var(--fonte-texto); font-style: normal; }
.postits__novo > summary { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--alvo); cursor: pointer; color: var(--cor-tinta); font-weight: 600; font-size: var(--t-sm); }
.autos-linha { display: grid; gap: var(--e-4); align-items: start; }
.autos-linha__eventos, .autos-linha__visualizador { min-width: 0; }
.evento__titulo a[aria-current="true"] { font-weight: 700; text-decoration-thickness: 2px; }
.tabela__linha--sem-efeito td { color: var(--cor-texto-suave); }
@media (prefers-reduced-motion: reduce) { .postit--bilhete, .postit--bilhete:nth-of-type(even) { transform: none; } }
@media (max-width: 639.98px) {
  .autos-acoes__botoes { justify-content: stretch; }
  .abas__aba { font-size: var(--t-xs); padding: var(--e-1); }
}
@media (min-width: 640px) {
  .dados--grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-5); }
  .dados--grade > div { display: block; }
  .dados--grade dt { padding-top: 0; }
  .dados--grade .dados__largo { grid-column: 1 / -1; }
  .resumo__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  .resumo__topo > .postits:only-child { grid-column: 2; }
}
@media (min-width: 960px) {
  .dados--grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .autos-linha { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .autos-linha__visualizador { position: sticky; top: var(--e-4); }
  .autos-linha .visualizador__quadro { height: min(80vh, 62rem); }
}
.visualizador { scroll-margin-top: var(--e-4); }
.visualizador__cartao { display: grid; gap: var(--e-3); }
.visualizador__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); }
.visualizador__titulo { margin: 0; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.visualizador__quadro { display: block; width: 100%; max-width: 100%; height: min(78vh, 60rem); min-height: 22rem; border: var(--fio); border-radius: var(--raio); background: var(--cor-superficie-2); }
.lista-documentos { list-style: none; margin: 0; padding: 0; }
.lista-documentos__item { border-top: var(--fio); }
.lista-documentos__item:first-child { border-top: 0; }
.lista-documentos__item a { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--e-3); padding: var(--e-2) var(--e-1); min-height: var(--alvo); color: inherit; text-decoration: none; border-radius: var(--raio); }
.lista-documentos__item a:hover { background: var(--cor-superficie-2); }
.lista-documentos__item a[aria-current] { background: var(--cor-tinta-fundo); }
.lista-documentos__folhas { grid-row: span 2; font-family: var(--fonte-mono); font-size: var(--t-xs); font-weight: 600; color: var(--cor-tinta); padding-top: .2rem; white-space: nowrap; }
.lista-documentos__titulo { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.lista-documentos__detalhe { font-size: var(--t-xs); color: var(--cor-texto-suave); }
/* Minutas e documentos em assinatura: sem coluna de folhas, o detalhe fica sob o título. */
.lista-documentos__item--preparo a { grid-template-columns: minmax(0, 1fr); }
.lista-documentos__item--preparo .lista-documentos__detalhe { overflow-wrap: anywhere; }

/* 5.9 Linha do tempo dos autos: margem com data e folhas, fio vertical, nós */
.linha-tempo { list-style: none; margin: 0; padding: 0; position: relative; }
.evento { position: relative; display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 var(--e-3); padding-bottom: var(--e-5); }
.evento::before { content: ""; position: absolute; left: calc(.75rem - 1px); top: 1.4rem; bottom: 0; width: 2px; background: var(--cor-regua); }
.evento:last-child::before { display: none; }
.evento:last-child { padding-bottom: 0; }
.evento__no { grid-column: 1; grid-row: 1 / span 3; width: 1.5rem; height: 1.5rem; margin-top: .1rem; border-radius: 50%; border: 2px solid var(--cor-regua-forte); background: var(--cor-papel); display: grid; place-items: center; color: var(--cor-texto-suave); z-index: 1; }
.evento__no .icone { width: .85rem; height: .85rem; }
.evento__margem { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0 var(--e-3); font-size: var(--t-xs); color: var(--cor-texto-suave); }
.evento__momento { font-family: var(--fonte-mono); }
.evento__folhas { font-family: var(--fonte-mono); color: var(--cor-tinta); font-weight: 600; }
.evento__corpo { grid-column: 2; min-width: 0; }
.evento__titulo { font-weight: 700; margin: 0; }
.evento__titulo a { text-decoration: none; }
.evento__titulo a:hover { text-decoration: underline; }
.evento__autor { margin: 0; font-size: var(--t-sm); color: var(--cor-texto-suave); }
.evento__texto { margin: var(--e-2) 0 0; font-size: var(--t-sm); }
.evento__citacao { margin: var(--e-2) 0 0; padding: var(--e-2) var(--e-3); border-left: 3px solid var(--cor-regua); font-family: var(--fonte-titulo); font-style: italic; font-size: var(--t-base); color: var(--cor-texto); }
/* Tipos */
.evento--movimento .evento__no { border-color: var(--cor-tinta); color: var(--cor-tinta); }
.evento--documento .evento__no { border-color: var(--cor-tinta); background: var(--cor-tinta); color: var(--cor-sobre-tinta); }
.evento--assinatura .evento__no { border-color: var(--cor-lacre); background: var(--cor-lacre); color: var(--cor-sobre-lacre); }
.evento--decisao .evento__no { width: 1.5rem; border-radius: 3px; transform: rotate(45deg); border-color: var(--cor-tinta); background: var(--cor-superficie); color: var(--cor-tinta); }
.evento--decisao .evento__no .icone { transform: rotate(-45deg); }
.evento--colegiado .evento__no { border-color: var(--cor-colegiado); background: var(--cor-colegiado); color: var(--cor-superficie); }
.evento--arquivamento .evento__no { border-color: var(--cor-neutra); background: var(--cor-neutra); color: var(--cor-superficie); }
.evento--interno .evento__titulo::after { content: "interno"; margin-left: var(--e-2); padding: 0 .4rem; border: 1px solid var(--cor-regua-forte); border-radius: var(--raio); font-size: .6875rem; font-weight: 600; color: var(--cor-texto-suave); vertical-align: .15em; }
.evento--sem-efeito .evento__titulo, .evento--sem-efeito .evento__texto { text-decoration: line-through; text-decoration-color: var(--cor-erro); color: var(--cor-texto-suave); }
.evento__sem-efeito { display: inline-block; margin-top: var(--e-1); font-size: var(--t-xs); font-weight: 700; color: var(--cor-erro); }

/* 5.10 Assinaturas e validação (lacre) */
.assinaturas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.assinatura { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--e-3); align-items: start; padding: var(--e-3); border: var(--fio); border-left: 4px solid var(--cor-lacre); border-radius: var(--raio); background: var(--cor-superficie); }
.assinatura > .icone { color: var(--cor-lacre); grid-row: span 2; width: 1.5rem; height: 1.5rem; }
.assinatura__nome { font-weight: 700; }
.assinatura__detalhe { font-size: var(--t-xs); color: var(--cor-texto-suave); }
.assinatura--pendente { border-left-color: var(--cor-regua-forte); border-left-style: dashed; }
.assinatura--pendente > .icone { color: var(--cor-regua-forte); }
.hash { display: block; font-family: var(--fonte-mono); font-size: var(--t-xs); overflow-wrap: anywhere; word-break: break-all; padding: var(--e-2) var(--e-3); background: var(--cor-superficie-2); border-radius: var(--raio); }
.codigo-validacao { font-family: var(--fonte-mono); font-weight: 600; font-size: var(--t-lg); letter-spacing: .08em; color: var(--cor-lacre); white-space: nowrap; }
/* Prévia da tarja lateral que sai no PDF */
.tarja-amostra { display: flex; gap: var(--e-3); align-items: stretch; padding: var(--e-3); border: var(--fio); border-radius: var(--raio); background: var(--cor-superficie); font-size: .6875rem; line-height: 1.35; color: var(--cor-texto-suave); }
.tarja-amostra__faixa { width: 6px; background: var(--cor-lacre); border-radius: 2px; flex: none; }

/* 5.11 Modal (dialog) — confirmação de assinatura e formulários de ato */
.modal { width: min(32rem, calc(100vw - 2 * var(--margem-lateral))); max-height: calc(100dvh - 2rem); padding: 0; border: var(--fio); border-radius: var(--raio-g); background: var(--cor-superficie); color: var(--cor-texto); box-shadow: var(--sombra-3); overflow: auto; }
.modal::backdrop { background: rgb(10 22 30 / .55); }
.modal[open] { animation: modal-entra 160ms ease-out; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.modal__cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-4) var(--e-3); border-bottom: var(--fio); }
.modal__cabecalho h2 { margin: 0; font-size: var(--t-xl); }
.modal__corpo { padding: var(--e-4); }
.modal__corpo > :last-child { margin-bottom: 0; }
.modal__rodape { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--e-2); padding: var(--e-3) var(--e-4); border-top: var(--fio); background: var(--cor-superficie-2); }
.modal__fechar { flex: none; width: var(--alvo); height: var(--alvo); margin: calc(-1 * var(--e-2)) calc(-1 * var(--e-2)) 0 0; display: grid; place-items: center; border: 0; border-radius: var(--raio); background: none; color: var(--cor-texto-suave); cursor: pointer; }
.modal__fechar:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.modal--assinatura .modal__cabecalho { border-top: 4px solid var(--cor-lacre); border-radius: var(--raio-g) var(--raio-g) 0 0; }
.declaracao { padding: var(--e-3) var(--e-4); margin: 0 0 var(--e-4); border-left: 3px solid var(--cor-lacre); background: var(--cor-lacre-fundo); font-size: var(--t-sm); }
.declaracao strong { display: block; }
/* No celular o modal vira folha presa à base da tela */
@media (max-width: 639.98px) {
  .modal { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--raio-g) var(--raio-g) 0 0; border-bottom: 0; max-height: 92dvh; }
  .modal__rodape .botao { flex: 1 1 100%; }
}

/* 5.12 Post-it (só para o órgão; não vai aos autos) */
.postit { position: relative; align-self: start; padding: var(--e-3) var(--e-4); background: var(--cor-postit); color: var(--cor-postit-texto); border: 1px solid var(--cor-postit-borda); border-radius: 2px 2px 14px 2px; font-size: var(--t-sm); box-shadow: var(--sombra-1); }
.postit__autor { display: block; margin-top: var(--e-2); font-size: var(--t-xs); opacity: .8; }
.postits { display: grid; gap: var(--e-3); }
.postits > h2 { margin-bottom: 0; }
.postit__retirar { margin: var(--e-2) 0 0; }
.postit__retirar .botao { color: inherit; }
.postits__form { margin: 0; }

/* 5.13 Saldo da dotação */
.saldo { display: grid; gap: var(--e-2); }
.saldo__valores { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-3); font-size: var(--t-sm); }
.saldo__disponivel { font-family: var(--fonte-mono); font-weight: 600; font-size: var(--t-lg); color: var(--cor-sucesso); }
.saldo__barra { height: .5rem; border-radius: var(--raio-pilula); background: var(--cor-superficie-2); overflow: hidden; }
.saldo__usado { display: block; height: 100%; background: var(--cor-tinta); border-radius: inherit; }
.saldo--esgotado .saldo__disponivel { color: var(--cor-erro); }
.saldo--esgotado .saldo__usado { background: var(--cor-erro); }

/* 5.14 Votação da Comissão Executiva */
.placar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
@media (min-width: 640px) { .placar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.placar__item { padding: var(--e-3); border: var(--fio); border-radius: var(--raio); text-align: center; background: var(--cor-superficie); }
.placar__numero { display: block; font-family: var(--fonte-titulo); font-size: 2rem; font-weight: 600; line-height: 1; }
.placar__rotulo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--cor-texto-suave); }
.placar__item--acompanha .placar__numero { color: var(--cor-sucesso); }
.placar__item--diverge .placar__numero { color: var(--cor-erro); }
.placar__item--impedidos .placar__numero { color: var(--cor-neutra); }
.placar--compacto { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--e-2) 0; }
.placar--compacto .placar__item { padding: var(--e-2); }
.placar--compacto .placar__numero { font-size: var(--t-lg); }
.placar--compacto .placar__rotulo { letter-spacing: .02em; text-transform: none; font-weight: 600; overflow-wrap: normal; word-break: normal; hyphens: auto; }

/* 5.14a Tabela "Votação das pautas" (requisitos.md, 6.8 item 4): no celular, cada linha é um cartão (.tabela). */
.votacao__acompanhar { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo); font-size: var(--t-sm); cursor: pointer; }
.votacao__acompanhar input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--cor-tinta); }
.votacao__ordem { white-space: nowrap; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.votacao__numero a { font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--alvo); }
.votacao__assunto > span { display: block; }
.votacao__assunto-nome { font-weight: 600; }
.votacao__proposta { font-size: var(--t-xs); color: var(--cor-texto-suave); margin-top: var(--e-1); }
.votacao__form { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: flex-start; margin: 0; }
.votacao__form select { flex: 1 1 12rem; min-width: 0; min-height: var(--alvo); }
.votacao__botao { min-height: var(--alvo); }
.votacao__motivo, .votacao__meu-voto { margin: 0; font-size: var(--t-sm); }
.votacao__motivo { color: var(--cor-texto-suave); }
.votacao__aviso { display: flex; align-items: center; gap: var(--e-1); margin: 0 0 var(--e-2); color: var(--cor-sucesso); font-size: var(--t-sm); font-weight: 600; }
.votacao__expansivel > summary { cursor: pointer; min-height: var(--alvo); display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--e-1); row-gap: 0; color: var(--cor-tinta); font-size: var(--t-sm); font-weight: 600; }
.votacao__expansivel textarea { width: 100%; }
.votacao__expansivel .votos li { font-size: var(--t-xs); }
.votacao__linha--votou td { background: var(--cor-papel); }
.votacao__linha--votou .votacao__ordem, .votacao__linha--votou .votacao__numero,
.votacao__linha--votou .votacao__assunto, .votacao__linha--votou .votacao__meu-voto { opacity: .62; }
.votacao__linha--aberta { box-shadow: inset 3px 0 0 var(--cor-colegiado); }
.votacao .tabela td { grid-template-columns: minmax(7.25rem, 32%) minmax(0, 1fr); }
.votacao .tabela td::before { letter-spacing: .02em; overflow-wrap: normal; }
.votacao .tabela .placar__rotulo, .votacao__expansivel > summary { overflow-wrap: normal; }
@media (max-width: 639.98px) {
  /* No cartão, o rótulo fica na 1ª coluna e todo o conteúdo da célula na 2ª. */
  .votacao .tabela td > * { grid-column: 2; }
}
@media (min-width: 640px) {
  .votacao__tabela th:nth-child(4) { min-width: 15rem; }
  .votacao__tabela th:nth-child(5) { min-width: 10rem; }
  .votacao__tabela th:nth-child(6) { min-width: 11rem; }
  .votacao__tabela td { vertical-align: middle; }
}
.votos { list-style: none; margin: 0; padding: 0; }
.lista-orgaos { list-style: none; margin: 0; padding: 0; }
.lista-orgaos .botao { width: 100%; }
.votos li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-3); padding: var(--e-2) 0; border-top: var(--fio); font-size: var(--t-sm); }
.votos li:first-child { border-top: 0; }

/* 5.14b Cadastro de requerente: termo LGPD e qualidades */
.termo-texto { overflow-wrap: anywhere; }
.termo-texto h2 { font-size: var(--t-lg); margin-top: 0; }
.termo-texto h3 { font-size: var(--t-base); margin: var(--e-4) 0 var(--e-1); }
.termo-texto--rolagem { max-height: 18rem; overflow-y: auto; padding: var(--e-3) var(--e-4); border: var(--fio); border-radius: var(--raio); background: var(--cor-superficie-2); font-size: var(--t-sm); }
.termo-texto--rolagem:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cor-foco); }
details.cartao > summary { cursor: pointer; min-height: var(--alvo); display: flex; align-items: center; }
.qualidade .cartao__cabecalho h3 { font-size: var(--t-lg); }

/* 5.15 Estado vazio, paginação, carregamento */
.vazio { padding: var(--e-6) var(--e-4); text-align: center; border: 1px dashed var(--cor-regua-forte); border-radius: var(--raio-g); color: var(--cor-texto-suave); }
.vazio__titulo { font-family: var(--fonte-titulo); font-size: var(--t-xl); color: var(--cor-texto); margin-bottom: var(--e-2); }
.vazio > .icone { width: 2rem; height: 2rem; color: var(--cor-regua-forte); margin-bottom: var(--e-2); }
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-4); font-size: var(--t-sm); color: var(--cor-texto-suave); }
.htmx-indicator { opacity: 0; transition: opacity var(--transicao); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* 5.16 Apresentação pública (página inicial) */
.apresentacao { max-width: var(--largura-texto); padding: var(--e-5) 0 var(--e-4); }
.apresentacao h1 { font-size: var(--t-3xl); margin-bottom: var(--e-4); }
.apresentacao__texto { font-size: var(--t-lg); color: var(--cor-texto-suave); }
.apresentacao__passos { list-style: none; counter-reset: passo; margin: var(--e-6) 0 0; padding: var(--e-4) 0 0; border-top: var(--fio-duplo); display: grid; gap: var(--e-4); }
.apresentacao__passos li { counter-increment: passo; display: grid; grid-template-columns: 2rem 1fr; gap: var(--e-3); }
.apresentacao__passos li::before { content: counter(passo); font-family: var(--fonte-titulo); font-size: var(--t-xl); font-weight: 600; color: var(--cor-tinta); line-height: 1.1; }
.apresentacao__passos strong { display: block; }

/* 5.17 Vitrine do sistema de design (/estilo/) */
.estilo-secao { padding-top: var(--e-6); scroll-margin-top: var(--e-4); }
.estilo-secao > h2 { padding-bottom: var(--e-2); border-bottom: var(--fio); margin-bottom: var(--e-4); }
.estilo-indice { columns: 2 10rem; font-size: var(--t-sm); padding-left: 1.2rem; }
.amostras { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--e-2); }
.amostra { border: var(--fio); border-radius: var(--raio); overflow: hidden; font-size: var(--t-xs); background: var(--cor-superficie); }
.amostra__cor { height: 3rem; }
.amostra__nome { padding: var(--e-2); }
.amostra__nome code { display: block; color: var(--cor-texto-suave); }
.estilo-moldura { border: 1px dashed var(--cor-regua-forte); border-radius: var(--raio-g); overflow: hidden; }

/* 6. Utilitários ----------------------------------------------------------- */
.texto-suave { color: var(--cor-texto-suave); }
.texto-pequeno { font-size: var(--t-sm); }
.texto-mini { font-size: var(--t-xs); }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--e-4); } .mt-6 { margin-top: var(--e-6); }
.mb-4 { margin-bottom: var(--e-4); }
/* Em telas pequenas ou de toque, o botão compacto atinge o alvo mínimo de 44px; resumos de <details> também. */
@media (max-width: 600px), (pointer: coarse) {
  .botao--pequeno { min-height: var(--alvo); }
  .dados dt > a:only-child { display: inline-flex; align-items: center; min-height: var(--alvo); }
  details:not(.cartao):not(.seletor-orgao) > summary { min-height: var(--alvo); padding-block: .6rem; box-sizing: border-box; cursor: pointer; }
}
.afastamento__encerrar { align-items: flex-end; }
.afastamento__encerrar label { display: block; width: 100%; }


/* Breakpoints ----------------------------------------------------------- */
@media (min-width: 640px) {
  :root { --margem-lateral: 24px; }
  .cartao { padding: var(--e-5); }
  .cartao__rodape { margin: var(--e-5) calc(-1 * var(--e-5)) calc(-1 * var(--e-5)); padding: var(--e-3) var(--e-5); }
  .grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dados { grid-template-columns: minmax(8rem, max-content) 1fr; }
  .dados dt { margin-top: 0; padding-top: .2rem; }
  /* Tabela de verdade */
  .tabela-envoltorio { overflow-x: auto; background: var(--cor-superficie); border: var(--fio); border-radius: var(--raio-g); }
  .tabela thead { display: table-header-group; }
  .tabela tr { display: table-row; border: 0; padding: 0; margin: 0; border-radius: 0; background: none; }
  .tabela th, .tabela td { display: table-cell; padding: var(--e-3) var(--e-4); border-bottom: var(--fio); vertical-align: top; }
  .tabela thead th { background: var(--cor-superficie-2); }
  .tabela tbody tr:last-child td { border-bottom: 0; }
  .tabela tbody tr:hover td { background: var(--cor-papel); }
  .tabela td::before { display: none; }
  .tabela td.num { text-align: right; }
  .caixa__link { padding: var(--e-3) var(--e-5) var(--e-3) calc(var(--e-5) + 4px); }
  .caixa__mover { padding-left: calc(var(--e-5) + 4px); padding-right: var(--e-5); }
}
@media (min-width: 960px) {
  :root { --margem-lateral: 32px; }
  .conteudo { padding-top: var(--e-6); }
  .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Autos: linha do tempo larga + coluna lateral com dados e ações */
  .grade--autos { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--e-6); align-items: start; }
  .lateral-fixa { position: sticky; top: var(--e-4); }
  /* Linha do tempo com margem de livro: data à esquerda */
  .evento { grid-template-columns: 7.5rem 1.5rem 1fr; }
  .evento::before { left: calc(7.5rem + var(--e-3) + .75rem - 1px); }
  .evento__no { grid-column: 2; }
  .evento__margem { grid-column: 1; grid-row: 1 / span 3; flex-direction: column; align-items: flex-end; text-align: right; padding-top: .15rem; }
  .evento__corpo { grid-column: 3; grid-row: 1 / span 3; }
  .evento__momento span { display: block; }
}
@media (max-width: 420px) {
  .marca__nome { display: none; }
  .topo__nome { max-width: 7rem; }
  .seletor-orgao { margin-left: 0; width: 100%; }
  .seletor-orgao > summary { width: 100%; justify-content: flex-start; }
  .seletor-orgao > summary .icone:last-child { margin-left: auto; }
  .seletor-orgao__painel { left: 0; right: auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .topo, .atuacao, .rodape, .cabecalho-pagina__acoes, .acoes, .botao, .pular, .modal { display: none !important; }
  body { background: #fff; color: #000; }
  .cartao { box-shadow: none; border-color: #999; }
}

/* WP4 — página do documento (minuta, assinatura) e validação pública */
.documento-pagina { max-width: 52rem; }
.texto-ato { font-family: var(--fonte-titulo); font-size: var(--t-base); line-height: 1.6; overflow-wrap: anywhere; }
.texto-ato p { margin: 0 0 var(--e-3); }
.lista-documentos__item--sem-efeito .lista-documentos__titulo { text-decoration: line-through; text-decoration-color: var(--cor-erro); color: var(--cor-texto-suave); }
.validacao__resultado { margin-top: var(--e-4); }
.validacao__selo { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 700; color: var(--cor-lacre); }


/* ---------------------------------------------------------------- WP6: intimações e participação do requerente */
.intimacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.intimacao { border: 1px solid var(--cor-regua); border-left: 4px solid var(--cor-info); border-radius: var(--raio);
  padding: var(--e-3) var(--e-4); background: var(--cor-superficie); min-width: 0; }
.intimacao--pendente { border-left-color: var(--cor-atencao); }
.intimacao__cabecalho { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-items: baseline;
  justify-content: space-between; }
.intimacao__titulo { font-weight: 700; margin: 0; }
.intimacao__meta { font-size: var(--t-xs); color: var(--cor-texto-suave); margin: var(--e-1) 0 0; overflow-wrap: anywhere; }
.intimacao__texto { margin: var(--e-2) 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.intimacao__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.intimacao__acoes form { display: contents; }
@media (max-width: 639.98px) {
  .intimacao__acoes .botao { flex: 1 1 100%; justify-content: center; }
}
.modelos-texto { display: grid; gap: var(--e-2); }
.modelos-texto .linha { align-items: flex-end; }
.modelos-texto select { min-width: 0; max-width: 100%; }
.anexo-atual { font-size: var(--t-sm); overflow-wrap: anywhere; }