/* =======================================================
   COMUNIDADE RUNNERS
   ATLETAS
======================================================= */

*{

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:white;

padding:25px;

}

.logo{

text-align:center;

margin-bottom:40px;

}

.logo h2{

margin-top:10px;

font-size:22px;

}

.sidebar nav{

display:flex;

flex-direction:column;

gap:10px;

}

.sidebar a{

color:white;

text-decoration:none;

padding:14px;

border-radius:8px;

transition:.3s;

font-weight:600;

}

.sidebar a:hover{

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

}

.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:34px;

margin-bottom:5px;

}

.topoPagina small{

color:#777;

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

.cardsResumo{

display:grid;

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

gap:20px;

margin-bottom:30px;

}

.cardResumo{

background:white;

border-radius:15px;

padding:22px;

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

transition:.3s;

border-left:6px solid #1565c0;

}

.cardResumo:hover{

transform:translateY(-5px);

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

}

.cardResumo span{

display:block;

font-size:15px;

color:#666;

margin-bottom:10px;

}

.cardResumo h2{

font-size:34px;

font-weight:bold;

color:#1565c0;

}

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

.cardSistema{

background:white;

border-radius:15px;

padding:25px;

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

margin-bottom:30px;

}

.tituloCard{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

padding-bottom:15px;

border-bottom:1px solid #e6e6e6;

}

.tituloCard h2{

font-size:26px;

color:#0b3d91;

}

/* =======================================================
BOTÃO PRINCIPAL
======================================================= */

.btnPrincipal{

background:#1565c0;

color:white;

border:none;

padding:14px 25px;

border-radius:10px;

cursor:pointer;

font-size:16px;

font-weight:bold;

transition:.3s;

}

.btnPrincipal:hover{

background:#0d47a1;

transform:translateY(-2px);

}
/* =======================================================
FORMULÁRIO
======================================================= */

.formGrid{

display:grid;

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

gap:20px;

align-items:end;

}

.campo{

display:flex;

flex-direction:column;

}

.campoGrande{

grid-column:span 2;

}

.campo label{

font-size:14px;

font-weight:600;

color:#555;

margin-bottom:8px;

}

.campo input,
.campo select{

height:48px;

padding:12px;

border:1px solid #d6dbe3;

border-radius:10px;

font-size:15px;

background:#fff;

transition:.3s;

}

.campo input:focus,
.campo select:focus{

outline:none;

border-color:#1565c0;

box-shadow:0 0 0 4px rgba(21,101,192,.15);

}

/* =======================================================
FOTO
======================================================= */

.fotoCampo{

grid-row:span 4;

align-items:center;

justify-content:flex-start;

}

.fotoPreview{

width:140px;

height:140px;

border-radius:12px;

overflow:hidden;

border:3px solid #1565c0;

background:#f5f7fa;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:12px;

}

.fotoPreview img{

width:100%;

height:100%;

object-fit:cover;

}

#foto{

width:140px;

font-size:12px;

}

/* =======================================================
IDADE E CATEGORIA
======================================================= */

#idade,
#categoria{

background:#f3f7fb;

font-weight:bold;

color:#1565c0;

}

/* =======================================================
STATUS
======================================================= */

#status{

font-weight:bold;

}
/* =======================================================
BOTÕES
======================================================= */

.botoesFormulario{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-top:30px;

}

.botoesFormulario button{

padding:14px 22px;

border:none;

border-radius:10px;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.25s;

color:#fff;

}

.botoesFormulario button:hover{

transform:translateY(-3px);

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

}

/* Salvar */

.btnSalvar{

background:#28a745;

}

/* Editar */

.btnEditar{

background:#0d6efd;

}

/* Excluir */

.btnExcluir{

background:#dc3545;

}

/* Limpar */

.btnLimpar{

background:#6c757d;

}

/* Botões secundários */

.btnSecundario{

background:#17a2b8;

}

/* =======================================================
FILTROS
======================================================= */

.filtros{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:15px;

margin-bottom:25px;

}

.filtros input,
.filtros select{

height:46px;

padding:10px 15px;

border-radius:10px;

border:1px solid #d8d8d8;

font-size:15px;

}

.filtros input:focus,
.filtros select:focus{

outline:none;

border-color:#1565c0;

box-shadow:0 0 0 3px rgba(21,101,192,.15);

}

/* =======================================================
TABELA
======================================================= */

.tabelaResponsiva{

overflow-x:auto;

}

table{

width:100%;

border-collapse:collapse;

background:#fff;

}

thead{

background:#1565c0;

color:#fff;

}

thead th{

padding:15px;

font-size:15px;

text-align:center;

}

tbody td{

padding:14px;

text-align:center;

border-bottom:1px solid #ececec;

}

tbody tr{

transition:.2s;

}

tbody tr:hover{

background:#f3f7fb;

}

.semRegistros{

padding:35px;

font-size:17px;

color:#777;

}

/* =======================================================
STATUS
======================================================= */

.statusConfirmado{

background:#28a745;

color:#fff;

padding:6px 12px;

border-radius:30px;

font-size:13px;

font-weight:bold;

}

.statusPendente{

background:#ffc107;

color:#000;

padding:6px 12px;

border-radius:30px;

font-size:13px;

font-weight:bold;

}

.statusCancelado{

background:#dc3545;

color:#fff;

padding:6px 12px;

border-radius:30px;

font-size:13px;

font-weight:bold;

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

.rodape{

margin-top:30px;

padding:20px;

text-align:center;

color:#777;

font-size:14px;

}

/* =======================================================
SCROLL
======================================================= */

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#eef3f9;

}

::-webkit-scrollbar-thumb{

background:#1565c0;

border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#0b3d91;

}

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

.cardSistema,
.cardResumo{

animation:fadeCard .4s ease;

}

@keyframes fadeCard{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* =======================================================
RESPONSIVIDADE
======================================================= */

@media(max-width:1400px){

.cardsResumo{

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

}

.formGrid{

grid-template-columns:150px repeat(2,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);

}

.formGrid{

grid-template-columns:1fr;

}

.campoGrande{

grid-column:span 1;

}

.fotoCampo{

grid-row:auto;

justify-content:center;

}

.filtros{

grid-template-columns:1fr;

}

.botoesFormulario{

justify-content:center;

}

}

@media(max-width:700px){

.cardsResumo{

grid-template-columns:1fr;

}

.topoPagina{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.topoPagina h1{

font-size:28px;

}

.btnPrincipal{

width:100%;

}

.botoesFormulario button{

width:100%;

}

thead{

display:none;

}

tbody tr{

display:block;

margin-bottom:20px;

border-radius:12px;

box-shadow:0 5px 15px rgba(0,0,0,.1);

}

tbody td{

display:flex;

justify-content:space-between;

padding:12px 15px;

text-align:right;

}

tbody td::before{

font-weight:bold;

text-align:left;

margin-right:20px;

}

tbody td:nth-child(1)::before{content:"Número";}
tbody td:nth-child(2)::before{content:"Nome";}
tbody td:nth-child(3)::before{content:"Sexo";}
tbody td:nth-child(4)::before{content:"Idade";}
tbody td:nth-child(5)::before{content:"Categoria";}
tbody td:nth-child(6)::before{content:"Distância";}
tbody td:nth-child(7)::before{content:"Equipe";}
tbody td:nth-child(8)::before{content:"Cidade";}
tbody td:nth-child(9)::before{content:"Status";}
tbody td:nth-child(10)::before{content:"Ações";}

}