/*
 * 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,
admin-sidebar,
admin-topbar,
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);
}

/* Badges de estado del panel admin (ver docs/PLAN-ADMIN.md §3.4) */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  white-space: nowrap;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-neutral { background: var(--color-surface-2); color: var(--color-text-muted); }

/* Lienzo y tarjetas del panel admin (ver docs/PLAN-ADMIN.md, refresh
   visual). En modo claro, --color-bg y --color-surface casi no
   contrastan entre sí — por eso se invierte la relación: el lienzo usa
   surface-2 (gris visible) y las tarjetas usan bg (blanco puro) + una
   sombra sutil, para que las tarjetas "floten" sobre el lienzo. La
   clase no trae padding: se compone con utilidades de Tailwind
   (p-5, p-6, etc.) según el elemento. */
.admin-canvas {
  background: var(--color-surface-2);
}
.admin-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
  padding: 0.5rem 0.625rem;
}
[data-admin-table] tbody tr:hover {
  background: var(--color-surface-2);
}