/**
 * global.css — reset y estilos base
 */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-sky);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); margin: 0; }

a { color: var(--color-primary); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-6); }

img { max-width: 100%; display: block; }

/* ── Loader global ── */
.global-loader {
  position: fixed; inset: 0; background: var(--color-sky);
  display: flex; align-items: center; justify-content: center; z-index: 999;
}
.global-loader__inner { text-align: center; }
.global-loader__inner span { display: block; margin-top: var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }

/* ── Skeletons ── */
.skeleton-line, .skeleton-text, .skeleton-title, .skeleton-video {
  background: linear-gradient(90deg, var(--color-border) 25%, #f2ecd8 37%, var(--color-border) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 6px;
}
.skeleton-title { width: 70%; height: 28px; }
.skeleton-text { width: 100%; height: 14px; margin-bottom: 6px; display: block; }
.skeleton-text.short { width: 60%; }
.skeleton-video { width: 100%; height: 100%; position: absolute; inset: 0; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── Breadcrumb ── */
.eval-breadcrumb, .module-breadcrumb {
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); background: var(--color-surface);
  font-size: var(--text-sm); color: var(--color-muted);
}
.eval-breadcrumb .container, .module-breadcrumb .container { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb-link { color: var(--color-primary); text-decoration: none; }
.breadcrumb-sep { color: var(--color-border); }
.breadcrumb-current { color: var(--color-text); font-weight: var(--weight-medium); }

/* ── Toasts ── */
.toast-container {
  position: fixed; top: var(--space-4); right: var(--space-4); z-index: 1000;
  display: flex; flex-direction: column; align-items: flex-end;
}