@import 'ms-base.css';          /* tu :root + reset */
@import 'ms-base-responsive.css';
@import 'ms-components.css';    /* tu CSS de componentes */
@import 'ms-mediaqueries.css';

:root {
  --ms-bg-deepest:    #06030f;
  --ms-bg-dark:       #0b0617;
  --ms-bg-card:       #110a1e;
  --ms-bg-card-hover: #160e26;
  --ms-bg-input:      #0d0820;
  --ms-border:        rgba(109,40,217,0.22);
  --ms-border-hover:  rgba(147,51,234,0.5);
  --ms-border-gold:   rgba(184,149,42,0.4);

  --ms-purple:        #6d28d9;
  --ms-purple-bright: #9333ea;
  --ms-purple-light:  #a855f7;
  --ms-purple-glow:   rgba(109,40,217,0.18);

  --ms-gold:          #b8952a;
  --ms-gold-bright:   #f0c040;
  --ms-gold-light:    #facc15;
  --ms-gold-glow:     rgba(240,192,64,0.15);

  --ms-green:         #22c55e;
  --ms-green-dim:     #16a34a;
  --ms-red:           #ef4444;

  --ms-text-primary:  #f0e8ff;
  --ms-text-secondary:#a78bca;
  --ms-text-muted:    #6b5a8a;
  --ms-text-disabled: #3d2f5c;

  --ms-font-display:  'Bebas Neue', sans-serif;
  --ms-font-serif:    'Cinzel', serif;
  --ms-font-body:     'Inter', sans-serif;

  --ms-radius-sm:  6px;
  --ms-radius-md:  10px;
  --ms-radius-lg:  14px;
  --ms-radius-xl:  20px;
  --ms-radius-pill: 999px;

  --ms-nav-h:      68px;
  --ms-sidebar-w:  220px;
  --ms-max-w:      1400px;

  --ms-transition: 0.2s ease;
  --ms-transition-slow: 0.35s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ms-font-body);
  background-color: var(--ms-bg-deepest);
  color: var(--ms-text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--ms-purple-light);
  outline-offset: 2px;
  border-radius: var(--ms-radius-sm);
}

::selection {
  background: rgba(147,51,234,0.3);
  color: var(--ms-text-primary);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ms-bg-dark); }
::-webkit-scrollbar-thumb { background: var(--ms-purple); border-radius: 3px; }

.ms-container {
  max-width: var(--ms-max-w);
  margin: 0 auto;
  padding: 0 2rem;
}




@media (max-width: 1200px) {
  :root {
    --ms-max-w:      1100px;
    --ms-sidebar-w:  200px;
  }
}
 
/* ≤ 1024px — tablet */
@media (max-width: 1024px) {
  :root {
    --ms-sidebar-w:  188px;
  }
}
 
/* ≤ 768px — tablet portrait */
@media (max-width: 768px) {
  :root {
    --ms-nav-h:      60px;
    --ms-sidebar-w:  100%;   /* sidebar pasa a full-width drawer */
  }
}
 
/* ≤ 480px — phone */
@media (max-width: 480px) {
  :root {
    --ms-nav-h:       56px;
    --ms-radius-xl:   16px;  /* cards auth menos redondeadas en pantalla chica */
    --ms-radius-lg:   12px;
  }
}
 
/* ≤ 380px — teléfonos muy pequeños */
@media (max-width: 380px) {
  :root {
    --ms-nav-h:      52px;
    --ms-radius-lg:  10px;
    --ms-radius-xl:  14px;
  }
}
 
 
/* ================================================================
   .ms-container — padding fluido
   ================================================================ */
 
/* ≤ 1200px */
@media (max-width: 1200px) {
  .ms-container { padding: 0 1.75rem; }
}
 
/* ≤ 768px */
@media (max-width: 768px) {
  .ms-container { padding: 0 1.25rem; }
}
 
/* ≤ 480px */
@media (max-width: 480px) {
  .ms-container { padding: 0 1rem; }
}
 
/* ≤ 380px */
@media (max-width: 380px) {
  .ms-container { padding: 0 0.75rem; }
}
 
 
/* ================================================================
   SCROLLBAR — ocultar en mobile (táctil no la necesita)
   ================================================================ */
 
@media (max-width: 768px) {
  ::-webkit-scrollbar       { width: 0; height: 0; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: transparent; }
}
 
 
/* ================================================================
   SELECTION — sin cambios en mobile (funciona igual)
   html scroll-behavior — se mantiene en todos los tamaños
   ================================================================ */
 
/* Reducir motion también afecta scroll-behavior */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
 
 
/* ================================================================
   TIPOGRAFÍA BASE — escala fluida del body
   Solo ajusta el font-size raíz; los rem en todo el proyecto
   escalan en cascada automáticamente.
   ================================================================ */
 
/* La base es 16px (browser default). En pantallas muy pequeñas
   bajamos levemente para que los rem no se sientan grandes. */
 
@media (max-width: 380px) {
  html { font-size: 15px; }
}