/* ═══ Ravvo Running (v107, 03/11/2026) — tema escuro + azul (mockup), igual em toda academia ═══ */
.rr-pagina { --rr-fundo: #0b1424; --rr-card: #111d33; --rr-card2: #16243f; --rr-borda: #22324f; --rr-azul: #1d8cf8; --rr-azul2: #38bdf8;
  --rr-txt: #e6edf7; --rr-mudo: #8fa1bd; --rr-verde: #22c55e; --rr-verm: #f87171; --rr-amar: #fbbf24;
  background: var(--rr-fundo); color: var(--rr-txt); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 16px; max-width: 1320px; }
.rr-pagina h1, .rr-pagina h2, .rr-pagina h3, .rr-pagina h4 { color: var(--rr-txt); text-transform: none; letter-spacing: 0; }
.rr-pagina .form-select, .rr-pagina .form-input { background: var(--rr-card2); color: var(--rr-txt); border-color: var(--rr-borda); }

.rr-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 26px 28px; display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; align-items: center;
  background: radial-gradient(90% 140% at 75% 30%, rgba(56,189,248,.28), transparent 60%), linear-gradient(120deg, #0d2350 0%, #0a1a38 55%, #0b1424 100%);
  border: 1px solid var(--rr-borda); }
.rr-hero-txt { max-width: 520px; position: relative; z-index: 1; }
.rr-hero-marca { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rr-azul2); margin-bottom: 6px; }
.rr-hero h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; }
.rr-hero p { margin: 0 0 14px; color: #c4d2e8; }
.rr-btn-hero { display: inline-block; border: 0; border-radius: 12px; padding: 12px 20px; font: inherit; font-weight: 800; background: var(--rr-azul); color: #fff; cursor: pointer;
  box-shadow: 0 6px 20px rgba(29,140,248,.35); }
.rr-btn-hero:hover { filter: brightness(1.1); }
.rr-btn-off { background: #23324f; box-shadow: none; color: var(--rr-mudo); cursor: default; }
.rr-hero-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.rr-hero-lista li { display: flex; gap: 12px; align-items: center; background: rgba(11,20,36,.6); border: 1px solid var(--rr-borda); border-radius: 12px; padding: 10px 14px; }
.rr-hero-lista span { font-size: 1.3rem; flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(56,189,248,.22), rgba(13,35,80,.6)); border: 1px solid rgba(56,189,248,.28); }
.rr-hero-lista .rr-ic { width: 30px; height: 30px; }
.rr-hero-lista b { display: block; font-size: .9rem; }
.rr-hero-lista small { color: var(--rr-mudo); }

.rr-abas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.rr-aba { background: transparent; border: 1px solid transparent; color: var(--rr-mudo); font: inherit; font-weight: 700; padding: 10px 16px; border-radius: 12px; cursor: pointer; white-space: nowrap; }
.rr-aba:hover { color: var(--rr-txt); }
.rr-aba.ativa { background: #10305f; border-color: #1f4f91; color: #fff; }

.rr-filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.rr-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--rr-mudo); }
.rr-filtros .form-select { min-width: 160px; margin: 0; }
.rr-conteudo { display: flex; flex-direction: column; gap: 16px; }
.rr-card { background: var(--rr-card); border: 1px solid var(--rr-borda); border-radius: 16px; padding: 18px; min-width: 0; }
.rr-card h3 { margin: 0 0 12px; font-size: 1.05rem; }
.rr-card h3 small { color: var(--rr-mudo); font-weight: 500; }
.rr-card-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rr-card-cab h3 { margin: 0; }
.rr-carregando, .rr-vazio { color: var(--rr-mudo); }
.rr-vazio { padding: 14px 0; text-align: center; }
.rr-sub { color: var(--rr-mudo); font-size: .82rem; margin: 6px 0; }
.rr-link { background: none; border: 0; color: var(--rr-azul2); font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.rr-aviso { background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.4); color: #fde68a; border-radius: 12px; padding: 12px 14px; font-size: .9rem; }
.rr-alerta { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.4); border-radius: 10px; padding: 10px 12px; }
.rr-bom { color: var(--rr-verde); font-weight: 700; } .rr-ruim { color: var(--rr-verm); font-weight: 700; } .rr-igual { color: var(--rr-mudo); }
.rr-ok { color: var(--rr-verde); font-weight: 700; } .rr-pend { color: var(--rr-amar); font-weight: 700; }
.rr-erro { color: var(--rr-verm); }
.rr-comp { margin-top: -6px; }

.rr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.rr-stats-4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.rr-stat { display: flex; gap: 12px; align-items: center; background: var(--rr-card2); border: 1px solid var(--rr-borda); border-radius: 14px; padding: 14px; }
.rr-stat-ic { font-size: 1.6rem; }
.rr-stat b { display: block; font-size: 1.35rem; font-weight: 800; }
.rr-stat b small { font-size: .8rem; color: var(--rr-mudo); }
.rr-stat span { color: var(--rr-mudo); font-size: .8rem; }
.rr-pagina > .rr-conteudo > .rr-stats .rr-stat { background: var(--rr-card); }

.rr-grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.rr-grade-aluno { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 16px; }
.rr-grade-aluno > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .rr-grade-aluno { grid-template-columns: 1fr; } .rr-pagina { padding: 10px; border-radius: 0; } }

.rr-barras { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 18px; border-bottom: 1px solid var(--rr-borda); }
.rr-barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.rr-barra { width: 100%; max-width: 54px; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, var(--rr-azul2), var(--rr-azul)); }
.rr-barra-val { font-size: .72rem; font-weight: 700; white-space: nowrap; }
.rr-barra-rot { font-size: .7rem; color: var(--rr-mudo); white-space: nowrap; transform: translateY(18px); }
.rr-barras + * { margin-top: 24px; }
.rr-barras { margin-bottom: 22px; }

.rr-ritmo { display: flex; flex-direction: column; }
.rr-spark { width: 100%; height: 80px; }
.rr-spark-area { fill: rgba(29,140,248,.18); }
.rr-spark-linha { fill: none; stroke: var(--rr-azul2); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.rr-ritmo-val { font-size: 2.2rem; font-weight: 800; line-height: 1; margin-top: 8px; }
.rr-mini { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: .85rem; }
.rr-mini li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--rr-borda); padding: 4px 0; }
.rr-mini span { color: var(--rr-mudo); }

.rr-ativ { display: flex; gap: 12px; align-items: center; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--rr-borda); color: inherit; font: inherit; text-align: left; padding: 12px 4px; cursor: pointer; }
.rr-ativ:hover { background: rgba(29,140,248,.07); }
.rr-ativ:last-of-type { border-bottom: 0; }
.rr-ativ-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: var(--rr-azul); }
.rr-m-caminhada { background: #16a34a; } .rr-m-ciclismo { background: #9333ea; } .rr-m-outra { background: #475569; }
.rr-ativ-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rr-ativ-corpo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-ativ-corpo small { color: #c4d2e8; }
.rr-attr { color: var(--rr-mudo) !important; font-size: .72rem; }
.rr-ativ-data { color: var(--rr-mudo); font-size: .78rem; white-space: nowrap; }
.rr-ativ-susp { opacity: .75; }
.rr-mais { margin-top: 10px; }

.rr-des { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rr-borda); }
.rr-des:last-child { border-bottom: 0; }
.rr-des-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: linear-gradient(135deg, #1d4ed8, #0ea5e9); }
.rr-des-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rr-des-corpo small { color: var(--rr-mudo); }
.rr-des-num { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.rr-des-num b { font-size: 1.3rem; }
.rr-des-num small { color: var(--rr-mudo); font-size: .75rem; }
.rr-prog { height: 8px; background: #22324f; border-radius: 999px; overflow: hidden; }
.rr-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--rr-azul), var(--rr-azul2)); }
.rr-meu { color: var(--rr-azul2) !important; font-weight: 700; }
.rr-acoes { display: flex; gap: 6px; flex-wrap: wrap; }

.rr-rank { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.rr-rank li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; background: var(--rr-card2); border: 1px solid var(--rr-borda); border-radius: 10px; padding: 9px 12px; }
.rr-rank li.rr-top { border-color: #1f4f91; }
.rr-rank li.rr-eu { border-color: var(--rr-azul2); background: rgba(56,189,248,.12); }
.rr-pos { font-weight: 800; text-align: center; }
.rr-rank-tipos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.rr-chip { border: 1px solid var(--rr-borda); background: var(--rr-card2); color: var(--rr-mudo); border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.rr-chip.ativo { background: var(--rr-azul); border-color: var(--rr-azul); color: #fff; }

.rr-tabela-wrap { overflow-x: auto; }
.rr-tabela { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 640px; }
.rr-tabela th, .rr-tabela td { padding: 10px; border-bottom: 1px solid var(--rr-borda); text-align: left; }
.rr-tabela th { color: var(--rr-mudo); font-weight: 700; }

.rr-con { display: flex; gap: 14px; align-items: center; background: var(--rr-card); border: 1px solid var(--rr-borda); border-radius: 16px; padding: 14px 16px; flex-wrap: wrap; }
.rr-con > div { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.rr-con small { color: var(--rr-mudo); }
.rr-con-marca { font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; border: 1px solid var(--rr-borda); border-radius: 10px; padding: 10px 14px; background: #0b1424; }
.rr-con-ok { border-color: rgba(34,197,94,.45); } .rr-con-erro { border-color: rgba(248,113,113,.5); }
.rr-sel { width: auto; margin: 0; }

.rr-prov { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rr-borda); flex-wrap: wrap; }
.rr-prov-nome { font-weight: 800; min-width: 200px; }
.rr-prov-off { color: var(--rr-mudo); }
.rr-erros { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; font-size: .82rem; }
.rr-erros small { color: var(--rr-mudo); margin-right: 6px; }

/* modais (ficam no <body>, fora da página) */
.rr-modal { max-width: 560px; }
.rr-modal .rr-sub { color: var(--text-muted); }
.rr-det { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.rr-det li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rr-det li small { grid-column: 1 / -1; font-size: .78rem; }
.rr-nd { color: var(--text-muted); font-weight: 500; font-style: italic; }
.rr-mapa { width: 100%; max-height: 300px; background: #0b1424; border-radius: 12px; }
.rr-mapa-linha { fill: none; stroke: #f97316; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.rr-mapa-ini { fill: #22c55e; } .rr-mapa-fim { fill: #ef4444; }
.rr-revisao { margin-top: 12px; }
.rr-form { display: grid; gap: 10px; }
.rr-form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.rr-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rr-chk { display: flex !important; flex-direction: row !important; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: .9rem; }
.rr-chk input { margin-top: 3px; }
.rr-modal .rr-erro { color: #dc2626; font-weight: 600; }
.rr-modal .rr-bom { color: #16a34a; } .rr-modal .rr-ruim { color: #dc2626; }
.rr-modal .rr-attr { color: var(--text-muted) !important; }
.rr-modal .rr-alerta { color: inherit; }

/* ═══ 04/11/2026 — visual novo: foto no topo + ícones próprios (assets/running/) ═══ */
.rr-ic { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -.25em; display: inline-block; }
.rr-hero { min-height: 270px; padding: 34px 30px; border-color: rgba(56,189,248,.25);
  background: linear-gradient(90deg, rgba(7,12,28,.97) 0%, rgba(7,12,28,.88) 30%, rgba(7,12,28,.25) 58%, rgba(7,12,28,.15) 72%, rgba(7,12,28,.7) 100%),
              url(../assets/running/hero.webp) 58% 18% / cover no-repeat, #0b1424;
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03); }
.rr-hero-marca { display: inline-flex; align-items: center; gap: 6px; }
.rr-hero-marca .rr-ic { width: 20px; height: 20px; }
.rr-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.rr-hero p { max-width: 440px; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.rr-hero-lista li { background: rgba(7,12,28,.62); border-color: rgba(56,189,248,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); min-width: 250px; }

.rr-aba { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.rr-aba-ic { flex: none; display: inline-flex; }
.rr-aba-ic .rr-ic { width: 22px; height: 22px; vertical-align: middle; }
.rr-aba:not(.ativa) .rr-aba-ic { opacity: .75; }
.rr-aba.ativa { background: linear-gradient(180deg, #13407c, #0e2f5c); border-color: #2a66b3; box-shadow: 0 6px 18px rgba(29,140,248,.22); }

.rr-stat { position: relative; overflow: hidden; transition: transform .15s ease, border-color .15s ease; }
.rr-stat::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(56,189,248,.6), transparent); }
.rr-stat:hover { transform: translateY(-2px); border-color: #2a66b3; }
.rr-stat-ic { flex: none; width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(56,189,248,.2), rgba(13,35,80,.55)); border: 1px solid rgba(56,189,248,.22); }
.rr-stat-ic .rr-ic { width: 34px; height: 34px; }

.rr-ativ-ic, .rr-des-ic { background: radial-gradient(circle at 50% 35%, rgba(56,189,248,.22), #0d2350); border: 1px solid rgba(56,189,248,.35); }
.rr-ativ-ic .rr-ic { width: 26px; height: 26px; }
.rr-des-ic .rr-ic { width: 32px; height: 32px; }
.rr-m-caminhada { background: radial-gradient(circle at 50% 35%, rgba(34,197,94,.3), #0f3a24); border-color: rgba(34,197,94,.45); }
.rr-m-ciclismo { background: radial-gradient(circle at 50% 35%, rgba(168,85,247,.3), #2a1450); border-color: rgba(168,85,247,.45); }
.rr-m-outra { background: radial-gradient(circle at 50% 35%, rgba(148,163,184,.25), #1e293b); border-color: rgba(148,163,184,.4); }
.rr-modal h2 .rr-ic { width: 28px; height: 28px; vertical-align: -6px; }

@media (max-width: 900px) {
  .rr-hero { min-height: 0; padding: 22px 18px; flex-direction: column; align-items: stretch;
    background: linear-gradient(180deg, rgba(7,12,28,.35) 0%, rgba(7,12,28,.75) 45%, rgba(7,12,28,.96) 100%),
                url(../assets/running/hero-p.webp) 55% 20% / cover no-repeat, #0b1424; }
  .rr-hero-txt { padding-top: 70px; }
  .rr-hero-lista li { min-width: 0; }
  .rr-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 600px) {
  .rr-hero-txt { padding-top: 90px; }
  .rr-hero-lista { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rr-hero-lista li { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; }
  .rr-hero-lista b { font-size: .74rem; line-height: 1.2; }
  .rr-hero-lista small { display: none; }
  .rr-hero-lista span { width: 40px; height: 40px; }
  .rr-hero-lista .rr-ic { width: 26px; height: 26px; }
}
.rr-card h3 .rr-ic { width: 24px; height: 24px; vertical-align: -5px; }