/* ==========================================================================
   Tema claro e escuro

   Todas as cores do sistema saem daqui. As folhas de estilo referenciam as
   variáveis em vez de escrever o hex, então trocar de tema é só trocar o
   atributo data-tema no <html> — sem duplicar regra nenhuma.

   Para acrescentar uma cor nova, crie o par aqui em vez de escrever o hex
   direto na folha: foi assim que cada tela acabou com o seu próprio cinza.
   ========================================================================== */

:root {
    /* Superfícies */
    --fundo:          #f5f6fa;
    --superficie:     #ffffff;
    --superficie-2:   #f8f9fc;
    --superficie-3:   #eef0f6;

    /* Linhas */
    --borda:          #eef0f6;
    --borda-campo:    #dfe1ec;
    --borda-forte:    #c3c7db;

    /* Texto, do mais forte ao mais apagado */
    --texto:          #2c3e50;
    --texto-2:        #4a5068;
    --texto-3:        #8a8a99;
    --texto-4:        #a9adc0;

    /* Marca */
    --primaria:       #667eea;
    --primaria-hover: #5a6ed8;
    --primaria-2:     #764ba2;
    --primaria-fraca: #eef0ff;

    /* Estados */
    --sucesso:        #28a745;
    --sucesso-texto:  #1c6b3d;
    --perigo:         #e74c3c;
    --perigo-hover:   #c0392b;
    --perigo-texto:   #a3271b;
    --perigo-fundo:   #fdecea;
    --aviso-texto:    #b8860b;
    --aviso-fundo:    #fffdf3;
    --aviso-borda:    #f2e9c8;
    --sucesso-fundo:  #e8f7ee;
    --sucesso-borda:  #b9e3ca;
    --perigo-borda:   #f5c6c2;

    /* Menu lateral: escuro nos dois temas, por isso tem tokens próprios */
    --sidebar-1:      #2c3e50;
    --sidebar-2:      #34495e;
    --sidebar-texto:  #bdc3c7;

    --sombra:         rgba(16, 24, 64, 0.08);
    --sombra-forte:   rgba(16, 24, 64, 0.35);

    /* Tinta sobre as cores de situação (amarelo, verde, laranja...).
       NÃO muda com o tema: aquelas cores vêm do banco e são sempre claras,
       então o texto por cima tem de continuar escuro para dar contraste. */
    --tinta-status:        #2c3e50;
    --tinta-status-fraca:  #5c5c5c;
    --tinta-status-perigo: #a3271b;

    color-scheme: light;
}

[data-tema="escuro"] {
    --fundo:          #12141c;
    --superficie:     #1b1e28;
    --superficie-2:   #232733;
    --superficie-3:   #2b3040;

    --borda:          #2b3040;
    --borda-campo:    #363c4d;
    --borda-forte:    #4b5265;

    --texto:          #e6e8f0;
    --texto-2:        #bcc0d0;
    --texto-3:        #9096a8;
    --texto-4:        #757c90;

    --primaria:       #7b8cf0;
    --primaria-hover: #8f9df5;
    --primaria-2:     #9b6fd0;
    --primaria-fraca: #262a3d;

    --sucesso:        #35c45c;
    --sucesso-texto:  #5ee08a;
    --perigo:         #ef5a4a;
    --perigo-hover:   #d94a3a;
    --perigo-texto:   #ff9082;
    --perigo-fundo:   #3a2320;
    --aviso-texto:    #e0a83a;
    --aviso-fundo:    #2e2a1c;
    --aviso-borda:    #4a4126;
    --sucesso-fundo:  #16301f;
    --sucesso-borda:  #27503a;
    --perigo-borda:   #5a2f28;

    --sidebar-1:      #171a22;
    --sidebar-2:      #1e222c;
    --sidebar-texto:  #a8aec0;

    --sombra:         rgba(0, 0, 0, 0.4);
    --sombra-forte:   rgba(0, 0, 0, 0.6);

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Botão de troca de tema (canto superior direito, ao lado do usuário)
   -------------------------------------------------------------------------- */

.btn-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--superficie-3);
    color: var(--texto-2);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.btn-tema:hover {
    background: var(--borda-campo);
    color: var(--texto);
}

.btn-tema .icone {
    width: 19px;
    height: 19px;
}

/* O ícone mostra o destino do clique: lua no tema claro, sol no escuro */
.btn-tema .icone-para-claro { display: none; }
[data-tema="escuro"] .btn-tema .icone-para-claro { display: block; }
[data-tema="escuro"] .btn-tema .icone-para-escuro { display: none; }

/* Em tela estreita a saudação sai; o botão e o Sair continuam */
@media (max-width: 600px) {
    .user-info .saudacao {
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .user-info .saudacao {
        display: none;
    }
}