/* =====================================================================
   Listagens públicas de resultados: /resultados e o histórico de cada
   loteria. O topo, a trilha, a faixa de navegação e a paginação vêm do
   blog.css (bl-); aqui ficam os cards e as linhas (prefixo rl-).
   ===================================================================== */

/* ---- Bolas (cor da loteria pela classe bg-*) ---- */
.rl-bolas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Cor de reserva sem especificidade: a classe da loteria (bg-mega-sena...) sempre prevalece */
:where(.rl-bola) {
    background-color: var(--bl-navy, #1e3a5f);
}

.rl-bola {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1;
    background-image: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 58%);
    box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.12);
}

.rl-bolas-pequenas .rl-bola {
    width: 30px;
    height: 30px;
    font-size: 0.78rem;
}

.rl-sorteio {
    display: block;
    margin: 0.5rem 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bl-suave, #64748b);
}

.rl-sorteio:first-child {
    margin-top: 0;
}

.rl-posicional {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--bl-texto, #1f2d3d);
    word-break: break-word;
}

.rl-complemento {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--bl-suave, #64748b);
}

.rl-complemento strong {
    color: var(--bl-texto, #1f2d3d);
}

/* ---- Selo da situação do concurso ---- */
.rl-selo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.rl-selo-acumulou {
    background: #fff1eb;
    color: #d9480f;
}

.rl-selo-ganhador {
    background: #e7f7ee;
    color: #1f8a4c;
}

/* ---- Página geral: um card por loteria ---- */
.rl-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.rl-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--bl-raio, 12px);
    overflow: hidden;
    box-shadow: var(--bl-sombra, 0 8px 24px rgba(15, 34, 56, 0.08));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rl-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bl-sombra-forte, 0 18px 40px rgba(15, 34, 56, 0.2));
}

.rl-card-topo {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    color: #fff;
    overflow: hidden;
}

.rl-card-topo:not([class*="bg-"]) {
    background-color: var(--bl-navy, #1e3a5f);
}

.rl-card-topo::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

.rl-card-nome {
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.rl-card-concurso {
    font-size: 0.82rem;
    opacity: 0.9;
}

.rl-card-topo .rl-selo {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.95);
}

.rl-card-corpo {
    flex: 1;
    padding: 1.2rem 1.25rem 0.5rem;
}

.rl-proximo {
    margin: 1rem 1.25rem 0;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: var(--bl-fundo, #f4f6f9);
    font-size: 0.82rem;
    color: var(--bl-suave, #64748b);
}

.rl-proximo strong {
    display: block;
    font-size: 1.1rem;
    color: var(--bl-texto, #1f2d3d);
}

.rl-card-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.2rem;
}

.rl-link {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--bl-laranja-escuro, #e8603a);
    text-decoration: none;
}

.rl-link:hover {
    color: var(--bl-navy, #1e3a5f);
}

/* ---- Histórico: uma linha por concurso ---- */
.rl-ferramentas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.rl-resumo-historico {
    margin: 0;
    color: var(--bl-suave, #64748b);
}

.rl-ir-concurso {
    display: flex;
    gap: 0.4rem;
}

.rl-ir-concurso input {
    width: 130px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bl-borda, #e6eaf0);
    border-radius: 10px;
    font-size: 0.9rem;
}

.rl-ir-concurso button {
    border: 0;
    border-radius: 10px;
    padding: 0 0.9rem;
    color: #fff;
    background: var(--bl-navy, #1e3a5f);
}

.rl-lista {
    background: #fff;
    border: 1px solid var(--bl-borda, #e6eaf0);
    border-radius: var(--bl-raio, 12px);
    overflow: hidden;
}

.rl-lista-cabecalho,
.rl-linha {
    display: grid;
    grid-template-columns: 110px 130px 1fr 150px 24px;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
}

.rl-lista-cabecalho {
    background: var(--bl-navy, #1e3a5f);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rl-linha {
    position: relative;
    border-top: 1px solid var(--bl-borda, #e6eaf0);
    transition: background 0.2s;
}

.rl-linha:hover {
    background: #fafbfd;
}

.rl-linha-concurso {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--bl-texto, #1f2d3d);
    text-decoration: none;
}

/* O link do concurso cobre a linha inteira. */
.rl-linha-concurso::after {
    content: '';
    position: absolute;
    inset: 0;
}

.rl-linha:hover .rl-linha-concurso {
    color: var(--bl-laranja-escuro, #e8603a);
}

.rl-linha-data {
    font-size: 0.88rem;
    color: var(--bl-texto, #1f2d3d);
}

.rl-linha-data small {
    display: block;
    color: var(--bl-suave, #64748b);
}

.rl-linha-seta {
    color: var(--bl-suave, #64748b);
    font-size: 0.8rem;
}

/* ---- Responsivo ---- */
@media (max-width: 767px) {
    .rl-grade {
        grid-template-columns: 1fr;
    }

    .rl-lista-cabecalho {
        display: none;
    }

    .rl-linha {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "concurso situacao"
            "data data"
            "resultado resultado";
        gap: 0.5rem;
    }

    .rl-linha-concurso { grid-area: concurso; }
    .rl-linha-data { grid-area: data; }
    .rl-linha-resultado { grid-area: resultado; }
    .rl-linha-situacao { grid-area: situacao; }

    .rl-linha-data small {
        display: inline;
        margin-left: 0.3rem;
    }

    .rl-linha-seta {
        display: none;
    }
}