/* Estúdio de Conteúdo CasaRN360 — visual do kit "Painel CASARN360"
   (sidebar #003600, destaque #6dc07f, cartões brancos arredondados, Inter).
   CSS escrito à mão: sem Tailwind, sem JS e sem estilos inline (CSP estrita). */

@font-face { font-family: 'Inter'; src: url('/static/fontes/Inter.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/static/fontes/Montserrat.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
  --brand-dark: #003600;
  --brand-light: #6dc07f;
  --brand: #3e8c25;
  --background: #f7f9f7;
  --foreground: #0d1a0d;
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
  --gray-400: #9ca3af; --gray-500: #6b7280; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827;
  --red-50: #fef2f2; --red-200: #fecaca; --red-700: #b91c1c;
  --raio: 16px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .05);
  /* paleta da marca (marca.toml); as amostras do Visual usam só estas */
  --marca-verde: #3e8c25;
  --marca-verde_escuro: #003600;
  --marca-fundo_claro: #f0f4f1;
  --marca-texto: #0d130e;
  --marca-destaque: #8cd66e;
  --marca-branco: #ffffff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }

/* ── Layout: sidebar + conteúdo ─────────────────────────── */
.layout { display: flex; min-height: 100vh; }
.lateral { width: 240px; flex-shrink: 0; background: var(--brand-dark); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.lateral-marca { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .1); text-align: center; }
.logo-link { display: inline-block; }
.logo-branco { filter: brightness(0) invert(1); object-fit: contain; display: block; }
.logo-lateral { height: 64px; width: auto; margin: 0 auto; }
.lateral-sub { font-size: 12px; color: rgba(255, 255, 255, .4); margin-top: .35rem; }
.lateral-nav { flex: 1; padding: 1rem .75rem; display: flex; flex-direction: column; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: 8px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .65); text-decoration: none; transition: color .15s, background .15s; }
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item:hover { color: #fff; }
.nav-item.ativo { background: var(--brand-light); color: var(--brand-dark); }
.lateral-usuario { padding: 1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.usuario-linha { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.avatar { width: 32px; height: 32px; border-radius: 999px; background: rgba(109, 192, 127, .25); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.usuario-info { min-width: 0; display: flex; flex-direction: column; }
.usuario-nome { font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-email { font-size: 12px; color: rgba(255, 255, 255, .4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-usuario form { margin: 0; }
.botao-sair { background: none; border: 0; padding: .25rem 0; color: rgba(255, 255, 255, .4); font: inherit; font-size: 12px; cursor: pointer; }
.botao-sair:hover { color: #fff; }

.conteudo { flex: 1; min-width: 0; }
.conteudo-interno { padding: 1.5rem; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }

/* Mobile: header fixo + drawer (CSS puro, checkbox) */
.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.topo-mobile, .menu-fundo { display: none; }
@media (max-width: 767px) {
  .topo-mobile { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 56px; align-items: center; justify-content: space-between; padding: 0 1rem; background: var(--brand-dark); }
  .logo-mobile { height: 32px; width: auto; }
  .botao-menu { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; }
  .botao-menu svg { width: 24px; height: 24px; }
  .lateral { position: fixed; top: 0; left: 0; height: 100%; width: 256px; z-index: 50; transform: translateX(-100%); transition: transform .2s ease; }
  .menu-toggle:checked ~ .layout .lateral { transform: none; }
  .menu-toggle:checked ~ .menu-fundo { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 40; }
  .conteudo { padding-top: 56px; }
  .conteudo-interno { padding: 1rem; }
}

/* ── Tipografia e cabeçalho de página ───────────────────── */
.cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.cabecalho-texto { min-width: 0; }
.acoes-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.titulo-pagina, .titulo-item { font-size: 20px; font-weight: 700; color: var(--gray-900); overflow-wrap: anywhere; }
.subtitulo { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
.rotulo-secao { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-400); margin-bottom: -.75rem; }
.texto-sutil { font-size: 13px; color: var(--gray-500); }
.meta { display: block; font-size: 12px; color: var(--gray-400); }
.link { font-size: 12px; font-weight: 500; color: var(--brand-dark); }
.migalhas { font-size: 12px; color: var(--gray-400); margin-bottom: 4px; overflow-wrap: anywhere; }
.migalhas a { color: var(--brand-dark); text-decoration: none; font-weight: 500; }
.migalhas a:hover { text-decoration: underline; }
.migalhas .sep { margin: 0 6px; color: var(--gray-300); }

/* ── Superfícies ─────────────────────────────────────────── */
.cartao { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao-cabecalho { padding: .75rem 1.25rem; border-bottom: 1px solid var(--gray-50); }
.cartao-titulo { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.cartao-corpo { padding: 1rem 1.25rem; }
.vazio { padding: 2.5rem 1rem; text-align: center; color: var(--gray-400); }

.metricas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.metrica { padding: 1rem; }
.metrica-valor { font-size: 30px; font-weight: 700; color: var(--gray-700); line-height: 1.1; }
.metrica-rotulo { font-size: 12px; color: var(--gray-400); margin-top: 4px; }

/* ── Botões e campos ─────────────────────────────────────── */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--brand-dark); color: #fff; border: 0; border-radius: 8px; padding: .5rem 1rem; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; }
.botao:hover { opacity: .9; }
.botao-cheio { width: 100%; padding: .65rem 1rem; font-size: 14px; border-radius: 8px; }
label { display: block; font-size: 13px; font-weight: 500; color: var(--gray-700); margin-bottom: 4px; }
input[type=email], input[type=password], input[type=text], input[type=date] { width: 100%; padding: .6rem .75rem; border: 1px solid var(--gray-200); border-radius: 8px; font: inherit; font-size: 14px; color: var(--gray-900); background: #fff; }
input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--brand-light); }
.erro { background: var(--red-50); border: 1px solid var(--red-200); color: var(--red-700); font-size: 13px; padding: .5rem .75rem; border-radius: 8px; margin-bottom: 1rem; }
.texto-erro { color: var(--red-700); }

.filtro { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--gray-100); border-radius: 12px; padding: .5rem .75rem; box-shadow: var(--sombra); }
.filtro label { margin: 0; font-size: 12px; color: var(--gray-500); }
.filtro input[type=date] { width: auto; padding: .35rem .5rem; font-size: 12px; }

/* ── Lista de pastas (linhas dentro de um cartão) ───────── */
.lista-cartao { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.lista-cartao li + li { border-top: 1px solid var(--gray-50); }
.linha { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.25rem; text-decoration: none; transition: background .15s; }
.linha:hover { background: rgba(249, 250, 251, .8); }
.icone-pasta { width: 32px; height: 32px; border-radius: 8px; background: rgba(109, 192, 127, .18); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icone-pasta svg { width: 16px; height: 16px; }
.linha-texto { flex: 1; min-width: 0; }
.linha-texto strong { display: block; font-size: 14px; font-weight: 500; color: var(--gray-900); overflow-wrap: anywhere; }
.seta { color: var(--gray-300); font-size: 20px; line-height: 1; }
.selo-pasta { flex-shrink: 0; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #15803d; }

/* ── Grade de arquivos ───────────────────────────────────── */
.grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.cartao-item a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.cartao-item a:hover { border-color: var(--brand-light); box-shadow: 0 4px 12px rgba(0, 54, 0, .08); }
.miniatura { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--gray-100); overflow: hidden; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sem-thumb { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-400); }
.selo-novo { position: absolute; top: 8px; left: 8px; background: var(--brand-light); color: var(--brand-dark); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.selo-video { position: absolute; bottom: 8px; right: 8px; width: 24px; height: 24px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.cartao-texto { padding: .6rem .75rem .75rem; }
.cartao-item .nome { display: block; font-size: 13px; font-weight: 500; color: var(--gray-900); overflow-wrap: anywhere; }

/* ── Detalhe do item ─────────────────────────────────────── */
.item-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.visor { background: #0b0f0b; border-radius: var(--raio); overflow: hidden; display: flex; justify-content: center; }
.visor img, .visor video { max-width: 100%; max-height: 75vh; display: block; }
.aviso-midia { color: rgba(255, 255, 255, .8); padding: 4rem 1rem; text-align: center; }
.detalhes dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-400); margin-top: .75rem; }
.detalhes dt:first-child { margin-top: 0; }
.detalhes dd { margin: 2px 0 0; color: var(--gray-800); overflow-wrap: anywhere; }
.badge { display: inline-block; font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); }
.badge-ok { background: #dcfce7; color: #15803d; }
.badge-pendente { background: #fef9c3; color: #a16207; }
.badge-erro { background: #fee2e2; color: #b91c1c; }
@media (max-width: 900px) { .item-layout { grid-template-columns: 1fr; } }

/* ── Status / auditoria ──────────────────────────────────── */
.tabela-rolagem { overflow-x: auto; }
.auditoria { width: 100%; border-collapse: collapse; font-size: 13px; }
.auditoria th, .auditoria td { text-align: left; padding: .6rem 1.25rem; border-bottom: 1px solid var(--gray-50); overflow-wrap: anywhere; }
.auditoria th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-400); }
.auditoria tbody tr:hover { background: rgba(249, 250, 251, .8); }

/* ── Login (painel verde + formulário) ───────────────────── */
.login { min-height: 100vh; display: flex; background: var(--background); }
.login-marca { display: none; }
@media (min-width: 1024px) {
  .login-marca { display: flex; width: 50%; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; background: var(--brand-dark); }
}
.login-logo { width: 150px; height: auto; margin: 0 auto 1rem; }
.login-marca-sub { color: rgba(255, 255, 255, .5); font-size: 14px; }
.login-lista { list-style: none; margin: 2.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.login-lista li { display: flex; align-items: center; gap: .75rem; color: rgba(255, 255, 255, .7); font-size: 14px; }
.check { width: 20px; height: 20px; border-radius: 999px; background: var(--brand-light); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.check svg { width: 12px; height: 12px; }
.login-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-caixa { width: 100%; max-width: 384px; }
.login-topo-mobile { text-align: center; margin-bottom: 2rem; }
.login-logo-mobile { height: 64px; width: auto; margin: 0 auto .5rem; display: block; }
@media (min-width: 1024px) { .login-topo-mobile { display: none; } }
.cartao-login { padding: 2rem; }
.titulo-login { font-size: 20px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }
.cartao-login .texto-sutil { margin-bottom: 1.5rem; }
.form-login { display: flex; flex-direction: column; gap: 1rem; }
.login-troca { text-align: center; font-size: 13px; color: var(--gray-500); margin-top: 1.25rem; }
.cartao-login .aviso-ok { margin-bottom: .5rem; }
.login-rodape { text-align: center; font-size: 13px; color: var(--gray-400); margin-top: 1.5rem; }

/* ── Pacotes ─────────────────────────────────────────────── */
.linha-pacote { flex-wrap: wrap; }
.linha-pacote .linha-texto { flex-basis: 12rem; }
.badge-status { font-size: 11px; font-weight: 600; padding: 2px 10px; }
.badge-status-proposta { background: #dbeafe; color: #1d4ed8; }
.badge-status-propondo, .badge-status-gerando, .badge-status-enviando { background: #fef9c3; color: #a16207; }
.badge-status-gerado { background: #f3e8ff; color: #7e22ce; }
.badge-status-enviado { background: #dcfce7; color: #15803d; }
.badge-status-erro_proposta, .badge-status-erro_geracao, .badge-status-erro_envio { background: #fee2e2; color: #b91c1c; }
.custo { font-size: 12px; color: var(--gray-500); }

.form-pacote { display: flex; flex-direction: column; gap: 1.5rem; }
.form-pacote .cartao-corpo { display: flex; flex-direction: column; gap: 1rem; }
.form-pacote .erro ul { margin: 0; padding-left: 1.1rem; }
.campos-linha { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
textarea, select { width: 100%; padding: .6rem .75rem; border: 1px solid var(--gray-200); border-radius: 8px; font: inherit; font-size: 14px; color: var(--gray-900); background: #fff; }
textarea:focus, select:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--brand-light); }
textarea { min-height: 8rem; resize: vertical; }
select[multiple] { min-height: 8rem; }
.opcoes { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.opcao { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .5rem .75rem; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; cursor: pointer; }
.opcao input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--brand-dark); }
/* Grade do seletor (30 por página): 6 por linha em tela larga, menos colunas nas estreitas. */
.grade-marcavel { gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .grade-marcavel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grade-marcavel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grade-marcavel { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.grade-marcavel .cartao-item label { display: flex; flex-direction: column; height: 100%; margin: 0; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; cursor: pointer; }
.grade-marcavel .cartao-item label:has(input:checked) { border-color: var(--brand-light); box-shadow: 0 0 0 2px var(--brand-light); }
.grade-marcavel .marca { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; accent-color: var(--brand-dark); }
.nota-uso { color: #a16207; }
.secao-itens { display: flex; flex-direction: column; gap: .5rem; counter-reset: selecionados; }
.secao-itens .marca:checked, .conta-oculto { counter-increment: selecionados; }
/* Barra do seletor: vem por último no HTML (o contador já somou tudo) e o CSS a põe no topo. */
.barra-seletor { order: -1; position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .5rem 0; background: var(--background); }
.barra-seletor-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.barra-seletor-resumo .meta { display: inline; }
.filtro-tipo { display: inline-flex; gap: 0; }
.filtro-tipo .botao { border-radius: 0; }
.filtro-tipo .botao:first-child { border-radius: 8px 0 0 8px; }
.filtro-tipo .botao:last-child { border-radius: 0 8px 8px 0; }
.filtro-tipo .botao + .botao { margin-left: -1px; }
.filtro-tipo .botao[aria-pressed="true"] { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
/* Celular: 6 filtros (posts do Instagram) não cabem numa linha; quebram em botões soltos. */
@media (max-width: 599px) {
  .filtro-tipo { flex-wrap: wrap; gap: 6px; max-width: 100%; }
  .filtro-tipo .botao, .filtro-tipo .botao:first-child, .filtro-tipo .botao:last-child { border-radius: 8px; }
  .filtro-tipo .botao + .botao { margin-left: 0; }
}
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--gray-800); overflow-wrap: anywhere; }
.trilha .sep { color: var(--gray-300); font-weight: 400; }
.trilha button, .cartao-pasta { font: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.trilha button { color: var(--brand-dark); font-weight: 500; }
.trilha button:hover, .trilha button:focus-visible { text-decoration: underline; }
.contagem-selecao { font-size: 12px; font-weight: 600; color: var(--brand-dark); background: #fff; border: 1px solid var(--gray-200); border-radius: 999px; padding: 4px 12px; }
.contagem-selecao::before { content: counter(selecionados) " selecionados"; }
@media (max-width: 767px) { .barra-seletor { top: 56px; } }
.cartoes-pasta { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.cartao-pasta { display: flex; align-items: center; gap: .75rem; width: 100%; height: 100%; padding: .75rem 1rem; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--raio); box-shadow: var(--sombra); color: var(--gray-800); overflow-wrap: anywhere; transition: background .15s; }
.cartao-pasta:hover, .cartao-pasta:focus-visible { background: var(--gray-50); }
.cartao-pasta .linha-texto { min-width: 0; }
/* Início da Biblioteca: dois cartões grandes (1 coluna no celular, 2 a partir de 600px). */
.cartoes-biblioteca { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .cartoes-biblioteca { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cartoes-biblioteca .cartao-pasta { padding: 1.25rem 1.5rem; }
.cartoes-biblioteca .cartao-pasta strong { font-size: 18px; }
.marcados-pasta { color: var(--brand-dark); font-weight: 600; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.paginacao { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.botao-claro { background: #fff; color: var(--brand-dark); border: 1px solid var(--gray-200); }
.pagina-atual { cursor: default; }

/* ── Pacote: espera, prévias e editor ────────────────────── */
.espera { padding: 2rem 1.25rem; text-align: center; }
.espera-titulo { font-size: 16px; font-weight: 600; color: var(--gray-800); margin-bottom: .25rem; }
.texto-quebras { white-space: pre-line; overflow-wrap: anywhere; }
.aviso-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; font-size: 13px; padding: .5rem .75rem; border-radius: 8px; }
.erro ul { margin: 0; padding-left: 1.1rem; }
.cabecalho-peca { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.observacao { font-size: 13px; color: var(--gray-500); }

.pecas-geradas { display: flex; flex-direction: column; gap: 1rem; }
.pecas-geradas > .cabecalho-pagina { align-items: center; }
.pecas-geradas form { margin: 0; }
.badge-render-ok { background: #dcfce7; color: #15803d; }
.badge-render-na_fila, .badge-render-renderizando { background: #fef9c3; color: #a16207; }
.badge-render-erro { background: #fee2e2; color: #b91c1c; }
.avisos { margin: 0 0 .75rem; padding-left: 1.1rem; font-size: 13px; color: #a16207; }
.previas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.previa { display: flex; flex-direction: column; gap: .4rem; }
.previa img, .previa video { width: 100%; max-height: 420px; object-fit: contain; background: #0b0f0b; border-radius: 12px; display: block; }
.previa-arquivo { display: flex; align-items: center; justify-content: center; min-height: 80px; border: 1px dashed var(--gray-200); border-radius: 12px; font-size: 12px; color: var(--gray-500); overflow-wrap: anywhere; padding: .5rem; }

.form-editor { display: flex; flex-direction: column; gap: 1.5rem; }
.corpo-peca { display: flex; flex-direction: column; gap: 1rem; }
.campo { min-width: 0; }
.contador { display: block; font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.erro-campo { font-size: 12px; color: var(--red-700); margin-top: 2px; }
.campo-com-erro input, .campo-com-erro select, .campo-com-erro textarea { border-color: var(--red-200); background: var(--red-50); }
input[type=number] { width: 100%; padding: .6rem .75rem; border: 1px solid var(--gray-200); border-radius: 8px; font: inherit; font-size: 14px; color: var(--gray-900); background: #fff; }
fieldset { border: 1px solid var(--gray-100); border-radius: 12px; padding: .75rem 1rem 1rem; margin: 0; min-width: 0; }
legend { font-size: 13px; font-weight: 600; color: var(--gray-700); padding: 0 .35rem; }
.grupo-foto { display: flex; flex-direction: column; gap: .75rem; }
.campos-foco { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.item-escolha { display: flex; align-items: center; gap: .6rem; }
.item-escolha select { flex: 1; min-width: 0; }
.mini { width: 64px; height: 64px; flex-shrink: 0; object-fit: cover; border-radius: 8px; background: var(--gray-100); }
.mini-vazia { display: flex; align-items: center; justify-content: center; color: var(--gray-400); }
.grupo-lista { display: flex; flex-direction: column; gap: .75rem; }
.linha-lista { display: grid; gap: .75rem; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); padding: .75rem; border: 1px solid var(--gray-100); border-radius: 12px; background: var(--gray-50); }
.linha-lista .campo-item, .linha-slide .grupo-foto, .linha-slide .campo:has(textarea) { grid-column: 1 / -1; }
.linha-num { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--gray-400); }
.lista-textos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.botoes-linha { display: flex; gap: .4rem; align-self: end; }
.botao-icone { width: 36px; height: 36px; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; color: var(--gray-700); font: inherit; font-size: 15px; cursor: pointer; }
.botao-icone:hover { border-color: var(--brand-light); }
.botao-remover { color: var(--red-700); }
.botao:disabled, .botao-icone:disabled { opacity: .4; cursor: not-allowed; }

/* ── Pacote em etapas ────────────────────────────────────── */
.etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.etapa { display: inline-block; font: inherit; font-size: 13px; font-weight: 500; color: var(--gray-400); padding: .35rem .85rem; border: 1px solid var(--gray-100); border-radius: 999px; background: #fff; }
.etapa-link { color: var(--brand-dark); border-color: var(--gray-200); cursor: pointer; }
.etapa-link:hover { background: var(--gray-50); }
.etapa-atual { color: #fff; background: var(--brand-dark); border-color: var(--brand-dark); }
.quantidades { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.resumo { margin: 0; padding-left: 1.1rem; font-size: 14px; color: var(--gray-700); }
.badge-status-rascunho { background: var(--gray-100); color: var(--gray-500); }
.autor { color: var(--gray-500); }
.linha-com-acao { display: flex; align-items: center; }
.linha-com-acao > .linha { flex: 1; min-width: 0; }
.acao-linha { padding: 0 1.25rem 0 0; }
/* Ampliar (seletor): fora do <label>, no canto da miniatura; aparece ao passar o mouse ou com
   foco (sempre visível em tela de toque). A janela é montada por lightbox.js. */
.grade-marcavel .cartao-item { position: relative; }
.grade-marcavel .ampliar { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; flex-direction: row; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 16px; line-height: 1; text-decoration: none; box-shadow: none; opacity: 0; transition: opacity .15s; }
.grade-marcavel .cartao-item:hover .ampliar, .grade-marcavel .ampliar:focus-visible { opacity: 1; }
.grade-marcavel .ampliar:hover { background: var(--brand-dark); border-color: transparent; box-shadow: none; }
@media (hover: none) { .grade-marcavel .ampliar { opacity: 1; } }
.lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .8); }
.lightbox[hidden] { display: none; }
.lightbox-caixa { position: relative; max-width: 100%; max-height: 100%; }
.lightbox-midia img, .lightbox-midia video { display: block; max-width: min(92vw, 1100px); max-height: 85vh; width: auto; height: auto; border-radius: 8px; background: #000; }
.lightbox-fechar { position: absolute; top: -12px; right: -12px; width: 36px; height: 36px; border: 0; border-radius: 999px; background: #fff; color: var(--gray-900); font: inherit; font-size: 16px; cursor: pointer; box-shadow: var(--sombra); }
.lightbox-fechar:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
body.lightbox-aberto { overflow: hidden; }

/* ── Pacote: seção Visual de cada peça (sem JS) ─────────── */
.visual { border: 1px solid var(--gray-100); border-radius: 12px; background: #fff; }
.visual-corpo { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
.visual-controles { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
@media (min-width: 900px) {
  .visual-controles { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: start; }
  .visual-controles > :not(.bloco-visual) { grid-column: 1 / -1; }
}
.bloco-visual { display: flex; flex-direction: column; gap: .5rem; padding: .5rem .75rem .75rem; }
.bloco-visual > legend { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); }
.bloco-visual .grupo-visual { border: 0; padding: 0; gap: .25rem; }
.bloco-visual .grupo-visual > legend { font-size: 12px; font-weight: 500; padding: 0; }
.nota-capa { margin: 0; font-size: 12px; }
/* Prévia ao vivo (visual.js): sem JS a coluna fica escondida e só os controles aparecem */
.previa-coluna { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.previa-coluna[hidden] { display: none; }
.previa-visual { display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: 340px; }
.previa-visual canvas { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--gray-100); cursor: crosshair; }
.previa-quadro, .previa-midia { display: none; }  /* só dados para o visual.js */
.previa-controles { display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: 340px; align-self: center; }
.previa-controles:empty { display: none; }
.previa-tocar { align-self: flex-start; }
.previa-tocar[hidden] { display: none; }
.previa-nota { margin: 0; font-size: 12px; color: var(--gray-500); text-align: center; }
@media (min-width: 900px) {
  .previa-coluna { position: sticky; top: 1rem; }
}
.grupo-visual { display: flex; flex-direction: column; gap: .6rem; }
.grades { display: flex; flex-wrap: wrap; gap: .75rem; }
.grades .grupo-visual { border-color: var(--gray-50); }
.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; }
/* rádio/caixa nativos ficam acessíveis (teclado e leitor de tela), mas invisíveis */
.casa-grade input, .amostra-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.grade-3x3 { display: grid; grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(3, 36px); gap: 4px; padding: 4px; width: max-content; border-radius: 10px; background: var(--gray-100); }
.casa-grade { position: relative; display: flex; align-items: center; justify-content: center; margin: 0; border: 1px solid var(--gray-200); border-radius: 6px; background: #fff; cursor: pointer; }
.casa-marca { width: 12px; height: 12px; border-radius: 999px; border: 2px solid var(--gray-300); }
.casa-grade:hover { border-color: var(--brand-light); }
.casa-grade:has(input:checked) { background: var(--brand-dark); border-color: var(--brand-dark); }
.casa-grade:has(input:checked) .casa-marca { background: var(--brand-light); border-color: var(--brand-light); }
.casa-grade:has(input:focus-visible), .amostra-opcao:has(input:focus-visible) { outline: 2px solid var(--brand-light); outline-offset: 2px; }
.amostras { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.amostra-opcao { position: relative; display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: 2px; border: 2px solid transparent; border-radius: 999px; cursor: pointer; }
.amostra-opcao:has(input:checked) { border-color: var(--brand-dark); }
.amostra { display: inline-block; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--gray-300); }
.amostra-nome { font-size: 12px; color: var(--gray-700); padding-right: .35rem; }
.amostra-padrao { background: linear-gradient(135deg, #fff 45%, var(--gray-400) 45%, var(--gray-400) 55%, #fff 55%); }
.amostra-verde { background: var(--marca-verde); }
.amostra-verde_escuro { background: var(--marca-verde_escuro); }
.amostra-destaque { background: var(--marca-destaque); }
.amostra-branco { background: var(--marca-branco); }
.amostra-texto { background: var(--marca-texto); }
.amostra-fundo_claro { background: var(--marca-fundo_claro); }
.opcoes-visual { display: flex; flex-wrap: wrap; gap: .4rem; }
.opcao-visual, .caixa-visual { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .35rem .75rem; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; font-size: 13px; cursor: pointer; }
.opcao-visual:has(input:checked), .caixa-visual:has(input:checked) { border-color: var(--brand-dark); background: rgba(109, 192, 127, .15); color: var(--brand-dark); }
.opcao-visual input, .caixa-visual input { accent-color: var(--brand-dark); margin: 0; }
.campo-forca input[type=range] { width: 100%; max-width: 320px; accent-color: var(--brand-dark); }

/* ── Pacote: editor em abas (editor.js põe .com-abas no formulário; sem JS, tudo empilhado) ── */
.com-abas [hidden] { display: none !important; }
.com-abas .barra-pecas { display: flex; flex-wrap: wrap; gap: .4rem; position: relative; } /* prende os .so-leitor (absolutos) das abas ao rolador */
.com-abas .aba-peca { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border: 1px solid var(--gray-200); border-radius: 999px; background: #fff; color: var(--gray-700); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.com-abas .aba-peca:hover { border-color: var(--brand-light); }
.com-abas .aba-peca[aria-selected=true] { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.com-abas .ponto { display: inline-block; width: 9px; height: 9px; flex-shrink: 0; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
.com-abas .ponto-erro { background: #dc2626; }
.com-abas .ponto-pendente { background: #f59e0b; }
.com-abas .ponto-ok { background: #16a34a; }
.com-abas .peca-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
.com-abas .peca-previa, .com-abas .peca-abas { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.com-abas .abas, .com-abas .abas-previa { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--gray-100); }
.com-abas .abas [role=tab], .com-abas .abas-previa [role=tab] { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: -1px; padding: .45rem .85rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--gray-500); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.com-abas .abas [role=tab]:hover, .com-abas .abas-previa [role=tab]:hover { color: var(--brand-dark); }
.com-abas .abas [aria-selected=true], .com-abas .abas-previa [aria-selected=true] { color: var(--brand-dark); border-bottom-color: var(--brand-dark); }
.com-abas .abas-previa [role=tab]:disabled { cursor: not-allowed; opacity: .6; }
.com-abas .abas .aba-com-erro { color: var(--red-700); }
.com-abas .abas .aba-com-erro::after { content: ''; width: 7px; height: 7px; border-radius: 999px; background: #dc2626; }
.com-abas .aba-painel { display: flex; flex-direction: column; gap: 1rem; max-height: calc(100vh - 12rem); overflow-y: auto; padding-right: .25rem; }
.com-abas .rodape-peca { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 -1.25rem -1rem; padding: .75rem 1.25rem; border-top: 1px solid var(--gray-100); border-radius: 0 0 var(--raio) var(--raio); background: #fff; }
/* Topo da peça: ← nome → e, à direita, erros, selo da arte e "N avisos ▾" */
.titulo-peca { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.selos-peca { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
.com-abas .seta-peca { width: 30px; height: 30px; flex-shrink: 0; padding: 0; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; color: var(--gray-700); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.com-abas .seta-peca:hover:not(:disabled) { border-color: var(--brand-light); color: var(--brand-dark); }
.com-abas .seta-peca:disabled { opacity: .35; cursor: not-allowed; }
.selo-pronta { background: #dcfce7; color: #15803d; }
.selo-gerando { background: #fef9c3; color: #a16207; }
.selo-falhou { background: #fee2e2; color: #b91c1c; }
.selo-alterado { background: #dbeafe; color: #1d4ed8; }
.avisos-peca { position: relative; font-size: 10px; }
.avisos-peca > summary { list-style: none; display: inline-block; padding: 2px 8px; border-radius: 999px; background: #fef3c7; color: #a16207; font-weight: 500; cursor: pointer; }
.avisos-peca > summary::-webkit-details-marker { display: none; }
.avisos-peca .avisos { margin: .4rem 0 0; }
.com-abas .avisos-peca .avisos { position: absolute; top: calc(100% + .35rem); right: 0; z-index: 5; width: max-content; max-width: min(26rem, 80vw); padding: .6rem .75rem .6rem 1.6rem; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
/* Tira de itens: em linha, rola na horizontal */
.com-abas .tira { position: relative; display: flex; align-items: center; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.com-abas .tira-lista { display: flex; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.com-abas .tira-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 3px; border: 2px solid transparent; border-radius: 10px; color: var(--gray-700); font-size: 11px; white-space: nowrap; text-decoration: none; }
.com-abas .tira-item:hover { border-color: var(--brand-light); }
.com-abas .tira-item .mini { width: 56px; height: 56px; }
.com-abas .tira-item[aria-current=true] { border-color: var(--brand-dark); color: var(--brand-dark); font-weight: 600; }
.com-abas .tira-erro { color: var(--red-700); }
.com-abas .tira-aviso { position: absolute; top: 2px; right: 5px; color: #dc2626; font-size: 13px; line-height: 1; }
.com-abas .mini-fecho { background: var(--brand-dark); }
.com-abas .tira-mais { flex-shrink: 0; min-height: 56px; padding: 0 .75rem; border: 1px dashed var(--gray-300); border-radius: 10px; background: #fff; color: var(--gray-700); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.com-abas .tira-mais:hover { border-color: var(--brand-dark); color: var(--brand-dark); }
/* Prévia grande e fixa ao rolar (só em tela larga) */
.com-abas .previa-visual, .com-abas .previas img, .com-abas .previas video { max-width: none; width: 100%; }
@media (min-width: 900px) {
  .com-abas .peca-previa { position: sticky; top: 1rem; align-self: start; }
}
@media (max-width: 767px) {
  .com-abas .peca-grade { grid-template-columns: minmax(0, 1fr); }
  .com-abas .aba-painel { height: auto; max-height: none; overflow-y: visible; padding-right: 0; }
  .com-abas .barra-pecas { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding-bottom: .25rem; }
  .com-abas .aba-peca { flex-shrink: 0; }
}

/* ── Edição compacta por item ────────────────────────────── */
.item-cabecalho { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 700; color: var(--gray-700); }
.campos-item { display: grid; gap: .75rem; align-items: start; grid-template-columns: minmax(12rem, 1fr) minmax(6rem, 8rem) minmax(6rem, 8rem); }
.campos-item .item-escolha-mini .mini { flex: 0 0 48px; width: 48px; height: 48px; }
.campos-item .item-escolha select { min-width: 12rem; }
.campos-item .campo-numero input { width: 100%; min-width: 6rem; }
.campos-item .campo-item { min-width: 0; }
@media (max-width: 560px) { .campos-item { grid-template-columns: 1fr 1fr; } .campos-item .item-escolha select { min-width: 0; } .campos-item .campo-item { grid-column: 1 / -1; } }
.ajuste-foco { grid-column: 1 / -1; }
.ajuste-foco > summary { cursor: pointer; font-size: 12px; color: var(--gray-400); padding: .15rem 0; }
.ajuste-foco[open] > summary { color: var(--gray-700); margin-bottom: .5rem; }
.botao-mover { min-height: 36px; padding: 0 .65rem; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; color: var(--gray-700); font: inherit; font-size: 13px; cursor: pointer; }
.botao-mover:hover { border-color: var(--brand-light); }
.botao-mover.botao-remover { color: var(--red-700); }
.baixar { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: 13px; }
.versao-anterior { background: var(--gray-100); color: var(--gray-700); }
.botao-mover:disabled { opacity: .4; cursor: not-allowed; }
.botoes-linha { flex-wrap: wrap; grid-column: 1 / -1; align-self: start; }
.item-fecho-bloco { display: flex; flex-direction: column; gap: .35rem; }

/* Rodapé do pacote: "Gerar peças", a dica e "Aprovar e enviar" na mesma linha. */
.rodape-pacote { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.rodape-pacote .acoes { margin: 0; }

/* ── Usuários (admin) ────────────────────────────────────── */
.nav-item .badge.contador { display: inline-block; margin: 0 0 0 auto; padding: 1px 7px; font-size: 11px; font-weight: 700; color: #a16207; background: #fef9c3; }
.filtro-usuarios { margin-bottom: 1rem; }
.aviso-usuarios { margin-bottom: 1rem; }
.tabela-usuarios td { vertical-align: top; }
.badge-situacao-ativo { background: #dcfce7; color: #15803d; }
.badge-situacao-pendente { background: #fef9c3; color: #a16207; }
.badge-situacao-desativado { background: #fee2e2; color: #b91c1c; }
.acoes-usuario { min-width: 15rem; }
.acoes-usuario > * + * { margin-top: .5rem; }
.form-linha { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.form-linha select { width: auto; padding: .35rem .5rem; font-size: 13px; }
.painel-acao summary { cursor: pointer; font-size: 12px; font-weight: 500; color: var(--brand-dark); }
.form-acao { display: grid; gap: .5rem; margin-top: .5rem; max-width: 20rem; }
.form-acao input { padding: .4rem .6rem; font-size: 13px; }
.form-acao .botao { justify-self: start; }
.link-perigo { color: var(--red-700); }
.tabela-usuarios th, .tabela-usuarios td { overflow-wrap: normal; padding: .6rem .75rem; }
.tabela-usuarios .celula-email { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .tabela-usuarios thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tabela-usuarios, .tabela-usuarios tbody, .tabela-usuarios tr, .tabela-usuarios td { display: block; width: 100%; }
  .tabela-usuarios tr { padding: .5rem 0; border-bottom: 1px solid var(--gray-100); }
  .tabela-usuarios td { border: 0; padding: .3rem 1rem; }
  .tabela-usuarios td::before { content: attr(data-rotulo); display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-400); }
  .acoes-usuario { min-width: 0; }
}

/* Plano 8: itens escondidos do painel (admin) */
.badge-escondido { background: #fee2e2; color: #b91c1c; }
.admin-item { margin-top: 1.5rem; }
.admin-item .cartao-corpo { display: grid; gap: .75rem; }
.admin-item .form-linha input[type=text] { width: auto; flex: 1 1 16rem; min-width: 0; }
.cartao-item:has(.form-mostrar) a { height: auto; }
.form-mostrar { margin-top: .5rem; }
.form-mostrar .botao { width: 100%; }

/* ── Biblioteca (páginas Brutos/Referências/Prontos): grade com ampliar e links ── */
.grade-biblioteca { gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .grade-biblioteca { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grade-biblioteca { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grade-biblioteca { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.grade-biblioteca .cartao-item { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.grade-biblioteca .cartao-item a.ampliar { display: block; height: auto; border: 0; border-radius: 0; box-shadow: none; cursor: zoom-in; }
.grade-biblioteca .cartao-item a.ampliar:hover { box-shadow: none; }
.grade-biblioteca .cartao-texto { display: flex; flex-direction: column; gap: 2px; padding: .5rem .75rem .75rem; min-width: 0; }
.grade-biblioteca .nome { overflow-wrap: anywhere; }
.grade-biblioteca .cartao-item a.detalhes, .grade-biblioteca .cartao-item a.abrir { display: inline; height: auto; width: fit-content; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; color: var(--brand-dark); text-decoration: underline; }
.grade-biblioteca .abrir::after { content: ''; position: absolute; inset: 0; }
.grade-biblioteca a.ampliar { position: relative; z-index: 1; }
.trilha a, .cartao-pasta { text-decoration: none; }
.trilha a { color: var(--brand-dark); font-weight: 500; }
.trilha a:hover, .trilha a:focus-visible { text-decoration: underline; }