/* ======================================================
   COMUNIDADE RUNNERS
   DASHBOARD
====================================================== */

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

font-family:Arial,Helvetica,sans-serif;

background:#eef3f9;

color:#222;

}

.layout{

display:flex;

min-height:100vh;

}

/* ============================================
SIDEBAR
============================================ */

.sidebar{

width:260px;

background:#0b3d91;

color:#fff;

padding:25px;

}

.logo{

text-align:center;

margin-bottom:35px;

}

.logo h2{

margin-top:12px;

font-size:22px;

}

.sidebar nav{

display:flex;

flex-direction:column;

gap:12px;

}

.sidebar a{

text-decoration:none;

color:white;

padding:14px;

border-radius:10px;

transition:.3s;

font-weight:bold;

}

.sidebar a:hover{

background:rgba(255,255,255,.12);

}

.sidebar .ativo{

background:#1565c0;

}

/* ============================================
CONTEÚDO
============================================ */

.conteudo{

flex:1;

padding:30px;

overflow:auto;

}

.topoPagina{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.topoPagina h1{

font-size:36px;

color:#0b3d91;

}

.topoPagina small{

color:#777;

}

#horaAtual{

font-size:28px;

font-weight:bold;

color:#1565c0;

}
/* ======================================================
CARDS
====================================================== */

.cardsResumo{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:20px;

margin-bottom:30px;

}

.cardResumo{

background:white;

border-radius:16px;

padding:25px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.3s;

position:relative;

overflow:hidden;

}

.cardResumo:hover{

transform:translateY(-5px);

box-shadow:0 12px 30px rgba(0,0,0,.15);

}

.cardResumo::before{

content:"";

position:absolute;

left:0;

top:0;

width:6px;

height:100%;

}

.cardResumo.azul::before{

background:#1565c0;

}

.cardResumo.verde::before{

background:#28a745;

}

.cardResumo.vermelho::before{

background:#dc3545;

}

.cardResumo.amarelo::before{

background:#ffc107;

}

.cardResumo.roxo::before{

background:#6f42c1;

}

.cardResumo span{

display:block;

font-size:15px;

color:#666;

margin-bottom:12px;

}

.cardResumo h2{

font-size:38px;

font-weight:bold;

color:#222;

}

/* ======================================================
CARDS DO SISTEMA
====================================================== */

.cardSistema{

background:white;

border-radius:16px;

padding:25px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

margin-bottom:30px;

}

.tituloCard{

display:flex;

justify-content:space-between;

align-items:center;

padding-bottom:15px;

margin-bottom:20px;

border-bottom:1px solid #ececec;

}

.tituloCard h2{

font-size:24px;

color:#0b3d91;

}

/* ======================================================
LINHAS
====================================================== */

.linhaDashboard{

display:grid;

grid-template-columns:2fr 1fr;

gap:25px;

margin-bottom:30px;

}
/* ======================================================
STATUS DA PROVA
====================================================== */

.statusProva{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

padding:20px;

}

#cronometro{

font-size:64px;

font-weight:bold;

color:#1565c0;

letter-spacing:3px;

margin-bottom:15px;

}

#statusCorrida{

font-size:24px;

margin-bottom:20px;

color:#28a745;

}

.dadosStatus{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

width:100%;

margin-top:20px;

}

.dadosStatus div{

background:#f7f9fc;

padding:18px;

border-radius:12px;

text-align:center;

}

.dadosStatus strong{

display:block;

margin-top:10px;

font-size:20px;

color:#1565c0;

}

/* ======================================================
ÚLTIMA CHEGADA
====================================================== */

.ultimoAtletaDashboard{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

padding:20px;

}

.numeroGrande{

width:120px;

height:120px;

border-radius:50%;

background:#1565c0;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

font-weight:bold;

margin-bottom:20px;

box-shadow:0 8px 20px rgba(0,0,0,.2);

}

.ultimoAtletaDashboard h2{

font-size:28px;

margin-bottom:10px;

}

.ultimoAtletaDashboard h4{

font-size:34px;

color:#28a745;

margin-bottom:10px;

}

.ultimoAtletaDashboard small{

font-size:18px;

color:#666;

}

/* ======================================================
PÓDIO
====================================================== */

.podio{

display:flex;

justify-content:center;

align-items:flex-end;

gap:20px;

margin-top:30px;

}

.podioItem{

flex:1;

text-align:center;

padding:20px;

border-radius:15px;

color:white;

transition:.3s;

}

.podioItem:hover{

transform:translateY(-5px);

}

.podioItem span{

display:block;

font-size:42px;

margin-bottom:10px;

}

.ouro{

background:#f4b400;

min-height:230px;

}

.prata{

background:#9aa0a6;

min-height:180px;

}

.bronze{

background:#b87333;

min-height:160px;

}

.ouro h2,
.prata h3,
.bronze h3{

margin-top:20px;

font-size:22px;

}

.ouro strong,
.prata small,
.bronze small{

display:block;

margin-top:10px;

font-size:18px;

}
/* ======================================================
TABELA TOP 10
====================================================== */

.tabelaDashboard{

width:100%;

border-collapse:collapse;

margin-top:15px;

}

.tabelaDashboard thead{

background:#1565c0;

color:#fff;

}

.tabelaDashboard th{

padding:15px;

font-size:15px;

}

.tabelaDashboard td{

padding:14px;

text-align:center;

border-bottom:1px solid #ececec;

}

.tabelaDashboard tbody tr{

transition:.25s;

}

.tabelaDashboard tbody tr:hover{

background:#f3f7fb;

}

/* ======================================================
ATALHOS
====================================================== */

.atalhos{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

gap:20px;

margin-top:20px;

}

.atalho{

background:#1565c0;

color:white;

text-decoration:none;

padding:30px;

border-radius:16px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

transition:.3s;

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.atalho:hover{

transform:translateY(-6px);

background:#0b3d91;

box-shadow:0 15px 30px rgba(0,0,0,.18);

}

.atalho{

font-size:40px;

}

.atalho span{

margin-top:15px;

font-size:17px;

font-weight:bold;

}

/* ======================================================
RODAPÉ
====================================================== */

footer{

margin-top:40px;

padding:20px;

text-align:center;

color:#777;

font-size:14px;

}

/* ======================================================
ANIMAÇÕES
====================================================== */

.cardSistema,

.cardResumo{

animation:fadeDashboard .5s ease;

}

@keyframes fadeDashboard{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ======================================================
RESPONSIVO
====================================================== */

@media(max-width:1400px){

.cardsResumo{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:1000px){

.layout{

flex-direction:column;

}

.sidebar{

width:100%;

}

.sidebar nav{

flex-direction:row;

flex-wrap:wrap;

}

.cardsResumo{

grid-template-columns:repeat(2,1fr);

}

.linhaDashboard{

grid-template-columns:1fr;

}

}

@media(max-width:700px){

.cardsResumo{

grid-template-columns:1fr;

}

.topoPagina{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

#cronometro{

font-size:42px;

}

.numeroGrande{

width:90px;

height:90px;

font-size:30px;

}

.podio{

flex-direction:column;

align-items:stretch;

}

.atalhos{

grid-template-columns:1fr;

}

}
/* ======================================================
NOVA CHEGADA
====================================================== */

.novaChegada{

animation:piscarChegada .8s ease 3;

}

@keyframes piscarChegada{

0%{

transform:scale(1);

box-shadow:0 0 0 rgba(40,167,69,.0);

}

50%{

transform:scale(1.05);

box-shadow:0 0 40px rgba(40,167,69,.8);

}

100%{

transform:scale(1);

box-shadow:0 0 0 rgba(40,167,69,0);

}

}