/* ===================================================================
   EFICÁCIA CRM — ds-base.css
   FASE 0 (proposta-design §7) — reset/base mínimo + ordem da cascata.
   ===================================================================

   ORDEM DAS CAMADAS (§6.2)
   A mudança técnica de maior alavancagem, dados os 335 `!important`
   do style.css. Com @layer, o CSS de um módulo ganha ao dos
   componentes SEM precisar de especificidade nem de `!important`.

   COMO LER ISTO HOJE (importante, para ninguém se enganar)
   Uma regra da cascata que costuma apanhar toda a gente:

       CSS *sem* camada ganha a CSS de *qualquer* camada.

   Todo o legado (style.css, design-system.css, mod-*.css, 20 folhas,
   ~18 800 linhas) está sem camada. Portanto, hoje:

     · declarar `legado` como camada mais fraca NÃO despromove nada —
       o legado continua a ganhar a tudo o que esteja em camada,
       porque continua fora de camadas. Isto é PROPOSITADO na Fase 0:
       é o que garante "os mesmos ecrãs, outra pele";
     · o que este ficheiro escreve em `@layer base` funciona como
       REDE DE SEGURANÇA: aplica-se onde o legado não diz nada e
       cala-se onde o legado já decide. Zero risco de regressão;
     · a ordem fica fixada desde já, para que todo o CSS novo das
       Fases 1-6 (ds-componentes, ds-ficha, ds-listagem…) nasça já
       com prioridades previsíveis entre si.

   A despromoção do legado torna-se REAL na Fase 6, quando as folhas
   antigas passarem a ser servidas dentro de `@layer legado{}` (por
   `@import url(style.css) layer(legado)` ou embrulhando o ficheiro).
   A partir desse momento esta declaração passa a mandar em tudo e os
   `!important` deixam de ter razão de existir.

   NOTA: os tokens (ds-tokens.css) estão DE FORA de qualquer camada,
   de propósito — precisam de ganhar ao `:root` do legado. A camada
   `tokens` fica declarada à espera da Fase 6.
   =================================================================== */

@layer legado, tokens, base, componentes, ficha, listagem, modulos, utilitarios;


@layer base {

    /* ---------------------------------------------------------------
       1. RESET MÍNIMO
       O style.css já tem o seu reset (linha 223). Isto é só a rede
       para o que ele não cobre, e para páginas servidas sem ele
       (monoposte.html, futuras vistas isoladas).
       --------------------------------------------------------------- */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        /* Anti-serrilhado nos pesos 600/700/800 da Inter. */
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
    }

    body {
        font-family: var(--font-sans);
        font-size: var(--txt-base);
        color: var(--text-2);
        background: var(--surface);
        line-height: 1.6;
    }

    /* Media nunca estoura o contentor (§5.6). */
    img,
    svg,
    video,
    canvas {
        max-width: 100%;
    }

    /* Formulários herdam a tipografia em vez da do sistema operativo. */
    button,
    input,
    select,
    textarea {
        font: inherit;
        color: inherit;
    }

    /* ---------------------------------------------------------------
       2. NÚMEROS TABULARES (§2.3, §2.8-5)
       Todas as colunas de euros, datas, quantidades e contadores
       alinham na vertical. É o detalhe que separa "tabela feita à
       pressa" de "produto financeiro".
       Aplicado às superfícies onde o alinhamento vertical importa —
       não ao corpo do texto, para não mexer em quebras de linha.
       O design-system.css já o fazia em ~10 sítios; isto generaliza.
       --------------------------------------------------------------- */
    table,
    th,
    td,
    input[type="number"],
    input[type="date"],
    input[type="time"],
    time {
        font-variant-numeric: var(--num-tabular);
    }

    /* ---------------------------------------------------------------
       3. FOCO VISÍVEL (§5.8)
       O style.css não tem UM único :focus-visible em 5 979 linhas —
       ou seja, todo o shell legado (sidebar, header, login, modais,
       dropdowns) é hoje invisível a quem navega por teclado.
       Estando em @layer base, esta regra não desfaz nenhum foco já
       desenhado nos ds-* (design-system.css tem 20): só preenche o
       vazio. Ganho de acessibilidade a custo zero de regressão.
       --------------------------------------------------------------- */
    /* Só `outline` — nunca `border-radius` aqui. O outline já segue
       sozinho o raio do elemento nos browsers atuais; declarar raio
       neste seletor mudaria a GEOMETRIA de tudo o que recebesse foco
       (um cartão de 18px cairia para 6px ao ser focado). */
    :focus-visible {
        outline: 2px solid var(--brand-500);
        outline-offset: 2px;
    }

    /* Rato/toque não levam anel — só o teclado. */
    :focus:not(:focus-visible) {
        outline: none;
    }

    /* ---------------------------------------------------------------
       4. SELEÇÃO E SCROLLBARS — tingidas na marca em vez do azul do
       sistema. Barato, e é das coisas que mais faz uma app parecer
       desenhada de propósito.
       --------------------------------------------------------------- */
    ::selection {
        background: var(--brand-100);
        color: var(--brand-900);
    }

    /* scrollbar-color herda-se — basta declarar na raiz. */
    html {
        scrollbar-color: var(--ink-300) transparent;
        scrollbar-width: thin;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--ink-300);
        border-radius: var(--r-full);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--ink-400);
    }

    /* ---------------------------------------------------------------
       5. TIPOGRAFIA DE BASE — as duas regras de tracking do §2.3,
       aplicadas onde não há classe a decidir.
       --------------------------------------------------------------- */
    h1,
    h2 {
        letter-spacing: var(--track-tight);
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--font-mono);
        font-variant-numeric: var(--num-tabular);
    }

    /* ---------------------------------------------------------------
       6. MOVIMENTO (§2.7) — quem pede menos movimento fica sem
       transformações e mantém as opacidades.
       --------------------------------------------------------------- */
    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: .01ms;
            animation-iteration-count: 1;
            transition-duration: .01ms;
            scroll-behavior: auto;
        }
    }
}


/* ===================================================================
   UTILITÁRIOS — camada mais forte de todas (§6.2).
   Só os dois átomos tipográficos do §2.8-5, para já. O resto da
   biblioteca nasce nas Fases 1-2 (ds-componentes / ds-ficha).
   =================================================================== */
@layer utilitarios {

    /* Número tabular explícito, para valores fora de tabela. */
    .ds-u-tabular {
        font-variant-numeric: var(--num-tabular);
    }

    /* Referências (2026/14, EF2026087, FO20260231) em mono — é a
       assinatura visual dos códigos em toda a app. */
    .ds-u-ref {
        font-family: var(--font-mono);
        font-variant-numeric: var(--num-tabular);
        letter-spacing: 0;
    }
}


/* ===================================================================
   IMPRESSÃO (§5.7) — mínimo viável para os documentos que a Eficácia
   imprime a sério (mapa de férias, ficha de manutenção, folha de
   ponto, encomenda ao fornecedor).
   FORA de camada, de propósito: tem mesmo de ganhar ao legado, que
   usa overflow:hidden no body e fundos que se perdem na impressão.
   =================================================================== */
@media print {

    html,
    body {
        overflow: visible !important;
        height: auto !important;
        background: #fff !important;
    }

    /* As pílulas de estado mantêm a cor no papel. */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Nunca partir um cartão ou uma linha de tabela a meio. */
    tr,
    img {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }
}

/* ---------------------------------------------------------------------------
   Correção de regressão da Fase 0 — botões irmãos com alturas diferentes.

   `.btn` é `inline-flex` (style.css:1369). Num botão com texto, a caixa de
   linha do texto mede 1.6em (13px × 1.6 = 20,8px) e o botão fica com 40,8px.
   Num botão só de ícone, o SVG de 18px é o único item flex, por isso o botão
   ficava a 38px — 2,8px mais baixo que o irmão ao lado.

   Dar ao ícone a mesma altura mínima da caixa de linha do texto iguala os
   irmãos sem fixar pixéis (continua relativo ao font-size do botão).
   --------------------------------------------------------------------------- */
@layer base {

    .btn>svg,
    .btn>i,
    .btn>[data-lucide] {
        min-height: 1.6em;
    }
}