/* ═══════════════════════════════════════════════
   HARTAFIT — Design System
   Paleta de cores + componentes
   ═══════════════════════════════════════════════ */

/* ─── IMPORTANTE — Caminhos de assets ───────────────
   Sempre usar o helper asset() do Laravel para referenciar
   imagens, CSS e outros arquivos estáticos nas views Blade.
   Isso garante que os caminhos funcionem tanto no ambiente
   local (localhost/hartafit) quanto em produção (hartafit.danielhartax.com).

   Exemplo correto:
   <link href="{{ asset('css/hartafit.css') }}" rel="stylesheet">
   <img src="{{ asset('images/hartafit_logo.svg') }}" alt="HartaFit">

   Exemplo errado (não usar):
   <link href="/css/hartafit.css" rel="stylesheet">
   <img src="/images/hartafit_logo.svg" alt="HartaFit">
   ─────────────────────────────────────────────────── */

/* ─── Variáveis de cor ─────────────────────────── */
:root {
  --color-primary:       #FF6C45; /* laranja principal */
  --color-gray:          #4D4D4D; /* cinza principal */

  /* Derivados do laranja */
  --color-primary-dark:  #E04E28; /* laranja escuro (hover) */
  --color-primary-light: #FFE8E1; /* laranja claro (badges, tags) */

  /* Derivados do cinza */
  --color-gray-mid:      #8A8A8A; /* cinza médio (textos secundários) */
  --color-gray-light:    #E8E8E6; /* cinza claro (fundo cards informativos) */
  --color-gray-bg:       #F2F2F0; /* cinza fundo geral da página */
  --color-gray-border:   #D6D6D4; /* cinza bordas */

  /* Fundos */
  --color-bg-page:       #F2F2F0; /* fundo geral da página */
  --color-bg-card:       #E8E8E6; /* cards informativos (cinza claro) */
  --color-bg-highlight:  #FF6C45; /* cards de destaque (laranja) */
  --color-bg-sidebar:    #4D4D4D; /* sidebar (cinza principal) */
  --color-bg-white:      #FFFFFF;

  /* Texto */
  --color-text-on-light:      #4D4D4D; /* texto em fundos claros */
  --color-text-secondary:     #8A8A8A; /* texto secundário/subtexto */
  --color-text-on-dark:       #FFFFFF; /* texto em fundos escuros/laranja */
  --color-text-highlight-num: #FFFFFF; /* números em cards de destaque */
}

/* ─── Logos ─────────────────────────────────────── */

/* Não usar classes CSS para logos — o CSS não suporta asset() do Laravel.
   Sempre usar <img> diretamente nas views Blade:

   Fundo claro:  <img src="{{ asset('images/hartafit_logo.svg') }}" alt="HartaFit" style="width: 60%;" />
   Fundo escuro: <img src="{{ asset('images/hartafit_logo_white.svg') }}" alt="HartaFit" style="width: 60%;" />

   Tamanho recomendado: width: 60% para telas de auth, ajustar conforme contexto.
*/

/* ─── Utilitários de cor ─────────────────────────── */

.bg-primary       { background-color: var(--color-primary); }
.bg-gray          { background-color: var(--color-gray); }
.bg-card          { background-color: var(--color-bg-card); }
.bg-sidebar       { background-color: var(--color-bg-sidebar); }
.bg-white         { background-color: var(--color-bg-white); }
.bg-page          { background-color: var(--color-bg-page); }

.text-primary     { color: var(--color-primary); }
.text-gray        { color: var(--color-gray); }
.text-secondary   { color: var(--color-text-secondary); }
.text-white       { color: var(--color-text-on-dark); }

/* ─── Cards ──────────────────────────────────────── */

/* Card informativo — fundo cinza claro, texto escuro */
.card {
  background-color: var(--color-bg-card);
  color: var(--color-text-on-light);
  border: 1px solid var(--color-gray-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

/* Card de destaque — fundo laranja, texto e número em branco */
.card-highlight {
  background-color: var(--color-bg-highlight);
  color: var(--color-text-on-dark);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

.card-highlight .card-label {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.625rem;     /* 10px */
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-highlight .card-number {
  color: var(--color-text-highlight-num);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.card-highlight .card-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.6875rem;    /* 11px */
}

/* ─── Sidebar ────────────────────────────────────── */

.sidebar {
  background-color: var(--color-bg-sidebar); /* #4D4D4D */
  color: var(--color-text-on-dark);
}

/* ─── Links e botões — sem sublinhado ───────────── */

a, .btn-hf, .btn-google, .btn-outline-hf {
  text-decoration: none;
}

a:hover, .btn-hf:hover, .btn-google:hover, .btn-outline-hf:hover {
  text-decoration: none;
}

/* ─── Botões ─────────────────────────────────────── */

/* Botão primário — laranja, letra branca */
.btn-hf {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  border: none;
  border-radius: 6px;
  padding: 7px 13px;
  font-size: 0.75rem;      /* 12px */
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.15s;
}

.btn-hf:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-text-on-dark);
}

/* Botão outline — fundo branco, borda cinza, hover laranja */
.btn-outline-hf {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-gray-border);
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-on-light);
  display: block;
  width: 100%;
  text-align: center;
  transition: border-color 0.15s;
}

.btn-outline-hf:hover {
  border-color: var(--color-primary);
  color: var(--color-text-on-light);
}

/* Botão link — sem fundo, texto secundário */
.btn-link-hf {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
}

/* ─── Tags / Badges ──────────────────────────────── */

/* Tag laranja — fundo laranja sólido, letra branca */
.tag-reps {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
}

.player-reps-badge .tag-reps {
  font-size: 1.2rem;
  padding: 4px 10px;
}

/* Tag tempo — fundo cinza médio, letra branca */
.tag-tempo {
  background-color: var(--color-gray-mid);
  color: var(--color-text-on-dark);
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
}

/* Badge admin — laranja, letra branca */
.badge-admin {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
}

/* Badge user — cinza, letra escura */
.badge-user {
  background-color: var(--color-gray-border);
  color: var(--color-text-on-light);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
}

/* ─── Login / Auth ───────────────────────────────── */

/* Página inteira — fundo claro, mobile-first */
.auth-page {
  background-color: var(--color-bg-page);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Container principal — limita largura em desktop */
.auth-login {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-page);
  overflow: hidden;
}

/* Seção superior — semicírculo cinza + logo + mascote */
.auth-hero {
  position: relative;
  width: 100%;
  height: 72vh;
  min-height: 460px;
  flex-shrink: 0;
  background-color: var(--color-bg-page);
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Semicírculo — retângulo cinza com border-radius embaixo */
.auth-hero-bg {
  position: absolute;
  top: 0;
  left: -15%;
  width: 130%;
  height: 78%;
  background-color: var(--color-bg-sidebar);
  border-radius: 0 0 50% 50%;
}

/* Faixa reservada pra logo — topo do semicírculo */
.auth-hero-logo {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 5%;
  height: 22%;
  flex-shrink: 0;
}

.auth-hero-logo img {
  width: 72%;
  max-width: 280px;
}

/* Mascote ocupa o restante do espaço, sem tocar na logo */
.auth-hero-mascot {
  position: relative;
  z-index: 3;
  display: block;
  margin: 0 auto;
  height: 78%;
  object-fit: contain;
  object-position: center bottom;
}

/* Seção inferior — botões */
.auth-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vh 2rem 5vh;
  gap: 0.75rem;
  z-index: 4;
  background-color: var(--color-bg-page);
}

.auth-bottom-inner {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* Botão Google */
.btn-google {
  background-color: var(--color-bg-white);
  border: 1.5px solid var(--color-gray-border) !important;
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-on-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
}

.btn-google:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 108, 69, 0.12);
  color: var(--color-text-on-light);
  text-decoration: none;
}

/* Caption abaixo do botão */
.auth-caption {
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.6;
}

/* Mensagem de erro de autenticação */
.auth-error {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  width: 100%;
  text-align: center;
}
/* ─── Escolha — variante hero sem mascote ────────── */

/* Semicírculo só com logo, sem mascote */
.auth-hero--logo-only {
  height: 38vh;
  min-height: 220px;
}

.auth-hero--logo-only .auth-hero-bg {
  height: 100%;
}

.auth-hero--logo-only .auth-hero-logo {
  height: 100%;
  padding-top: 0;
  align-items: center;
}

/* Saudação e subtítulo na tela de escolha */
.auth-escolha-saudacao {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-on-light);
  text-align: center;
  margin-bottom: 0.25rem;
}

.auth-escolha-sub {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 0.5rem;
}