/* Base da identidade TDSOFT para todas as telas (Artefatos/Identidade TDS/Manual Marca TDSOFT.pdf).
   Laranja é o destaque, cinza escuro o texto, azul só de apoio; Lato no texto e Montserrat Bold
   caixa alta espaçada nos rótulos; círculos como elemento de apoio. Carregar ANTES do CSS da tela.
   Os tokens --tds-* trocam sozinhos com html[data-tema] (tema.js); o CSS da tela mapeia os seus
   nomes de variável para eles. */
@font-face { font-family: 'Lato'; font-weight: 300; src: url('../fonts/Lato-Light.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 400; src: url('../fonts/Lato-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-weight: 700; src: url('../fonts/Lato-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; src: url('../fonts/Lato-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; src: url('../fonts/Montserrat-Bold.ttf') format('truetype'); }

:root {
    --tds-fonte: 'Lato', Arial, Helvetica, sans-serif;
    --tds-fonte-rotulo: 'Montserrat', 'Lato', Arial, sans-serif;

    /* fixas da marca */
    --tds-laranja: #F35E22;
    --tds-laranja-hover: #D94E16;
    --tds-azul: #2C65D5;
    --tds-neutro: #7F7F91;
    --tds-linha-marca: #BFBFC8;

    /* tema CLARO (padrão do manual: fundo claro sempre, p. 6) */
    --tds-fundo: #F0EEEA;       /* off-white quente; barra e cartões um degrau acima (01/10/2026) */
    --tds-superficie: #FAF9F6;
    --tds-superficie-2: #F7F7F8;
    --tds-borda: #E2DFD8;
    --tds-texto: #1A1A1A;
    --tds-texto-2: #55555F;
    --tds-muted: #7F7F91;
    --tds-laranja-claro: #FDEAE3;
    --tds-azul-claro: #E4EBF9;
    --tds-azul-texto: #1F4BA8;
    --tds-bom: #15803D;     --tds-bom-fundo: #F0FDF4;     --tds-bom-borda: #BBF7D0;
    --tds-alerta: #B45309;  --tds-alerta-fundo: #FFFBEB;  --tds-alerta-borda: #FDE68A;
    --tds-critico: #B91C1C; --tds-critico-fundo: #FEF2F2; --tds-critico-borda: #FECACA;
    --tds-sombra: 0 1px 3px rgba(26, 26, 26, .08), 0 4px 16px rgba(26, 26, 26, .06);
}

/* tema ESCURO: #191919 do logotipo para fundo escuro (p. 37) */
html[data-tema="escuro"] {
    color-scheme: dark;
    --tds-fundo: #191919;
    --tds-superficie: #222224;
    --tds-superficie-2: #2B2B2F;
    --tds-borda: #3A3A42;
    --tds-texto: #F1F1F1;
    --tds-texto-2: #C8C8D0;
    --tds-muted: #A3A3B2;
    --tds-laranja-claro: #3A2318;
    --tds-azul-claro: #1C2A47;
    --tds-azul-texto: #A9C1F5;
    --tds-bom: #4ADE80;     --tds-bom-fundo: #14301F;     --tds-bom-borda: #1F5C36;
    --tds-alerta: #FBBF24;  --tds-alerta-fundo: #33290F;  --tds-alerta-borda: #6B5313;
    --tds-critico: #F87171; --tds-critico-fundo: #3A1A1A; --tds-critico-borda: #7F2A2A;
    --tds-sombra: 0 6px 20px rgba(0, 0, 0, .4);
}

/* Botão de tema: ícone discreto (tema.js). Quem posiciona é o CSS da tela. */
/* Botão de tema: mesmo canto superior direito em todas as telas; a barra reserva 64px à direita */
.tema { position: fixed; top: 17px; right: 24px; z-index: 1000; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tds-muted); cursor: pointer; opacity: .65; display: inline-grid; place-items: center; flex: none; }
.tema:hover { opacity: 1; color: var(--tds-laranja); }
.tema svg { width: 16px; height: 16px; }
.tema .ico-sol, html[data-tema="escuro"] .tema .ico-lua { display: none; }
html[data-tema="escuro"] .tema .ico-sol { display: block; }

/* Logo tdsoft com as duas versões oficiais lado a lado no HTML: mostra a do tema */
.logo-escuro, html[data-tema="escuro"] .logo-claro { display: none; }
html[data-tema="escuro"] .logo-escuro { display: inline; }

/* Botão "← Qubia" (assets/js/voltar.js), fixo à esquerda do botão de tema. Posição IDÊNTICA em
   todas as telas internas de propósito; cabeçalho com conteúdo à direita reserva 152px. */
.qu-voltar {
    position: fixed; top: 17px; right: 58px; z-index: 1000;
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 10px; border-radius: 20px;
    border: 1px solid var(--tds-borda);
    background: var(--tds-superficie);
    color: var(--tds-muted); text-decoration: none;
    font-size: 12.5px; line-height: 1; white-space: nowrap;
}
.qu-voltar:hover { border-color: var(--tds-laranja); color: var(--tds-laranja); }
.qu-voltar svg { width: 14px; height: 14px; flex: none; }