/* ==========================================================================
   base.css: Reset ligero, tipografía global y detalles de base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--lib-bg);
  color: var(--lib-text);
  font-family: var(--lib-font-sans);
  font-size: var(--lib-font-size-base);
  line-height: var(--lib-line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: var(--lib-font-weight-semibold);
  line-height: var(--lib-line-height-tight);
  color: var(--lib-text);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9375rem; }

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: var(--bs-link-color);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

code, pre, kbd, samp {
  font-family: var(--lib-font-mono);
  font-size: 0.875em;
}

/* Bloques de código de los ejemplos */
pre[class*="bg-"],
.demo-code {
  background-color: var(--lib-surface-muted);
  border: 1px solid var(--lib-border);
  border-radius: var(--lib-radius-md);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  color: var(--lib-text);
}

/* Foco visible y accesible */
:focus-visible {
  outline: 2px solid var(--lib-primary-500);
  outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible {
  outline: 2px solid var(--lib-primary-500);
  outline-offset: 1px;
  box-shadow: none;
}

/* Barra de desplazamiento discreta */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--lib-border-strong) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--lib-border-strong);
  border-radius: var(--lib-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--lib-text-subtle);
  background-clip: content-box;
}

/* Previsualización de componentes en los ejemplos */
.demo-preview {
  background-color: var(--lib-surface);
  border: 1px solid var(--lib-border);
  border-radius: var(--lib-radius-lg);
}

.demo-code {
  margin-bottom: 0;
  font-size: 0.8125rem;
}

/* Utilidades propias de la librería */
.lib-surface {
  background-color: var(--lib-surface);
  border: 1px solid var(--lib-border);
  border-radius: var(--lib-radius-lg);
}

.text-muted-soft {
  color: var(--lib-text-muted) !important;
}

.lib-divider {
  height: 1px;
  background-color: var(--lib-border);
  border: 0;
  margin: var(--lib-space-6) 0;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}