/* ==========================================================
   COMUNIDADE RUNNERS
   STYLE PRINCIPAL
========================================================== */

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* VARIÁVEIS */

:root{

    --azul:#1565C0;
    --azul-escuro:#0D47A1;

    --verde:#16A34A;
    --laranja:#F59E0B;
    --vermelho:#DC2626;
    --roxo:#7C3AED;

    --fundo:#EEF3F8;
    --card:#FFFFFF;

    --texto:#1E293B;
    --cinza:#64748B;
    --borda:#E5E7EB;

    --sombra:0 10px 25px rgba(0,0,0,.08);

}

/* ==========================================================
BODY
========================================================== */

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

    background:var(--fundo);

    color:var(--texto);

    overflow-x:hidden;

}

/* ==========================================================
LAYOUT
========================================================== */

.layout{

    display:flex;

    min-height:100vh;

}

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

.conteudo{

    flex:1;

    margin-left:260px;

    padding:35px;

}

/* ==========================================================
LINKS
========================================================== */

a{

    text-decoration:none;

    color:inherit;

}

/* ==========================================================
TÍTULOS
========================================================== */

h1{

    font-size:48px;

    color:#0F172A;

}

h2{

    font-size:30px;

}

small{

    color:var(--cinza);

    font-size:15px;

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

.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:260px;

    height:100vh;

    background:linear-gradient(180deg,#0F3C96,#1565C0);

    color:#FFF;

    display:flex;

    flex-direction:column;

    padding:25px 18px;

    box-shadow:5px 0 20px rgba(0,0,0,.12);

    z-index:999;

}

/* ==========================================================
LOGO
========================================================== */

.logo{

    text-align:center;

    margin-bottom:40px;

}

.logoIcon{

    width:78px;

    height:78px;

    margin:auto;

    border-radius:50%;

    background:#FFF;

    color:var(--azul);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    margin-bottom:15px;

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

}

.logo h2{

    color:white;

    font-size:28px;

    line-height:34px;

    font-weight:700;

}

/* ==========================================================
MENU
========================================================== */

.sidebar nav{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:10px;

}

.sidebar nav a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    border-radius:12px;

    color:#E5E7EB;

    font-size:16px;

    font-weight:600;

    transition:.25s;

}

.sidebar nav a:hover{

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

    color:#FFF;

    transform:translateX(5px);

}

.sidebar nav a.ativo{

    background:#2B73E8;

    color:white;

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

}

/* ==========================================================
RODAPÉ DA SIDEBAR
========================================================== */

.sidebar::after{

    content:"Comunidade Runners © 2026";

    margin-top:auto;

    text-align:center;

    font-size:12px;

    color:rgba(255,255,255,.70);

    padding-top:20px;

}/* ==========================================================
TOPBAR
========================================================== */

.topoPagina{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

    padding:22px 30px;

    background:var(--card);

    border-radius:18px;

    box-shadow:var(--sombra);

}

.topoPagina h1{

    font-size:38px;

    font-weight:700;

    color:var(--texto);

    margin-bottom:6px;

}

.topoPagina small{

    color:var(--cinza);

    font-size:15px;

}

/* ==========================================================
ÁREA DIREITA
========================================================== */

.topoDireita{

    display:flex;

    align-items:center;

    gap:18px;

}

/* ==========================================================
NOTIFICAÇÕES
========================================================== */

.notificacao{

    width:48px;

    height:48px;

    border-radius:14px;

    background:#F8FAFC;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.25s;

    position:relative;

    font-size:20px;

}

.notificacao:hover{

    background:#DBEAFE;

}

.notificacao::after{

    content:"";

    position:absolute;

    top:10px;

    right:12px;

    width:10px;

    height:10px;

    background:#EF4444;

    border-radius:50%;

}

/* ==========================================================
USUÁRIO
========================================================== */

.usuarioTopo{

    display:flex;

    align-items:center;

    gap:12px;

    background:#F8FAFC;

    padding:10px 18px;

    border-radius:14px;

    cursor:pointer;

    transition:.25s;

}

.usuarioTopo:hover{

    background:#DBEAFE;

}

.avatar{

    width:45px;

    height:45px;

    border-radius:50%;

    background:linear-gradient(135deg,#1565C0,#0D47A1);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

    font-size:18px;

}

.usuarioInfo{

    display:flex;

    flex-direction:column;

}

.usuarioInfo strong{

    color:var(--texto);

    font-size:15px;

}

.usuarioInfo span{

    color:var(--cinza);

    font-size:13px;

}

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

.btnPrincipal{

    border:none;

    background:linear-gradient(135deg,#1565C0,#0D47A1);

    color:white;

    padding:13px 24px;

    border-radius:12px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 8px 18px rgba(21,101,192,.25);

}

.btnPrincipal:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(21,101,192,.35);

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

.cardsResumo{

    display:grid;

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

    gap:25px;

    margin-bottom:35px;

}

.cardResumo{

    background:var(--card);

    border-radius:20px;

    padding:25px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:var(--sombra);

    border:1px solid var(--borda);

    transition:all .30s ease;

    position:relative;

    overflow:hidden;

}

.cardResumo::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:var(--azul);

}

.cardResumo:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.cardResumo:hover .iconeCard{

    transform:rotate(8deg) scale(1.08);

}

/* ==========================================================
ÍCONE
========================================================== */

.iconeCard{

    width:75px;

    height:75px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#FFF;

    transition:.3s;

    flex-shrink:0;

}

/* CORES */

.azul{

    background:linear-gradient(135deg,#3B82F6,#1565C0);

}

.verde{

    background:linear-gradient(135deg,#22C55E,#16A34A);

}

.roxo{

    background:linear-gradient(135deg,#A855F7,#7C3AED);

}

.laranja{

    background:linear-gradient(135deg,#FB923C,#EA580C);

}

.vermelho{

    background:linear-gradient(135deg,#F87171,#DC2626);

}

.ciano{

    background:linear-gradient(135deg,#06B6D4,#0891B2);

}

/* ==========================================================
TEXTOS
========================================================== */

.cardResumo span{

    display:block;

    color:var(--cinza);

    font-size:15px;

    margin-bottom:8px;

}

.cardResumo h2{

    font-size:34px;

    color:var(--texto);

    font-weight:700;

}

.cardResumo small{

    display:block;

    margin-top:6px;

    color:#94A3B8;

    font-size:13px;

}

/* ==========================================================
BADGES
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:50px;

    font-size:12px;

    font-weight:600;

}

.badge-success{

    background:#DCFCE7;

    color:#166534;

}

.badge-warning{

    background:#FEF3C7;

    color:#92400E;

}

.badge-danger{

    background:#FEE2E2;

    color:#991B1B;

}

.badge-primary{

    background:#DBEAFE;

    color:#1D4ED8;

}/* ==========================================================
FORMULÁRIOS PREMIUM
========================================================== */

.cardSistema{

    background:var(--card);

    border-radius:20px;

    padding:30px;

    margin-bottom:30px;

    box-shadow:var(--sombra);

    border:1px solid var(--borda);

}

.tituloCard{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    padding-bottom:18px;

    border-bottom:1px solid var(--borda);

}

.tituloCard h2{

    font-size:26px;

    color:var(--texto);

    font-weight:700;

}

/* ==========================================================
GRID
========================================================== */

.formGrid{

    display:grid;

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

    gap:20px;

}

.campo{

    display:flex;

    flex-direction:column;

    grid-column:span 3;

}

.campoGrande{

    grid-column:span 6;

}

.campoTotal{

    grid-column:span 12;

}

/* ==========================================================
LABELS
========================================================== */

.campo label{

    margin-bottom:8px;

    color:#475569;

    font-size:14px;

    font-weight:600;

}

/* ==========================================================
INPUTS
========================================================== */

.campo input,
.campo select,
.campo textarea{

    width:100%;

    border:1px solid var(--borda);

    border-radius:12px;

    padding:14px 16px;

    background:#FFF;

    color:var(--texto);

    font-size:15px;

    transition:.25s;

}

.campo textarea{

    min-height:120px;

    resize:vertical;

}

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

    outline:none;

    border-color:var(--azul);

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

}

/* ==========================================================
UPLOAD DE IMAGEM
========================================================== */

.fotoCampo{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.fotoPreview{

    width:170px;

    height:170px;

    border-radius:20px;

    border:2px dashed var(--azul);

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#F8FAFC;

    margin-bottom:15px;

}

.fotoPreview img{

    width:100%;

    height:100%;

    object-fit:cover;

}

input[type=file]{

    width:100%;

    padding:10px;

    border:1px dashed var(--borda);

    border-radius:10px;

    background:#FFF;

    cursor:pointer;

}

/* ==========================================================
CHECKBOX CARDS
========================================================== */

.distanciasGrid{

    display:grid;

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

    gap:15px;

    margin-top:15px;

}

.cardDistancia{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:18px;

    border-radius:14px;

    background:#F8FAFC;

    border:1px solid var(--borda);

    cursor:pointer;

    transition:.25s;

    font-weight:600;

}

.cardDistancia:hover{

    background:#DBEAFE;

    border-color:var(--azul);

}

.cardDistancia input{

    transform:scale(1.2);

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

.botoesFormulario{

    display:flex;

    justify-content:flex-end;

    gap:15px;

    margin-top:30px;

    flex-wrap:wrap;

}

button{

    border:none;

    cursor:pointer;

    transition:.25s;

    font-family:inherit;

}

.btnPrincipal,
.btnSalvar{

    background:linear-gradient(135deg,#1565C0,#0D47A1);

    color:white;

    padding:14px 28px;

    border-radius:12px;

    font-weight:600;

    box-shadow:0 8px 20px rgba(21,101,192,.25);

}

.btnPrincipal:hover,
.btnSalvar:hover{

    transform:translateY(-3px);

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

}

.btnEditar{

    background:linear-gradient(135deg,#F59E0B,#D97706);

    color:white;

    padding:14px 22px;

    border-radius:12px;

    font-weight:600;

}

.btnEditar:hover{

    transform:translateY(-3px);

}

.btnExcluir{

    background:linear-gradient(135deg,#EF4444,#DC2626);

    color:white;

    padding:14px 22px;

    border-radius:12px;

    font-weight:600;

}

.btnExcluir:hover{

    transform:translateY(-3px);

}

.btnLimpar{

    background:#64748B;

    color:white;

    padding:14px 22px;

    border-radius:12px;

    font-weight:600;

}

.btnLimpar:hover{

    background:#475569;

}

.btnSecundario{

    background:#F8FAFC;

    color:#334155;

    border:1px solid var(--borda);

    padding:14px 20px;

    border-radius:12px;

    font-weight:600;

}

.btnSecundario:hover{

    background:#EEF2F7;

}

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

.filtros{

    display:grid;

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

    gap:15px;

    margin-bottom:25px;

}

.filtros input,
.filtros select{

    width:100%;

    height:50px;

    border:1px solid var(--borda);

    border-radius:12px;

    padding:0 15px;

    background:white;

}

/* ==========================================================
TABELAS
========================================================== */

.tabelaResponsiva{

    width:100%;

    overflow-x:auto;

    border-radius:16px;

}

.tabelaResponsiva table{

    width:100%;

    border-collapse:collapse;

    min-width:1000px;

}

.tabelaResponsiva thead{

    background:linear-gradient(135deg,#1565C0,#0D47A1);

    color:white;

}

.tabelaResponsiva th{

    padding:18px;

    text-align:left;

    font-size:15px;

    font-weight:700;

}

.tabelaResponsiva td{

    padding:16px;

    border-bottom:1px solid #EDF2F7;

    background:white;

}

.tabelaResponsiva tbody tr{

    transition:.25s;

}

.tabelaResponsiva tbody tr:hover{

    background:#F8FAFC;

}

.semRegistros{

    text-align:center;

    color:#94A3B8;

    padding:45px !important;

}

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

.status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

.status.aberto{

    background:#DCFCE7;

    color:#166534;

}

.status.andamento{

    background:#DBEAFE;

    color:#1D4ED8;

}

.status.finalizado{

    background:#E2E8F0;

    color:#334155;

}

.status.cancelado{

    background:#FEE2E2;

    color:#B91C1C;

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.cardResumo,
.cardSistema{

    animation:fadeUp .45s ease;

}

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

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#EEF3F8;

}

::-webkit-scrollbar-thumb{

    background:#1565C0;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0D47A1;

}

/* ==========================================================
FOCUS
========================================================== */

button:focus,
input:focus,
select:focus,
textarea:focus{

    outline:none;

}

/* ==========================================================
IMAGENS
========================================================== */

img{

    max-width:100%;

    display:block;

}

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

.rodape{

    margin-top:40px;

    padding:20px;

    text-align:center;

    color:#64748B;

    font-size:14px;

}

/* ==========================================================
MODO ESCURO (Preparado)
========================================================== */

body.dark{

    --fundo:#0F172A;

    --card:#1E293B;

    --texto:#F8FAFC;

    --cinza:#CBD5E1;

    --borda:#334155;

}

body.dark .sidebar{

    background:linear-gradient(180deg,#020617,#0F172A);

}

body.dark input,
body.dark select,
body.dark textarea{

    background:#1E293B;

    color:#F8FAFC;

}

body.dark table td{

    background:#1E293B;

}

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

@media(max-width:1200px){

    .cardsResumo{

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

    }

}

@media(max-width:992px){

    .sidebar{

        width:90px;

    }

    .logo h2{

        display:none;

    }

    .conteudo{

        margin-left:90px;

    }

    .formGrid{

        grid-template-columns:1fr;

    }

    .campo,
    .campoGrande,
    .campoTotal{

        grid-column:span 1;

    }

    .filtros{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .cardsResumo{

        grid-template-columns:1fr;

    }

    .topoPagina{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .botoesFormulario{

        justify-content:center;

    }

}

@media(max-width:500px){

    .conteudo{

        padding:20px;

    }

    .cardSistema{

        padding:20px;

    }

    h1{

        font-size:30px;

    }

}