/*! FERCOPOR Design System v1.0.0 — gerado por tools/construir.mjs; não editar à mão (alterar src/ e construir) */
/* ===== src/tokens.css ===== */
/* Tokens do FERCOPOR Design System: cores, tipografia, espaço, forma, profundidade, movimento e ícones.
   Os nomes curtos (--bronze, --tinta…) são os de sempre das três apps; os --ds-* são os da camada de 2026-11-01. */
:root {
  --bronze: #7E6A32;
  --bronze-escuro: #5F4F24;
  --bronze-claro: #F2EFE6;
  --creme: #FFF9EB;
  --tinta: #202020;
  --texto-2: #4D4D4D;
  --texto-3: #666666;
  --fundo: #FAFAFA;
  --superficie: #FFFFFF;
  --linha: #E8E5DC;
  --linha-forte: #D9D5C9;
  --ambar-fundo: #FFF4E0;
  --ambar-linha: #F0D9AE;
  --ambar-texto: #6B4200;
  --vermelho: #C62828;
  --raio: 10px;
  --raio-pequeno: 8px;
  --letra: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root {
  /* Cor — preto, branco e dourado FERCOPOR */
  --ds-preto: #141414;
  --ds-grafite: #1F1E1C;
  --ds-dourado: #7E6A32;            /* = --bronze (identidade fercopor.pt) */
  --ds-dourado-escuro: #5F4F24;
  --ds-dourado-luz: #B49A55;
  --ds-dourado-vela: #F3EEE2;       /* realce suave */
  --ds-fundo: #F6F4EF;              /* papel quente */
  --ds-superficie: #FFFFFF;
  --ds-superficie-2: #FBFAF7;
  --ds-linha: #ECE7DC;
  --ds-linha-forte: #DCD5C6;
  --ds-texto: #1C1B19;
  --ds-texto-2: #57534B;
  --ds-texto-3: #6E695F;            /* 5,1:1 sobre branco */
  --ds-sucesso: #245C45; --ds-sucesso-fundo: #E7F2EC;
  --ds-aviso: #8A5A00;   --ds-aviso-fundo: #FFF4E0; --ds-aviso-linha: #F0D9AE;
  --ds-erro: #8B2E2E;    --ds-erro-fundo: #FBECEC;
  --ds-info: #1F4E8C;    --ds-info-fundo: #E8EFF8;
  /* Tipografia — títulos em serifa clássica do sistema; texto em sans do sistema */
  --ds-serifa: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --ds-t-display: clamp(28px, 4.2vw, 36px);
  --ds-t-titulo: 22px;
  --ds-t-seccao: 19px;
  --ds-t-corpo: 15px;
  --ds-t-legenda: 13px;
  --ds-t-etiqueta: 11px;
  /* Espaço (base 4) */
  --ds-e1: 4px; --ds-e2: 8px; --ds-e3: 12px; --ds-e4: 16px; --ds-e5: 20px; --ds-e6: 24px; --ds-e8: 32px; --ds-e10: 40px;
  /* Forma */
  --ds-r-pequeno: 10px; --ds-r: 14px; --ds-r-cartao: 18px; --ds-r-folha: 26px; --ds-r-pilula: 999px;
  --ds-altura-controlo: 48px; --ds-altura-botao: 50px;
  /* Profundidade — sombras leves e quentes */
  --ds-sombra-1: 0 1px 2px rgba(28, 24, 16, .05);
  --ds-sombra-2: 0 1px 2px rgba(28, 24, 16, .04), 0 6px 18px rgba(28, 24, 16, .06);
  --ds-sombra-3: 0 12px 32px rgba(28, 24, 16, .14), 0 2px 6px rgba(28, 24, 16, .06);
  --ds-anel-foco: 0 0 0 4px rgba(126, 106, 50, .18);
  /* Movimento */
  --ds-curva: cubic-bezier(.2, .7, .2, 1);
  --ds-rapido: .14s; --ds-medio: .24s;
}

:root {
  --ds-icone-calendario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --ds-icone-proximas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M10 15h4m-2-2 2 2-2 2'/%3E%3C/svg%3E");
  --ds-icone-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
  --ds-icone-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --ds-icone-mais: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* ===== src/componentes.css ===== */
/* Componentes partilhados do FERCOPOR Design System (origem: camada «Design System» da app Comercial, 2026-11-01,
   e a camada de carregamento de 2026-11-03). Só componentes genéricos; o que é exclusivo de uma app fica nessa app.
   Cada app carrega: os seus estilos de base → este ficheiro → os seus estilos específicos. */

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--ds-fundo); color: var(--ds-texto); font-size: var(--ds-t-corpo); line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(180, 154, 85, .28); }
a { text-underline-offset: 3px; }
:focus-visible { border-radius: 6px; }
.subtitulo, .vazio, .a-carregar { color: var(--ds-texto-3); }

/* ---------- Tipografia ---------- */
.titulo-pagina, .entrada-cartao h2 { font-family: var(--ds-serifa); font-weight: 600; letter-spacing: -.01em; color: var(--ds-texto); }
.titulo-pagina { font-size: var(--ds-t-display); line-height: 1.12; }
.cabecalho-seccao h2, .painel > h2 { font-family: var(--ds-serifa); font-weight: 600; letter-spacing: -.005em; }
.cabecalho-seccao h2 { font-size: var(--ds-t-seccao); }
legend, .campo, .rotulo-campo { color: var(--ds-texto); }

/* ---------- App shell: cabeçalho ---------- */
.topo { position: relative; background: radial-gradient(120% 140% at 85% -20%, #2B2822 0%, var(--ds-preto) 58%); padding-top: calc(14px + env(safe-area-inset-top)); box-shadow: inset 0 -1px 0 rgba(255, 249, 235, .06); }
.menu-conta-itens { z-index: 40; }
.marca span { color: var(--ds-dourado-luz); letter-spacing: .28em; font-size: 10.5px; }
.nav-topo { gap: 2px; }
/* Só os itens do PRIMEIRO nível (links e botões dos submenus) ficam claros sobre o cabeçalho escuro. Os links dentro
   dos submenus têm as regras próprias abaixo (painel claro, texto escuro): «.nav-topo a» apanhava também esses links
   e deixava-os cor de creme sobre fundo branco (corrigido a 2026-11-03). */
.nav-topo > a, .nav-grupo > summary {
  min-height: 40px; padding: 0 16px; border-radius: var(--ds-r-pilula); border-bottom: 0; color: rgba(255, 249, 235, .8); font-weight: 600;
  transition: background-color var(--ds-rapido) ease, color var(--ds-rapido) ease;
}
.nav-topo > a:hover, .nav-grupo > summary:hover, .nav-grupo[open] > summary { color: var(--creme); background: rgba(255, 249, 235, .09); }
.nav-topo > a.ativo, .nav-grupo.ativo > summary { color: var(--ds-preto); background: var(--creme); border-bottom-color: transparent; }
.nav-topo > a:focus-visible, .nav-grupo > summary:focus-visible, .menu-conta > summary:focus-visible { outline: 3px solid var(--ds-dourado-luz); outline-offset: 2px; }
/* Submenus (Relatórios, Vendas, Marketing, Atividade comercial, Relacional): painel claro com texto escuro, por cima do conteúdo */
.nav-grupo-itens {
  z-index: 40; top: calc(100% + 10px); padding: 6px; gap: 2px; border-radius: 18px; border-color: var(--ds-linha); background: var(--ds-superficie);
  box-shadow: var(--ds-sombra-3); transform-origin: top left; animation: ds-surgir var(--ds-medio) var(--ds-curva);
}
.nav-grupo:last-of-type .nav-grupo-itens { left: auto; right: 0; transform-origin: top right; }   /* o último não sai do ecrã */
.nav-grupo-itens a { min-height: 44px; padding: 0 14px; border-radius: 12px; border-bottom: 0; color: var(--ds-texto); background: transparent; font-weight: 600; }
.nav-grupo-itens a:hover { background: var(--ds-dourado-vela); color: var(--ds-texto); }
.nav-grupo-itens a:focus-visible, .menu-conta-itens a:focus-visible { outline: 3px solid var(--ds-dourado); outline-offset: -3px; }
/* Página atual: fundo, traço dourado e negrito (não só a cor) */
.nav-grupo-itens a[aria-current="page"] { background: var(--ds-dourado-vela); color: var(--ds-dourado-escuro); box-shadow: inset 3px 0 0 var(--ds-dourado); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .nav-grupo-itens { animation: none; } }
.nav-topo > a.ativo .contador { box-shadow: 0 0 0 2px var(--creme); }
.avatar { border: 1.5px solid rgba(255, 249, 235, .55); font-size: 14px; letter-spacing: .04em; transition: background-color var(--ds-rapido) ease, color var(--ds-rapido) ease, border-color var(--ds-rapido) ease; }
.menu-conta summary:hover .avatar { border-color: var(--ds-dourado-luz); }
.topo .botao-principal { box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.topo .botao-topo { min-height: 44px; border-radius: var(--ds-r-pilula); padding: 0 20px; }
.aviso[data-aviso] { background: var(--ds-aviso-fundo); color: var(--ds-aviso); border-bottom-color: var(--ds-aviso-linha); }
/* Telemóvel: o conteúdo é uma «folha» que sobe sobre o cabeçalho escuro, como numa app nativa */
@media (max-width: 899px) {
  .topo { padding-bottom: 34px; }
  .aviso[data-aviso] { position: relative; z-index: 16; margin: -26px 12px 0; border: 1px solid var(--ds-aviso-linha); border-radius: var(--ds-r); box-shadow: var(--ds-sombra-2); }
  .conteudo { position: relative; z-index: 16; margin-top: -24px; padding: 24px 16px 28px; background: var(--ds-fundo); border-radius: var(--ds-r-folha) var(--ds-r-folha) 0 0; min-height: calc(100vh - 120px); min-height: calc(100dvh - 120px); }
  .aviso:not([hidden]) + .conteudo { margin-top: 10px; border-radius: 0; }
  .conteudo { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .titulo-pagina { font-size: 30px; }
  }

/* ---------- Navegação de fundo (telemóvel): barra flutuante com página atual em pílula ---------- */
.nav-fundo { left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 6px; gap: 4px; border: 1px solid rgba(220, 213, 198, .7); border-radius: 22px; background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 10px 30px rgba(28, 24, 16, .12), 0 1px 3px rgba(28, 24, 16, .06); z-index: 30; /* sempre à frente da «folha» do conteúdo (z-index 16) ao fazer scroll */ }
.nav-fundo a { gap: 4px; min-height: 52px; padding: 6px 0 4px; border-radius: 16px; color: var(--ds-texto-3); font-size: 11.5px; transition: background-color var(--ds-medio) var(--ds-curva), color var(--ds-rapido) ease; }
.nav-fundo a svg, .nav-fundo a.ativo svg { padding: 0; background: transparent; box-sizing: border-box; }
.nav-fundo a.ativo { color: var(--ds-dourado-escuro); background: var(--ds-dourado-vela); }
.nav-fundo a.ativo svg { stroke-width: 2.2; }
.nav-fundo a:active { transform: scale(.96); }
body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.mensagem { bottom: calc(100px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .mensagem { bottom: 28px; }
  }

/* ---------- Botões ---------- */
.botao { min-height: var(--ds-altura-botao); padding: 0 20px; border-radius: var(--ds-r); border-color: var(--ds-linha-forte); font-weight: 650; letter-spacing: .005em; box-shadow: var(--ds-sombra-1); transition: background-color var(--ds-rapido) ease, border-color var(--ds-rapido) ease, color var(--ds-rapido) ease, box-shadow var(--ds-rapido) ease, transform var(--ds-rapido) var(--ds-curva); }
.botao:hover:not(:disabled) { border-color: var(--ds-dourado-luz); }
.botao:active:not(:disabled) { transform: scale(.985); }
.botao-principal { background: linear-gradient(180deg, #8A7539, var(--ds-dourado)); border-color: var(--ds-dourado); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px rgba(126, 106, 50, .22); }
.botao-principal:hover:not(:disabled) { background: linear-gradient(180deg, var(--ds-dourado), var(--ds-dourado-escuro)); border-color: var(--ds-dourado-escuro); }
.botao-grande { min-height: 56px; border-radius: 16px; font-size: 16.5px; }
.botao:disabled { opacity: .45; box-shadow: none; }
.botao-texto { color: var(--ds-dourado); border-radius: var(--ds-r-pequeno); transition: background-color var(--ds-rapido) ease, color var(--ds-rapido) ease; }
.botao-texto:hover { background: var(--ds-dourado-vela); color: var(--ds-dourado-escuro); }
.botao-microsoft { border-radius: var(--ds-r); }

/* ---------- Superfícies: cartões, painéis, detalhes ---------- */
.painel { border-radius: var(--ds-r-cartao); border-color: var(--ds-linha); box-shadow: var(--ds-sombra-2); }
.painel { padding: 20px; gap: 14px; }
.cartao { border-radius: 16px; border-color: var(--ds-linha); padding: 16px; box-shadow: var(--ds-sombra-1); transition: border-color var(--ds-rapido) ease, box-shadow var(--ds-medio) var(--ds-curva), transform var(--ds-medio) var(--ds-curva); }
a.cartao:hover { border-color: var(--ds-linha-forte); box-shadow: var(--ds-sombra-2); transform: translateY(-1px); }
a.cartao:active { transform: scale(.995); }
.nota { background: var(--ds-dourado-vela); color: var(--ds-texto-2); border-radius: var(--ds-r); padding: 12px 14px; }

/* ---------- Resumo do Início: mosaicos com ícone e seta ---------- */
:root { --ds-icone-calendario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); --ds-icone-proximas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M10 15h4m-2-2 2 2-2 2'/%3E%3C/svg%3E"); --ds-icone-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E"); --ds-icone-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); --ds-icone-mais: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }

/* ---------- Indicadores e contagens ---------- */
.indicador { border-radius: var(--ds-r); border-color: var(--ds-linha); background: var(--ds-superficie-2); padding: 14px; gap: 3px; }
.indicador strong { font-size: 28px; font-weight: 750; letter-spacing: -.02em; }
.indicador span { font-weight: 650; }

/* ---------- Pastilhas de estado ---------- */
.etiqueta { font-size: 11.5px; font-weight: 700; letter-spacing: .01em; padding: 4px 10px; line-height: 1.2; }
.contador { background: #C0392B; box-shadow: 0 2px 6px rgba(192, 57, 43, .35); }

/* ---------- Controlos segmentados e vistas ---------- */
.separadores { gap: 8px; padding: 2px; }
.separadores button { min-height: 42px; border-radius: var(--ds-r-pilula); border-color: var(--ds-linha-forte); background: var(--ds-superficie); font-weight: 600; transition: background-color var(--ds-rapido) ease, color var(--ds-rapido) ease, border-color var(--ds-rapido) ease, transform var(--ds-rapido) var(--ds-curva); }
.separadores button[aria-selected="true"], .separadores button[aria-pressed="true"] { background: var(--ds-grafite); border-color: var(--ds-grafite); color: var(--creme); box-shadow: 0 4px 12px rgba(28, 24, 16, .18); }

/* ---------- Formulários ---------- */
.campo { gap: 8px; font-size: 13.5px; font-weight: 650; }
.campo input, .campo select, .campo textarea, .tabela select { min-height: var(--ds-altura-controlo); border-radius: var(--ds-r); border-color: var(--ds-linha-forte); background: var(--ds-superficie); padding: 0 14px; color: var(--ds-texto); box-shadow: inset 0 1px 1px rgba(28, 24, 16, .03); transition: border-color var(--ds-rapido) ease, box-shadow var(--ds-rapido) ease; }
.campo textarea { padding: 12px 14px; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--ds-dourado-luz); }
.campo input:focus, .campo select:focus, .campo textarea:focus, .tabela select:focus { outline: none; border-color: var(--ds-dourado); box-shadow: var(--ds-anel-foco); }
.campo input::placeholder, .campo textarea::placeholder { color: #A39E94; }
.campo select, .tabela select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E6A32' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }

/* ---------- Tabelas ---------- */
.tabela { border-radius: var(--ds-r-cartao); border-color: var(--ds-linha); border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: var(--ds-sombra-1); }
.tabela thead th { background: var(--ds-superficie-2); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-texto-3); }
.tabela th, .tabela td { padding: 12px 14px; border-bottom-color: var(--ds-linha); }
.tabela tbody tr:last-child > * { border-bottom: 0; }
.tabela tbody tr { transition: background-color var(--ds-rapido) ease; }
.tabela tbody tr:hover { background: var(--ds-superficie-2); }

/* ---------- Menus ---------- */
.menu-conta-itens { border-radius: 18px; border-color: var(--ds-linha); box-shadow: var(--ds-sombra-3); padding: 6px; transform-origin: top right; animation: ds-surgir var(--ds-medio) var(--ds-curva); }
.menu-conta-itens a { border-radius: 12px; border-bottom: 0; min-height: 46px; }
.menu-conta-itens a:hover, .menu-conta-itens a.ativo { background: var(--ds-dourado-vela); }
@keyframes ds-surgir { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Mensagens e estados ---------- */
.mensagem { border-radius: 16px; padding: 14px 18px; box-shadow: var(--ds-sombra-3); animation: ds-subir var(--ds-medio) var(--ds-curva); }
.entrada-aviso { border-radius: var(--ds-r); }
@keyframes ds-subir { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.a-carregar::before { border-width: 2.5px; border-color: var(--ds-linha); border-top-color: var(--ds-dourado); }

/* ---------- Página de entrada ---------- */
.entrada-marca { background: radial-gradient(120% 120% at 80% 0%, #2B2822, var(--ds-preto) 60%); }
.entrada-cartao { border-radius: 22px; border-top: 0; box-shadow: var(--ds-sombra-3); position: relative; overflow: hidden; }
.entrada-cartao::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--ds-dourado-escuro), var(--ds-dourado-luz), var(--ds-dourado)); }
/* ---------- Computador ---------- */
@media (min-width: 900px) {
  .topo { padding-top: 14px; padding-bottom: 14px; }
  .conteudo { padding-top: 36px; }
  .painel { padding: 22px 24px; }
  }
/* Movimento reduzido: sem animações de entrada nem deslocações */
@media (prefers-reduced-motion: reduce) {
  .menu-conta-itens, .mensagem { animation: none !important; }
  a.cartao:hover { transform: none; }
  }

/* Carregamento das páginas (app.js › desenhar): entrada discreta, esqueletos com as cores e os cantos da app,
   indicação de demora e estado de erro. Sem bibliotecas; sem animação com prefers-reduced-motion. */
.conteudo.entrada { animation: entrada-pagina 180ms ease-out both; }
@keyframes entrada-pagina { from { opacity: 0; } to { opacity: 1; } }
.esqueleto { display: block; height: 12px; max-width: 100%; border-radius: var(--raio-pequeno, 8px); background: var(--linha, #E8E5DC); animation: esqueleto-pulsar 1.6s ease-in-out infinite; }
.esqueleto + .esqueleto { margin-top: 10px; }
.esq-titulo { height: 28px; width: 55%; }
.esq-longo { width: 85%; }
.esq-medio { width: 60%; }
.esq-curto { width: 30%; }
.esqueleto-pagina { display: flex; flex-direction: column; gap: 14px; }
.esqueleto-painel { padding: 16px; }
@keyframes esqueleto-pulsar { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.aviso-demora { margin: 0; color: var(--texto-3, #666666); font-size: 14px; }
.aviso-demora:empty { display: none; }
.estado-erro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.estado-erro .vazio { text-align: left; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  .conteudo.entrada, .esqueleto { animation: none; }
  }