/* =====================================================================
   testes-pneus.html — resultados dos testes ADAC ligados à loja
   Gerada por _scripts/gerar_pagina_testes.py. Prefixo tp- em tudo.
   Cores da escala da ADAC: azul (muito bom/bom), âmbar (satisfatório),
   vermelho (não recomendado). O azul-escuro #1f3a5f é o mesmo do selo
   .selo-teste dos cartões da loja e do bloco da ficha (pneu-produto.css).
   ===================================================================== */

.page-testes-pneus {
    --tp-azul: #1f3a5f;
    --tp-azul-claro: #e8eef6;
    --tp-ambar: #9a6b00;
    --tp-ambar-claro: #fff4d6;
    --tp-vermelho: #b02a37;
    --tp-vermelho-claro: #fbe9eb;
    --tp-laranja: #FF7900;
}

/* Hero */
.tp-hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #1f3a5f 100%);
    color: #fff;
    padding: 48px 0 40px;
}
.tp-hero h1 { font-weight: 800; color: #fff; }
.tp-hero .lead { max-width: 820px; color: #e6e9ee; }
.tp-hero .breadcrumb-artigo,
.tp-hero .breadcrumb-artigo a { color: #cfd6e0; }
.tp-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tp-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px; padding: 6px 14px; font-size: .88rem; font-weight: 600;
}
.tp-pill i { color: var(--tp-laranja); }

/* Cartões dos vencedores */
.tp-venc {
    display: flex; flex-direction: column; gap: 6px; height: 100%;
    border: 1px solid #e3e7ee; border-top: 4px solid var(--tp-azul);
    border-radius: 10px; padding: 14px 16px; background: #fff;
    color: #222; text-decoration: none; transition: box-shadow .15s ease;
}
.tp-venc:hover, .tp-venc:focus { box-shadow: 0 6px 18px rgba(31,58,95,.15); color: #222; }
.tp-venc-tag { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--tp-azul); }
.tp-venc-nome { font-size: .95rem; line-height: 1.3; }
.tp-venc-nota { font-size: 1.6rem; font-weight: 800; color: var(--tp-azul); line-height: 1; }
.tp-venc-nota small { font-size: .8rem; font-weight: 700; }
.tp-venc-medida { font-size: .8rem; color: #777; }

/* Atalhos */
.tp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #d5dce6; border-radius: 999px; padding: 6px 14px;
    font-size: .88rem; font-weight: 600; color: var(--tp-azul); background: #fff; text-decoration: none;
}
.tp-chip:hover, .tp-chip:focus { background: var(--tp-azul-claro); color: var(--tp-azul); }
.tp-chip-deco { color: #222; }

/* Como ler */
.tp-como-ler { background: var(--tp-azul-claro); border-radius: 12px; padding: 22px 24px; }
.tp-como-ler h2 { color: var(--tp-azul); }
.tp-como-ler p { font-size: .92rem; margin-bottom: 0; }

/* Cada teste */
.tp-teste { padding-top: 28px; margin-bottom: 36px; scroll-margin-top: 90px; }
.tp-teste-cab h2 { margin: 6px 0 6px; }
.tp-meta { color: #555; font-size: .92rem; margin-bottom: 12px; }
.tp-tag {
    display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; border-radius: 4px; padding: 3px 10px;
}
.tp-tag-verao { background: #fff1e0; color: #b35400; }
.tp-tag-allseason { background: #e7f3ec; color: #19693d; }
.tp-tag-inverno { background: #e6f0fb; color: #1d5fa8; }

.tp-tabela { font-size: .9rem; margin-bottom: 6px; }
.tp-tabela thead th {
    background: var(--tp-azul); color: #fff; font-weight: 700; border: 0;
    white-space: nowrap; vertical-align: middle;
}
.tp-tabela td, .tp-tabela th { vertical-align: middle; }
.tp-pos { font-weight: 700; color: #666; width: 60px; }
.tp-pneu { font-weight: 600; min-width: 190px; }
.tp-marca { font-weight: 800; }
.tp-num { text-align: center; white-space: nowrap; }
.tp-classe { white-space: nowrap; }
.tp-badge {
    display: inline-block; min-width: 44px; text-align: center; font-weight: 800;
    border-radius: 6px; padding: 3px 8px; color: #fff; background: var(--tp-azul);
}
.tp-badge-s { background: var(--tp-ambar); }
.tp-badge-su, .tp-badge-i { background: var(--tp-vermelho); }
.tp-linha-su, .tp-linha-i { background: var(--tp-vermelho-claro); }
.tp-nao-rec {
    display: inline-block; margin-left: 4px; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; color: var(--tp-vermelho); white-space: nowrap;
}
.tp-loja { min-width: 180px; font-size: .85rem; }
.tp-loja a { display: block; text-decoration: none; }
.tp-loja-medida { color: #198754; font-weight: 600; }
.tp-loja-medida strong { font-size: .95rem; }
.tp-loja-todas { color: var(--tp-azul); }
.tp-loja a:hover { text-decoration: underline; }
.tp-sem { color: #999; }
.tp-fonte { font-size: .8rem; color: #777; }
.tp-fonte a { color: #555; }

/* Faixas e caixas */
.tp-faixa { background: #f7f8fa; }
.tp-caixa { background: #fff; border: 1px solid #e3e7ee; border-radius: 12px; padding: 20px 22px; }
.tp-lista-links { list-style: none; padding: 0; margin: 0 0 14px; }
.tp-lista-links li { padding: 6px 0; border-bottom: 1px solid #f0f2f5; }
.tp-lista-links a { color: var(--tp-azul); font-weight: 600; text-decoration: none; }
.tp-lista-links a:hover { text-decoration: underline; }

/* Telemóvel: a tabela desliza na horizontal dentro do .table-responsive;
   a primeira coluna (lugar) encolhe para dar espaço ao nome do pneu. */
@media (max-width: 575.98px) {
    .tp-hero { padding: 32px 0 28px; }
    .tp-tabela { font-size: .82rem; }
    .tp-pos { width: 40px; }
    .tp-venc-nota { font-size: 1.35rem; }
    /* A cor da nota já diz a avaliação: no telemóvel a coluna sai, para a
       tabela caber melhor sem deslizar tanto. */
    .tp-tabela .tp-classe { display: none; }
}

/* Aviso de dados em falta num teste (ex.: 2022 sem notas agregadas) */
.tp-nota-dados { font-size: .82rem; color: #777; }

/* O js/costum.js anima todas as .table (começam com opacity 0 e só aparecem
   quando 10% entra no ecrã). Numa tabela de dados longa isso só atrapalha:
   num scroll rápido, ou ao saltar pelos atalhos, chegava-se a ver o espaço
   vazio. O !important ganha ao estilo inline que o script põe. */
.page-testes-pneus .tp-tabela {
    opacity: 1 !important;
    transform: none !important;
}