/* Rastram — base do documento e famílias tipográficas.

   Declarações de fonte de Manrope (variável 200–800; o painel usa 200 e 700) e Inter (variável
   100–900 mais a itálica; o painel usa 400 e 600), subconjunto latino em woff2 auto-hospedado em
   fonts/ — o mesmo unicode-range do subconjunto `latin` do Google Fonts, que cobre todo o português
   do Brasil. Hospedar aqui tira fonts.googleapis.com e fonts.gstatic.com do caminho crítico.
   `font-display: swap` é deliberado: o texto aparece na fonte de sistema e troca quando a nossa chega.

   Também moram aqui a base do body, a régua única de foco, o reduced-motion global, @keyframes tlSpin,
   o shell de carga e o erro fatal — regras de DOCUMENTO, válidas em todas as telas. rastram.css e
   componentes.css não declaram fonte, body nem anel de foco próprios. */

/* ---------- Tipografia (Manrope e Inter, variáveis, subconjunto latino, local) ---------- */
/* A itálica só é baixada se algum texto a usar: custo zero enquanto ninguém usa. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-var.woff2") format("woff2-variations");
  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-var.woff2") format("woff2-variations");
  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: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-italic-var.woff2") format("woff2-variations");
  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;
}

/* ---------- Documento ---------- */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* O painel é tela cheia: a rolagem pertence ao mapa e à lista, nunca ao documento. Sem isto, o
       navegador móvel arrasta a página inteira ao tentar mover o mapa. */
    overflow: hidden;
    /* Impede o "salto elástico" do iOS ao arrastar além do limite, que descola as sobreposições. */
    overscroll-behavior: none;
}

/* Único dono da base: rastram.css vem depois na cascata e não redeclara body. */
body {
    background: var(--bg-canvas);
    color: var(--text-primary);
    font: var(--rs-type-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

/* Alvo de foco programático (<h1 tabindex="-1"> das páginas); a régua universal já o exclui. */
h1:focus {
    outline: none;
}

/* Identificador (Inter 600 com tnum/ss02), sem monoespaçada. Aparece no shell de file://. */
code {
    font: inherit;
    font-weight: 600;
    color: inherit;
    font-feature-settings: "tnum" 1, "ss02" 1;
}

/*
  Bloqueio de rolagem do fundo enquanto um diálogo está aberto. A classe existe porque a rota
  /eventos-acoes LIBERA a rolagem do documento (.tl-pagina), e sem uma marca explícita o fundo
  dessas páginas rolaria por baixo do modal.
*/
body.tl-sem-rolagem {
    overflow: hidden !important;
    touch-action: none;
}

/* ---------- Foco ---------- */
/*
  Régua única: anel 2px --focus-inner, vão de 2px e halo creme (--focus-halo). Nenhum componente
  declara foco próprio; a exceção da caixa do .tl-check replica estes mesmos valores.
*/
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--border-width-2) solid var(--focus-inner);
    outline-offset: 2px;
    box-shadow: var(--focus-halo);
}

/* ---------- Shell de carga ---------- */
/*
  Cobre o intervalo entre o HTML pintado e o primeiro módulo ES executado. Fica no HTML (não é
  injetado por JavaScript) para aparecer no primeiro quadro, e some quando js/app.js remove o
  elemento. Declarado aqui, e não em rastram.css, para o shell não depender de uma folha que
  carrega depois. z-index 5000 fica acima de --z-dialog (1010) de propósito: é a camada pré-aplicação.
*/
@keyframes tlSpin {
    to { transform: rotate(360deg); }
}

.tl-shell-carga {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-16);
    padding: var(--space-24);
    background: var(--bg-canvas);
    color: var(--text-secondary);
    font: var(--rs-type-supporting);
    text-align: center;
}

.tl-shell-carga p {
    margin: 0;
}

/* Assinatura horizontal, um arquivo por tinta: preta no claro, creme no escuro (160px ≥ mínimo de 140px). */
.tl-shell-carga__logo {
    display: block;
    width: 160px;
    height: auto;
}

.tl-shell-carga__logo--escuro {
    display: none;
}

body[data-tema="escuro"] .tl-shell-carga__logo--claro {
    display: none;
}

body[data-tema="escuro"] .tl-shell-carga__logo--escuro {
    display: block;
}

/* Arco em --text-primary sobre trilho --border-subtle: laranja é ação e estado, nunca decoração. */
.tl-shell-carga__marca {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 3px solid var(--border-subtle);
    border-top-color: var(--text-primary);
    animation: tlSpin 900ms linear infinite;
}

/*
  Falha irrecuperável de módulo. Some do caminho normal — só aparece se js/app.js não conseguir
  subir. `display: none` porque js/app.js e roteador.js ligam com style.display = 'block'.
*/
.tl-erro-fatal {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 6000;
    display: none;
    min-height: var(--size-touch);
    padding: var(--space-12) var(--space-16) calc(var(--space-12) + env(safe-area-inset-bottom));
    background: var(--functional-danger);
    color: var(--text-on-danger);
    font: var(--rs-type-body-strong);
}

.tl-erro-fatal i {
    margin-right: var(--space-8);
}

/* Link sempre sublinhado (nunca só por cor), na mesma tinta do texto sobre o vermelho. */
.tl-erro-fatal a {
    color: inherit;
    margin-left: var(--space-12);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font: var(--rs-type-button);
}

/* ---------- Movimento ---------- */
/* 0.01ms em vez de desligar a animação: animationend e transitionend continuam disparando. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}