/* ============================================================================
   Prana — Tokens del sistema de diseño (CSS) · v2, dos modos
   Espejo exacto de tokens.js · colección "Semantic" del Master (97 variables,
   modos Light y Dark). GENERADO desde tokens.js: no editar valores a mano.

   Un token, dos modos: los componentes usan siempre el mismo nombre de
   variable y el modo activo lo resuelve el atributo data-theme del documento.
   Prohibido condicionar color por modo en el componente.
   ============================================================================ */

/* --- Familia tipográfica: Manrope variable (peso máximo 600) --- */
/* Tema Prana Help: Manrope variable en WOFF2 (Fontsource, OFL), en lugar del TTF del DS. */
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-style: normal; font-display: swap; src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-style: normal; font-display: swap; src: url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ===== Modo claro (por defecto) ===== */
:root, [data-theme="light"] {
  /* background */
  --background-default-10: #ffffff;
  --background-default-10-hover: #f9fafb;
  --background-default-10-active: #f2f4f7;
  --background-default-10-disabled: #f2f4f7;
  --background-default-20: #f2f4f7;
  --background-default-20-hover: #eaecf0;
  --background-default-20-active: #d0d5dd;
  --background-default-20-disabled: #eaecf0;
  --background-default-30: #eaecf0;
  --background-default-30-hover: #d0d5dd;
  --background-default-30-disabled: #f2f4f7;
  --background-default-40: #d0d5dd;
  --background-contast: #111a2c;
  --background-contast-hover: #333e52;
  --background-selected: #4c30ff;
  --background-selected-hover: #3e20e2;
  --background-selected-disabled: #bec8ff;
  --background-accent: #4c30ff;
  --background-accent-hover: #3e20e2;
  --background-accent-active: #321db6;
  --background-accent-disabled: #bec8ff;
  --background-danger: #d52c20;
  --background-danger-hover: #bc251a;
  --background-danger-disabled: #fedfdc;
  --background-danger-10: #fef3f2;
  --background-danger-20: #d52c20;
  --background-success-high: #078d51;
  --background-success-med: #e8fdf0;
  --background-warning-high: #d86603;
  --background-warning-med: #fff9e5;
  --background-info-high: #4c30ff;
  --background-info-med: #ebefff;
  --background-overlay: #333e5299;

  /* content */
  --content-default-high: #0d1320;
  --content-default-med: #455164;
  --content-disabled: #959fb1;
  --content-inverse-high: #ffffff;
  --content-inverse-med: #d0d5dd;
  --content-selected: #4c30ff;
  --content-link: #4c30ff;
  --content-link-hover: #3e20e2;
  --content-link-disabled: #97a3ff;
  --content-info: #4c30ff;
  --content-danger-high: #bc251a;
  --content-danger-med: #d52c20;
  --content-danger-disabled: #fec7c3;
  --content-success: #067043;
  --content-warning: #b04507;
  --content-illustrations: #000000;

  /* border */
  --border-default-high: #d0d5dd;
  --border-default-med: #eaecf0;
  --border-default-low: #f2f4f7;
  --border-disabled: #eaeaeb;
  --border-focus: #4c30ff;
  --border-selected: #4c30ff;
  --border-selected-hover: #3e20e2;
  --border-selected-disabled: #bec8ff;
  --border-danger-high: #d52c20;
  --border-danger-low: #fec7c3;
  --border-success-high: #078d51;
  --border-success-low: #a4eec2;
  --border-warning-high: #d86603;
  --border-warning-low: #fede86;
  --border-info: #bec8ff;

  /* ===== Independientes de modo ===== */

  /* Radio */
  --radius-xs: 4px;
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-full: 160px;

  /* Ancho de modal */
  --modal-width-xs: 400px;
  --modal-width-s: 512px;
  --modal-width-m: 768px;
  --modal-width-l: 1086px;

  /* Efectos (cerrados: solo estos tres) */
  --shadow-s: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-m: 0 4px 16px -4px rgba(0,0,0,0.2);
  --shadow-input-focused: 0 0 0 3px rgba(76,48,255,0.30);

  /* Tipografía */
  --font-family: 'Manrope', sans-serif;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-30: 30px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Grid */
  --grid-mobile-page: 360px;
  --grid-mobile-body: 328px;
  --grid-tablet-page: 744px;
  --grid-tablet-body: 712px;
  --grid-desktop-page: 1200px;
  --grid-desktop-body: 1168px;
  --grid-gutter-mobile: 12px;
  --grid-gutter-tablet: 12px;
  --grid-gutter-desktop: 16px;
  --grid-margin: 16px;

  /* Gráficos: la base es igual en los dos modos */
  --chart-10: #564cff;
  --chart-20: #f96c4e;
  --chart-30: #3dc4bd;
  --chart-40: #f29e26;
  --chart-50: #a4465a;
  --chart-60: #42a9ee;
  --chart-70: #fe8039;
  --chart-80: #0f95bd;
  --chart-90: #2b8d60;
  --chart-100: #fb7f6e;
  --chart-110: #ba66cf;
  --chart-120: #369690;

  /* Gráficos deshabilitados (modo claro) */
  --chart-10-disabled: #bec8ff;
  --chart-20-disabled: #ffe6e1;
  --chart-30-disabled: #d1f6f1;
  --chart-40-disabled: #fdf0c8;
  --chart-50-disabled: #e5bcc9;
  --chart-60-disabled: #e2f0fc;
  --chart-70-disabled: #ffe9d4;
  --chart-80-disabled: #a8eef9;
  --chart-90-disabled: #b7e3c8;
  --chart-100-disabled: #ffe5e1;
  --chart-110-disabled: #eed9f5;
  --chart-120-disabled: #d6f1ec;

  /* ===== Spacing =====
     EL MASTER NO DEFINE TOKENS DE SPACING. Deliberadamente ausente.
     Reutilizar los valores presentes en los componentes implementados. */
}

/* ===== Modo oscuro ===== */
[data-theme="dark"] {
  /* background */
  --background-default-10: #0f131a;
  --background-default-10-hover: #181e2a;
  --background-default-10-active: #202631;
  --background-default-10-disabled: #202631;
  --background-default-20: #202631;
  --background-default-20-hover: #363a45;
  --background-default-20-active: #63666e;
  --background-default-20-disabled: #363a45;
  --background-default-30: #363a45;
  --background-default-30-hover: #63666e;
  --background-default-30-disabled: #202631;
  --background-default-40: #363a45;
  --background-contast: #363a45;
  --background-contast-hover: #63666e;
  --background-selected: #564cff;
  --background-selected-hover: #6e71ff;
  --background-selected-disabled: #321db6;
  --background-accent: #564cff;
  --background-accent-hover: #6e71ff;
  --background-accent-active: #97a3ff;
  --background-accent-disabled: #321db6;
  --background-danger: #bc251a;
  --background-danger-hover: #8c1f17;
  --background-danger-disabled: #762519;
  --background-danger-10: #50150b;
  --background-danger-20: #fd9c96;
  --background-success-high: #72dfa5;
  --background-success-med: #052e1e;
  --background-warning-high: #fec748;
  --background-warning-med: #491b08;
  --background-info-high: #97a3ff;
  --background-info-med: #1c1353;
  --background-overlay: #363a45b2;

  /* content */
  --content-default-high: #f7f7f8;
  --content-default-med: #d2d3d5;
  --content-disabled: #63666e;
  --content-inverse-high: #ffffff;
  --content-inverse-med: #d2d3d5;
  --content-selected: #6e71ff;
  --content-link: #97a3ff;
  --content-link-hover: #bec8ff;
  --content-link-disabled: #3e20e2;
  --content-info: #97a3ff;
  --content-danger-high: #fd9c96;
  --content-danger-med: #f04033;
  --content-danger-disabled: #8c1f17;
  --content-success: #72dfa5;
  --content-warning: #fec748;
  --content-illustrations: #ffffff;

  /* border */
  --border-default-high: #63666e;
  --border-default-med: #363a45;
  --border-default-low: #202631;
  --border-disabled: #202631;
  --border-focus: #6e71ff;
  --border-selected: #6e71ff;
  --border-selected-hover: #6e71ff;
  --border-selected-disabled: #321db6;
  --border-danger-high: #f04033;
  --border-danger-low: #8c1f17;
  --border-success-high: #16ab66;
  --border-success-low: #085938;
  --border-warning-high: #f28d08;
  --border-warning-low: #8d350c;
  --border-info: #321db6;

  /* Gráficos deshabilitados (modo oscuro) */
  --chart-10-disabled: #1c1353;
  --chart-20-disabled: #6c372f;
  --chart-30-disabled: #215a5b;
  --chart-40-disabled: #6a4b1f;
  --chart-50-disabled: #4b2734;
  --chart-60-disabled: #234f6f;
  --chart-70-disabled: #6f3f26;
  --chart-80-disabled: #0f475b;
  --chart-90-disabled: #1a4436;
  --chart-100-disabled: #6d3e3c;
  --chart-110-disabled: #533462;
  --chart-120-disabled: #1f4749;
}

/* La sombra del sistema es negra: en modo oscuro no aporta y se omite. */
[data-theme="dark"] { --shadow-s: none; --shadow-m: none; }

/* ===== Estilos de texto =====
   Tokens completos: traen tamaño, peso y lineHeight. No declarar
   fontSize/fontWeight sueltos. */

.type-title-l { font-family: var(--font-family); font-size: var(--font-size-30); font-weight: var(--font-weight-semibold); line-height: 1 }
.type-title-m { font-family: var(--font-family); font-size: var(--font-size-20); font-weight: var(--font-weight-semibold); line-height: 1 }
.type-title-s { font-family: var(--font-family); font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); line-height: 1 }

.type-button { font-family: var(--font-family); font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); line-height: 14px }

.type-kpi-l { font-family: var(--font-family); font-size: var(--font-size-30); font-weight: var(--font-weight-semibold); line-height: 1 }
.type-kpi-m { font-family: var(--font-family); font-size: var(--font-size-18); font-weight: var(--font-weight-semibold); line-height: 1 }

.type-text-s { font-family: var(--font-family); font-size: var(--font-size-12); font-weight: var(--font-weight-regular); line-height: 1 }
.type-text-s-medium { font-family: var(--font-family); font-size: var(--font-size-12); font-weight: var(--font-weight-medium); line-height: 1 }
.type-text-s-semibold { font-family: var(--font-family); font-size: var(--font-size-12); font-weight: var(--font-weight-semibold); line-height: 1 }
.type-text-m { font-family: var(--font-family); font-size: var(--font-size-14); font-weight: var(--font-weight-regular); line-height: 1 }
.type-text-m-medium { font-family: var(--font-family); font-size: var(--font-size-14); font-weight: var(--font-weight-medium); line-height: 1 }
.type-text-m-semibold { font-family: var(--font-family); font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); line-height: 1 }
.type-text-l { font-family: var(--font-family); font-size: var(--font-size-16); font-weight: var(--font-weight-regular); line-height: 1 }
.type-text-l-medium { font-family: var(--font-family); font-size: var(--font-size-16); font-weight: var(--font-weight-medium); line-height: 1 }
.type-text-l-semibold { font-family: var(--font-family); font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); line-height: 1 }
.type-text-xl { font-family: var(--font-family); font-size: var(--font-size-24); font-weight: var(--font-weight-medium); line-height: 1 }

.type-body-s { font-family: var(--font-family); font-size: var(--font-size-12); font-weight: var(--font-weight-regular); line-height: 1.4 }
.type-body-s-medium { font-family: var(--font-family); font-size: var(--font-size-12); font-weight: var(--font-weight-medium); line-height: 1.4 }
.type-body-m { font-family: var(--font-family); font-size: var(--font-size-14); font-weight: var(--font-weight-regular); line-height: 1.4 }
.type-body-m-medium { font-family: var(--font-family); font-size: var(--font-size-14); font-weight: var(--font-weight-medium); line-height: 1.4 }
.type-body-l { font-family: var(--font-family); font-size: var(--font-size-16); font-weight: var(--font-weight-regular); line-height: 1.5 }
.type-body-l-medium { font-family: var(--font-family); font-size: var(--font-size-16); font-weight: var(--font-weight-medium); line-height: 1.5 }

/* Enlaces */
a { color: var(--content-link) }
a:hover { color: var(--content-link-hover) }

/* Los controles de formulario no heredan la familia por defecto */
button, input, textarea, select { font-family: var(--font-family) }

/* El sistema no define el peso 700: los elementos que el navegador pone en
   `bold` por defecto se bajan al máximo del Master (600). */
th, b, strong { font-weight: var(--font-weight-semibold) }