/*
 * base.css — estilos base mínimos que no son utilidades de Tailwind.
 * Se carga como <link> normal, después de tokens.css y del CDN de
 * Tailwind. No define colores ni tamaños propios: todo sale de las
 * variables de tokens.css.
 */

html {
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: clip;
}

body {
  width: 100%;
  min-height: 100%;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: var(--leading-body);
}

/* Custom elements son inline por defecto: sin esto no ocupan el ancho completo */
site-header,
site-footer,
chatbot-widget,
color-picker-tool,
main {
  display: block;
  width: 100%;
}

/* Contenedor horizontal reutilizable: ancho completo con márgenes seguros,
   con tope para que el contenido no se estire sin límite en monitores muy
   anchos (proyector, pantallas 4K en la presentación a la facultad). */
.page-container {
  width: 100%;
  max-width: 96rem; /* 1536px, alineado al breakpoint 2xl usado en el header */
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px) {
  .page-container {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .page-container {
    padding-inline: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .page-container {
    padding-inline: 2.5rem;
  }
}

@media (min-width: 1536px) {
  .page-container {
    padding-inline: 3rem;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-heading);
}

/* Foco visible consistente para navegación por teclado (accesibilidad) */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/*
 * Cuerpo de contenido enriquecido (clase `prose` del plugin de tipografía
 * de Tailwind). Mapea los colores del plugin a nuestros tokens, en vez de
 * dejar los grises por defecto: así el cuerpo de una noticia (o cualquier
 * otro contenido largo) respeta el tema claro/oscuro y la marca, sea cual
 * sea el contenido real que traiga (títulos, listas, citas, imágenes).
 */
.prose {
  --tw-prose-body: var(--color-text);
  --tw-prose-headings: var(--color-text);
  --tw-prose-lead: var(--color-text-muted);
  --tw-prose-links: var(--color-primary);
  --tw-prose-bold: var(--color-text);
  --tw-prose-counters: var(--color-text-muted);
  --tw-prose-bullets: var(--color-border);
  --tw-prose-hr: var(--color-border);
  --tw-prose-quotes: var(--color-text);
  --tw-prose-quote-borders: var(--color-primary);
  --tw-prose-captions: var(--color-text-muted);
  --tw-prose-code: var(--color-text);
  --tw-prose-th-borders: var(--color-border);
  --tw-prose-td-borders: var(--color-border);
}
.prose :where(h2, h3, h4):not(:where([class~="not-prose"] *)) {
  font-family: var(--font-heading);
}
.prose :where(a):not(:where([class~="not-prose"] *)) {
  font-weight: 600;
  text-decoration: none;
}
.prose :where(a):not(:where([class~="not-prose"] *)):hover {
  color: var(--color-primary-dark);
}