/* ================================================
   styles.css — Estilos compartilhados do Orbita
   
   Este arquivo é importado em TODAS as páginas
   com a tag:
   <link rel="stylesheet" href="styles.css">
   
   Aqui ficam apenas os estilos que se REPETEM
   entre páginas. Estilos específicos de cada
   página continuam no próprio arquivo HTML.
================================================ */


/* ================================================
   1. VARIÁVEIS GLOBAIS
   Defina aqui as cores, fontes e medidas do projeto.
   Mudar uma variável reflete em todo o site.
================================================ */
:root {
  --bg:       #0d0d0f;
  --surface:  #16161a;
  --surface2: #1e1e24;
  --accent:   #e8ff5a;
  --accent2:  #5affb8;
  --accent3:  #ff5a8a;
  --text:     #f0f0f0;
  --muted:    #888;
  --border:   rgba(255,255,255,0.07);
  --radius:   16px;
  --error:    #ff5a5a;

  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --shadow-sm: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-accent: 0 8px 24px rgba(232,255,90,0.2);
}


/* ================================================
   2. RESET E BASE
================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  min-height:  100vh;
  line-height: 1.6;
  /* Evita scroll horizontal acidental */
  overflow-x:  hidden;
}

/* Remove sublinhado de links por padrão */
a { text-decoration: none; color: inherit; }

/* Imagens nunca ultrapassam o container */
img { max-width: 100%; display: block; }

/* Botões herdam a fonte do body */
button { font-family: var(--font-body); }


/* ================================================
   3. TIPOGRAFIA
================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.4rem); }
h3 { font-size: 1.1rem; }

p { line-height: 1.7; }


/* ================================================
   4. NAVBAR COMPARTILHADA
   Todas as páginas internas usam este estilo.
================================================ */
.navbar {
  position:         sticky;
  top:              0;
  z-index:          100;
  background:       rgba(13,13,15,0.88);
  backdrop-filter:  blur(12px);
  border-bottom:    1px solid var(--border);
  padding:          0 24px;
}

.navbar-inner {
  max-width:      1100px;
  margin:         0 auto;
  display:        flex;
  align-items:    center;
  height:         60px;
  gap:            16px;
}

/* Logo — reutilizado em todas as páginas */
.logo {
  font-family:  var(--font-display);
  font-weight:  800;
  font-size:    1.3rem;
  color:        var(--accent);
  display:      flex;
  align-items:  center;
  gap:          7px;
  flex-shrink:  0;
  text-decoration: none;
}

.logo-dot {
  width:        8px;
  height:       8px;
  border-radius: 50%;
  background:   var(--accent3);
  animation:    pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.5; }
}

/* Botões da navbar */
.nav-btn {
  padding:      7px 16px;
  border-radius: 999px;
  font-size:    0.82rem;
  font-family:  var(--font-body);
  cursor:       pointer;
  text-decoration: none;
  transition:   all 0.2s;
  border:       1px solid var(--border);
  background:   transparent;
  color:        var(--muted);
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
}

.nav-btn:hover {
  color:        var(--text);
  border-color: rgba(255,255,255,0.15);
}

.nav-btn.active {
  color:        var(--accent);
  border-color: rgba(232,255,90,0.3);
  background:   rgba(232,255,90,0.05);
}

.nav-btn.primary {
  background:   var(--accent);
  color:        #000;
  border-color: transparent;
  font-weight:  500;
}

.nav-btn.primary:hover {
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}


/* ================================================
   5. BOTÕES REUTILIZÁVEIS
================================================ */
.btn {
  display:      inline-flex;
  align-items:  center;
  gap:          8px;
  padding:      11px 22px;
  border-radius: 999px;
  font-size:    0.9rem;
  font-weight:  500;
  font-family:  var(--font-body);
  cursor:       pointer;
  border:       none;
  transition:   all 0.2s;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color:      #000;
}

.btn-primary:hover {
  transform:  translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.btn-secondary {
  background:   transparent;
  color:        var(--text);
  border:       1px solid var(--border);
}

.btn-secondary:hover {
  background:   var(--surface2);
  border-color: rgba(255,255,255,0.15);
}

.btn-danger {
  background:   rgba(255,90,90,0.1);
  color:        var(--error);
  border:       1px solid rgba(255,90,90,0.2);
}

.btn-danger:hover {
  background: rgba(255,90,90,0.2);
}

.btn:disabled {
  opacity: 0.4;
  cursor:  not-allowed;
  transform: none !important;
}


/* ================================================
   6. CARDS
================================================ */
.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
}

.card:hover {
  border-color: rgba(255,255,255,0.12);
}

.card-body {
  padding: 20px;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size:   0.95rem;
  margin-bottom: 4px;
}


/* ================================================
   7. FORMULÁRIOS
================================================ */
.field {
  margin-bottom: 16px;
}

label {
  display:       block;
  font-size:     0.78rem;
  color:         var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

/* Todos os inputs de texto */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
textarea,
select {
  width:       100%;
  background:  var(--surface2);
  border:      1px solid var(--border);
  border-radius: 10px;
  padding:     12px 14px;
  color:       var(--text);
  font-family: var(--font-body);
  font-size:   0.9rem;
  outline:     none;
  transition:  border-color 0.2s, box-shadow 0.2s;
}

input::placeholder,
textarea::placeholder { color: var(--muted); }

/* Estado de foco — quando o usuário clica no campo */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px rgba(232,255,90,0.08);
}

/* Estado de erro */
input.error,
textarea.error {
  border-color: var(--error);
  box-shadow:   0 0 0 3px rgba(255,90,90,0.08);
}

/* Mensagem de erro abaixo do campo */
.field-error {
  font-size:  0.75rem;
  color:      var(--error);
  margin-top: 5px;
  display:    none;
}

.field-error.visible { display: block; }

textarea { resize: none; }

select option { background: var(--surface2); }


/* ================================================
   8. ANIMAÇÕES REUTILIZÁVEIS
================================================ */

/* Entrada suave de baixo para cima */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Escala de entrada */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Brilho animado — usado no skeleton loading */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Classes utilitárias de animação */
.animate-fadeUp  { animation: fadeUp  0.5s ease both; }
.animate-scaleIn { animation: scaleIn 0.3s ease both; }

/* Delays escalonados para listas */
.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.10s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.20s; }
.delay-5 { animation-delay: 0.25s; }


/* ================================================
   9. SKELETON LOADING
   Esqueleto animado que aparece enquanto o
   conteúdo está "carregando"
================================================ */
.skeleton-line {
  height:        12px;
  border-radius: 6px;
  background:    linear-gradient(
    90deg,
    var(--surface2) 25%,
    var(--surface)  50%,
    var(--surface2) 75%
  );
  background-size: 200% 100%;
  animation:     shimmer 1.5s infinite;
  margin-bottom: 10px;
}

.skeleton-circle {
  border-radius:   50%;
  background:      linear-gradient(
    90deg,
    var(--surface2) 25%,
    var(--surface)  50%,
    var(--surface2) 75%
  );
  background-size: 200% 100%;
  animation:       shimmer 1.5s infinite;
}


/* ================================================
   10. MODAL
   Janela flutuante reutilizável
================================================ */
.modal-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index:        200;
  display:        flex;
  align-items:    center;
  justify-content: center;
  padding:        24px;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.25s;
}

.modal-overlay.open {
  opacity:        1;
  pointer-events: all;
}

.modal {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 20px;
  width:         100%;
  max-width:     540px;
  max-height:    90vh;
  overflow-y:    auto;
  transform:     translateY(20px) scale(0.97);
  transition:    transform 0.25s;
}

.modal-overlay.open .modal {
  transform: translateY(0) scale(1);
}

.modal-header {
  padding:       20px 24px;
  border-bottom: 1px solid var(--border);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size:   1rem;
}

.modal-close {
  width:         32px;
  height:        32px;
  border-radius: 50%;
  background:    var(--surface2);
  border:        1px solid var(--border);
  color:         var(--muted);
  font-size:     1rem;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all 0.2s;
}

.modal-close:hover { color: var(--text); }

.modal-body { padding: 24px; }


/* ================================================
   11. TAGS / BADGES
================================================ */
.tag {
  display:       inline-flex;
  align-items:   center;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 999px;
  padding:       4px 10px;
  font-size:     0.72rem;
  color:         var(--muted);
}

.badge {
  display:       inline-flex;
  align-items:   center;
  border-radius: 999px;
  padding:       3px 10px;
  font-size:     0.68rem;
  font-weight:   500;
}

.badge-accent  { background: rgba(232,255,90,0.12); color: var(--accent);  border: 1px solid rgba(232,255,90,0.3); }
.badge-green   { background: rgba(90,255,184,0.12); color: var(--accent2); border: 1px solid rgba(90,255,184,0.3); }
.badge-pink    { background: rgba(255,90,138,0.12); color: var(--accent3); border: 1px solid rgba(255,90,138,0.3); }


/* ================================================
   12. DIVIDER
================================================ */
.divider {
  height:     1px;
  background: var(--border);
  margin:     16px 0;
}

.divider-text {
  display:     flex;
  align-items: center;
  gap:         12px;
  color:       var(--muted);
  font-size:   0.8rem;
  margin:      20px 0;
}

.divider-text::before,
.divider-text::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border);
}


/* ================================================
   13. AVATAR
================================================ */
.avatar {
  border-radius:  50%;
  background:     var(--surface2);
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
  overflow:       hidden;
}

.avatar-sm  { width: 30px; height: 30px; font-size: 0.85rem; }
.avatar-md  { width: 40px; height: 40px; font-size: 1.1rem;  }
.avatar-lg  { width: 56px; height: 56px; font-size: 1.5rem;  }
.avatar-xl  { width: 80px; height: 80px; font-size: 2rem;    }

/* Bolinha de status online */
.avatar-wrap {
  position: relative;
  display:  inline-block;
}

.status-dot {
  position:      absolute;
  bottom:        1px;
  right:         1px;
  width:         11px;
  height:        11px;
  border-radius: 50%;
  border:        2px solid var(--bg);
}

.status-online  { background: var(--accent2); }
.status-offline { background: var(--muted);   }


/* ================================================
   14. UTILITÁRIOS
   Classes pequenas e reutilizáveis para
   ajustes rápidos de layout e espaçamento.
================================================ */

/* Flexbox */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm       { gap: 8px; }
.gap-md       { gap: 16px; }
.gap-lg       { gap: 24px; }

/* Texto */
.text-muted   { color: var(--muted); }
.text-accent  { color: var(--accent); }
.text-sm      { font-size: 0.82rem; }
.text-xs      { font-size: 0.72rem; }
.font-display { font-family: var(--font-display); font-weight: 700; }

/* Espaçamento */
.mt-sm { margin-top: 8px;  }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 32px; }
.mb-sm { margin-bottom: 8px;  }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 32px; }

/* Visibilidade */
.hidden  { display: none !important; }
.visible { display: block !important; }

/* Truncar texto longo com "..." */
.truncate {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Container padrão */
.container {
  max-width: 1100px;
  margin:    0 auto;
  padding:   0 24px;
}


/* ================================================
   15. RESPONSIVIDADE GLOBAL
================================================ */
@media (max-width: 768px) {
  .container { padding: 0 16px; }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.4rem; }

  /* Esconde elementos marcados como "só desktop" */
  .desktop-only { display: none !important; }
}

@media (min-width: 769px) {
  /* Esconde elementos marcados como "só mobile" */
  .mobile-only { display: none !important; }
}