/* =========================================================================
   LEGALIZACOES.COM — canonical product design system
   -------------------------------------------------------------------------
   Este ficheiro e a unica fonte de tokens e primitivas do portal. Os ficheiros
   -planozero / -partner / -settings / -viewer consomem estes tokens e nao
   devem redefinir cores, raios, sombras nem escalas tipograficas.

   Regra: nada de CSS ad hoc. Se falta um valor, cria-se um token aqui.
   ========================================================================= */

/* ---------------------------------------------------------------- Tipografia
   Inter self-hosted (variavel, subsets latin + latin-ext). Sem pedidos a
   servidores externos: o portal e privado e tem de funcionar isolado.        */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------- Tokens */

:root {
  /* =======================================================================
     legalizacoes.com — sistema visual (W04)

     Uma regra explica o ficheiro inteiro: a interface é neutra e a marca
     aparece como SINAL DE MOVIMENTO OPERACIONAL — aconteceu alguma coisa,
     estamos aqui, isto precisa de atenção. O laranja não significa sucesso,
     erro, espera nem categoria; essas coisas dizem-se com texto, símbolo,
     peso e posição. Por isso os antigos sete estados coloridos (âmbar,
     ardósia, ciano, verde, vermelho) colapsaram todos em cinzentos: o que
     distinguia "a aguardar o IMT" de "a aguardar o parceiro" nunca foi a
     cor — era a frase.

     Os nomes dos tokens não mudaram, para não partir os ~600 var() que já
     existem. Mudaram os valores.
     ======================================================================= */

  /* --- LEGALIZACOES.COM brand package v1.2 -----------------------------
     Duas camadas. SEMANTICA PARTILHADA (os mesmos nomes de espaço, raio,
     sombra, foco e tipografia existem no PLANOZERO) + VALORES DA MARCA
     (03_COLOR/brand-tokens.json). É daqui que os --pz-* abaixo tiram os
     valores; nenhum componente repete estes HEX. */
  --lz-brand-ink: #16191D;
  --lz-portal-surface-dark: #1C2025;
  --lz-brand-deep-ink: #121519;
  --lz-brand-slate: #697482;
  --lz-brand-light-slate: #A8B1BC;
  --lz-brand-surface: #F8FAFB;
  --lz-brand-white: #FFFFFF;
  --lz-brand-orange: #F15A24;
  --lz-portal-page: #F1F3F5;
  --lz-portal-card: #FFFFFF;
  --lz-portal-border: #DDE2E7;
  --lz-portal-text: #121820;
  --lz-portal-text-muted: #43516A;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px;
  --focus-ring: 0 0 0 3px rgba(241, 90, 36, .24);
  /* Plano Sans ainda não tem binários aprovados: Inter é o fallback declarado
     e continua a ser a fonte ativa. Não renomear nada como Plano Sans. */
  --font-brand: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Papéis tipográficos, uma família. DISPLAY só em títulos públicos;
     META é o micro-rótulo em maiúsculas; DATA é referência, matrícula, NIF
     e data. O subset Inter embebido traz tnum e pnum — não traz zero
     cortado nem alternativas cv/ss, por isso não se pedem. */
  /* W07: o título público cresce com a largura sem nunca passar de 56px nem
     descer de 36px (38px num telefone de 390px, 54px a 1280px). Antes
     descia a 34px e cada página escrevia o seu próprio clamp. TITLE é o
     título de secção público (h2) e LEAD o texto de abertura: um valor cada,
     em todas as páginas. */
  --type-display-size: clamp(36px, calc(30px + 1.8vw), 56px);
  --type-display-weight: 650;
  --type-display-tracking: -.032em;
  --type-title-size: clamp(26px, calc(21px + 1.1vw), 36px);
  --type-title-tracking: -.024em;
  --type-lead-size: clamp(16px, calc(15px + .25vw), 18px);
  /* L10 (os guias, D-022): o título de secção de uma leitura longa, um degrau
     abaixo de TITLE, para que um guia se leia como um artigo e não como uma
     sequência de páginas. */
  --type-read-heading-size: clamp(22px, calc(18px + .75vw), 28px);
  --type-meta-size: 11px;
  --type-meta-tracking: .08em;
  --type-data-tracking: .01em;

  /* --- Superfícies escuras ----------------------------------------------
     Portal Ink da marca. O shell escuro é sólido: os masters escuros do
     logótipo trazem este mesmo Ink como fundo. */
  --pz-ink-900: var(--lz-brand-ink);
  --pz-ink-800: var(--lz-portal-surface-dark);
  --pz-ink-700: #262b32;

  /* Os nomes "navy" ficam por compatibilidade com o CSS existente; o azul
     desapareceu da paleta. */
  --pz-navy-900: var(--lz-brand-deep-ink);
  --pz-navy-800: var(--lz-brand-ink);
  --pz-navy-700: var(--lz-portal-surface-dark);
  --pz-navy-600: #262b32;

  /* --- Signal ------------------------------------------------------------
     Uma cor. Ocupa 3–5% do ecrã. --pz-orange-500 é o marcador (pontos,
     barras de 2px, segmento atual do percurso) e nunca carrega texto
     pequeno: sobre branco fica em 3,1:1. Quando o sinal precisa mesmo de
     ser palavra, usa-se --pz-orange-600, medido a 4,9:1. */
  --pz-orange-700: #9a3412;
  --pz-orange-600: #c2410c;
  --pz-orange-500: var(--lz-brand-orange);
  --pz-orange-400: #f8814f;
  --pz-orange-100: #fbd9c8;
  --pz-orange-050: #fdece4;
  --pz-signal: var(--pz-orange-500);
  --pz-signal-ink: var(--pz-orange-600);
  --pz-signal-soft: var(--pz-orange-050);

  /* AÇÃO: O LARANJA DA MARCA UM GRAU MAIS FUNDO, SÓ PARA O BOTÃO CHEIO.
     Branco sobre o laranja da marca fica em 3,4:1 e falha AA; o texto Ink
     passava, mas pesava. A ação principal usa o mesmo matiz e a mesma
     saturação da marca (15,8° / 88%) com a luminosidade descida de 54% para
     43%: branco a 4,81:1 (AA), e 5,87:1 no hover. O laranja da marca não
     escurece: continua nos marcadores, filetes e estados. Estes tokens servem
     apenas o controlo principal preenchido. */
  --pz-action: #CE400D;
  --pz-action-hover: #B6390C;
  --pz-action-ink: #FFFFFF;

  /* --- Superfícies claras ------------------------------------------------
     Três níveis com diferenças pequenas mas percetíveis, em neutro frio.
     O neutro quente anterior (#f4f3f1) puxava a interface para o bege. */
  /* A PÁGINA DESCEU UM TOM, PARA O QUE ESTÁ EM CIMA DELA SUBIR.
     #F1F3F5 contra branco é uma diferença de 4%: a olho, no meio de texto,
     não existe. #E9ECF0 continua frio, continua calmo, e faz de um cartão
     branco um objeto e não uma zona. */
  --pz-bg: #e9ecf0;
  --pz-surface: var(--lz-portal-card);
  --pz-surface-2: var(--lz-brand-surface);
  --pz-surface-3: #eef0f3;
  --pz-border: var(--lz-portal-border);
  --pz-border-strong: #8b93a3;
  --pz-divider: #e6e9ed;

  /* --- Planos -------------------------------------------------------------
     A PÁGINA, A SECÇÃO E O OBJETO TÊM DE SE DISTINGUIR SEM SE LER NADA.

     O site público assentava tudo no mesmo cinzento médio: a página, as
     faixas e os cartões brancos sem contorno liam-se como recortes na mesma
     folha, e o conjunto ficava baço. Agora cada plano tem um papel e um tom,
     todos da paleta, sem gradiente, vidro ou efeito:
       PÁGINA   o papel do site: o tom mais claro da marca;
       SECÇÃO   a faixa que alterna o ritmo: um degrau abaixo, frio;
       CARTÃO   o objeto: branco, contorno fino e sombra curta, igual em
                qualquer dos dois planos.
     No shell privado, a barra de topo passa a ser um plano próprio, branco,
     por cima do canvas (--pz-bg, que não muda: é a mesa dos painéis). */
  --pz-page: var(--lz-brand-surface);
  --pz-band: var(--pz-surface-3);
  --pz-card-edge: var(--lz-portal-border);
  --pz-shadow-card: 0 1px 2px rgba(22, 25, 30, .05), 0 8px 20px -12px rgba(22, 25, 30, .18);
  --pz-topbar-bg: var(--pz-surface);
  --pz-shadow-topbar: 0 1px 2px rgba(22, 25, 30, .05), 0 8px 22px -16px rgba(22, 25, 30, .32);

  /* --- Texto -------------------------------------------------------------
     Contrastes medidos sobre --pz-surface. O secundário anterior estava a
     3,3:1: legível para quem já sabe o que lá está escrito, não para quem
     está a ler. */
  --pz-text: var(--lz-portal-text);
  --pz-text-2: var(--lz-portal-text-muted);
  /* Exceção medida: o Slate da marca (#697482) fica a ~4,4:1 sobre a página
     (#F1F3F5) e falha AA em texto pequeno. O secundário mantém 4,8:1. */
  --pz-text-3: #626b7b;
  --pz-text-4: #8b93a0;
  --pz-text-inv: #ffffff;

  /* --- Estados -----------------------------------------------------------
     Cada estado tem fg (texto), bg (superfície), bd (contorno) e ac (ponto
     de acento). Só o estado que representa MOVIMENTO leva Signal no ponto;
     todos os outros são neutros e distinguem-se por símbolo e por peso.
     Nenhum estado depende da cor para ser compreendido. */

  /* Ação necessária: neutro com um ponto Signal. Nunca fundo laranja. */
  --pz-attention-fg: #16191e;
  --pz-attention-bg: #ffffff;
  --pz-attention-bd: #d3d8de;
  --pz-attention-ac: #f15a24;

  /* Com o parceiro — é espera, não alarme. */
  --pz-partner-fg: #414954;
  --pz-partner-bg: #fafbfc;
  --pz-partner-bd: #e5e8ec;
  --pz-partner-ac: #8b93a0;

  /* A aguardar entidades externas (IMT, AT, marca, inspeção). */
  --pz-external-fg: #414954;
  --pz-external-bg: #fafbfc;
  --pz-external-bd: #e5e8ec;
  --pz-external-ac: #8b93a0;

  --pz-scheduled-fg: #414954;
  --pz-scheduled-bg: #fafbfc;
  --pz-scheduled-bd: #e5e8ec;
  --pz-scheduled-ac: #8b93a0;

  /* Bloqueado operacional: mais peso e mais contraste, não vermelho. Um
     processo parado à espera de uma decisão não é uma falha do sistema. */
  --pz-blocked-fg: #16191e;
  --pz-blocked-bg: #f1f3f5;
  --pz-blocked-bd: #c9cfd7;
  --pz-blocked-ac: #232830;

  /* Concluído: neutro. O símbolo e a palavra já comunicam o estado. */
  --pz-success-fg: #414954;
  --pz-success-bg: #fafbfc;
  --pz-success-bd: #e5e8ec;
  --pz-success-ac: #667085;

  --pz-neutral-fg: #414954;
  --pz-neutral-bg: #f4f5f7;
  --pz-neutral-bd: #e5e8ec;
  --pz-neutral-ac: #8b93a0;

  /* Erro real, ficheiro inválido, operação destrutiva. É o único vermelho
     do sistema e não deve aparecer em mais lado nenhum. */
  --pz-danger-fg: #a3231b;
  --pz-danger-bg: #fdf2f1;
  --pz-danger-bd: #ecc8c5;
  --pz-danger-ac: #b3261e;

  /* --- Espaçamento ------------------------------------------------------ */
  --pz-s1: 4px;
  --pz-s2: 8px;
  --pz-s3: 12px;
  --pz-s4: 16px;
  --pz-s5: 20px;
  --pz-s6: 24px;
  --pz-s7: 32px;
  --pz-s8: 40px;

  /* Ritmo vertical das páginas privadas: a mesma relação tem sempre o mesmo
     intervalo, tirado da escala acima, e não uma margem inventada por página. */
  --pz-rhythm-notice: var(--pz-s5);    /* aviso de estado → cabeçalho da página */
  --pz-rhythm-eyebrow: var(--pz-s2);   /* eyebrow → título */
  --pz-rhythm-lead: var(--pz-s2);      /* título → texto de apoio */
  --pz-rhythm-head: var(--pz-s6);      /* cabeçalho → conteúdo */
  --pz-rhythm-section: var(--pz-s4);   /* bloco → bloco */
  --pz-rhythm-card-head: var(--pz-s2); /* título do cartão → corpo */
  --pz-rhythm-control: var(--pz-s4);   /* corpo → controlo, controlo → controlo */
  --pz-rhythm-foot: var(--pz-s6);      /* conteúdo do cartão → rodapé */

  /* --- Raio ------------------------------------------------------------- */
  --pz-r-xs: 4px;
  --pz-r-sm: 8px;
  --pz-r-md: 10px;
  --pz-r-lg: 12px;
  --pz-r-xl: 14px;
  --pz-r-2xl: 16px;
  --pz-r-full: 999px;

  /* --- Controlos e objetos -----------------------------------------------
     Um botão tem duas alturas (normal e grande), um raio e um peso. Um
     cartão tem um raio. Campo e botão partilham o raio do controlo. */
  --pz-button-h: 44px;
  --pz-button-h-lg: 48px;
  --pz-button-pad: 18px;
  --pz-button-radius: var(--pz-r-md);
  --pz-button-weight: 600;
  --pz-button-font: 14.5px;
  --pz-button-font-lg: 15px;
  --pz-card-radius: var(--pz-r-2xl);

  /* --- Sombra ------------------------------------------------------------
     QUATRO NÍVEIS, E VÊ-SE QUAL É QUAL.

     A regra anterior ("a profundidade vem do contorno") deu uma sombra de
     .04 de opacidade, ou seja, nenhuma: painéis brancos sobre uma página
     quase branca, separados por um traço claro. Tudo lá estava e nada se
     destacava — o ecrã lia-se como uma folha com texto, não como uma
     aplicação com objetos.

     A sombra continua a ser discreta e continua a ser uma só cor. O que
     muda é que agora existe: duas camadas, uma curta que assenta o objeto
     na página e uma longa e muito ténue que o levanta. Sem gradiente
     decorativo e sem vidro fosco. */
  --pz-shadow-sm: 0 1px 2px rgba(22, 25, 30, .05), 0 4px 12px -4px rgba(22, 25, 30, .08);
  --pz-shadow-raised: 0 1px 2px rgba(22, 25, 30, .06), 0 10px 24px -8px rgba(22, 25, 30, .14);
  --pz-shadow-md: 0 16px 40px rgba(22, 25, 30, .16), 0 2px 6px rgba(22, 25, 30, .06);

  /* --- Foco --------------------------------------------------------------
     Anel de 2px sempre visível, em qualquer superfície. É a única utilização
     de Signal que não é opcional: sem ela não há navegação por teclado. */
  --pz-focus: 0 0 0 2px var(--pz-surface), 0 0 0 4px var(--pz-orange-500);
  --pz-focus-dark: 0 0 0 2px var(--pz-ink-800), 0 0 0 4px var(--pz-orange-500);

  /* --- Gradientes --------------------------------------------------------
     Material e luz, não decoração. Se se nota que há um gradiente, é demais.
     O CTA passou a escuro: a ação principal impõe-se pelo material, não pela
     cor da marca. */
  /* Os nomes ficam (há consumidores); os valores passaram a materiais
     sólidos da marca. Gradiente só onde houver razão funcional. */
  --pz-grad-navy: linear-gradient(var(--lz-brand-ink), var(--lz-brand-ink));
  --pz-grad-ink: linear-gradient(var(--lz-portal-surface-dark), var(--lz-portal-surface-dark));
  --pz-grad-cta: linear-gradient(var(--lz-brand-ink), var(--lz-brand-ink));
  --pz-grad-cta-hover: linear-gradient(var(--lz-portal-surface-dark), var(--lz-portal-surface-dark));
  --pz-grad-attention: linear-gradient(var(--lz-portal-card), var(--lz-portal-card));
  --pz-grad-external: linear-gradient(var(--lz-portal-card), var(--lz-portal-card));
  --pz-grad-success: linear-gradient(var(--lz-portal-card), var(--lz-portal-card));
  --pz-grad-surface: linear-gradient(var(--lz-portal-card), var(--lz-portal-card));

  /* --- Tipografia -------------------------------------------------------- */
  --pz-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Ícones ------------------------------------------------------------
     Tamanhos fixos. Os SVG levam width/height próprios: sem dimensão
     intrínseca, um SVG sem CSS assume 300x300 e destrói a página. */
  --pz-icon-xs: 14px;
  --pz-icon-sm: 16px;
  --pz-icon-md: 20px;
  --pz-icon-lg: 26px;

  /* --- Layout ------------------------------------------------------------ */
  --pz-sidebar: 244px;
  --pz-content-max: 1520px;
  /* Três larguras de conteúdo privado, pela função da página (a coluna de
     conteúdo, sem as margens laterais). COMPACTA: conta, definições pessoais,
     formulários focados, recibos. NORMAL: painel do Particular, detalhe de
     processo, vistas de trabalho. LARGA: tabelas e áreas de gestão de
     Parceiro, Equipa e Admin. O shell escolhe uma por página. */
  --pz-width-compact: 760px;
  --pz-width-standard: 1040px;
  --pz-width-wide: 1240px;
  /* W07: a coluna do site público (conteúdo e cabeçalho alinhados nela). */
  --pz-width-public: 1200px;

  /* L08 (D-019, DESIGN.md §18): a direção de arte do site público.
     ABERTURA: o título da homepage é o maior do site e o mais pesado (40px
     num telefone, 64px num ecrã largo); os títulos das outras páginas
     continuam no display.
     PLACAS: as duas peças inclinadas do símbolo (o laranja de sinal e o
     ardósia claro), em grande, sobre as fotografias: a mesma inclinação do
     símbolo (cerca de 20 graus, a descer para a direita, lados verticais) e
     cantos arredondados. São geometria da marca, nunca o logótipo.
     TINTA: o Ink em componentes RGB, para os véus que deixam o texto ler-se
     sobre uma fotografia.
     COMPUTADOR: a moldura onde se mostra a captura da área pessoal. */
  --type-hero-size: clamp(40px, calc(24px + 2.9vw), 64px);
  --type-hero-weight: 700;
  --type-hero-tracking: -.036em;
  --pz-ink-rgb: 22 25 29;
  --pz-plate-skew: 20deg;
  --pz-plate-radius: clamp(14px, 1.9vw, 28px);
  --pz-device-bezel: #0b0d10;
  --pz-device-frame: #2b3038;
  --pz-device-edge: #444b55;
  --pz-device-base-hi: #d6dbe1;
  --pz-device-base-lo: #8e97a2;
  /* VÉUS: o Ink a desfazer-se sobre uma fotografia, do lado do texto e nas
     arestas, para o texto se ler como texto sobre o Ink; a luz da base do
     computador e as sombras de um objeto pousado. Degradês de uma só tinta,
     nenhuma cor nova; a folha pública só os consome. */
  --pz-scrim-opening: linear-gradient(90deg, var(--pz-ink-900) 0%, rgb(var(--pz-ink-rgb) / 0) 26%), linear-gradient(180deg, rgb(var(--pz-ink-rgb) / .6) 0%, rgb(var(--pz-ink-rgb) / 0) 32%), linear-gradient(0deg, rgb(var(--pz-ink-rgb) / .55) 0%, rgb(var(--pz-ink-rgb) / 0) 30%);
  --pz-scrim-opening-stacked: linear-gradient(180deg, rgb(var(--pz-ink-rgb) / .55) 0%, rgb(var(--pz-ink-rgb) / 0) 24%), linear-gradient(0deg, var(--pz-ink-900) 0%, rgb(var(--pz-ink-rgb) / 0) 34%);
  --pz-scrim-intro: linear-gradient(90deg, var(--pz-ink-900) 0%, rgb(var(--pz-ink-rgb) / 0) 30%), linear-gradient(0deg, rgb(var(--pz-ink-rgb) / .45) 0%, rgb(var(--pz-ink-rgb) / 0) 34%);
  --pz-scrim-intro-stacked: linear-gradient(180deg, var(--pz-ink-900) 0%, rgb(var(--pz-ink-rgb) / 0) 32%);
  --pz-device-base: linear-gradient(180deg, var(--pz-device-base-hi) 0%, var(--pz-device-base-lo) 100%);
  --pz-device-shadow: 0 0 0 1px var(--pz-device-edge), 0 0 0 6px var(--pz-device-frame), 0 0 0 7px var(--pz-device-edge), 0 34px 60px -24px rgb(0 0 0 / .7);
  --pz-device-base-shadow: 0 14px 22px -10px rgb(0 0 0 / .6);

  /* Movimento (MOTION.md §1). W07 passa os valores a tokens; o site público
     já os consome, as superfícies privadas ainda escrevem os literais. */
  --pz-motion-micro: 150ms;
  --pz-motion-standard: 220ms;
  --pz-motion-surface: 300ms;
  --pz-ease: ease;
  --pz-ease-enter: ease-out;
  --pz-ease-exit: ease-in;
  /* L09 (D-020): a assinatura, o único momento orquestrado do site: a
     fotografia que abre uma página assenta e as placas do símbolo entram, uma
     depois da outra (intervalo), uma vez, ao carregar. Uma curva de saída
     forte, também para a resposta que se abre; só transform, translate e
     opacidade, e nunca adia uma ação. */
  --pz-motion-signature: 900ms;
  --pz-motion-stagger: 70ms;
  --pz-ease-out-strong: cubic-bezier(.23, 1, .32, 1);
  --pz-content-pad-x: 28px;

  /* --- Compatibilidade com nomes antigos (a remover quando não houver uso) */
  --pzln-ink: var(--pz-text);
  --pzln-muted: var(--pz-text-3);
  --pzln-line: var(--pz-border);
  --pzln-paper: var(--pz-bg);
  --pzln-surface: var(--pz-surface);
  --pzln-navy: var(--pz-navy-800);
  --pzln-navy-2: var(--pz-navy-700);
  --pzln-accent: var(--pz-orange-500);
  --pzln-accent-dark: var(--pz-orange-600);
  --pzln-green: var(--pz-success-ac);
  --pzln-amber: var(--pz-partner-fg);
  --pzln-red: var(--pz-danger-ac);
  --pzln-blue: var(--pz-external-ac);
  --pzln-radius: var(--pz-r-sm);
  --pzln-shadow: var(--pz-shadow-md);
  --pzln-sidebar: var(--pz-sidebar);
}

/* ---------------------------------------------------------------- Base ---- */

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

html { background: var(--pz-bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pz-bg);
  color: var(--pz-text);
  font-family: var(--pz-font);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.011em; }

/* Numeros sempre alinhados em colunas (tabelas, cartoes, contadores). */
.pzln-num, .pzln-table td, .pzln-kpi strong, time { font-variant-numeric: tabular-nums; }
/* Identificadores não são colunas de números: no Inter o tnum alarga o hífen
   e "AUT-26-4ZTC32" lia-se "AUT - 26 - 4ZTC32". Referência, VIN e matrícula
   ficam em algarismos proporcionais. */
.pzln-table__link, .pzln-table__link *, .pzln-decision__id *, .pzln-table td[data-label="Viatura"] * { font-variant-numeric: normal; }

/* Um anel de duas camadas: o Signal por fora e um contorno da propria
   superficie por dentro. Assim o foco continua visivel tanto sobre branco
   como sobre a barra lateral escura, onde um anel laranja sozinho quase
   desaparecia contra o grafite. */
:focus-visible {
  outline: 2px solid var(--pz-orange-500);
  outline-offset: 2px;
  border-radius: var(--pz-r-xs);
}

.pzln-sidebar :focus-visible,
.pzln-shell__aside :focus-visible,
[class*="--on-dark"] :focus-visible {
  outline-color: var(--pz-orange-500);
  box-shadow: 0 0 0 2px var(--pz-ink-900);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.pzln-body { min-height: 100vh; }

/* ---------------------------------------------------------- Escala tipo --- */

.pzln-eyebrow {
  display: block;
  color: var(--pz-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------- Shell -- */

.pzln-app {
  display: grid;
  grid-template-columns: var(--pz-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.pzln-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--pz-grad-navy);
  color: #e2e6ea;
  z-index: 30;
}
.pzln-sidebar::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1px;
  background: rgba(255, 255, 255, .08);
  pointer-events: none;
}

/* Lockup da marca (W05.7): o ficheiro canónico de assets/brand, escrito inline
   por PZ_Legalizations::brand_markup(). O ficheiro está ajustado ao desenho e
   já centra o wordmark no símbolo, por isso nenhuma superfície o corta,
   empurra ou desloca: cada uma define só --lz-logo-height, a ALTURA DO
   DESENHO. A largura resulta da proporção do ficheiro, por isso um
   refinamento futuro do símbolo não parte nenhum layout. A margem de proteção
   (0,5 × a largura útil do símbolo) vem do espaço à volta, nunca de espaço
   vazio dentro do ficheiro. Os valores de cada superfície mantêm o tamanho
   que a marca já tinha à vista. */
.pzln-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  /* A altura da barra de topo: marca e topo partilham a mesma linha. */
  height: 58px;
  padding: 0 20px;
  text-decoration: none;
  color: #fff;
}
.pzln-product-brand { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.pzln-product-brand__art { display: block; width: auto; max-width: none; height: var(--lz-logo-height, 17.66px); }
.pzln-product-brand--symbol .pzln-product-brand__art { height: var(--lz-symbol-height, 28px); }
/* Barra lateral: desenho com 25,5px de altura e 161,5px de largura. */
.pzln-brand .pzln-product-brand { --lz-logo-height: 25.51px; }

/* Micro-rotulo em maiusculas, na escala do laboratorio: 10.5px com um
   tracking de .08em. Mais pequeno do que isto deixa de se ler; mais espacado
   deixa de ser uma palavra e passa a ser um padrao. */
.pzln-context {
  padding: 0 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.pzln-context span, .pzln-context strong { display: block; }
.pzln-context span {
  color: #8a929d;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pzln-context strong { margin-top: 5px; font-size: 13.5px; font-weight: 600; color: #e8ebee; letter-spacing: -.005em; }

/* Um cabeçalho de grupo diz PARA QUE SERVE o que vem a seguir. É um rótulo,
   não um item: não se carrega nele, e por isso não se parece com nada em que
   se carregue. */
.pzln-nav__group {
  display: block;
  margin: 16px 12px 6px;
  color: #79828e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pzln-nav__group:first-child { margin-top: 4px; }

.pzln-nav { display: grid; gap: 2px; padding: 14px 10px; }
.pzln-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--pz-r-sm);
  color: #a7aeb8;
  font-size: 13.5px;
  font-weight: 450;
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}
.pzln-nav a svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.pzln-nav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
/* Estado ativo sóbrio: a página já se sabe pelo conteúdo. Uma mancha laranja
   grande na barra lateral gastava o accent no sítio errado — fica só um
   filete e o ícone. */
.pzln-nav a.is-active {
  position: relative;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  font-weight: 600;
}
/* O marcador desenha-se a parte: como sombra interior seguia o raio do item
   e ficava com as duas pontas curvas, a ler-se como um parentese solto. Uma
   barra propria mantem o topo e a base retos. */
.pzln-nav a.is-active::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: var(--pz-orange-500);
}
.pzln-nav a.is-active svg { opacity: 1; color: #fff; }
.pzln-nav__count {
  margin-left: auto;
  min-width: 21px;
  padding: 1px 7px;
  border-radius: var(--pz-r-full);
  background: rgba(255, 255, 255, .1);
  color: #c3cad3;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pzln-nav a.is-active .pzln-nav__count { background: rgba(255, 255, 255, .14); color: #fff; }

/* O rodape espelha o topo: mesmo recuo, mesma escala. A conta em maiusculas
   pequenas, a accao em texto normal — a conta identifica, o link e que se
   clica, e nao devem pesar o mesmo. */
.pzln-sidebar__foot {
  margin-top: auto;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.pzln-sidebar__foot span, .pzln-sidebar__foot a { display: block; }
.pzln-sidebar__foot span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a929d;
}
.pzln-sidebar__foot a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-top: 4px;
  color: #c3cad3;
  font-size: 13px;
  text-decoration: none;
}
.pzln-sidebar__foot a:hover { color: #fff; text-decoration: underline; }
/* Ver site: a saida para o site publico, igual em todas as areas. */
.pzln-sidebar__site {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-top: 6px;
  color: #c3cad3 !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
}
.pzln-sidebar__site svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.pzln-sidebar__site span { display: inline; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: inherit; }
.pzln-sidebar__site:hover span { text-decoration: underline; }

.pzln-main { min-width: 0; display: flex; flex-direction: column; }

/* TRÊS PLANOS, E VÊ-SE QUAL É QUAL.

   A barra de topo estava no tom do canvas, separada só por um traço: ao lado
   da barra lateral escura não era um plano, era o princípio da página, e o
   shell lia-se como uma mancha escura e uma folha cinzenta. Agora é um plano
   próprio: branco, com contorno e uma sombra curta que o assenta por cima do
   conteúdo quando este passa por baixo. A barra lateral fica em Ink, o topo em
   branco, o conteúdo no canvas. Continua sólido: o vidro fosco trazia de volta
   o bege antigo por cima da página fria. */
.pzln-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 58px;
  padding: 0 28px;
  background: var(--pz-topbar-bg);
  border-bottom: 1px solid var(--pz-border);
  box-shadow: var(--pz-shadow-topbar);
}
.pzln-menu-toggle { display: none; }

/* A barra de topo fecha à direita: quem está, e a porta de saída. Nunca leva
   uma segunda cópia da navegação. */
.pzln-topbar__lead { margin-right: auto; }
.pzln-topbar__account { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.pzln-topbar__name { color: var(--pz-text-2); font-size: 13px; font-weight: 600; }
.pzln-topbar__out {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--pz-r-md);
  color: var(--pz-text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.pzln-topbar__out:hover { background: var(--pz-surface-3); color: var(--pz-text); }
.pzln-topbar__out svg { width: 16px; height: 16px; }

.pzln-content {
  width: 100%;
  max-width: var(--pz-content-max);
  margin: 0 auto;
  padding: 24px var(--pz-content-pad-x) 56px;
}
/* A LARGURA É DA PÁGINA, NÃO DE CADA BLOCO.
   Aviso, cabeçalho, separadores e cartões partilham os mesmos dois eixos:
   os da coluna, centrada no canvas. Um bloco não inventa a sua largura. */
.pzln-content--compact { max-width: calc(var(--pz-width-compact) + 2 * var(--pz-content-pad-x)); }
.pzln-content--standard { max-width: calc(var(--pz-width-standard) + 2 * var(--pz-content-pad-x)); }
.pzln-content--wide { max-width: calc(var(--pz-width-wide) + 2 * var(--pz-content-pad-x)); }

/* -------------------------------------------------------------- Cabecalho - */

.pzln-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 20px;
}
.pzln-page-head > div:first-child { max-width: 780px; }
.pzln-page-head span {
  display: block;
  color: var(--pz-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.pzln-page-head h1 {
  margin: 6px 0 4px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.022em;
}
.pzln-page-head p { margin: 0; color: var(--pz-text-3); font-size: 14px; }
.pzln-page-head__actions { display: flex; gap: 8px; flex: none; }

/* ----------------------------------------------------------------- Botoes - */

.pzln-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--pz-border-strong);
  border-radius: var(--pz-r-md);
  background: var(--pz-surface);
  color: var(--pz-text);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pzln-button svg { width: 16px; height: 16px; }
.pzln-button:hover { background: var(--pz-surface-2); border-color: var(--pz-border-strong); }
.pzln-button:disabled, .pzln-button[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.pzln-button--primary {
  border-color: var(--pz-ink-900);
  background: var(--pz-grad-cta);
  color: #fff;
  box-shadow: 0 1px 2px rgba(120, 44, 5, .3);
}
.pzln-button--primary:hover { background: var(--pz-grad-cta-hover); border-color: var(--pz-ink-900); }

.pzln-button--dark {
  border-color: var(--pz-navy-800);
  background: var(--pz-navy-800);
  color: #fff;
}
.pzln-button--dark:hover { background: var(--pz-navy-700); border-color: var(--pz-navy-700); }

.pzln-button--secondary { background: var(--pz-surface-2); }
.pzln-button--ghost { border-color: transparent; background: transparent; }
.pzln-button--ghost:hover { background: var(--pz-surface-3); border-color: transparent; }
.pzln-button--danger {
  border-color: var(--pz-danger-bd);
  background: var(--pz-danger-bg);
  color: var(--pz-danger-fg);
}
.pzln-button--small { min-height: 30px; padding: 5px 10px; font-size: 12.5px; border-radius: var(--pz-r-sm); }
.pzln-button--large { min-height: 42px; padding: 11px 20px; font-size: 14.5px; }
.pzln-button--wide { width: 100%; }

/* ------------------------------------------------------------------ Pills - */

/* Estado = ponto + palavra.
   Sem cápsula, sem contorno, sem fundo: numa tabela onde quase todas as linhas
   têm estado, cinquenta cápsulas coloridas passam a ser o próprio ruído que
   impedem de ler. A cápsula fica reservada aos sítios onde o estado aparece
   sozinho (cabeçalho do processo, cartão). */
.pzln-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  color: var(--pz-neutral-fg);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.pzln-pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pz-neutral-ac);
  flex: none;
}
/* Versão em cápsula, quando o estado precisa mesmo de se destacar. */
.pzln-pill--chip {
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--pz-neutral-bd);
  border-radius: var(--pz-r-full);
  background: var(--pz-neutral-bg);
  font-size: 12px;
  font-weight: 600;
}
/* A cor vive no ponto e no texto — mas em tom escuro, não em cápsula. Assim o
   estado lê-se à distância sem encher a tabela de blocos coloridos. */
.pzln-pill--attention { color: var(--pz-attention-fg); }
.pzln-pill--attention::before { background: var(--pz-attention-ac); }
.pzln-pill--partner { color: var(--pz-partner-fg); }
.pzln-pill--partner::before { background: var(--pz-partner-ac); }
.pzln-pill--external { color: var(--pz-external-fg); }
.pzln-pill--external::before { background: var(--pz-external-ac); }
.pzln-pill--scheduled { color: var(--pz-scheduled-fg); }
.pzln-pill--scheduled::before { background: var(--pz-scheduled-ac); }
.pzln-pill--blocked { color: var(--pz-blocked-fg); }
.pzln-pill--blocked::before { background: var(--pz-blocked-ac); }
.pzln-pill--success { color: var(--pz-success-fg); }
.pzln-pill--success::before { background: var(--pz-success-ac); }

/* Em cápsula, o tom completo. */
.pzln-pill--chip.pzln-pill--attention { background: var(--pz-attention-bg); border-color: var(--pz-attention-bd); color: var(--pz-attention-fg); }
.pzln-pill--chip.pzln-pill--partner { background: var(--pz-partner-bg); border-color: var(--pz-partner-bd); color: var(--pz-partner-fg); }
.pzln-pill--chip.pzln-pill--external { background: var(--pz-external-bg); border-color: var(--pz-external-bd); color: var(--pz-external-fg); }
.pzln-pill--chip.pzln-pill--scheduled { background: var(--pz-scheduled-bg); border-color: var(--pz-scheduled-bd); color: var(--pz-scheduled-fg); }
.pzln-pill--chip.pzln-pill--blocked { background: var(--pz-blocked-bg); border-color: var(--pz-blocked-bd); color: var(--pz-blocked-fg); }
.pzln-pill--chip.pzln-pill--success { background: var(--pz-success-bg); border-color: var(--pz-success-bd); color: var(--pz-success-fg); }
.pzln-pill--plain::before { display: none; }

/* Compatibilidade: .pzln-status era a pill antiga. */
.pzln-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--pz-neutral-bd);
  border-radius: var(--pz-r-full);
  background: var(--pz-neutral-bg);
  color: var(--pz-neutral-fg) !important;
  font-size: 11.5px !important;
  font-weight: 600;
  white-space: nowrap;
}
.pzln-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; opacity: .85; }
.pzln-status--new { background: var(--pz-attention-bg); border-color: var(--pz-attention-bd); color: var(--pz-attention-fg) !important; }
.pzln-status--blocked { background: var(--pz-blocked-bg); border-color: var(--pz-blocked-bd); color: var(--pz-blocked-fg) !important; }
.pzln-status--waiting_partner { background: var(--pz-partner-bg); border-color: var(--pz-partner-bd); color: var(--pz-partner-fg) !important; }
.pzln-status--in_progress, .pzln-status--analysis { background: var(--pz-external-bg); border-color: var(--pz-external-bd); color: var(--pz-external-fg) !important; }
.pzln-status--completed { background: var(--pz-success-bg); border-color: var(--pz-success-bd); color: var(--pz-success-fg) !important; }
.pzln-status--cancelled { background: var(--pz-neutral-bg); border-color: var(--pz-neutral-bd); color: var(--pz-neutral-fg) !important; }

/* ---------------------------------------------------------------- Paineis - */

.pzln-panel {
  margin-bottom: 16px;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-lg);
  box-shadow: var(--pz-shadow-sm);
  overflow: hidden;
}
.pzln-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--pz-divider);
  background: var(--pz-grad-surface);
}
/* Só o sobretítulo, não qualquer <span> lá dentro: a regra genérica estava a
   pôr as pills do cabeçalho em maiúsculas ("PUBLICADA V3"). */
.pzln-panel__head > div > span:not(.pzln-pill) {
  display: block;
  color: var(--pz-text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.pzln-panel__head h2 { margin: 4px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
/* Os links de seccao ("Ver todos", "Ver percurso") deixaram de ser laranja:
   sao navegacao, nao acontecimento. O sublinhado da a afordancia que a cor
   dava, e o Signal fica livre para o que muda. */
.pzln-panel__head > a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pz-text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--pz-border-strong);
  white-space: nowrap;
}
.pzln-panel__head > a:hover { text-decoration: underline; }
.pzln-panel__head small { color: var(--pz-text-3); }
.pzln-panel__body { padding: 16px 18px; }

/* ---------------------------------------------------------------- Tabelas - */

.pzln-table-wrap { overflow-x: auto; }
.pzln-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pzln-table th {
  padding: 9px 14px;
  background: var(--pz-surface-2);
  border-bottom: 1px solid var(--pz-border);
  color: var(--pz-text-3);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}
.pzln-table td { padding: 10px 14px; border-top: 1px solid var(--pz-divider); vertical-align: middle; }
.pzln-table tbody tr:first-child td { border-top: 0; }
.pzln-table tbody tr:hover { background: var(--pz-surface-2); }
/* Destaque reservado ao que é MESMO excecional (bloqueado). Se todas as linhas
   levarem barra laranja, a barra deixa de querer dizer alguma coisa. */
.pzln-table tr.is-critical td:first-child { box-shadow: inset 3px 0 var(--pz-blocked-ac); }
.pzln-table tr.pzln-row-link, .pzln-table tr.pzln-row-link td { cursor: pointer; }
.pzln-table tr.pzln-row-link a,
.pzln-table tr.pzln-row-link button,
.pzln-table tr.pzln-row-link input,
.pzln-table tr.pzln-row-link select { cursor: auto; }
/* Sublinha da célula (VIN, contexto). Exclui as pills: sem :not(), esta regra
   ganhava por especificidade e apagava a cor do estado, deixando a coluna toda
   cinzenta. */
.pzln-table td > span:not(.pzln-pill), .pzln-table__link span {
  display: block;
  margin-top: 2px;
  color: var(--pz-text-3);
  font-size: 12px;
}
/* Controlos dentro de tabelas também são alvos de toque. */
.pzln-table select,
.pzln-table input:not([type="hidden"]):not([type="checkbox"]) {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--pz-border-strong);
  border-radius: var(--pz-r-sm);
  background: var(--pz-surface);
  font-size: 13px;
}
.pzln-table__link { display: block; min-height: 26px; text-decoration: none; }
.pzln-table__link strong { font-weight: 600; }
.pzln-table__link:hover strong { color: var(--pz-text); }

/* ---------------------------------------------------------------- Avisos -- */

.pzln-notice {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--pz-external-bd);
  border-left: 3px solid var(--pz-external-ac);
  border-radius: var(--pz-r-md);
  background: var(--pz-external-bg);
  color: var(--pz-external-fg);
  font-weight: 500;
}
.pzln-notice--success { border-color: var(--pz-success-bd); border-left-color: var(--pz-success-ac); background: var(--pz-success-bg); color: var(--pz-success-fg); }
.pzln-notice--error { border-color: var(--pz-danger-bd); border-left-color: var(--pz-danger-ac); background: var(--pz-danger-bg); color: var(--pz-danger-fg); }
.pzln-notice--warning { border-color: var(--pz-partner-bd); border-left-color: var(--pz-partner-ac); background: var(--pz-partner-bg); color: var(--pz-partner-fg); }
.pzln-notice ul { margin: 4px 0 0; }
/* Ligações dentro de um aviso continuam a ser alvos de toque. */
.pzln-notice a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 4px;
  font-weight: 600;
}

/* ------------------------------------------------------------ Vazio ------- */

.pzln-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 168px;
  padding: 28px;
  color: var(--pz-text-3);
  text-align: center;
}
.pzln-empty strong { color: var(--pz-text); font-size: 15px; font-weight: 600; }
.pzln-empty--compact { min-height: 96px; padding: 20px; }

/* ------------------------------------------------------------ Formularios - */

.pzln-form label > span,
.pzln-filterbar label > span,
.pzln-upload label > span,
.pzln-request-box label > span,
.pzln-field > span {
  display: block;
  margin-bottom: 5px;
  color: var(--pz-text-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
}

.pzln-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.pzln-form select,
.pzln-form textarea,
.pzln-filterbar input,
.pzln-filterbar select,
.pzln-upload input:not([type="file"]),
.pzln-upload select,
.pzln-request-box textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--pz-border-strong);
  border-radius: var(--pz-r-sm);
  background: var(--pz-surface);
  color: var(--pz-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pzln-form textarea { resize: vertical; min-height: 76px; }
.pzln-form input:focus, .pzln-form select:focus, .pzln-form textarea:focus,
.pzln-filterbar input:focus, .pzln-filterbar select:focus, .pzln-upload select:focus {
  outline: none;
  border-color: var(--pz-orange-500);
  box-shadow: 0 0 0 3px rgba(241, 90, 36, .3);
}

.pzln-check { display: flex !important; align-items: center; gap: 8px; min-height: 26px; }
.pzln-check input {
  width: 16px !important;
  height: 16px;
  min-height: 16px !important;
  flex: none;
  accent-color: var(--pz-orange-600);
}
.pzln-check span { margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.pzln-check--filter { align-self: center; padding-top: 18px; }

.pzln-filterbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) repeat(4, minmax(135px, .8fr)) auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 14px;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-lg);
  box-shadow: var(--pz-shadow-sm);
}

.pzln-form--stack { display: grid; gap: 12px; }

/* ------------------------------------------------------------- Paginacao -- */

/* Rede de segurança: mesmo condensada, a paginação nunca pode empurrar a
   página para o lado. Muda de linha em vez de transbordar. */
.pzln-pagination { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 20px 0; }
.pzln-pagination__gap { align-self: center; padding: 0 2px; color: var(--pz-text-3); }
.pzln-pagination a {
  display: grid;
  place-items: center;
  min-width: 34px; height: 34px;
  padding: 0 8px;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-sm);
  background: var(--pz-surface);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.pzln-pagination a:hover { background: var(--pz-surface-2); }
.pzln-pagination a.is-active { background: var(--pz-navy-800); border-color: var(--pz-navy-800); color: #fff; }

/* --------------------------------------------------------------- Dialogos - */

dialog.pzln-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-lg);
  background: var(--pz-surface);
  box-shadow: var(--pz-shadow-md);
  color: var(--pz-text);
}
dialog.pzln-dialog::backdrop { background: rgba(6, 22, 33, .48); backdrop-filter: blur(2px); }
dialog.pzln-dialog--wide { width: min(900px, calc(100vw - 32px)); }
.pzln-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--pz-divider);
}
.pzln-dialog__head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.pzln-dialog__head p { margin: 4px 0 0; color: var(--pz-text-3); font-size: 13px; }
.pzln-dialog__body { padding: 18px 20px; overflow-y: auto; }
.pzln-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--pz-divider);
  background: var(--pz-surface-2);
}
.pzln-dialog__close {
  border: 0;
  background: transparent;
  color: var(--pz-text-3);
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--pz-r-sm);
  cursor: pointer;
}
.pzln-dialog__close:hover { background: var(--pz-surface-3); color: var(--pz-text); }

/* ------------------------------------------------------------- Dropzone --- */

.pzln-dropzone {
  display: grid;
  place-items: center;
  min-height: 116px;
  padding: 20px;
  border: 1.5px dashed var(--pz-border-strong);
  border-radius: var(--pz-r-md);
  background: var(--pz-surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.pzln-dropzone:hover { border-color: var(--pz-orange-400); background: var(--pz-orange-050); }
.pzln-dropzone.is-dragging { border-color: var(--pz-orange-500); background: var(--pz-orange-050); }
.pzln-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pzln-dropzone strong, .pzln-dropzone span, .pzln-dropzone small { display: block; }
.pzln-dropzone strong { font-size: 14.5px; font-weight: 600; }
.pzln-dropzone span { margin-top: 4px !important; color: var(--pz-text-3); font-size: 13px; font-weight: 400 !important; letter-spacing: 0 !important; }
.pzln-dropzone small { margin-top: 8px; color: var(--pz-text-2); font-weight: 600; }

/* ------------------------------------------------------- Lista de ficheiros
   Componente unico: o mesmo upload serve os dois perfis.                     */

[data-pzp-file-list] { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
[data-pzp-file-list]:empty { display: none; }
[data-pzp-file-list] li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-sm);
  background: var(--pz-surface);
  font-size: 12.5px;
}
.pzln-file__ext {
  padding: 2px 6px;
  border-radius: var(--pz-r-xs);
  background: var(--pz-navy-800);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.pzln-file__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pzln-file__size { color: var(--pz-text-3); font-variant-numeric: tabular-nums; }
/* Ler um scan de várias páginas demora minutos. Sem sinal nenhum a página
   parecia parada e o parceiro não sabia se podia enviar. É um estado, não um
   aviso: discreto, sem barra de progresso falsa, e nunca impede o envio. */
.pzln-file__reading {
  color: var(--pz-text-3);
  font-size: 11.5px;
  font-style: italic;
  white-space: nowrap;
}
/* Ja lido: deixa de ser um estado a decorrer e passa a ser um resultado.
   Continua discreto — a conclusao util do documento aparece depois de guardar,
   no proprio processo, e nao aqui. */
.pzln-file__reading--ok { font-style: normal; color: var(--pz-ok-fg, var(--pz-text-2)); }
/* "4 de 9 lidos" — a unica contagem honesta que temos: documentos inteiros.
   Nao ha percentagem porque nao ha maneira de a saber sem a inventar. */
.pzln-file__summary {
  display: block;
  padding: 6px 2px 8px;
  color: var(--pz-text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--pz-line, rgba(0,0,0,.08));
  margin-bottom: 6px;
}
.pzln-file__remove {
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--pz-r-full);
  background: transparent;
  color: var(--pz-text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.pzln-file__remove:hover { background: var(--pz-blocked-bg); color: var(--pz-blocked-fg); }

/* -------------------------------------------------------------- Timeline -- */

.pzln-timeline { margin: 0; padding: 16px 20px 20px; list-style: none; }
.pzln-timeline li { display: grid; grid-template-columns: 108px 14px minmax(0, 1fr); gap: 10px; padding-bottom: 16px; }
.pzln-timeline li::before {
  content: "";
  grid-column: 2; grid-row: 1;
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--pz-external-ac);
  box-shadow: 0 0 0 3px var(--pz-external-bg);
}
.pzln-timeline li::after {
  content: "";
  grid-column: 2; grid-row: 1;
  width: 1px;
  height: calc(100% + 12px);
  margin: 14px 0 0 4px;
  background: var(--pz-border);
}
.pzln-timeline li:last-child::after { display: none; }
.pzln-timeline li.is-internal::before { background: var(--pz-orange-500); box-shadow: 0 0 0 3px var(--pz-orange-050); }
.pzln-timeline time { color: var(--pz-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.pzln-timeline li > div { grid-column: 3; }
.pzln-timeline li > div span { display: block; color: var(--pz-text-3); font-size: 12px; }

/* Cabecalho de dia: repetir a data em cada linha transforma a timeline num
   log. Uma vez por dia chega, e as horas passam a ler-se em coluna. */
.pzln-timeline__day { display: block !important; padding: 2px 0 10px; }
.pzln-timeline__day::before, .pzln-timeline__day::after { display: none !important; }
.pzln-timeline li + .pzln-timeline__day { padding-top: 8px; }
.pzln-timeline__day span {
  color: var(--pz-text-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.pzln-timeline details { margin-top: 4px; }
.pzln-timeline details > summary {
  color: var(--pz-text-3);
  font-size: 12px;
  cursor: pointer;
  list-style: none;
}
.pzln-timeline details > summary::-webkit-details-marker { display: none; }
.pzln-timeline details > summary::before { content: "▸ "; }
.pzln-timeline details[open] > summary::before { content: "▾ "; }
.pzln-timeline details p { margin: 4px 0 0; color: var(--pz-text-2); font-size: 12.5px; }

/* ------------------------------------------------------- Cartoes numericos -
   Compactos, o cartao inteiro e o alvo de clique. Sem "Abrir lista".         */

/* Indicadores numéricos.
   Rótulo pequeno com um ícone de 16px, número grande por baixo. Sem barras
   coloridas no topo: sete barras de sete cores não são hierarquia, são
   confusão. A cor entra só onde há trabalho para alguém, e o peso do cartão
   diz-se pelo tamanho do número, não por mais uma cor. */
/* Os indicadores sao UM instrumento, nao seis caixas.
   Seis cartoes iguais lado a lado davam o mesmo peso visual a "75 para tratar"
   e a "0 concluidos": a grelha desenhava-os iguais, e a hierarquia so aparecia
   no numero. Numa superficie unica dividida por fios, a proporcao entre os
   valores volta a ser a primeira coisa que se le. */
.pzln-cards {
  display: grid;
  gap: 0;
  margin-bottom: 18px;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-xl);
  background: var(--pz-surface);
  box-shadow: var(--pz-shadow-sm);
  overflow: hidden;
}
.pzln-card {
  position: relative;
  display: block;
  padding: 16px 20px 18px;
  border: 0;
  border-left: 1px solid var(--pz-divider);
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: background-color .14s ease;
}
.pzln-card:first-child { border-left: 0; }
.pzln-card__label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  /* Duas linhas reservadas: "A aguardar entidades" ocupa duas e, sem isto,
     empurrava o número para baixo e desalinhava-o dos vizinhos. */
  min-height: 31px;
  color: var(--pz-text-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
/* Os rotulos ("Para tratar", "Bloqueados") dizem tudo sozinhos. Seis icones
   decorativos numa faixa de numeros so acrescentam ruido. */
.pzln-card__icon { display: none; }
.pzln-card > strong {
  display: block;
  margin-top: 9px;
  font-size: 26px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--pz-text);
  font-variant-numeric: tabular-nums;
}
.pzln-card > small { display: block; margin-top: 5px; color: var(--pz-text-3); font-size: 11.5px; }
a.pzln-card:hover { background: var(--pz-surface-2); }
a.pzln-card:focus-visible { outline-offset: -2px; }

/* Peso: o indicador que manda no dia é maior; o histórico é discreto. */
.pzln-card--primary > strong { font-size: 40px; font-weight: 600; letter-spacing: -.04em; }
.pzln-card--primary .pzln-card__label { color: var(--pz-text-2); }
.pzln-card--quiet > strong { font-size: 21px; color: var(--pz-text-2); }
/* Um zero nao merece a mesma tinta que um 75. */
.pzln-card.is-zero > strong { color: var(--pz-text-3); font-weight: 500; }

/* O que exige alguem distingue-se pelo ponto, nao por um fundo colorido:
   Signal e sinal, nao superficie. */
.pzln-card--attention .pzln-card__label::before {
  content: "";
  width: 6px; height: 6px; margin-top: 5px;
  border-radius: 50%;
  background: var(--pz-attention-ac);
  flex: none;
}
.pzln-card--attention > strong { color: var(--pz-attention-fg); }
.pzln-card--attention .pzln-card__label { color: var(--pz-text-2); }
.pzln-card--attention .pzln-card__icon { display: none; }

/* Bloqueado distingue-se por peso, nunca por vermelho: um processo parado à
   espera de uma decisão não é uma falha do sistema. */
.pzln-card--blocked > strong { color: var(--pz-blocked-fg); font-weight: 700; }
.pzln-card--blocked .pzln-card__label { color: var(--pz-text-2); }

/* Espera, conclusão e zero: neutros. O estado lê-se no rótulo. */
.pzln-card.is-zero { background: var(--pz-surface-2); }
.pzln-card.is-zero .pzln-card__icon { opacity: .35; }
.pzln-card.is-zero .pzln-card__label::before { background: var(--pz-neutral-ac); }

/* Quando a faixa quebra para várias linhas, os fios têm de acompanhar: sem
   isto, a primeira célula de cada linha nova ficava com um fio à esquerda
   pendurado no meio da superfície. */
@media (max-width: 1240px) {
  .pzo-cards > .pzln-card:nth-child(3n+1) { border-left: 0; }
  .pzo-cards > .pzln-card:nth-child(n+4) { border-top: 1px solid var(--pz-divider); }
}
@media (max-width: 720px) {
  .pzo-cards > .pzln-card:nth-child(n) { border-left: 1px solid var(--pz-divider); border-top: 1px solid var(--pz-divider); }
  .pzo-cards > .pzln-card:nth-child(odd) { border-left: 0; }
  .pzo-cards > .pzln-card:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 700px) {
  .pzp-cards > .pzln-card { border-left: 0; border-top: 1px solid var(--pz-divider); }
  .pzp-cards > .pzln-card:first-child { border-top: 0; }
}
.pzln-card--attention.is-zero {
  border-color: var(--pz-border);
  background: var(--pz-surface-2);
}
.pzln-card--attention.is-zero > strong,
.pzln-card--attention.is-zero .pzln-card__label { color: var(--pz-text-3); }

/* --------------------------------------------------------------- Stepper ---
   Responde a "onde estamos". Nunca substitui a checklist da etapa.           */

/* O percurso rola quando não cabe; o esbatimento à direita diz que há mais
   etapas — sem ele o stepper parecia simplesmente cortado. */
.pzln-stepper-scroll { position: relative; }
/* As sombras laterais so aparecem quando ha mesmo mais percurso para ver — o
   JS marca has-more/has-before. Sem isso a sombra estava sempre la e deixava
   de significar seja o que for. */
.pzln-stepper-scroll::after,
.pzln-stepper-scroll::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 42px;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.pzln-stepper-scroll::after {
  right: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--pz-surface) 78%);
}
.pzln-stepper-scroll::before {
  left: 0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0), var(--pz-surface) 78%);
}
.pzln-stepper-scroll.has-more::after { opacity: 1; }
.pzln-stepper-scroll.has-before::before { opacity: 1; }
.pzln-stepper { display: flex; gap: 0; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.pzln-step {
  position: relative;
  flex: 1 0 auto;
  min-width: 128px;
  padding: 10px 12px 11px 14px;
  border: 1px solid var(--pz-border);
  border-right: 0;
  background: var(--pz-surface-2);
  color: var(--pz-text-3);
  text-decoration: none;
}
.pzln-step:first-child { border-radius: var(--pz-r-md) 0 0 var(--pz-r-md); }
.pzln-step:last-child { border-right: 1px solid var(--pz-border); border-radius: 0 var(--pz-r-md) var(--pz-r-md) 0; }
.pzln-step__mark {
  display: inline-grid;
  place-items: center;
  width: 19px; height: 19px;
  margin-bottom: 6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
.pzln-step__name { display: block; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--pz-text-2); }
.pzln-step__note { display: block; margin-top: 3px; font-size: 11px; }
.pzln-step.is-done { background: var(--pz-success-bg); border-color: var(--pz-success-bd); color: var(--pz-success-fg); }
.pzln-step.is-done .pzln-step__mark { background: var(--pz-success-ac); border-color: var(--pz-success-ac); color: #fff; }
.pzln-step.is-done .pzln-step__name { color: var(--pz-success-fg); }
.pzln-step.is-current { background: var(--pz-grad-attention); border-color: var(--pz-attention-bd); color: var(--pz-attention-fg); z-index: 1; }
/* Numero branco sobre laranja: usa-se a versao profunda, tal como no CTA. */
.pzln-step.is-current .pzln-step__mark { background: var(--pz-orange-500); border-color: var(--pz-orange-500); color: #fff; }
.pzln-step.is-current .pzln-step__name { color: var(--pz-attention-fg); font-weight: 700; }
.pzln-step.is-skipped { background: var(--pz-surface-2); }
.pzln-step.is-skipped .pzln-step__mark { border-style: dashed; }

/* ------------------------------------------------------------------ Tabs --- */

/* SEPARADORES LEEM-SE COMO SEPARADORES.
   Eram uma fila de botões numa caixa, com o atual preenchido a escuro: o
   mesmo desenho de uma ação. Agora são uma linha com a página atual marcada
   pelo filete laranja, o mesmo da barra lateral. Alvo de 44px e foco visível. */
.pzln-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--pz-rhythm-head);
  border-bottom: 1px solid var(--pz-border);
  overflow-x: auto;
}
.pzln-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--pz-text-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.pzln-tabs a:hover { border-bottom-color: var(--pz-border-strong); color: var(--pz-text); }
.pzln-tabs a.is-active { border-bottom-color: var(--pz-signal); color: var(--pz-text); }
.pzln-tabs a:focus-visible { outline-offset: -2px; }
.pzln-tabs__count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--pz-r-full);
  background: var(--pz-surface-3);
  color: var(--pz-text-2);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
/* Fundo opaco de proposito: sobre o separador ativo, um branco a 18% deixa o
   contraste do numero dependente do que estiver por baixo. */
.pzln-tabs a.is-active .pzln-tabs__count { background: var(--pz-ink-700); color: #fff; }
.pzln-tabs__count--alert { background: var(--pz-attention-bg); color: var(--pz-attention-fg); }

/* --------------------------------------------------------------- Login ----- */

.pzln-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr minmax(380px, .9fr);
  background: var(--pz-navy-800);
}
.pzln-auth__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6vw;
  color: #fff;
  background: var(--pz-grad-navy);
  overflow: hidden;
}
/* Painel da marca: Ink sólido. Sem brilho nem riscas — os masters escuros do
   logótipo trazem o mesmo Ink como fundo e qualquer textura por trás
   desenhava-lhes uma caixa. */
.pzln-auth__brand > * { position: relative; }
.pzln-auth__logo { height: 34px; width: auto; max-width: 220px; margin-bottom: 26px; object-fit: contain; }
.pzln-auth__brand > div > span { color: var(--lz-brand-light-slate); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pzln-auth__brand h1 { max-width: 560px; margin: 10px 0 0; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.pzln-auth__brand p { max-width: 520px; margin: 14px 0 0; color: var(--lz-brand-light-slate); font-size: 15px; }
.pzln-auth__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 80px);
  background: var(--pz-surface);
}
.pzln-auth__eyebrow {
  color: var(--pz-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pzln-auth__panel h1, .pzln-auth__panel h2 { margin: 12px 0 6px; font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -.024em; }
.pzln-auth__panel > p { color: var(--pz-text-3); }
.pzln-auth__help { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--pz-text-2); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------- Blocos ainda em uso ----- */

.pzln-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.pzln-field--wide { grid-column: span 2; }
.pzln-fields--files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pzln-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; padding: 16px 18px; }
.pzln-edit-grid__wide { grid-column: 1 / -1; }

.pzln-notification-list { display: grid; }
.pzln-notification {
  display: grid;
  grid-template-columns: 125px 1fr;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--pz-divider);
  text-decoration: none;
}
.pzln-notification:first-child { border-top: 0; }
.pzln-notification time { color: var(--pz-text-3); font-size: 12px; }
.pzln-notification span { display: block; margin-top: 3px; color: var(--pz-text-3); }
.pzln-notification.is-unread { background: var(--pz-orange-050); box-shadow: inset 3px 0 var(--pz-orange-500); }

/* Relatorios */
.pzln-report-builder { padding: 18px; }
/* SEIS COLUNAS FIXAS DE 130px SAO 840px QUE NEM SEMPRE EXISTEM.
 *
 * repeat(6, minmax(130px, 1fr)) nao e um minimo por coluna: e um minimo
 * para a grelha inteira. Entre os 900px e os 1199px de janela — com a barra
 * lateral aberta, portanto um portatil normal — a grelha ficava mais larga
 * do que o painel e era CORTADA por ele. Medido: a 1000px sobravam 193px
 * de grelha do lado de fora, e o documento nem sequer ganhava scroll, por
 * isso os ultimos filtros (Matricula, Parceiro, Dados, Pre-visualizar)
 * deixavam de existir para quem estava a olhar.
 *
 * auto-fit conta as colunas que cabem em vez de exigir seis. Acima dos
 * 1200px o resultado e o mesmo de sempre; abaixo, quebra de linha em vez de
 * corte. */
.pzln-report-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; align-items: end; }
.pzln-report-steps label b {
  display: inline-grid;
  place-items: center;
  width: 19px; height: 19px;
  margin-right: 6px;
  border-radius: var(--pz-r-xs);
  background: var(--pz-navy-800);
  color: #fff;
  font-size: 10px;
}
.pzln-report-preview {
  display: grid;
  grid-template-columns: 170px minmax(260px, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--pz-attention-bd);
  border-radius: var(--pz-r-md);
  background: var(--pz-grad-attention);
}
.pzln-report-preview > div:first-child span,
.pzln-report-preview > div:first-child strong,
.pzln-report-preview > div:first-child small { display: block; }
.pzln-report-preview > div:first-child strong { font-size: 32px; font-weight: 700; letter-spacing: -.03em; }
.pzln-report-preview p { margin: 0; color: var(--pz-text-3); }
/* A 768px estas duas colunas de accao (PDF e Excel) eram espremidas para 52px
 * cada uma — estreitas de mais para o proprio rotulo de uma coluna caber la
 * dentro, quanto mais para se carregar no botao. Quebram de linha em vez de
 * encolher, e cada uma fica com largura utilizavel. */
.pzln-report-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pzln-report-actions form { margin: 0; flex: 1 1 190px; min-width: 0; }
.pzln-report-content {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-md);
  background: var(--pz-surface);
}
.pzln-report-content summary { cursor: pointer; font-weight: 600; }
/* O selector de colunas vive dentro de um item flex estreito (cada formato
 * tem o seu). Duas colunas de 150px sao 300px que esse item nao tem: a lista
 * saia por fora ao abrir. auto-fit usa o que houver — duas colunas quando ha
 * espaco, uma quando nao ha — e o min(140px, 100%) deixa essa unica coluna
 * encolher abaixo dos 140px quando o proprio item e mais estreito do que isso,
 * que e o caso medido: 115px de contentor contra 140px de minimo. */
.pzln-report-content > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 7px 14px; margin-top: 10px; }
.pzln-report-content label { font-size: 13px; }
.pzln-report-audience {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: var(--pz-r-md);
  background: var(--pz-surface-2);
}
/* "Versão do ficheiro" e um rotulo comprido ao lado de um select comprido:
 * a 390px os dois lado a lado nao cabiam e transbordavam o painel. Quebram. */
.pzln-report-audience label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; font-weight: 600; }
.pzln-report-audience select { max-width: 100%; }
.pzln-report-audience small { color: var(--pz-text-3); }
.pzln-report-advanced { margin: 12px 0; }
.pzln-report-advanced summary { cursor: pointer; font-weight: 600; }
.pzln-report-advanced form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 10px; }
.pzln-report-advanced label { display: grid; gap: 5px; font-weight: 600; }
.pzln-report-advanced input { min-width: 170px; }
.pzln-report-periods { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pzln-report-periods a {
  padding: 6px 12px;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-full);
  background: var(--pz-surface);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.pzln-report-periods a:hover { background: var(--pz-surface-2); }

/* ------------------------------------------------------------- Responsivo - */

@media (max-width: 1200px) {
  .pzln-filterbar { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .pzln-fields, .pzln-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pzln-app { display: block; }
  .pzln-sidebar {
    position: fixed;
    left: 0; top: 0;
    width: min(288px, 86vw);
    transform: translateX(-105%);
    transition: transform .22s ease;
  }
  .pzln-sidebar.is-open { transform: none; box-shadow: var(--pz-shadow-md); }
  .pzln-menu-toggle {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    padding: 0;
    border: 1px solid var(--pz-border);
    border-radius: var(--pz-r-md);
    background: var(--pz-surface);
    cursor: pointer;
  }
  .pzln-menu-toggle svg { width: 18px; height: 18px; }
  /* O shell também se carrega com o dedo: 44px no menu, na navegação e na saída. */
  .pzln-menu-toggle { width: 44px; height: 44px; }
  .pzln-nav a { min-height: 44px; }
  .pzln-topbar__out { min-height: 44px; }
  .pzln-topbar__name { display: none; }
  /* O botão do menu e o conteúdo partilham a mesma margem: com a barra a 28px
     e o conteúdo a 16px, o menu ficava desalinhado de tudo o que tinha abaixo. */
  .pzln-topbar { padding: 0 16px; }
  .pzln-content { --pz-content-pad-x: 16px; padding: 18px var(--pz-content-pad-x) 48px; }
  .pzln-auth { grid-template-columns: 1fr; }
  .pzln-auth__brand { min-height: 32vh; padding: 32px; }
  .pzln-auth__panel { padding: 32px; }
}

@media (max-width: 680px) {
  .pzln-topbar { height: 56px; padding: 0 16px; gap: 10px; }
  .pzln-content { padding: 16px var(--pz-content-pad-x) 44px; }
  .pzln-page-head { display: block; }
  .pzln-page-head h1 { font-size: 22px; }
  .pzln-page-head__actions { margin-top: 14px; flex-wrap: wrap; }
  .pzln-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pzln-filterbar { grid-template-columns: 1fr; }
  .pzln-check--filter { padding-top: 0; }
  .pzln-table thead { display: none; }
  .pzln-table, .pzln-table tbody, .pzln-table tr, .pzln-table td { display: block; width: 100%; }
  .pzln-table tr { padding: 10px 14px; border-top: 1px solid var(--pz-border); }
  .pzln-table tbody tr:first-child { border-top: 0; }
  .pzln-table td { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; padding: 4px 0; border: 0; }
  .pzln-table td::before {
    content: attr(data-label);
    color: var(--pz-text-3);
    font-size: 11px;
    font-weight: 600;
  }
  .pzln-table td:first-child:not([data-label]) { display: block; }
  .pzln-table tr.is-priority td:first-child { box-shadow: none; }
  /* Cada linha vira um cartão, não uma ficha de seis campos. A referência é o
     título (sem rótulo), o estado e a próxima ação ficam à vista, e o resto
     encolhe para uma linha de contexto. Seis pares rótulo/valor por processo
     davam um scroll interminável para dizer o mesmo. */
  .pzln-table td[data-label="Referência"],
  .pzln-table td[data-label="Processo"] { display: block; margin-bottom: 2px; }
  .pzln-table td[data-label="Referência"]::before,
  .pzln-table td[data-label="Processo"]::before { display: none; }
  .pzln-table td[data-label="Referência"] strong,
  .pzln-table td[data-label="Processo"] strong { font-size: 14.5px; }
  .pzln-table td[data-label="Estado"],
  .pzln-table td[data-label="Próxima ação"],
  .pzln-table td[data-label="Porquê"],
  .pzln-table td[data-label="Com quem está"],
  .pzln-table td[data-label="O que falta"] { grid-template-columns: 92px minmax(0, 1fr); }
  .pzln-table td[data-label="Parceiro"],
  .pzln-table td[data-label="Viatura"],
  .pzln-table td[data-label="Há quanto tempo"],
  .pzln-table td[data-label="Atualizado"] {
    display: inline-flex;
    width: auto;
    gap: 5px;
    padding: 2px 0 0;
    color: var(--pz-text-3);
    font-size: 12px;
  }
  .pzln-table td[data-label="Parceiro"]::before,
  .pzln-table td[data-label="Viatura"]::before,
  .pzln-table td[data-label="Há quanto tempo"]::before,
  .pzln-table td[data-label="Atualizado"]::before { display: none; }
  /* O separador só existe entre duas células da mesma linha de contexto;
     no fim da linha ficava um "·" pendurado. */
  .pzln-table td[data-label="Parceiro"]:has(+ td[data-label="Viatura"])::after,
  .pzln-table td[data-label="Viatura"]:has(+ td[data-label="Parceiro"], + td[data-label="Há quanto tempo"], + td[data-label="Atualizado"])::after { content: "·"; margin-left: 5px; color: var(--pz-border-strong); }
  .pzln-table td[data-label="Viatura"] strong,
  .pzln-table td[data-label="Viatura"] span { display: inline; font-size: 12px; font-weight: 400; }
  .pzln-fields, .pzln-fields--files, .pzln-edit-grid { grid-template-columns: 1fr; }
  .pzln-field--wide { grid-column: auto; }
  .pzln-timeline li { grid-template-columns: 84px 12px minmax(0, 1fr); }
  /* Seis separadores nao cabem em 390px. Rolam, com margem a direita para se
     ver que ha mais — cortados a meio pareciam partidos. */
  .pzln-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pzln-tabs::-webkit-scrollbar { display: none; }
  .pzln-tabs a { flex: none; }
  .pzln-tabs::after { content: ""; flex: none; width: 12px; }
  /* O cabecalho do painel deixa de ser uma linha: o titulo e a nota lado a lado
     em 390px davam "Dados / identificados" partido em duas com o texto por
     cima. */
  .pzln-panel__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pzln-panel__head > a, .pzln-panel__head small { align-self: flex-start; }
  .pzln-notification { grid-template-columns: 1fr; gap: 4px; }
  .pzln-report-steps, .pzln-report-preview { grid-template-columns: 1fr; }
  .pzln-report-actions { flex-wrap: wrap; }
  /* No telemóvel a marca é um cabeçalho, não meio ecrã: o formulário tem de
     estar visível sem rolar. 32vh de navy empurrava o campo do email para
     baixo da dobra e a primeira coisa a fazer no portal ficava escondida. */
  /* Linhas explicitas: a marca ocupa o que precisa, o formulario fica com o
     resto. Sem isto, num ecra alto a grelha distribuia a altura em partes
     iguais e o navy voltava a comer meio telemovel. */
  .pzln-auth { min-height: 100dvh; grid-template-rows: auto 1fr; }
  .pzln-auth__brand { min-height: 0; padding: 22px 24px 20px; justify-content: flex-start; }
  .pzln-auth__brand p { display: none; }
  .pzln-auth__brand h1 { font-size: 26px; }
  .pzln-auth__logo { height: 28px; margin-bottom: 12px; }
  .pzln-auth__panel { justify-content: flex-start; padding: 26px 24px 40px; }
  .pzln-stepper { padding: 0; }
  .pzln-step { min-width: 118px; }
}

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

/* =========================================================================
   Conta, organizacao e decisoes — componentes partilhados pelos dois portais

   Tudo o que esta aqui obedece as mesmas regras do resto da V4: quase
   monocromatico, contorno em vez de sombra, radius contido, e Signal so
   quando ha MOVIMENTO OPERACIONAL — um pedido por decidir, um convite por
   aceitar. Nada disto introduz uma estetica de "administracao": se
   escondermos a barra lateral, estas paginas continuam a ser o mesmo produto.
   ========================================================================= */

/* --- Menu da conta, no cabecalho ---------------------------------------
   <details>/<summary> em vez de JavaScript: abre e fecha com teclado, fecha
   com ESC, e nao ha estado nosso para se dessincronizar. */
.pzln-account { position: relative; margin-left: auto; }
.pzln-account > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 5px;
  border: 1px solid transparent;
  border-radius: var(--pz-r-full);
  color: var(--pz-text-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pzln-account > summary::-webkit-details-marker { display: none; }
.pzln-account > summary:hover { border-color: var(--pz-border); background: var(--pz-surface-2); }
.pzln-account > summary:focus-visible { outline: none; box-shadow: var(--pz-focus); }
.pzln-account__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--pz-r-full);
  background: var(--pz-ink-800);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.pzln-account__name {
  max-width: 168px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pzln-account__caret { color: var(--pz-text-4); transition: transform .12s ease; }
.pzln-account[open] .pzln-account__caret { transform: rotate(180deg); }
.pzln-account__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 248px;
  padding: 6px;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-lg);
  background: var(--pz-surface);
  box-shadow: var(--pz-shadow-md);
}
.pzln-account__id { padding: 9px 10px 11px; border-bottom: 1px solid var(--pz-divider); margin-bottom: 5px; }
.pzln-account__id strong { display: block; font-size: 13.5px; color: var(--pz-text); }
.pzln-account__id small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--pz-text-3); word-break: break-all; }
.pzln-account__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--pz-r-sm);
  color: var(--pz-text-2);
  font-size: 13.5px;
  text-decoration: none;
}
.pzln-account__menu a svg { color: var(--pz-text-4); }
.pzln-account__menu a:hover { background: var(--pz-surface-3); color: var(--pz-text); }
.pzln-account__menu a:hover svg { color: var(--pz-text-2); }
.pzln-account__out { margin-top: 4px; border-top: 1px solid var(--pz-divider); border-radius: 0 0 var(--pz-r-sm) var(--pz-r-sm); padding-top: 11px !important; }

/* --- Menu secundario "⋯" nas listas ------------------------------------ */
.pzln-more { position: relative; display: inline-block; }
.pzln-more > summary {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: var(--pz-r-sm);
  color: var(--pz-text-3);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}
.pzln-more > summary::-webkit-details-marker { display: none; }
.pzln-more > summary:hover { border-color: var(--pz-border); background: var(--pz-surface-2); color: var(--pz-text); }
.pzln-more > summary:focus-visible { outline: none; box-shadow: var(--pz-focus); }
.pzln-more__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 190px;
  padding: 5px;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-md);
  background: var(--pz-surface);
  box-shadow: var(--pz-shadow-md);
  text-align: left;
}
.pzln-more__menu a,
.pzln-more__menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--pz-r-xs);
  background: none;
  color: var(--pz-text-2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.pzln-more__menu a:hover,
.pzln-more__menu button:hover { background: var(--pz-surface-3); color: var(--pz-text); }
.pzln-more__menu form { margin: 0; }
/* O unico vermelho destas listas, e so para o que e mesmo destrutivo. */
.pzln-more__danger { color: var(--pz-danger-fg) !important; }
.pzln-more__danger:hover { background: var(--pz-danger-bg) !important; }

/* --- Estado humano de um membro ---------------------------------------- */
.pzln-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--pz-text-2);
  white-space: nowrap;
}
.pzln-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pz-neutral-ac);
}
.pzln-state--active::before { background: var(--pz-success-ac); }
.pzln-state--disabled::before { background: var(--pz-text-4); opacity: .5; }
/* Convite por aceitar E movimento operacional: alguem tem de fazer algo. */
.pzln-state--invite_pending::before { background: var(--pz-orange-500); }
.pzln-state--invite_expired::before { background: var(--pz-blocked-ac); }

/* --- Grelha de capacidades --------------------------------------------- */
.pzln-table__cap { text-align: center; }
.pzln-table__cap span[title] { font-size: 11.5px; font-weight: 500; }
.pzln-cap { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--pz-r-xs); }
.pzln-cap--on { background: var(--pz-surface-3); color: var(--pz-text); }
.pzln-cap--off { color: var(--pz-text-4); }
.pzln-table__actions { text-align: right; white-space: nowrap; }
.pzln-muted { color: var(--pz-text-4); font-size: 12.5px; }

/* --- Painel com movimento operacional ----------------------------------
   A barra de 2px a esquerda e o unico Signal do painel. Nao ha fundo
   laranja: um bloco de cor por cima do painel roubava a atencao ao que
   importa, que e a decisao. */
.pzln-panel--signal { border-left: 2px solid var(--pz-orange-500); }

/* --- Pedidos por decidir ------------------------------------------------ */
.pzln-decisions { display: flex; flex-direction: column; }
.pzln-decision {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--pz-divider);
}
.pzln-decision:first-child { border-top: 0; }
.pzln-decision__id a { color: var(--pz-text); text-decoration: none; }
.pzln-decision__id a:hover { text-decoration: underline; }
.pzln-decision__id strong { display: block; font-size: 14px; }
.pzln-decision__id span { display: block; margin-top: 2px; color: var(--pz-text-3); font-size: 12.5px; }
.pzln-decision__why p { margin: 0; font-size: 13px; color: var(--pz-text-2); }
.pzln-decision__note { margin-top: 3px !important; color: var(--pz-text-3) !important; }
.pzln-decision__why small { display: block; margin-top: 5px; color: var(--pz-text-4); font-size: 11.5px; }
.pzln-decision__actions { display: flex; gap: 8px; justify-content: flex-end; }
.pzln-decision__actions form { margin: 0; }

/* --- Nota em linha ------------------------------------------------------ */
.pzln-inline-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-md);
  background: var(--pz-surface-2);
  color: var(--pz-text-2);
  font-size: 12.5px;
}
.pzln-inline-note svg { flex: none; margin-top: 1px; color: var(--pz-text-4); }

/* --- Estado vazio com titulo proprio ------------------------------------ */
.pzln-empty h2, .pzln-empty h3 { margin: 0 0 6px; font-size: 15px; color: var(--pz-text); }
.pzln-empty p { margin: 0; color: var(--pz-text-3); font-size: 13px; }

.pzln-auth__hint { margin: -4px 0 4px; color: var(--pz-text-3); font-size: 12px; }

@media (max-width: 720px) {
  .pzln-account__name { display: none; }
  .pzln-account__menu { min-width: 232px; }
  .pzln-decision { grid-template-columns: 1fr; gap: 10px; }
  .pzln-decision__actions { justify-content: flex-start; }
}
/* --- Resumo de capacidades numa linha ---------------------------------- */
.pzln-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.pzln-caps__item,
.pzln-caps__more {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-full);
  background: var(--pz-surface-2);
  color: var(--pz-text-2);
  font-size: 11.5px;
  white-space: nowrap;
}
.pzln-caps__more { border-style: dashed; color: var(--pz-text-3); }

/* Um campo desactivado tem de PARECER desactivado. No convite, o email vinha
   com a mesma moldura dos campos editáveis e as pessoas tentavam escrevê-lo. */
.pzln-form input:disabled,
.pzln-form textarea:disabled,
.pzln-form select:disabled {
  background: var(--pz-surface-3);
  border-color: var(--pz-border);
  color: var(--pz-text-3);
  cursor: not-allowed;
}

/* Tabelas largas rolam dentro do painel em vez de serem cortadas por ele. */
.pzln-table-wrap { overflow-x: auto; }
/* Endereços de email não têm espaços: sem isto empurram a linha para fora do
   ecrã a 390px e a coluna seguinte desaparece. */
.pzln-table__mail { overflow-wrap: anywhere; word-break: break-word; }
/* --- Pontos de regresso -------------------------------------------------
   Voltar de um POST tem de devolver a pessoa ao sitio onde estava. O servidor
   reconstrói o contexto e o URL traz a âncora como fragmento; falta garantir
   que o elemento não fica escondido debaixo da barra fixa de 58px — sem isto o
   browser rola até ao alvo e a barra tapa-o, que na prática é o mesmo que ter
   perdido a posição.
   -------------------------------------------------------------------------- */
[id^="campo-"],
[id^="conflito-"],
[id^="grupo-"],
[id^="doc-"],
#valor-servico {
  scroll-margin-top: 76px;
}

/* Acção sobre a leitura de um ficheiro (parar / tentar de novo). Discreta: é
   uma saída, não uma chamada de atenção. */
.pzln-file__ocr-action {
  padding: 2px 8px;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-sm);
  background: transparent;
  color: var(--pz-text-3);
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
}
.pzln-file__ocr-action:hover { border-color: var(--pz-border-strong); color: var(--pz-text); }
.pzln-file__ocr-action:focus-visible { outline: 2px solid var(--pz-signal); outline-offset: 1px; }

/* ---------------------------------------------- Um botão que está a trabalhar
   Não há barra de percentagem em lado nenhum: não sabemos quanto falta, e
   inventá-lo era mentir. Só uma roda que gira e a frase do que se está a
   fazer. O véu aparece passado quase um segundo — antes disso a transição
   ainda parece imediata e um véu só piscava.                                */
.pzln-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pzln-rodar .7s linear infinite;
  opacity: .85;
}
@keyframes pzln-rodar { to { transform: rotate(360deg); } }

.pzln-veu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(22, 25, 30, .28);
  backdrop-filter: blur(1.5px);
}
.pzln-veu__caixa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 13px 18px;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-md);
  background: var(--pz-surface);
  color: var(--pz-text);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--pz-shadow-md);
}

/* Um botão ocupado continua legível: não se apaga, fica só claramente inerte. */
.pzln-button[disabled] { cursor: default; opacity: .82; }
form[aria-busy="true"] .pzln-button[disabled] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pzln-spinner { animation-duration: 2.4s; }
  .pzln-veu { backdrop-filter: none; }
}

/* ------------------------------------------- A fila de leitura, depois do envio
   Aparece por cima do processo enquanto o browser lê os documentos que já
   estão guardados. Não é um bloqueio: é um aviso de que há trabalho a decorrer
   sobre coisas que já estão em segurança.                                    */
.pzo-autoread {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--pz-border);
  border-left: 3px solid var(--pz-signal);
  border-radius: var(--pz-r-md);
  background: var(--pz-surface-2);
}
.pzo-autoread__state {
  margin: 0;
  font-size: 13px;
  color: var(--pz-text);
}
/* A RODA VIVE DO ESTADO, NÃO DA EXISTÊNCIA DO ELEMENTO.
 *
 * Estava presa ao próprio bloco: enquanto o bloco existisse na página, a roda
 * girava — incluindo depois de a leitura ter acabado e de a mesma linha já
 * dizer "Leitura concluída". Girar depois do trabalho feito não é um detalhe
 * visual: é a página a afirmar que ainda está a processar quando não está.
 *
 * Agora só gira com `aria-busy="true"`, que é escrito quando a fila arranca de
 * facto e apagado em TODOS os fins — leu, não deu nada, não conseguiu ler,
 * está outro separador a ler, não há motor. Sem JavaScript nunca chega a
 * arrancar, e por isso nunca aparece roda nenhuma. */
.pzo-autoread::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 2px solid var(--pz-border-strong, var(--pz-border));
  border-radius: 50%;
}
.pzo-autoread[aria-busy="true"]::before {
  border-color: var(--pz-signal);
  border-top-color: transparent;
  animation: pzln-rodar .7s linear infinite;
}

/* =========================================================================
   W04 — SUPERFÍCIES DE PRODUTO: público, particular, acesso
   -------------------------------------------------------------------------
   O mesmo sistema do portal de trabalho: Inter, superfícies sólidas,
   contorno em vez de sombra e Signal só para movimento. Sem serifas de
   revista, sem gradientes, sem cartões decorativos.

   Um processo lê-se pela ordem da pergunta de quem o abre: o que é → em
   que estado está → o que acontece agora → com quem está → o que falta →
   o que já chegou → o que aconteceu. A marcação segue essa ordem e o CSS
   não a reordena.
   ========================================================================= */

.pzln-preview-banner { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 34px; padding: 7px 16px; background: var(--pz-ink-900); color: var(--lz-brand-light-slate); font-size: 12px; }
.pzln-preview-banner strong { color: var(--pz-text-inv); font-weight: 600; }
.pzln-preview-banner strong::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--pz-signal); vertical-align: 1px; }

/* Papéis tipográficos: META (micro-rótulo), DATA (referência, matrícula,
   NIF, data). Identificadores ficam em algarismos proporcionais: o tnum do
   Inter alarga o hífen e partia "PAR-26-…" em três blocos. Datas alinham. */
.pzln-kicker { display: block; color: var(--pz-text-3); font-size: var(--type-meta-size); font-weight: 600; letter-spacing: var(--type-meta-tracking); text-transform: uppercase; }
.pzln-data { font-variant-numeric: normal; letter-spacing: var(--type-data-tracking); }
time.pzln-data { font-variant-numeric: tabular-nums; }
.pzln-text-link { display: inline-flex; align-items: center; min-height: 36px; color: var(--pz-text); font-size: 13.5px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--pz-border-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pzln-text-link:hover { text-decoration-color: currentColor; }

/* --- Marca nos cabeçalhos claros ------------------------------------------
   O site público tem folha própria (pz-legalizations-public.css). */
.pzln-particular__brand { display: inline-flex; align-items: center; min-height: 44px; }
/* O master tem margem de proteção embutida (a marca pinta ~71% da largura
   e ~49% da altura): 44px de caixa dão ~136px de logótipo visível. */
.pzln-particular__brand .pzln-product-brand { --lz-logo-height: 21.59px; }
.pzln-particular__header > nav { display: flex; justify-content: center; gap: 4px; }
.pzln-particular__header > nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--pz-r-sm); color: var(--pz-text-2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.pzln-particular__header > nav a:hover { color: var(--pz-text); background: var(--pz-surface-3); }
/* Sombra funcional: o menu fica mesmo por cima do conteúdo. */

/* --- Acesso ------------------------------------------------------------- */
.pzln-password { position: relative; display: block; }
.pzln-password input { padding-right: 84px !important; }
/* O botão ocupa a altura toda do campo: o alvo de toque é o do próprio campo. */
.pzln-password__toggle { position: absolute; top: 0; right: 0; bottom: 0; min-width: 72px; padding: 0 12px; border: 0; border-radius: 0 var(--pz-r-sm) var(--pz-r-sm) 0; background: transparent; color: var(--pz-text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pzln-password__toggle:hover { color: var(--pz-text); background: var(--pz-surface-3); }
/* Página só com painel (404 das pré-visualizações): ocupa a largura toda. */
.pzln-auth > .pzln-auth__panel:only-child { grid-column: 1 / -1; }

/* --- Particular ----------------------------------------------------------
   Uma folha branca, sem cartões: faixa de estado, depois linhas. */
.pzln-particular { --pzln-gutter: max(16px, calc((100% - 1040px) / 2)); min-height: 100vh; background: var(--pz-surface); color: var(--pz-text); }
.pzln-particular__header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 72px; padding: 0 var(--pzln-gutter); border-bottom: 1px solid var(--pz-border); background: var(--pz-surface); }
.pzln-particular__header > .pzln-text-link { min-height: 44px; }
.pzln-particular__main { padding: 40px var(--pzln-gutter) 64px; }

.pzln-pcase__head { padding-bottom: 20px; }
.pzln-pcase__head h1 { margin: 8px 0 0; font-size: clamp(26px, 3vw, 34px); font-weight: 650; line-height: 1.1; overflow-wrap: anywhere; }
.pzln-pcase__meta { margin: 8px 0 0; color: var(--pz-text-3); font-size: 14px; }
.pzln-glance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); margin: 0; border: 1px solid var(--pz-border); border-radius: var(--pz-r-md); background: var(--pz-surface-2); overflow: hidden; }
.pzln-glance__item { min-width: 0; padding: 16px 20px 18px; }
.pzln-glance__item + .pzln-glance__item { border-left: 1px solid var(--pz-border); }
.pzln-glance dt { color: var(--pz-text-3); font-size: var(--type-meta-size); font-weight: 600; letter-spacing: var(--type-meta-tracking); text-transform: uppercase; }
.pzln-glance dd { margin: 8px 0 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.pzln-glance__dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--pz-text-4); vertical-align: 1px; }
.pzln-glance__dot.is-signal { background: var(--pz-signal); }
/* A vez é da pessoa: a única faixa Signal da página. */
.pzln-glance__item.is-yours { background: var(--pz-surface); box-shadow: inset 0 3px 0 var(--pz-signal); }
.pzln-blocker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 12px 0 0; padding: 12px 16px; border: 1px solid var(--pz-blocked-bd); border-left: 3px solid var(--pz-blocked-ac); border-radius: var(--pz-r-sm); background: var(--pz-blocked-bg); color: var(--pz-blocked-fg); font-size: 14px; }
.pzln-blocker strong { font-weight: 700; }

.pzln-pcase__body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px 56px; margin-top: 40px; }
.pzln-pcase__main { display: grid; align-content: start; gap: 40px; }
.pzln-psection h2 { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--pz-text); font-size: 16px; font-weight: 650; letter-spacing: -.008em; }
.pzln-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--pz-r-full); background: var(--pz-surface-3); color: var(--pz-text-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pzln-rows { margin: 0; padding: 0; list-style: none; }
.pzln-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; min-height: 48px; padding: 13px 0; border-bottom: 1px solid var(--pz-divider); font-size: 14.5px; }
.pzln-rows li > span:first-child { min-width: 0; font-weight: 500; }
.pzln-rows__meta { flex: none; color: var(--pz-text-3); font-size: 13px; }
.pzln-rows--timeline li { display: grid; grid-template-columns: 88px minmax(0, 1fr); justify-content: start; gap: 12px; }
.pzln-rows--timeline time { color: var(--pz-text-3); font-size: 13px; }
.pzln-rows--timeline li > span { color: var(--pz-text-2); }
.pzln-rows__empty { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--pz-divider); color: var(--pz-text-3); font-size: 14px; }
.pzln-psection--empty { padding: 24px 0; }
.pzln-psection--empty h1 { margin: 0 0 8px; font-size: 24px; font-weight: 650; letter-spacing: -.018em; }
.pzln-psection--empty p { max-width: 620px; margin: 0 0 12px; color: var(--pz-text-3); line-height: 1.6; }
.pzln-particular__help { margin: 56px 0 0; padding-top: 20px; border-top: 1px solid var(--pz-border); color: var(--pz-text-3); font-size: 13.5px; line-height: 1.6; }
.pzln-particular__help strong { color: var(--pz-text); font-weight: 600; }

/* W06.2 — Valor do serviço: o montante, como o IVA se relaciona com ele e a
   aceitação. Lê-se de uma vez ("1 250 €", "IVA incluído"); o estado aceite
   diz-se em texto, nunca só com cor, e aceitar nunca parece um pagamento. */
.pzln-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 0; }
.pzln-price:first-child { margin-top: 0; }
.pzln-price__amount { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pzln-price__vat { color: var(--pz-text-2); font-size: 15px; font-weight: 600; }
.pzln-price__total { margin: 6px 0 0; color: var(--pz-text-2); font-size: 14px; }
.pzln-price__total strong { color: var(--pz-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pzln-price__state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 14px 0 0; font-size: 14.5px; }
.pzln-price__state > span { color: var(--pz-text-3); }
.pzln-price__state svg { flex: none; }
.pzln-price__accept { margin: 16px 0 0; }
.pzln-price__apart { margin-top: 16px; border-top: 1px solid var(--pz-divider); }
.pzln-price__note { margin: 12px 0 0; color: var(--pz-text-3); font-size: 13px; line-height: 1.5; }

@media (max-width: 900px) {
  .pzln-particular__header { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding-top: 8px; }
  .pzln-particular__header > nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; margin: 0 -12px; overflow-x: auto; scrollbar-width: none; }
  .pzln-particular__header > nav::-webkit-scrollbar { display: none; }
  .pzln-pcase__body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  /* Alvos de toque: 44px em tudo o que se carrega com o dedo. Campos a 16px
     para o iOS não fazer zoom ao focar. */
  .pzln-menu-toggle { width: 44px; height: 44px; }
  .pzln-button, .pzln-button--small { min-height: 44px; }
  .pzln-nav a,
  .pzln-table__link,
  .pzln-account > summary,
  .pzln-account__menu a,
  .pzln-more__menu a,
  .pzln-more__menu button { min-height: 44px; }
  .pzln-account__menu a, .pzln-more__menu a, .pzln-more__menu button { display: flex; align-items: center; }
  .pzln-more > summary { width: 44px; height: 44px; }
  .pzln-tabs a,
  .pzln-panel__head > a,
  .pzln-pagination a { min-width: 44px; min-height: 44px; }
  .pzln-decision__id a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
  .pzln-timeline details > summary { display: flex; align-items: center; gap: 4px; min-height: 44px; }
  .pzln-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .pzln-form select,
  .pzln-filterbar input,
  .pzln-filterbar select,
  .pzln-upload input:not([type="file"]),
  .pzln-upload select { min-height: 44px; font-size: 16px; }
  .pzln-check { min-height: 44px; }
  .pzln-auth__help { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; }
  .pzln-text-link { min-height: 44px; }
}

@media (max-width: 640px) {
  .pzln-preview-banner { flex-direction: column; gap: 2px; padding: 8px 16px; text-align: center; }
  .pzln-particular__header { min-height: 64px; }
  .pzln-particular__brand .pzln-product-brand { --lz-logo-height: 17.66px; }
  .pzln-particular__main { padding-top: 24px; padding-bottom: 48px; }
  .pzln-pcase__head h1 { font-size: 24px; }
  .pzln-glance { grid-template-columns: minmax(0, 1fr); }
  .pzln-glance__item { padding: 14px 16px; }
  .pzln-glance__item + .pzln-glance__item { border-left: 0; border-top: 1px solid var(--pz-border); }
  .pzln-pcase__body, .pzln-pcase__main { gap: 32px; }
  .pzln-pcase__body { margin-top: 32px; }
  .pzln-rows li { flex-wrap: wrap; }
  .pzln-rows--timeline li { grid-template-columns: 80px minmax(0, 1fr); }
}