/* ESTRUTURA GLOBAL */
body { 
    background: #020617; 
    margin: 0; 
    font-family: Arial, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    scroll-behavior: smooth; 
}

.resultados-wrapper { padding: 0 0 40px; }

.resultados { 
    max-width: 1200px; 
    margin: 0 auto; 
    color: #fff; 
    padding: 0 10px; 
}

/* TÍTULO PRO */
.titulo-pro .texto { font-size: 18px !important; letter-spacing: 0.5px; }
.titulo-pro .red-lines { height: 20px; }

/* GRID DE CARDS */
.cards-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 12px; 
    margin-bottom: 25px; 
}

.card-res { 
    background: #1e293b; 
    border-radius: 10px; 
    overflow: hidden; 
    text-decoration: none; 
    color: inherit;
    display: flex; 
    flex-direction: column; 
    border-left: 6px solid #d90429; 
    transition: 0.2s; 
    position: relative;
    scroll-margin-top: 80px;
}

.card-res:hover { transform: translateY(-3px); background: #263449; }
.card-res.status-novo { border-left-color: #22c55e; }
.card-res.status-recente { border-left-color: #f97316; }

.card-res:focus,
.card-res:focus-visible {
    outline: none;
    box-shadow: none;
}

/* DESTAQUE DE SCROLL (GLOW) */
.card-res.highlight {
    box-shadow: 0 0 0 2px rgba(217, 4, 41, 0.4), 
                0 0 20px rgba(217, 4, 41, 0.25);
    transition: 0.3s;
}

/* Quando clicas no menu, o card de destino ganha o destaque vermelho */
.card-res:target {
    border-left-color: #ff0000 !important; /* Força o vermelho no destaque */
    box-shadow: 0 0 0 2px rgba(217, 4, 41, 0.4), 
                0 0 20px rgba(217, 4, 41, 0.25);
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

/* Opcional: Se quiseres que o rebordo vermelho "pisque" para chamar a atenção */
@keyframes pulseRed {
    0% { box-shadow: 0 0 0 0px rgba(217, 4, 41, 0.7); }
    100% { box-shadow: 0 0 0 10px rgba(217, 4, 41, 0); }
}

.card-res:target {
    animation: pulseRed 1s ease-out;
}

/* HEADER DO CARD & IMAGEM */
.card-car-img-header {
    height: 60px; 
    width: auto;
    opacity: 0.8;
    margin-right: 10px; 
    pointer-events: none;
    transition: 0.3s;
    vertical-align: middle; 
}

.card-res:hover .card-car-img-header { opacity: 1; transform: scale(1.1); }

.card-header { 
    padding: 8px 14px; 
    background: rgba(0,0,0,0.2); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.card-header-right { display: flex; align-items: center; }
.card-title { font-weight: bold; font-size: 15px; text-transform: uppercase; color: #f8fafc; display: block; }
.card-tag { font-size: 10px; color: #000000; background: #ffffff; padding: 3px 8px; border-radius: 4px; font-weight: bold; text-transform: uppercase; display: inline-block; margin-top: 4px; }
.btn-pdf-link { background: #334155; color: #cbd5e1; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: bold; text-decoration: none; opacity: 0.8; }

/* CORPO DO CARD (PILOTOS E TEMPOS) */
.card-body { margin: 8px 10px; padding: 6px 10px; background: rgba(0, 0, 0, 0.20); border-radius: 6px; flex-grow: 1; }

.row-pilo { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 4px 8px; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    border-radius: 4px; 
}

/* LÓGICA DE EXIBIÇÃO CORRIGIDA */
.row-pilo.hidden-pilot { display: none; }
.row-pilo.show-now { display: flex !important; }

.row-pilo:last-child { border-bottom: none; }

.row-pilo.vencedor { background: rgba(250, 204, 21, 0.1); margin-bottom: 2px; }
.row-pilo.vencedor .p-name { color: #facc15; font-weight: 800; }
.row-pilo.vencedor .p-time { background: #facc15; color: #020617; padding: 1px 6px; border-radius: 4px; font-weight: bold; }

.p-name { font-size: 14px; color: #ffffff; display: flex; align-items: center; font-weight: 500; }
.p-time { font-family: monospace; color: #4ade80; font-weight: bold; font-size: 15px; }
.p-pos { font-size: 12px; margin-right: 8px; }

.btn-show-more {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: #94a3b8;
    padding: 8px;
    margin: 10px 0 5px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    transition: 0.2s;
}
.btn-show-more:hover { background: rgba(255,255,255,0.12); color: #fff; }

.card-footer { padding: 8px 14px; background: rgba(0,0,0,0.1); display: flex; gap: 10px; font-size: 10px; font-weight: bold; border-top: 1px solid rgba(255,255,255,0.03); }

/* TABELA DE RESULTADOS */
.tabela-resultados { width: 100%; border-collapse: collapse; margin-top: 20px; background: #0f172a; border-radius: 10px; overflow: hidden; }

.tabela-resultados thead th { 
    background: #0f172a; 
    border-bottom: 3px solid #d90429; 
    padding: 10px; 
    text-align: left; 
    color: #fff; 
    font-size: 14px; 
}

.tabela-resultados thead th:last-child { text-align: right; padding-right: 18px; }

.tabela-resultados td { 
    padding: 10px; 
    color: #fff; 
    border-bottom: 1px solid rgba(255,255,255,0.08); 
    vertical-align: middle; 
}

.tabela-resultados td:nth-child(1) { width: 15%; font-size: 13px; }
.tabela-resultados td:nth-child(2), .tabela-resultados td:nth-child(3) { background: #020617; width: 42.5%; }
.tabela-resultados tbody tr:hover td { background: #1f2937 !important; cursor: pointer; }

/* CATEGORIAS E ÍCONES NA TABELA */
.categoria th { 
    background: linear-gradient(90deg, #7f1d1d, #dc2626, #7f1d1d); 
    border-left: 6px solid #ef4444; 
    padding: 12px; 
    text-transform: uppercase; 
    font-weight: bold; 
    text-align: left !important; 
    color: #fff; 
    font-size: 14px; 
}

.icons { display: flex; gap: 6px; align-items: flex-end; flex-wrap: nowrap; }
.icons.right { justify-content: flex-end; }
.icon-box { display: flex; flex-direction: column; align-items: center; text-decoration: none; min-width: 56px; }
.icon { width: 56px; height: auto; margin: 4px; transition: transform 0.2s ease, filter 0.2s ease; }
.icon-box:hover .icon { transform: scale(1.15); filter: brightness(1.2); }

.label-topo { font-size: 8px; text-align: center; font-weight: bold; text-transform: uppercase; display: block; width: 100%; margin-bottom: 2px; pointer-events: none;}
.label-topo.atualizado { color: #22c55e; }
.label-topo.recente { color: #eab308; }

.desktop-label { display: inline; }
.mobile-label { display: none; }

/* MENU MOBILE TOPO */
.menu-divisoes-top { display: none; }

@media (max-width: 768px) {
    .menu-divisoes-top { display: block; margin: 15px 0 10px; }

    #toggleDivisoes {
        background: #1e293b;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.08);
        padding: 10px 14px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
    }

    #menuDivisoes {
        margin-top: 10px;
        background: #020617;
        border-radius: 10px;
        padding: 10px;
        border: 1px solid rgba(255,255,255,0.05);
        display: none;
    }

    #menuDivisoes.open { display: block; }

    #menuDivisoes a {
        display: block;
        padding: 12px;
        margin: 5px 0;
        background: #0f172a;
        border-radius: 6px;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
    }

    #menuDivisoes a.active {
        background: #1e293b;
        border-left: 4px solid #d90429;
        padding-left: 16px;
    }

    #menuDivisoes a:active { background: #1e293b; }

    .desktop-label { display: none !important; }
    .mobile-label { display: inline !important; font-weight: bold; font-size: 11px;}
    .tabela-resultados td:nth-child(1) { width: 20%; }
    .tabela-resultados td { padding: 6px 4px; }
    .icons { gap: 4px; }
    .icon-box { min-width: 0; }
    .icon { width: 34px !important; margin: 2px 1px !important; }
    .label-topo { font-size: 7px; }
    .cards-grid { grid-template-columns: 1fr; }
    .p-name { font-size: 15px; } 
    .p-time { font-size: 16px; } 
}

/* --- SECÇÃO DE EVOLUÇÃO / HISTÓRICO --- */
.evolucao-section {
    margin: 0 10px 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 8px;
}

.btn-evolucao {
    width: 100%;
    background: rgba(51, 65, 85, 0.4);
    border: 1px solid rgba(255,255,255,0.1);
    color: #cbd5e1;
    padding: 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-evolucao:hover { background: #334155; color: #fff; }

.evolucao-content {
    display: none;
    margin-top: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.03);
}

.evolucao-content.open { 
    display: block; 
    animation: fadeInCard 0.3s ease-out; 
}

.hist-item {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.hist-item:last-child { border-bottom: none; margin-bottom: 0; }

.hist-manga-title {
    font-size: 12px;
    text-transform: uppercase;
    color: #facc15;
    margin-bottom: 6px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.hist-pilotos {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* ALINHAMENTO DO HISTÓRICO */
.hist-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.hist-nome {
    font-size: 11px;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hist-tempo {
    font-family: monospace;
    color: #4ade80;
    font-weight: bold;
    font-size: 11px;
    margin-left: 10px;
}

@keyframes fadeInCard {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ajuste Desktop para Histórico */
@media (min-width: 1024px) {
    .hist-pilotos {
        flex-direction: column;
        gap: 2px;
    }
}

/* Estado Padrão (Recolhido) */
.row-pilo .number-pos { display: none; } /* Esconde o número */
.row-pilo .medal-icon { display: inline; } /* Mostra a medalha */

/* Se for posição 4 para baixo, mostra sempre o número (pois não têm medalha) */
.row-pilo:nth-child(n+4) .number-pos { display: inline; }

/* --- QUANDO EXPANDIDO --- */
/* Escondemos as medalhas e mostramos os números em todos */
.card-res.expanded .medal-icon { display: none !important; }
.card-res.expanded .number-pos { display: inline !important; }

/* Ajuste visual para o número não ficar colado */
.number-pos {
    min-width: 22px;
    display: inline-block;
    color: #94a3b8; /* Cor cinza para os números */
}

/* O vencedor continua com o número amarelo quando expandido */
.card-res.expanded .row-pilo.vencedor .number-pos {
    color: #facc15;
}

/* Container para alinhar os badges */
.card-info-badges {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

/* Estilos para os indicadores de status no Card */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    margin-top: 8px;
    text-transform: uppercase;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Variante Novo (Verde) */
.status-novo-text { color: #4ade80; }
.status-novo-text .dot { background-color: #4ade80; box-shadow: 0 0 6px #4ade80; }

/* Variante Recente (Laranja) */
.status-recente-text { color: #ff9800; }
.status-recente-text .dot { background-color: #ff9800; box-shadow: 0 0 6px #ff9800; }

/* Ajuste Melhor Volta para caber tudo */
.bl-left { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    font-size: 10px; /* Reduzido */
    color: #4ade80; 
    font-weight: bold; 
}
.bl-pilot { font-size: 12px; margin-left: 2px; }
.bl-time { font-size: 11px; }