/* app.css - Estilos globales para RVapps */

/* =========================
   Reset básico y configuración
   ========================= */
   * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: auto;
    overflow-y: auto;
    font-family: 'Plus Jakarta Sans', 'Noto Sans', sans-serif;
    background: #0B0C0E;
    color: #EDEDED;
  }
  
  /* =========================
     Navbar fijo / compensación
     ========================= */
  /* No forzamos padding-top global por defecto (se maneja con .main-content) */
  body {
    padding-top: 0;
  }
  
  /* Main container base: usamos clases específicas para controlar espaciado */
  main.container {
    margin-top: 60px; /* valor base para compensar navbar fijo */
    padding-top: 0;
  }
  
  /* Forzar margen-top por si Tailwind / otras librerías lo resetean */
  main {
    margin-top: 60px !important;
  }
  
  /* =========================
     Contenedor global (centrado y responsive)
     ========================= */
  /* Ancho de trabajo ideal en desktop, con padding lateral */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  /* Ajuste para pantallas muy grandes: más aire */
  @media (min-width: 1400px) {
    .container {
      max-width: 1300px;
      padding: 0 36px;
    }
  }
  
  /* =========================
     Reglas para mejorar apariencia en Desktop
     ========================= */
  /* Valor más compacto de tipografía en desktop para evitar sensación "gigante" */
  @media (min-width: 1024px) {
    body {
      font-size: 15px; /* ligeramente más compacto que 16px */
    }
  }
  
  /* Main-content: clase dedicada para controlar separación respecto al navbar */
  .main-content {
    margin-top: 72px;   /* ajustar según altura real del navbar */
    margin-bottom: 48px;
    padding-top: 0;
  }
  
  /* Móviles usan menor compensación (navbar más pequeño usualmente) */
  @media (max-width: 768px) {
    .main-content {
      margin-top: 56px;
      padding-left: 12px;
      padding-right: 12px;
    }
  }
  
  @media (max-width: 480px) {
    .main-content {
      margin-top: 45px;
    }
  }
  
  /* =========================
     Reglas para evitar conflictos con librerías (Tailwind / Bootstrap)
     ========================= */
  /* Forzar prioridad si Bootstrap o Tailwind interfieren */
  main.container.main-content {
    margin-top: 72px !important;
  }
  
  /* =========================
     Ajustes específicos de componentes globales
     ========================= */
  
  /* Evita que los contenedores internos se estiren fuera del ancho esperado */
  .rv-container {
    max-width: 100%;
    width: 100%;
  }
  
  /* Limitar ancho de componentes tipo "perfil" globalmente */
  .profile_wrapper {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    padding-right: 8px;
  }
  
  /* Forzar ancho razonable para botones/links principales */
  .SocialLink {
    max-width: 720px;
  }
  
  /* Si necesitas un máximo aún menor en pantallas grandes */
  @media (min-width: 1400px) {
    .profile_wrapper {
      max-width: 1100px;
      padding-left: 18px;
      padding-right: 18px;
    }
  }
  
  /* =========================
     Componentes visuales que se usan en distintas vistas
     (ejemplos: card principal, títulos)
     ========================= */
  
  /* Tarjeta principal (para ajustar paddings en desktop) */
  .rv-main-card {
    background-color: #141518;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    padding: 20px;
    border: 1px solid #272727;
    width: 100%;
  }
  
  /* Si querés que sea un poco más compacto en desktop */
  @media (min-width: 1024px) {
    .rv-main-card {
      padding: 18px;
    }
  }
  
  /* Títulos se adaptan a pantallas grandes */
  .rv-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin: 24px 0 16px;
    color: #EDEDED;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  }
  
  @media (min-width: 1024px) {
    .rv-section-title {
      font-size: 1.8rem;
    }
  }
  
  /* =========================
     Utilidades y helpers
     ========================= */
  
  /* Centrados y límites para evitar que elementos colapsen en pantallas enormes */
  .centered {
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
  }
  
  /* Overflow control para evitar scroll horizontal */
  html, body {
    overflow-x: hidden;
  }
  
  /* =========================
     Media queries para tamaños pequeños
     (mantenemos comportamiento móvil)
     ========================= */
  
  @media (max-width: 768px) {
    main.container,
    main {
      margin-top: 50px !important;
    }
  }
  
  @media (max-width: 480px) {
    main.container,
    main {
      margin-top: 45px !important;
    }
  
    .container {
      padding: 0 12px;
    }
  }
  
  /* =========================
     Compatibilidad visual rápida
     - Reglas para asegurar consistencia si bootstrap/tailwind usan clases similares
     ========================= */
  
  /* Botones y enlaces: evitar tamaños exagerados */
  button, .btn {
    font-size: 0.95rem;
  }
  
  /* Formularios */
  input, select, textarea {
    font-family: inherit;
    font-size: 1rem;
  }
  
  /* =========================
     Fin de archivo
     ========================= */