/* FERCOPOR Dashboard — estilos específicos, carregados DEPOIS do FERCOPOR Design System (ver ds.lock.json):
   correspondência com a marcação do Dashboard, Início institucional, Relatório Comercial e impressão A4. */
/* ---------- Correspondência com a marcação do Dashboard (títulos simples, tabelas sem classe, filtros) ---------- */
.conteudo > h1, .conteudo section > h1 { font-family: var(--ds-serifa); font-weight: 600; letter-spacing: -.01em; font-size: var(--ds-t-display); line-height: 1.12; color: var(--ds-texto); }
.conteudo h2 { font-family: var(--ds-serifa); font-weight: 600; letter-spacing: -.005em; color: var(--ds-texto); }
.painel > h2, .painel h2 { font-size: var(--ds-t-seccao); }
.caixa-tabela > table { border: 1px solid var(--ds-linha); border-radius: var(--ds-r-cartao); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--ds-superficie); box-shadow: var(--ds-sombra-1); }
.caixa-tabela > table thead th { background: var(--ds-superficie-2); font-size: 11.5px; letter-spacing: .08em; color: var(--ds-texto-3); }
.caixa-tabela > table th, .caixa-tabela > table td { padding: 12px 14px; border-bottom-color: var(--ds-linha); }
.caixa-tabela > table tbody tr:last-child > * { border-bottom: 0; }
.caixa-tabela > table tbody tr:hover { background: var(--ds-superficie-2); }
.barra-filtros { border-radius: var(--ds-r-cartao); border-color: var(--ds-linha); box-shadow: var(--ds-sombra-1); padding: 14px 16px; }
.filtros select { min-height: var(--ds-altura-controlo); border-radius: var(--ds-r); border: 1px solid var(--ds-linha-forte); background: var(--ds-superficie); color: var(--ds-texto); padding: 0 14px; font: inherit; }
.filtros select:focus { outline: none; border-color: var(--ds-dourado); box-shadow: var(--ds-anel-foco); }
.subnav a { border-color: var(--ds-linha-forte); transition: background-color var(--ds-rapido) ease, color var(--ds-rapido) ease, border-color var(--ds-rapido) ease; }
.subnav a[aria-current="page"] { background: var(--ds-grafite); border-color: var(--ds-grafite); }
.aviso { border-radius: var(--ds-r); }
/* Entrada da página: discreta (as páginas chegam completas do servidor); sem animação com movimento reduzido */
.conteudo { animation: entrada-pagina 180ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .conteudo { animation: none; } }

/* ---------- Início: portal «Aplicações FERCOPOR» (galeria de aplicações; destinos em src/aplicacoes.js) ---------- */
/* Revisão 2026-11-11: título discreto alinhado à esquerda; mosaicos quadrados centrados (ícone + nome);
   descrição ao passar o cursor ou com foco do teclado; em ecrãs táteis a descrição curta fica por baixo do nome. */
body.pagina-inicio { background: var(--ds-fundo); }
body.pagina-inicio .conteudo { max-width: none; background: transparent; }
.portal-apps { max-width: 1120px; margin: 0 auto; padding: 24px 0 48px; }
.portal-cabecalho { text-align: left; margin: 0 0 40px; padding-bottom: 16px; border-bottom: 1px solid var(--ds-linha); }
.portal-cabecalho h1 { margin: 0; font-family: var(--ds-serifa); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: 0; color: var(--ds-texto); }
.inicio-subtitulo { margin: 4px 0 0; font-size: var(--ds-t-legenda); line-height: 1.45; color: var(--ds-texto-3); }
.grelha-apps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; justify-content: center; }
@media (min-width: 640px) { .grelha-apps { grid-template-columns: repeat(2, 200px); gap: 20px; } }
@media (min-width: 1024px) { .grelha-apps { grid-template-columns: repeat(3, 200px); gap: 24px; } }
.grelha-apps > li { display: flex; }
.app-cartao { position: relative; flex: 1; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; background: var(--ds-superficie); border: 1px solid var(--ds-linha); border-radius: var(--ds-r-cartao); box-shadow: var(--ds-sombra-1); color: var(--ds-texto); text-decoration: none; text-align: center; overflow: hidden; transition: transform var(--ds-medio) var(--ds-curva), box-shadow var(--ds-medio) var(--ds-curva), border-color var(--ds-rapido) ease; }
/* «Ícone de aplicação»: quadrado arredondado, traço dourado — igual em todas as aplicações */
.app-icone { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: var(--ds-dourado-vela); color: var(--ds-dourado); transition: background-color var(--ds-medio) var(--ds-curva), color var(--ds-medio) var(--ds-curva); }
.app-icone svg { width: 30px; height: 30px; }
.conteudo .app-nome, .app-nome { margin: 0; font-family: var(--letra); font-size: 12.5px; font-weight: 700; line-height: 1.25; letter-spacing: .09em; text-transform: uppercase; color: var(--ds-texto); }
/* Descrição: painel escuro por cima do mosaico, só ao passar o cursor / foco */
.app-detalhe { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 22px; text-align: left; background: var(--ds-preto); color: var(--creme); border-radius: inherit; opacity: 0; transform: translateY(8px); pointer-events: none; }
/* A transição só existe no estado ativo: ao carregar a página (estilos chegam em sequência) o painel nunca «pisca» */
.app-detalhe-nome { font-family: var(--ds-serifa); font-weight: 600; font-size: 17px; line-height: 1.2; color: var(--creme); }
.app-descricao { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 249, 235, .84); }
.app-endereco { font-size: 12px; color: rgba(255, 249, 235, .6); overflow-wrap: anywhere; }
.app-abrir { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ds-dourado-luz); }
.app-seta { transition: transform var(--ds-medio) var(--ds-curva); }
a.app-cartao:hover, a.app-cartao:focus-visible { transform: translateY(-3px); border-color: var(--ds-linha-forte); box-shadow: var(--ds-sombra-3); }
a.app-cartao:hover .app-detalhe, a.app-cartao:focus-visible .app-detalhe, .app-indisponivel:hover .app-detalhe, .app-indisponivel:focus-visible .app-detalhe { opacity: 1; transform: none; transition: opacity .2s ease, transform var(--ds-medio) var(--ds-curva); }
a.app-cartao:hover .app-seta { transform: translateX(3px); }
a.app-cartao:active { transform: translateY(-1px); }
a.app-cartao:focus-visible { outline: 3px solid var(--ds-dourado); outline-offset: 3px; }
.app-indisponivel:focus-visible { outline: 3px solid var(--ds-dourado); outline-offset: 3px; }
/* Sem endereço confirmado: sem ligação, tracejado, ícone esbatido, estado escrito (não só pela cor) */
.app-indisponivel { cursor: not-allowed; background: var(--ds-superficie-2); box-shadow: none; border-style: dashed; border-color: var(--ds-linha-forte); }
.app-indisponivel .app-icone { background: var(--ds-linha); color: var(--ds-texto-3); }
.app-indisponivel .app-nome { color: var(--ds-texto-2); }
.app-indisponivel .app-detalhe { background: var(--ds-grafite); }
.app-abrir-off { color: #E2C98A; }
.app-estado { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: var(--ds-r-pilula); background: var(--ds-aviso-fundo); border: 1px solid var(--ds-aviso-linha); color: var(--ds-aviso); font-size: 11px; font-weight: 700; }
.portal-dica { margin: 32px 0 0; text-align: center; font-size: var(--ds-t-legenda); color: var(--ds-texto-3); }
/* Telemóvel e ecrãs táteis (sem cursor): a descrição curta aparece por baixo do nome, sem painel */
@media (hover: none), (max-width: 639px) {
  .app-cartao { aspect-ratio: auto; min-height: 200px; justify-content: flex-start; padding-top: 28px; }
  .app-detalhe, a.app-cartao:hover .app-detalhe, a.app-cartao:focus-visible .app-detalhe, .app-indisponivel .app-detalhe { position: static; opacity: 1; transform: none; padding: 0; background: none; color: inherit; align-items: center; text-align: center; gap: 4px; transition: none; }
  .app-estado { position: static; transform: none; order: -1; }
  .app-detalhe-nome, .app-abrir { display: none; }
  .app-descricao { font-size: 12px; color: var(--ds-texto-3); }
  .portal-dica { display: none; }
}
@media (max-width: 639px) { .portal-apps { padding: 12px 0 32px; } .portal-cabecalho { margin-bottom: 24px; } .portal-cabecalho h1 { font-size: 17px; } .app-cartao { gap: 10px; padding: 20px 12px; min-height: 0; border-radius: 16px; } .app-icone { width: 52px; height: 52px; border-radius: 14px; } .app-icone svg { width: 26px; height: 26px; } .app-nome { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .app-cartao, .app-icone, .app-seta, .app-detalhe { transition: none; } a.app-cartao:hover, a.app-cartao:active, a.app-cartao:focus-visible, a.app-cartao:hover .app-seta { transform: none; } }
@media (forced-colors: active) { .app-cartao { border: 1px solid CanvasText; } .app-detalhe { border: 1px solid CanvasText; } }

/* ---------- Família: ID, Nome da Família e Grau de Parentesco editáveis, um só «Guardar alterações» ---------- */
.id-familia { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ds-texto-3); }
.form-familia > h2 { margin-top: 24px; }
.familia-campos { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 520px); gap: 16px 24px; align-items: start; }
@media (max-width: 639px) { .familia-campos { grid-template-columns: 1fr; } }
.rotulo-campo { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-texto-3); }
.familia-id strong { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; letter-spacing: .03em; }
.familia-nome { display: block; }
.familia-descricao { display: block; grid-column: 1 / -1; max-width: 760px; }
.familia-descricao small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ds-texto-3); }
.familia-descricao textarea { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--ds-linha-forte); border-radius: var(--ds-r-pequeno); background: var(--ds-superficie); color: var(--ds-texto); font: inherit; font-size: 15px; line-height: 1.45; resize: vertical; }
.familia-descricao textarea:focus-visible { outline: 3px solid var(--ds-dourado); outline-offset: 1px; border-color: var(--ds-dourado); }
.descricao-familia { margin: -4px 0 8px; max-width: 760px; font-size: 15px; line-height: 1.5; color: var(--ds-texto-2); }
.descricao-lista { display: block; margin-top: 3px; max-width: 360px; font-size: 12.5px; font-weight: 400; line-height: 1.35; color: var(--ds-texto-3); white-space: normal; }
.familia-nome small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ds-texto-3); }
.familia-nome input, .campo-parentesco { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--ds-linha-forte); border-radius: var(--ds-r-pequeno); background: var(--ds-superficie); color: var(--ds-texto); font: inherit; font-size: 15px; }
.campo-parentesco { min-width: 150px; height: 38px; font-size: 14px; }
.familia-nome input.por-preencher, .campo-parentesco.por-preencher { background: var(--ds-aviso-fundo); border-color: var(--ds-aviso-linha); }
.campo-parentesco::placeholder { color: var(--ds-aviso); font-weight: 600; }
.familia-nome input:focus-visible, .campo-parentesco:focus-visible { outline: 3px solid var(--ds-dourado); outline-offset: 1px; border-color: var(--ds-dourado); }
.tabela-membros th[scope="row"], .tabela-membros td:nth-child(2), .tabela-membros td:nth-child(7) { white-space: nowrap; }
.form-familia-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.nota-curta { font-size: 13px; color: var(--ds-texto-3); }
.mensagem-ok { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--ds-r); background: var(--ds-sucesso-fundo); color: var(--ds-sucesso); font-weight: 600; }

/* ---------- Relatórios › Relatório Comercial ---------- */
.cad-entrada .botao { align-self: flex-start; }
.cad-controlos .botao { align-self: flex-end; }
/* «Gerar PDF» no fim da página, depois do relatório (ligação para o ficheiro gerado no servidor; funciona sem JavaScript) */
.cad-exportar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 18px; padding: 18px 20px; background: var(--ds-superficie); border: 1px solid var(--ds-linha); border-radius: var(--ds-r-cartao); }
.cad-exportar .subtitulo { margin: 0; }
.cad-exportar .botao { order: 2; }
.relatorio-cad { display: flex; flex-direction: column; gap: 22px; background: var(--ds-superficie); border: 1px solid var(--ds-linha); border-radius: var(--ds-r-cartao); box-shadow: var(--ds-sombra-2); padding: 28px; }
.cad-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 2px solid var(--ds-dourado); }
.cad-cabecalho img { display: block; width: 160px; height: auto; }
.cad-cabecalho > div { text-align: right; }
.cad-cabecalho h1 { font-family: var(--ds-serifa); font-weight: 600; font-size: 30px; line-height: 1.1; }
.cad-periodo { margin: 4px 0 0; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-dourado-escuro); }
.cad-bloco { display: flex; flex-direction: column; gap: 12px; }
.cad-bloco > h2, .cad-rodape > h2 { font-size: 20px; }
.cad-indicadores { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cad-kpi .cad-tipo { order: -2; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-dourado); }
.tabela-cad tfoot th, .tabela-cad tfoot td { font-weight: 800; border-top: 1px solid var(--ds-linha-forte); background: var(--ds-superficie-2); }
.tabela-cad tr.destaque > * { background: var(--ds-dourado-vela); }
.tabela-cad .sem-dados { color: var(--ds-texto-3); font-style: italic; }
.grafico-linhas { margin: 0; }
.grafico-linhas svg { display: block; width: 100%; height: auto; }
.grafico-linhas .grelha { stroke: var(--ds-linha); stroke-width: 1; }
.grafico-linhas .eixo { font: 12px var(--letra); fill: var(--ds-texto-3); }
.grafico-linhas .valor { font: 700 11px var(--letra); fill: var(--ds-texto-2); }
.grafico-linhas polyline { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico-linhas polyline.linha-leads, .grafico-linhas .ponto.linha-leads circle { stroke: var(--ds-dourado); }
.grafico-linhas polyline.linha-reunioes, .grafico-linhas .ponto.linha-reunioes circle { stroke: var(--ds-grafite); }
.grafico-linhas polyline.linha-reunioes { stroke-dasharray: 1 5; }   /* não só pela cor: as reuniões a pontilhado (as «atenderam» a tracejado) */
.grafico-linhas polyline.linha-condicao, .grafico-linhas .ponto.linha-condicao circle { stroke: var(--ds-info); }
.grafico-linhas .ponto circle { fill: var(--ds-superficie); stroke-width: 2.5; }
.grafico-linhas .ponto-manual circle { fill: var(--ds-dourado-vela); stroke-dasharray: 2 2; }   /* contagem manual: ponto distinto (e «(manual)» escrito) */
.grafico-linhas .legenda { margin-top: 8px; }
.grafico-linhas .legenda i { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--ds-dourado); }
.grafico-linhas .legenda i.linha-reunioes { border-top: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--ds-grafite) 0 3px, transparent 3px 7px); }   /* pontilhado (as «atenderam» a tracejado) */
.grafico-linhas .legenda i.linha-condicao { border-top: 3px dotted var(--ds-texto-3); }
.legenda-condicao { color: var(--ds-texto-3); }
.cad-rodape { border-top: 1px solid var(--ds-linha); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ds-texto-2); }
.cad-rodape dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; }
.cad-rodape dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-texto-3); }
.cad-rodape dd { margin: 2px 0 0; }
.cad-rodape ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
@media (max-width: 599px) {
  .relatorio-cad { padding: 18px 14px; }
  .cad-cabecalho > div { text-align: left; }
}

/* ---------- Impressão / PDF (A4): só o relatório, sem navegação nem botões; blocos sem cortes ---------- */
@page { size: A4; margin: 14mm 12mm; }
@media print {
  html, body { background: #FFFFFF !important; }
  body { padding: 0 !important; font-size: 10.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topo, .nav-fundo, .subnav, .rodape, .saltar, .aviso-demo, .cad-controlos, .cad-exportar, .form-atualizar { display: none !important; }
  .conteudo { animation: none !important; margin: 0 !important; padding: 0 !important; max-width: none !important; background: #FFFFFF !important; border-radius: 0 !important; min-height: 0 !important; }
  .relatorio-cad { border: 0; box-shadow: none; padding: 0; gap: 14px; }
  .indicador, .caixa-tabela > table, .tabela { box-shadow: none !important; }
  .caixa-tabela { overflow: visible !important; }
  .cad-bloco, .cad-rodape, .grafico-linhas, .indicador, tr, thead { break-inside: avoid; page-break-inside: avoid; }
  .cad-evolucao { break-before: auto; }
  h2 { break-after: avoid; page-break-after: avoid; }
  .cad-indicadores { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .indicador strong { font-size: 20pt; }
  a { color: inherit; text-decoration: none; }
}
/* ---------- Relatório Comercial: evolução anual, acumulados e empreendimentos (2026-11-04) ---------- */
.cad-datas { margin: 6px 0 0; font-size: 12.5px; color: var(--ds-texto-3); }
.cad-bloco h3 { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--ds-texto-2); }
.cad-kpi .cad-acum { font-size: 13px; color: var(--ds-dourado-escuro); }
.cad-kpi .cad-acum b { font-weight: 800; }
.cad-grelha-emp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 1100px) { .cad-grelha-emp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cad-grelha-emp > :last-child:nth-child(odd) { grid-column: 1 / -1; } .cad-grelha-emp > :last-child:nth-child(odd) .grafico-barras svg { max-width: calc(50% - 9px); } }
.cad-nota { margin: 6px 0 0; font-size: 12px; color: var(--ds-texto-3); }
.tabela-cad abbr { text-decoration: none; cursor: help; }
.cad-grafico-emp { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--ds-linha); border-radius: var(--ds-r-cartao); background: var(--ds-superficie); }
.grafico-barras { margin: 0; }
.grafico-barras svg { display: block; width: 100%; max-width: 860px; height: auto; }
.grafico-barras .rotulo { font: 600 13px var(--letra); fill: var(--ds-texto); }
.grafico-barras .valor { font: 700 12px var(--letra); fill: var(--ds-texto-2); }
.grafico-barras .sem-valor { font-weight: 500; font-style: italic; fill: var(--ds-texto-3); }
.grafico-barras .legenda { margin-top: 6px; }
.grafico-barras .legenda i { display: inline-block; width: 12px; height: 12px; border: 0; border-radius: 3px; }
.grafico-barras .legenda i.barra-leads { background: var(--ds-dourado); } .grafico-barras .legenda i.barra-leads-mes { background: #C9B37A; }
.grafico-barras .legenda i.barra-reunioes { background: var(--ds-grafite); } .grafico-barras .legenda i.barra-negocios { background: #8A3B12; }
.barra-leads { fill: var(--ds-dourado); background: var(--ds-dourado); }
.barra-leads-mes { fill: #C9B37A; background: #C9B37A; }
.barra-condicao { fill: #2F6B3A; background: #2F6B3A; }
.barra-reunioes { fill: var(--ds-grafite); background: var(--ds-grafite); }
.barra-negocios { fill: #8A3B12; background: #8A3B12; }
/* Séries novas do gráfico de linhas (a forma também distingue: tracejados e pontos) */
.grafico-linhas polyline.linha-atenderam, .grafico-linhas .ponto.linha-atenderam circle { stroke: var(--ds-grafite); }
.grafico-linhas polyline.linha-atenderam { stroke-dasharray: 7 4; }
.grafico-linhas polyline.linha-condicao, .grafico-linhas .ponto.linha-condicao circle { stroke: #2F6B3A; }
.grafico-linhas polyline.linha-negocios, .grafico-linhas .ponto.linha-negocios circle { stroke: #B42318; }
.grafico-linhas .ponto circle { fill: currentColor; }
.grafico-linhas .ponto.linha-leads { color: var(--ds-dourado); } .grafico-linhas .ponto.linha-atenderam, .grafico-linhas .ponto.linha-reunioes { color: var(--ds-grafite); }
.grafico-linhas .ponto.linha-condicao { color: #2F6B3A; } .grafico-linhas .ponto.linha-negocios { color: #B42318; }
.grafico-linhas .legenda i.linha-atenderam { border-top: 3px dashed var(--ds-grafite); }
.grafico-linhas .legenda i.linha-condicao { border-top: 3px solid #2F6B3A; }
.grafico-linhas .legenda i.linha-negocios { border-top: 3px solid #B42318; }
.tabela-cad td.num { white-space: nowrap; }
.tabela-cad tfoot td.num { white-space: normal; }
.tabela-cad .nota-celula { display: block; font-size: 11px; font-weight: 500; color: var(--ds-texto-3); }
/* Telemóvel: os gráficos de barras mantêm a letra legível e deslizam na horizontal (os valores também estão nas tabelas) */
@media (max-width: 640px) { .grafico-barras { overflow-x: auto; } .grafico-barras svg { min-width: 600px; } .grafico-linhas { overflow-x: auto; } .grafico-linhas svg { min-width: 620px; } }
@media print {
  .cad-grafico-emp { break-inside: avoid; }
}

/* Relacional › Mediadores: vistas «Todos os mediadores» / «Ranking» (sublinhado; as zonas continuam em botões) */
.separadores.vistas { gap: 4px; margin: 4px 0 14px; border-bottom: 1px solid var(--ds-linha); }
.separadores.vistas a { min-height: 44px; background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--ds-texto-2); padding: 0 12px; }
.separadores.vistas a[aria-current="page"] { background: transparent; color: var(--ds-texto); border-bottom-color: var(--ds-texto); }
.separadores.vistas a:focus-visible { outline: 2px solid var(--ds-texto); outline-offset: 2px; }