/* =====================================================================
   Tema Esportivo — Área do Atleta (/atleta/)
   Camada carregada POR CIMA do template admin (Bootstrap 4 + style.css)
   e do tema-atleta.css. NÃO é usada no admin.
   Usa as variáveis de paleta injetadas por CssPaletaOrganizador():
   --grad-a/b/c e --sp-accent. ("Sem tema" não carrega este arquivo.)
   ===================================================================== */

:root {
  --sp-bg-1: #0f172a;
  --grad-a: #ff6a00; --grad-b: #ff1e56; --grad-c: #7028e4; --sp-accent: #ff1e56;
  --sp-ink: #0f1729;
  --sp-surface: #ffffff;
  --sp-radius: 18px;
  --sp-radius-sm: 12px;
  --sp-shadow-lg: 0 24px 60px rgba(15,23,42,.22);
  --sp-shadow: 0 10px 30px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06);
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Condensed", "Barlow", Impact, sans-serif;
}

/* ---- Fundo imersivo vibrante --------------------------------------- */
body {
  background: var(--sp-bg-1) !important;
  position: relative;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,81,47,.55), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(112,40,228,.55), transparent 55%),
    linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 48%, var(--grad-c) 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .10;
  background-image: repeating-linear-gradient(-60deg, rgba(255,255,255,.9) 0 2px, transparent 2px 26px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 40%, transparent 78%);
          mask-image: linear-gradient(to bottom, #000 0 40%, transparent 78%);
}
/* conteúdo acima do fundo */
#wrapper, .content-page, .wrapper-page, .container-fluid, .content { position: relative; z-index: 1; }
.content-page, .content, #wrapper { background: transparent !important; }

/* ---- Tipografia esportiva (sem afetar ícones) ---------------------- */
body :not(i):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not([class*="mdi-"]):not([class*="dripicons"]):not([class*="ion-"]):not([class*="material-icons"]) {
  font-family: var(--font-body) !important;
}
h1,h2,h3,h4,h5,.btn,.header-title { font-family: var(--font-display) !important; letter-spacing:.01em; }

/* ---- Topbar (mantida para o menu hambúrguer no mobile) ------------- */
/* fundo do degradê uniforme na barra inteira (topbar-left e navbar-custom
   ficam transparentes) e altura travada em 70px para o logo/nome não vazarem */
.topbar {
  background: linear-gradient(135deg, var(--grad-b), var(--grad-c)) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.18);
  height: 70px;
  overflow: hidden;
}
.topbar .topbar-left {
  background: transparent !important;
  box-shadow: none !important;
  height: 70px;
}
.navbar-custom { background: transparent !important; }
/* botão hambúrguer dentro do tema (fundo transparente sobre o degradê) */
.navbar-custom .menu-left,
.navbar-custom .menu-left > li,
.navbar-custom .menu-left > li.float-right,
.button-menu-mobile {
  background: transparent !important;
  box-shadow: none !important;
}
.topbar .logo {
  line-height: 70px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 16px;
}
.topbar .logo span { display: inline-flex; align-items: center; }
.topbar .logo, .topbar .logo span, .topbar .logo i { color: #fff !important; font-family: var(--font-display) !important; }
.button-menu-mobile i { color: #fff !important; }

/* ---- Menu da esquerda como CARD (trilho branco alinhado ao conteúdo) */
/* Mantém o posicionamento nativo do template (top: 70px, mesma linha do
   conteúdo) — só muda a aparência para card. Assim NÃO desalinha. */
.left.side-menu {
  background: var(--sp-surface) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 6px 0 24px rgba(15,23,42,.14) !important;
  /* fixo abaixo do topbar (70px), acompanha a rolagem parado */
  position: fixed !important;
  top: 70px !important;
  bottom: 0 !important;
  height: auto !important;
  overflow-y: auto;
  padding-top: 10px !important;
}
/* topbar fixo no topo, ACIMA do conteúdo (z-index alto) */
.topbar { position: fixed !important; top: 0 !important; left: 0; right: 0; z-index: 1030 !important; }
.left.side-menu { z-index: 1020 !important; }
/* Card a 20px à direita do menu (240px de largura), desktop. */
@media (min-width: 768px) {
  .content-page { margin-left: 260px !important; padding-right: 16px !important; }
}
/* topbar é fixo (fora do fluxo), então o conteúdo precisa do clearance da
   altura do topbar (70px) + 20px de respiro = 90px. */
body .content-page > .content { margin-top: 90px !important; padding: 0 !important; }
/* container/form em largura total (sem o max-width do Bootstrap, que
   centraliza e afasta o card do menu) */
.content-page > .content > form,
.content-page > .content > .container,
.content-page > .content > form > .container {
  margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important;
}
/* coluna/linha que EMBRULHA o card não recua (card encosta no gap de 10px).
   Linhas/colunas internas do card não são afetadas (seletor '>' direto). */
.content-page > .content .container > .col-sm-12,
.content-page > .content .container > .row,
.content-page > .content .container > .row > [class*="col-"] {
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
.content-page .card-box { margin-top: 0 !important; }
.left.side-menu #sidebar-menu > ul > li > a {
  color: var(--sp-ink) !important;
  font-weight: 600;
  border-radius: 10px;
  border-left: 0 !important;   /* remove a barrinha teal do template */
  margin: 2px 8px;
}
.left.side-menu #sidebar-menu > ul > li > a:hover {
  background: linear-gradient(135deg, var(--grad-b), var(--grad-c)) !important;
  color: #fff !important;
}
.left.side-menu #sidebar-menu > ul > li > a:hover i { color: #fff !important; }
.left.side-menu #sidebar-menu > ul > li > a i { color: var(--sp-accent) !important; }
/* item da página atual NÃO fica destacado (fica igual aos demais) */
.left.side-menu #sidebar-menu > ul > li > a.active {
  background: transparent !important;
  color: var(--sp-ink) !important;
}
.left.side-menu #sidebar-menu > ul > li > a.active i { color: var(--sp-accent) !important; }

/* ---- Cards (.card-box) --------------------------------------------- */
.card-box {
  background: var(--sp-surface) !important;
  border: none !important;
  border-radius: var(--sp-radius) !important;
  box-shadow: var(--sp-shadow-lg) !important;
  position: relative;
  overflow: hidden;
  padding: 1.9rem 1.6rem 1.6rem !important;  /* respiro; conteúdo não cola na barra de acento */
  margin-bottom: 1.5rem;
}
.card-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c));
}
.card-box .header-title { color: var(--sp-ink); text-transform: uppercase; }

/* Wrapper .card-box.table-responsive (só embrulha outro card): vira
   passthrough — sem padding/margem/visual — para o card branco interno
   subir e encostar no topo/menu. */
.card-box.table-responsive {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: auto;
}
.card-box.table-responsive::before { display: none; }

/* ---- Login (wrapper-page centralizado) ----------------------------- */
.wrapper-page { max-width: 460px; margin: 6vh auto 2rem; }
.wrapper-page .card-box { padding: 2rem 1.75rem 2.25rem; text-align: center; }
.wrapper-page .card-box > img { max-width: 210px; height: auto; }

/* ---- Formulário ---------------------------------------------------- */
.form-control {
  border: 2px solid #e6e8ef;
  border-radius: var(--sp-radius-sm);
  min-height: 46px;
}
.form-control:focus {
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--sp-accent) 22%, transparent);
}

/* ---- Botões -------------------------------------------------------- */
.btn {
  border-radius: 999px;
  font-family: var(--font-display) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: none;
  box-shadow: 0 8px 18px rgba(15,23,42,.14);
  transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(15,23,42,.22); }
.btn:active { transform: translateY(0); }
.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark { color: #fff !important; }
.btn-primary { background: linear-gradient(135deg, #2b6cff, #6a37ff) !important; }
.btn-info    { background: linear-gradient(135deg, #0ea5e9, #2563eb) !important; }
.btn-success { background: linear-gradient(135deg, #16c26a, #059669) !important; }
.btn-warning { background: linear-gradient(135deg, #ff9d00, #ff5e3a) !important; }
.btn-danger  { background: linear-gradient(135deg, #ff512f, #dd2476) !important; }
/* o botão da cor do organizador (btn-<tema>) é sobrescrito inline por
   CssPaletaOrganizador() para casar com a paleta escolhida. */

/* alertas com cantos mais suaves */
.alert { border-radius: var(--sp-radius-sm); }

/* rodapé (footer vazio do template): transparente pra aproveitar o fundo */
.footer {
  background: transparent !important;
  border-top: none !important;
  color: rgba(255,255,255,.85) !important;
}

/* ---- Notificações (plugin notify-metro) dentro do tema ------------- */
.notify {
  background: linear-gradient(135deg, var(--grad-b), var(--grad-c)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.28) !important;
  font-family: var(--font-body) !important;
}
.notify .title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.notify .title, .notify .text { color: #fff !important; }
.notify .image i, .notify .image { color: #fff !important; }

/* ---- Responsivo ---------------------------------------------------- */
@media (max-width: 767.98px) {
  body::after { display: none; }
  .left.side-menu { margin: 0; border-radius: 0; }
  .wrapper-page { margin-top: 3vh; padding: 0 12px; }
}