/*
 * CED Chile Design System
 * Fuente unica para identidad visual, tipografia y componentes compartidos.
 * Los estilos especificos de visualizaciones permanecen en explore.html.
 */

@font-face {
  font-family: "Sculpin";
  src: url("../fonts/Sculpin_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sculpin";
  src: url("../fonts/Sculpin_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Identidad */
  --ds-color-brand: #221e7c;
  --ds-color-brand-deep: #16124f;
  --ds-color-accent: #f19320;
  --ds-color-module-2: #1e5c3a;
  --ds-color-module-2-mid: #27753f;
  --ds-color-module-3: #0b4f55;
  --ds-color-module-3-mid: #0d6b73;
  --ds-color-module-4: #5c2d8a;
  --ds-color-module-4-mid: #7038a8;
  --ds-color-module-5: #0d0d1a;
  --ds-color-module-5-mid: #141428;

  /* Superficies y texto */
  --ds-color-text: #2d2f3a;
  --ds-color-text-visualization: #3f3f3f;
  --ds-color-muted: #626876;
  --ds-color-muted-visualization: #555868;
  --ds-color-line: rgba(34, 30, 124, 0.14);
  --ds-color-surface: #ffffff;
  --ds-color-surface-soft: #f6f7fb;
  --ds-color-canvas: #f3f3f3;
  --ds-color-canvas-soft: #f8f8f8;
  --ds-color-cyan: #72c7d5;
  --ds-color-mint: #78d6bb;
  --ds-color-lime: #c7f120;
  --ds-color-gold: #f1d01b;
  --ds-color-salmon: #fd8983;

  /* Tipografia */
  --ds-font-display: "Sculpin", Georgia, serif;
  --ds-font-ui: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-data: "DM Mono", "SF Mono", Consolas, monospace;
  --ds-type-xs: 0.52rem;
  --ds-type-sm: 0.62rem;
  --ds-type-base: 0.72rem;
  --ds-type-md: 0.82rem;
  --ds-type-lg: 1rem;
  --ds-type-xl: 1.25rem;
  --ds-type-2xl: clamp(0.95rem, 1.3vw, 1.18rem);
  --ds-type-display: clamp(1rem, 1.72vw, 1.38rem);
  --ds-weight-normal: 400;
  --ds-weight-medium: 500;
  --ds-weight-semi: 600;
  --ds-weight-bold: 700;
  --ds-weight-heavy: 800;
  --ds-leading-tight: 1.1;
  --ds-leading-snug: 1.3;
  --ds-leading-normal: 1.5;

  /* Espaciado, forma y elevacion */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 6px;
  --ds-radius-lg: 8px;
  --ds-shadow-control: 0 10px 24px rgba(34, 30, 124, 0.14);
  --ds-shadow-header: 0 10px 28px rgba(22, 18, 79, 0.16);
  --ds-header-height: 76px;
  --ds-header-height-mobile: 66px;
  --ds-page-gutter: clamp(20px, 6vw, 86px);

  /*
   * Alias de compatibilidad.
   * Mantienen los componentes actuales bajo los tokens canonicos --ds-*.
   */
  --blue: var(--ds-color-brand);
  --blue-deep: var(--ds-color-brand-deep);
  --orange: var(--ds-color-accent);
  --green: var(--ds-color-module-2);
  --teal: var(--ds-color-module-3);
  --purple: var(--ds-color-module-4);
  --ink: var(--ds-color-text);
  --muted: var(--ds-color-muted);
  --line: var(--ds-color-line);
  --soft: var(--ds-color-surface-soft);
  --font-ui: var(--ds-font-ui);
  --font-title: var(--ds-font-display);
  --font-body: var(--ds-font-ui);
  --font-display: var(--ds-font-display);
  --font-data: var(--ds-font-data);

  --corfo-blue: var(--ds-color-brand);
  --corfo-blue-deep: #1a165f;
  --corfo-bg: var(--ds-color-canvas);
  --corfo-bg-soft: var(--ds-color-canvas-soft);
  --corfo-text: var(--ds-color-text-visualization);
  --corfo-muted: var(--ds-color-muted-visualization);
  --corfo-line: var(--ds-color-line);
  --corfo-orange: var(--ds-color-accent);
  --corfo-cyan: var(--ds-color-cyan);
  --corfo-mint: var(--ds-color-mint);
  --corfo-lime: var(--ds-color-lime);
  --corfo-gold: var(--ds-color-gold);
  --corfo-salmon: var(--ds-color-salmon);

  --m1-color: var(--ds-color-brand);
  --m1-mid: #2d2787;
  --m2-color: var(--ds-color-module-2);
  --m2-mid: var(--ds-color-module-2-mid);
  --m3-color: var(--ds-color-module-3);
  --m3-mid: var(--ds-color-module-3-mid);
  --m4-color: var(--ds-color-module-4);
  --m4-mid: var(--ds-color-module-4-mid);
  --m5-color: var(--ds-color-module-5);
  --m5-mid: var(--ds-color-module-5-mid);
  --shadow-button: var(--ds-shadow-control);

  --type-xs: var(--ds-type-xs);
  --type-sm: var(--ds-type-sm);
  --type-base: var(--ds-type-base);
  --type-md: var(--ds-type-md);
  --type-lg: var(--ds-type-lg);
  --type-xl: var(--ds-type-xl);
  --type-2xl: var(--ds-type-2xl);
  --type-display: var(--ds-type-display);
  --weight-normal: var(--ds-weight-normal);
  --weight-medium: var(--ds-weight-medium);
  --weight-semi: var(--ds-weight-semi);
  --weight-bold: var(--ds-weight-bold);
  --weight-heavy: var(--ds-weight-heavy);
  --leading-tight: var(--ds-leading-tight);
  --leading-snug: var(--ds-leading-snug);
  --leading-normal: var(--ds-leading-normal);
  --header-side-width: 220px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ds-color-text);
  font-family: var(--ds-font-ui);
}

a {
  color: inherit;
  text-decoration: none;
}

/* Shell institucional compartido por Home, Data y Research. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-5);
  min-height: var(--ds-header-height);
  padding: 14px clamp(18px, 4vw, 56px);
  color: #fff;
  background: var(--ds-color-brand);
  box-shadow: var(--ds-shadow-header);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  font-family: var(--ds-font-display);
  font-weight: var(--ds-weight-bold);
}

.site-header .brand img {
  display: block;
  width: 92px;
  height: auto;
}

.site-header .brand span {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-header .site-nav {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin-left: auto;
}

.site-header .site-nav a {
  padding: 9px 12px;
  border-radius: var(--ds-radius-md);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  font-weight: var(--ds-weight-heavy);
}

.site-header .site-nav a:hover,
.site-header .site-nav a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.site-header .lang-switch {
  display: flex;
  gap: var(--ds-space-1);
  padding-left: var(--ds-space-2);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.site-header .lang-switch button {
  padding: 7px 5px;
  border: 0;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  font: var(--ds-weight-heavy) 0.9rem var(--ds-font-ui);
  cursor: pointer;
}

.site-header .lang-switch button.active {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.site-footer {
  padding: 22px var(--ds-page-gutter);
  border-top: 1px solid var(--ds-color-line);
  color: var(--ds-color-muted);
  font-size: 0.9rem;
}

/* Primitivas compartidas. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--ds-color-line);
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-brand);
  background: #fff;
  font-weight: 900;
}

.btn.primary {
  color: #fff;
  border-color: var(--ds-color-brand);
  background: var(--ds-color-brand);
}

.btn.disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 860px) {
  .site-header {
    min-height: var(--ds-header-height-mobile);
    padding: 10px 14px;
    gap: 10px;
  }

  .site-header .brand img {
    width: 78px;
  }

  .site-header .brand span {
    display: none;
  }

  .site-header .site-nav {
    gap: 2px;
  }

  .site-header .site-nav a {
    padding: 8px 7px;
    font-size: 0.78rem;
  }

  .site-header .lang-switch {
    padding-left: 4px;
  }

  .site-header .lang-switch button {
    padding: 6px 3px;
    font-size: 0.78rem;
  }

  .site-footer {
    padding: 20px 18px;
  }
}