/* css/teti-badges.css */

/* --- VARIÁVEIS DE METAIS --- */
:root {
    --badge-bronze: linear-gradient(135deg, #cd7f32, #b87333);
    --badge-silver: linear-gradient(135deg, #ece9e6, #ffffff);
    --badge-gold: linear-gradient(135deg, #ffd700, #fdb931);
    
    --badge-shadow-bronze: 0 2px 4px rgba(184, 115, 51, 0.3);
    --badge-shadow-silver: 0 2px 4px rgba(255, 255, 255, 0.3);
    --badge-shadow-gold: 0 2px 4px rgba(253, 185, 49, 0.4);
}

/* --- ESTRUTURA BÁSICA DO EMBLEMA (Pequeno - Feed) --- */
.user-badge-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    border-radius: 50%; /* Padrão */
    font-size: 10px;
    color: #333;
    font-weight: bold;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    position: relative;
    cursor: help;
    overflow: hidden; /* ADICIONAR ISSO */
}

/* TIER 1: Municipal (Círculo) */
.tier-municipal { border-radius: 50%; }

/* MATERIAIS */
.material-bronze { background: var(--badge-bronze); color: #fff; border: 1px solid #a0522d; }
.material-silver { background: var(--badge-silver); color: #444; border: 1px solid #ccc; }
.material-gold { background: var(--badge-gold); color: #5a4a00; border: 1px solid #d4af37; }

/* EFEITO BRILHANTE (VALIDADO) */
.badge-verified::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(45deg) translate(-100%, -100%);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translate(-100%, -100%) rotate(45deg); }
    20% { transform: translate(100%, 100%) rotate(45deg); }
    100% { transform: translate(100%, 100%) rotate(45deg); }
}

/* --- TRAJETÓRIA (Perfil) --- */
.trajectory-section {
    padding: 16px;
    background: var(--bg-card);
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.trajectory-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
    position: relative;
}

/* css/teti-badges.css */

/* Ajuste na linha do tempo para alinhar perfeitamente com o centro dos ícones */
.trajectory-timeline::before {
    content: '';
    position: absolute;
    top: 25px; /* Começa do meio do primeiro ícone */
    bottom: 0; /* Vai até o fim */
    left: 24px; /* (Largura do ícone 50px / 2) - (Largura da linha 2px / 2) */
    width: 2px;
    background: var(--border-color);
    z-index: 0;
}

.trajectory-item {
    display: flex;
    gap: 16px; /* Mais espaço entre o ícone e o texto */
    position: relative;
    z-index: 1;
    padding-bottom: 24px; /* Espaço entre itens */
}

/* --- CORREÇÃO DE ALINHAMENTO FEDERAL --- */

/* Ajuste Fino no Container Geral do Badge */
.badge-display-large {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    border-radius: 50%; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    
    position: relative; 
    overflow: hidden; 
    background-color: var(--bg-card);
    z-index: 2; /* Garante que fique SOBRE a linha do tempo */
}

/* Ícone Interno - Tamanho Controlado */
.badge-display-large .material-icons-round {
    font-size: 24px !important; /* Reduzido levemente para segurança */
    line-height: 1;
    z-index: 3;
}

/* TIER 3: Federal (Losango) - CORRIGIDO */
.tier-federal { 
    border-radius: 8px; 
    /* 1. Rotate: Cria o losango
       2. Scale(0.85): Reduz o tamanho visual para 85% para combinar com as bolinhas
          sem mudar o centro geométrico (que é o eixo da rotação).
    */
    transform: rotate(45deg) scale(0.85); 
    margin: 0; /* CRUCIAL: Remove margem para alinhar perfeitamente com a linha */
}

/* Desvira o ícone dentro do Federal */
.tier-federal .material-icons-round { 
    transform: rotate(-45deg); 
}

/* Ajuste de segurança para o Tier Estadual (Escudo) não encostar */
.tier-state { 
    border-radius: 12px 12px 18px 18px; 
    margin: 0; /* Garante zero margem também */
}

/* Ajuste nos textos da trajetória */
.trajectory-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 4px; /* Alinha visualmente com o topo do ícone */
}

.trajectory-role {
    font-weight: 800;
    font-size: 16px;
    color: var(--text-main);
    line-height: 1.2;
}

.trajectory-org {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    opacity: 0.9;
}

.trajectory-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.trajectory-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.trajectory-title { font-weight: 700; font-size: 15px; color: var(--text-main); }
.trajectory-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 8px; align-items: center; }
.verified-tag { color: var(--teti-primary); font-weight: 700; font-size: 11px; display: flex; align-items: center; gap: 2px; }

/* --- MODAL DE CRIAÇÃO DE BADGE --- */
.badge-creator-steps { display: flex; flex-direction: column; gap: 16px; }
.step-title { font-weight: 700; margin-bottom: 8px; font-size: 14px; }
.badge-grid-select { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.badge-option {
    padding: 12px; border: 1px solid var(--border-color); border-radius: 8px;
    text-align: center; cursor: pointer; transition: 0.2s; font-size: 12px;
}
.badge-option.selected { border-color: var(--teti-primary); background: rgba(0, 188, 212, 0.1); font-weight: 700; }
.badge-option:hover { background: var(--bg-hover); }

/* Área de Upload */
.proof-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px; padding: 20px; text-align: center;
    cursor: pointer; margin-top: 8px;
}
.proof-upload-area.analyzing { border-color: var(--teti-accent); background: rgba(233, 30, 99, 0.05); cursor: wait; }
.ai-status-text { font-size: 12px; margin-top: 8px; color: var(--text-muted); font-style: italic; }

/* --- ESTADOS PENDENTES --- */
.badge-unverified {
    opacity: 0.6; /* Deixa opaco */
    filter: grayscale(0.5); /* Tira um pouco da cor */
    border-style: dashed !important; /* Borda tracejada indica "falta algo" */
}

/* Botão de Validar na Trajetória */
.btn-validate-later {
    background: none;
    border: 1px solid var(--teti-primary);
    color: var(--teti-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s;
}

.btn-validate-later:hover {
    background: var(--teti-primary);
    color: white;
}

.trajectory-actions {
    display: flex;
    align-items: center;
}

/* --- CORREÇÕES MOBILE E TEXTOS LONGOS --- */

/* 1. Truncagem de Texto (Reticências...) */
.trajectory-info {
    flex: 1;
    min-width: 0; /* CRUCIAL: Permite que o flex-child encolha e trunque o texto */
    padding-right: 8px;
}

.trajectory-role, 
.trajectory-org {
    white-space: nowrap;       /* Não quebra linha */
    overflow: hidden;          /* Esconde o excesso */
    text-overflow: ellipsis;   /* Adiciona ... no final */
    display: block;            /* Garante comportamento de bloco */
    max-width: 100%;
}

/* 2. Tag de Verificação (Apenas Ícone) */
.verified-tag {
    color: var(--teti-primary);
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 4px;
    position: relative;
    cursor: help;
}

/* Esconde o texto "Oficial" por padrão */
.verified-text-label {
    display: none; 
}

/* Tooltip CSS Simples (Aparece ao passar mouse ou segurar) */
.verified-tag::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-bottom: 5px;
}

.verified-tag:hover::after {
    opacity: 1;
}

/* 3. Ajuste da Data */
.trajectory-date {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}