/* =========================================================
   GLOBAL BASE (reset, tipografías, colores, utilidades)
   ========================================================= */

/* Reset básico y tipografía */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  background: var(--page-bg, #0e0e0f);
  color: var(--text, #e9e9e9);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Paleta global (usables en cualquier página/comp.) */
:root{
  --page-bg:#0e0e0f;
  --page-bg-2:#151516;
  --page-bg-muted:#1b1b1d;
  --text:#e9e9e9;
  --text-dim:#cfcfcf;
  --border:#242427;
  --brand:#D4AF37;     /* dorado principal */
  --brand2:#B9931A;    /* dorado profundo */
  --glow: rgba(212,175,55,.28);
}

/* Cabeceras y texto (sin estilos de layout específicos) */
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; line-height: 1.2; font-weight: 800; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.125rem, 2.2vw, 1.25rem); }
p  { margin: 0 0 .75rem; }



/* Imágenes y medios responsivos */
img, svg, video { display: block; max-width: 100%; height: auto; }

/* Tablas y formularios base (neutros) */
table { width: 100%; border-collapse: collapse; }
th, td { padding: .5rem; border-bottom: 1px solid var(--border); text-align: left; }

input, select, textarea {
  font: inherit; color: inherit; background: transparent;
  border: 1px solid #303033; border-radius: 8px; padding: .55rem .7rem; outline: none;
}
input::placeholder, textarea::placeholder { color: #bdbdbd; }

button {
  font: inherit; color: inherit; background: transparent;
  border: 1px solid #303033; border-radius: 10px; padding: .55rem .8rem; cursor: pointer;
}
button:disabled { opacity: .6; cursor: not-allowed; }

/* Contenedor utilitario */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

/* Accesibilidad */
.sr-only{ position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Scrollbar global elegante (solo en la página, NO en el drawer) */
body {
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: #D4AF37 #111;         /* thumb | track */
}

/* Chrome, Edge (Chromium), Safari */
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body::-webkit-scrollbar-track {
  background: #111;
  border-radius: 6px;
}
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #D4AF37, #B9931A);
  border-radius: 6px;
  border: 2px solid #111;
  box-shadow: 0 0 6px rgba(212,175,55,.5);
}
body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FFD700, #D4AF37);
  box-shadow: 0 0 10px rgba(212,175,55,.8);
}

