/* =====================================================================
   KMS Challenge — identidade visual compartilhada
   Cores extraídas da logo oficial (vermelho e preto).
   Carregado DEPOIS do Bootstrap, para sobrescrever o visual padrão dele.
   ===================================================================== */

:root {
    --kms-red: #c8102e;
    --kms-red-dark: #8f0b21;
    --kms-black: #121212;
    --kms-charcoal: #2a2a2a;
    --kms-paper: #f5f3f0;
    --kms-gold: #d8a13b;
    --kms-muted: #d8d3ca;
    --kms-muted-text: #6b6560;
    --kms-verde: #2f7d4f;
    --kms-verde-fundo: #eaf3ee;
}

body {
    background: var(--kms-paper);
    color: var(--kms-black);
    font-family: 'Inter', system-ui, sans-serif;
}

h1, h2, h3, h4, .fonte-display {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ---------- Cabeçalho de topo (usado em index.php e ranking.php) ---------- */
.topo-kms {
    background: var(--kms-black);
    background-image: linear-gradient(160deg, var(--kms-black) 55%, var(--kms-red-dark) 140%);
    color: #fff;
    padding: 1.1rem 0 1.3rem;
    margin-bottom: 1.5rem;
}
.topo-kms .topo-linha { display: flex; align-items: center; gap: .75rem; }
.topo-kms img.logo { height: 44px; width: 44px; border-radius: 50%; flex-shrink: 0; }
.topo-kms h1 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
}
.topo-kms p.subtitulo { margin: .1rem 0 0; font-size: .75rem; color: rgba(255,255,255,.65); text-transform: none; letter-spacing: normal; }
.topo-kms .topo-acoes { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.topo-kms .topo-acoes a {
    color: rgba(255,255,255,.9);
    text-decoration: none;
    font-size: .74rem;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,.3);
    padding: .3rem .65rem;
    border-radius: 999px;
    white-space: nowrap;
}
.topo-kms .topo-acoes a.destaque { background: var(--kms-red); border-color: var(--kms-red); }
.topo-kms .topo-usuario { font-size: .72rem; color: rgba(255,255,255,.55); width: 100%; margin-top: .35rem; }

/* ---------- Abas em formato de pílula (substituem nav-tabs padrão) ---------- */
.abas-kms { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; margin-bottom: 1.25rem; }
.abas-kms a {
    flex: none;
    font-family: 'Oswald', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--kms-charcoal);
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    padding: .45rem 1rem;
    border-radius: 999px;
    text-decoration: none;
}
.abas-kms a.ativa { background: var(--kms-red); border-color: var(--kms-red); color: #fff; }

/* ---------- Cartões ---------- */
.card { border: 1px solid rgba(0,0,0,.06); border-radius: 12px; }
.card-header {
    font-family: 'Oswald', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 12px 12px 0 0 !important;
}
.card-header.bg-primary { background: var(--kms-red) !important; }
.card-header.bg-dark { background: var(--kms-black) !important; }

/* ---------- Botões ---------- */
.btn { border-radius: 8px; font-weight: 500; }
.btn-success, .btn-success:hover, .btn-success:focus {
    background-color: var(--kms-red); border-color: var(--kms-red); color: #fff;
}
.btn-success:hover { background-color: var(--kms-red-dark); border-color: var(--kms-red-dark); }
.btn-primary, .btn-primary:hover {
    background-color: var(--kms-red); border-color: var(--kms-red);
}
.btn-warning, .btn-warning:hover {
    background-color: #fff; border-color: var(--kms-gold); color: var(--kms-charcoal);
}
.btn-warning:hover { background-color: var(--kms-gold); color: #fff; }
.btn-danger, .btn-danger:hover {
    background-color: var(--kms-red-dark); border-color: var(--kms-red-dark); color: #fff;
}
.btn-outline-success, .btn-outline-success:hover {
    color: var(--kms-verde); border-color: var(--kms-verde);
}
.btn-outline-success:hover { background-color: var(--kms-verde); color: #fff; }
.btn-secondary, .btn-secondary:hover {
    background-color: #fff; border-color: rgba(0,0,0,.15); color: var(--kms-charcoal);
}
.btn-outline-light { border-color: rgba(255,255,255,.4); }
.btn-outline-danger { color: #ffb3bd; border-color: rgba(255,255,255,.3); }
.btn-outline-danger:hover { background-color: var(--kms-red-dark); border-color: var(--kms-red-dark); color: #fff; }

/* ---------- Badges de status ---------- */
.badge.bg-success { background-color: var(--kms-verde) !important; }
.badge.bg-secondary { background-color: #b7b2ab !important; }
.badge.bg-primary { background-color: var(--kms-red) !important; }
.badge.bg-info { background-color: var(--kms-gold) !important; color: #fff !important; }
.badge.bg-danger { background-color: var(--kms-red-dark) !important; }

/* ---------- Campos de formulário ---------- */
.form-control:focus, .form-select:focus {
    border-color: var(--kms-red);
    box-shadow: 0 0 0 .2rem rgba(200, 16, 46, .15);
}
.form-select {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Seções de conteúdo e estado vazio ---------- */
.secao { margin-top: .5rem; }
.secao h2 {
    font-family: 'Oswald', sans-serif;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--kms-charcoal);
    border-left: 4px solid var(--kms-red);
    padding-left: .5rem;
    margin: 0 0 .8rem;
}
.vazio {
    background: #fff; border: 1px dashed rgba(0,0,0,.15); border-radius: 10px;
    padding: 1.1rem; text-align: center; color: var(--kms-muted-text); font-size: .85rem;
}

/* ---------- Texto truncado em uma linha (nomes longos em tabelas) ---------- */
.truncar {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ---------- Tabela responsiva: vira lista de cartões no celular ---------- */
@media (max-width: 700px) {
    table.tabela-kms thead { display: none; }
    table.tabela-kms, table.tabela-kms tbody, table.tabela-kms tr, table.tabela-kms td {
        display: block; width: 100%;
    }
    table.tabela-kms tr {
        margin: .6rem; border: 1px solid rgba(0,0,0,.08); border-radius: 10px;
        padding: .5rem .75rem; background: #fff;
    }
    table.tabela-kms td {
        display: flex; justify-content: space-between; align-items: center;
        gap: .6rem; padding: .35rem 0; border: none !important; text-align: right;
    }
    table.tabela-kms td::before {
        content: attr(data-label);
        font-family: 'Oswald', sans-serif;
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--kms-muted-text);
        text-align: left;
        flex-shrink: 0;
    }
    table.tabela-kms td .truncar { flex: 1 1 auto; min-width: 0; max-width: none; }
    table.tabela-kms td.acoes-kms { flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
    table.tabela-kms td.acoes-kms::before { display: none; }
}