@charset "UTF-8";

/* ==========================================================================
   TECNO-GRÁFICA DESIGN SYSTEM - COMPONENTE: POPUP NOTIFICATION ENGINE
   Arquitetura de UI Avançada com Micro-Interações e Otimização de GPU
   ========================================================================== */

/* --- VARIÁVEIS DE AMBIENTE E TOKENS DE DESIGN --- */
:root {
    /* Identidade Cromática Primária (Herdada da Landing Page) */
    --tg-main-color: #d11313;
    --tg-main-red-hover: #f01717;
    --tg-preto: #13131a;
    --tg-bg-color: #010103;
    --tg-modal-bg: #1e1e24;
    --tg-card-bg: #2a2a32;
    
    /* Cores de Feedback Semântico */
    --tg-success-green: #25d366;
    --tg-success-green-hover: #1eb954;
    --tg-info-blue: #0071e3;
    --tg-warning-orange: #ff9f0a;
    --tg-error-red: #d11313;
    
    /* Tipografia e Textos */
    --tg-text-main: #ffffff;
    --tg-text-muted: #b0b0b5;
    --tg-text-ghost: #6e6e73;
    
    /* Bordas e Linhas de Separação */
    --tg-border-color: rgba(255, 255, 255, 0.1);
    --tg-border-light: rgba(255, 255, 255, 0.05);
    --tg-border-glow: rgba(209, 19, 19, 0.25);
    
    /* Física de Animação (Frenagem Cúbica Líquida) */
    --tg-ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
    --tg-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --tg-ease-linear: cubic-bezier(0.25, 1, 0.5, 1);
    
    /* Efeitos de Sombras Físicas Projetadas (Camadas Z-Index) */
    --tg-shadow-premium: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 
                          0 10px 30px -10px rgba(0, 0, 0, 0.6), 
                          0 20px 40px -15px rgba(0, 0, 0, 0.7);
    --tg-shadow-glow-success: 0 0 30px rgba(37, 211, 102, 0.15);
    --tg-shadow-glow-error: 0 0 30px rgba(209, 19, 19, 0.2);
}

/* --- ISOLAMENTO DE ACESSIBILIDADE E REGRAS DE HARDWARE --- */
@media (prefers-reduced-motion: reduce) {
    #popup-status {
        transition: opacity 0.2s ease-in-out !important;
        transform: none !important;
    }
    .tg-progress-bar-inner {
        animation: none !important;
    }
}

/* ==========================================================================
   ESTRUTURA CORE DO NOTIFICATION CONTAINER
   ========================================================================== */

#popup-status {
    /* Posicionamento Estratégico Espacial */
    position: fixed;
    top: 10px;
    right: -210px; /* Completamente ocultado fora da viewport */
    width: calc(100vw - 16px);
    max-width: 180px;
    min-height: 34px;
    
    /* Alinhamento de Sub-Componentes */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 4px;
    padding: 5px 7px;
    
    /* Camada de Renderização e Filtros Avançados */
    z-index: 10005; /* Superior a Navbar (1000) e Modais Existentes */
    background: rgba(20, 20, 24, 0.86);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    
    /* Geometria e Estilização de Borda Premium */
    border-radius: 7px;
    border: 1px solid var(--tg-border-color);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
    
    /* Otimização de Performance Gráfica via GPU */
    will-change: transform, opacity, right;
    backface-visibility: hidden;
    transform: translateZ(0);
    
    /* Gatilhos de Entrada Baseados no Estado Inicial */
    opacity: 0;
    pointer-events: none;
    user-select: none;
    
    /* Transição Combinada de Estado */
    transition: 
        right 0.45s var(--tg-ease-snappy),
        transform 0.5s var(--tg-ease-snappy),
        opacity 0.4s var(--tg-ease-linear),
        background-color 0.3s ease;
}

/* --- GATILHO DINÂMICO DE ATIVAÇÃO (.mostrar) --- */
#popup-status.mostrar {
    right: 10px;
    opacity: 1;
    pointer-events: auto;
    user-select: auto;
    transform: translateX(0) scale(1);
}

/* --- EFEITO DE HOVER NO ELEMENTO CONTAINER --- */
#popup-status:hover {
    background: rgba(22, 22, 28, 0.88);
    border-color: rgba(255, 255, 255, 0.12);
    transform: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   SUBELEMENTOS INTERNOS DO POPUP
   ========================================================================== */

/* Bloco Esquerdo: Ícones Dinâmicos Nativos em CSS */
.tg-popup-icon-container {
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tg-border-light);
    margin-top: 0;
    transition: transform 0.3s var(--tg-ease-bounce);
}

#popup-status:hover .tg-popup-icon-container {
    transform: none;
}

/* Bloco Central: Tratamento Tipográfico */
#popup-mensagem {
    font-size: 0.66rem;
    line-height: 1.12;
    color: var(--tg-text-muted);
    padding-right: 2px;
}

#popup-mensagem strong {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--tg-text-main);
    display: block;
    margin-bottom: 1px;
    letter-spacing: 0;
}

/* Bloco Direito: Botão Interno para Fechamento Manual */
.tg-popup-close-btn {
    background: transparent;
    border: none;
    color: var(--tg-text-ghost);
    cursor: pointer;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    margin-top: 0;
}

.tg-popup-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--tg-text-main);
    transform: scale(1.05);
}

.tg-popup-close-btn:active {
    transform: scale(0.95);
}

/* ==========================================================================
   MÁSCARAS E ESTILOS SEMÂNTICOS DE ESTADO (SUCESSO, ERRO, INFO, WARNING)
   ========================================================================== */

/* --- CASO DE SUCESSO: AUTENTICAÇÃO VALIDADA --- */
#popup-status.sucesso {
    border-left: 1px solid rgba(37, 211, 102, 0.45);
    background: rgba(16, 20, 18, 0.9);
}

#popup-status.sucesso:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
    border-color: rgba(37, 211, 102, 0.2);
}

#popup-status.sucesso .tg-popup-icon-container {
    background: rgba(37, 211, 102, 0.08);
    border-color: rgba(37, 211, 102, 0.16);
    color: var(--tg-success-green);
}

#popup-status.sucesso strong {
    color: #d6f5e4;
}

/* --- CASO DE ERRO: VALIDAÇÃO FALHOU / ACESSO NEGADO --- */
#popup-status.erro {
    border-left: 1px solid rgba(255, 175, 64, 0.55);
    background: rgba(24, 20, 16, 0.9);
}

#popup-status.erro:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
    border-color: rgba(255, 175, 64, 0.28);
}

#popup-status.erro .tg-popup-icon-container {
    background: rgba(255, 175, 64, 0.1);
    border-color: rgba(255, 175, 64, 0.2);
    color: #ffb366;
}

#popup-status.erro strong {
    color: #ffe2bf;
}

/* --- CASO INFORMATIVO: SINCRONIZANDO DADOS --- */
#popup-status.info {
    border-left: 4px solid var(--tg-info-blue);
    background: linear-gradient(135deg, rgba(15, 15, 18, 0.95), rgba(0, 113, 227, 0.05));
}

#popup-status.info .tg-popup-icon-container {
    background: rgba(0, 113, 227, 0.12);
    border-color: rgba(0, 113, 227, 0.25);
    color: var(--tg-info-blue);
}

#popup-status.info strong {
    color: #5ac8fa;
}

/* --- CASO DE ALERTA: SESSÃO EXPIRANDO --- */
#popup-status.alerta {
    border-left: 4px solid var(--tg-warning-orange);
    background: linear-gradient(135deg, rgba(15, 15, 18, 0.95), rgba(255, 159, 10, 0.05));
}

#popup-status.alerta .tg-popup-icon-container {
    background: rgba(255, 159, 10, 0.12);
    border-color: rgba(255, 159, 10, 0.25);
    color: var(--tg-warning-orange);
}

#popup-status.alerta strong {
    color: var(--tg-warning-orange);
}

/* ==========================================================================
   SISTEMA DE BARRA DE PROGRESSO TEMPORIZADA (CONVERSÃO PREMIUM UX)
   ========================================================================== */

.tg-progress-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
    border-radius: 0 0 7px 7px;
}

.tg-progress-bar-inner {
    height: 100%;
    width: 100%;
    transform-origin: left;
    background: var(--tg-text-ghost);
}

/* Linhas Dinâmicas de Progresso Baseadas nos Estados */
#popup-status.sucesso .tg-progress-bar-inner {
    background: linear-gradient(90deg, var(--tg-success-green), var(--tg-success-green-hover));
}

#popup-status.erro .tg-progress-bar-inner {
    background: linear-gradient(90deg, var(--tg-main-color), var(--tg-main-red-hover));
}

#popup-status.info .tg-progress-bar-inner {
    background: var(--tg-info-blue);
}

#popup-status.alerta .tg-progress-bar-inner {
    background: var(--tg-warning-orange);
}

/* Gatilho de Animação Controlada pelo Ciclo do Script */
#popup-status.mostrar.com-tempo .tg-progress-bar-inner {
    animation: tg-drain-progress 4000ms linear forwards;
}

#popup-status.mostrar.com-tempo-rapido .tg-progress-bar-inner {
    animation: tg-drain-progress 2500ms linear forwards;
}

/* Pausar barra ao passar o mouse para dar controle ao usuário */
#popup-status:hover .tg-progress-bar-inner {
    animation-play-state: paused !important;
}

/* ==========================================================================
   CRIAÇÃO DE COMPONENTES INTERNOS COMPLEMENTARES (SKELETONS LOADERS)
   ========================================================================== */

.tg-skeleton-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.tg-skeleton-line {
    height: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: tg-skeleton-pulse 1.6s infinite linear;
    border-radius: 4px;
}

.tg-skeleton-line.titulo {
    width: 45%;
    height: 14px;
    margin-bottom: 4px;
}

.tg-skeleton-line.corpo-1 {
    width: 85%;
}

.tg-skeleton-line.corpo-2 {
    width: 60%;
}

/* ==========================================================================
   ANIMAÇÕES PURAS EM CSS (KEYFRAMES ENGINE)
   ========================================================================== */

@keyframes tg-drain-progress {
    0% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}

@keyframes tg-skeleton-pulse {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes tg-popup-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Injeção Crítica de Impacto no Estado de Erro */
#popup-status.erro.mostrar {
    animation: none;
}

/* ==========================================================================
   REGRAS DE INTERRUPÇÃO E MEDIA QUERIES (RESPONSIVIDADE EXTREMA)
   ========================================================================== */

@media (max-width: 480px) {
    #popup-status {
        top: 64px;
        right: -210px; /* Mantém mesma lógica compacta */
        left: 8px;
        width: auto;
        max-width: none;
        padding: 5px 7px;
        gap: 4px;
        border-radius: 7px;
    }
    
    #popup-status.mostrar {
        right: 8px;
    }
    
    .tg-popup-icon-container {
        display: none;
    }
    
    #popup-mensagem {
        font-size: 0.66rem;
    }
    
    #popup-mensagem strong {
        font-size: 0.68rem;
    }
}

@media (min-width: 1440px) {
    #popup-status {
        top: 10px;
        max-width: 180px;
        padding: 5px 7px;
    }
    
    #popup-status.mostrar {
        right: 10px;
    }
}

/* ==========================================================================
   ESTILOS COMPLEMENTARES PARA INTEGRAÇÃO DO COMPONENTE NO INDEX
   ========================================================================== */

/* Classes de Utilidades de Cores Prontas para Elementos de Texto Dinâmicos */
.tg-color-highlight-green { color: var(--tg-success-green) !important; }
.tg-color-highlight-red { color: #ff4d4d !important; }
.tg-color-highlight-blue { color: var(--tg-info-blue) !important; }

/* Configuração de Ícones Nativos em CSS caso decida não usar bibliotecas externas */
.tg-icon-native-success::after {
    content: "✓";
    font-weight: 900;
    font-size: 16px;
}

.tg-icon-native-error::after {
    content: "✕";
    font-weight: 900;
    font-size: 16px;
}

.tg-icon-native-info::after {
    content: "ℹ";
    font-weight: 900;
    font-size: 16px;
}

.tg-icon-native-alert::after {
    content: "⚠️";
    font-size: 14px;
}

/* Fim da Folha de Estilos de Alta Definição */