/* ============================================================
   @itrend-minecon/ui v0.7.0 — bundle de entrega (dist/).
   GENERADO por scripts/dist-build.js — NO EDITAR A MANO.
   Orden de carga: tokens → main → components.
   Generado: 2026-09-10
   ============================================================ */
:root{--itrend-ui-version:"0.7.0"}

/* --- tokens.css --- */
/* ============================================================
   GENERADO por scripts/tokens-build.js — NO EDITAR A MANO.
   Fuente de verdad: design/tokens.json
   Para cambiar el tema: editar el JSON y correr `node scripts/tokens-build.js`.
   Tema activo: grayscale.
   ============================================================ */
:root {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f5f9;
  --color-border: #cbd5e1;
  --color-border-focus: #2563eb;
  --color-text-primary: #1e293b;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-text-disabled: #94a3b8;
  --color-text-inverse: #ffffff;
  /* Títulos de sección/tarjeta en azul (identidad). El texto de párrafo sigue en text-primary. */
  --color-text-heading: #1e40af;
  --color-action: #2563eb;
  --color-action-hover: #1d4ed8;
  --color-action-text: #ffffff;
  --color-action-ghost-border: #cbd5e1;
  --color-action-ghost-text: #1d4ed8;
  /* Estado de éxito/confirmación. Verde propio (no gris): el estado debe distinguirse por color además de por texto/ícono. */
  --color-success: #15803d;
  --color-success-bg: #dcfce7;
  /* Estado de advertencia. Ámbar propio. */
  --color-warning: #92400e;
  --color-warning-bg: #fef3c7;
  /* Estado de error de sistema/formulario. Rojo propio. (validation-error queda reservado SOLO para la restricción de presupuesto del CBA.) */
  --color-error: #c0392b;
  --color-error-bg: #fbeae8;
  --color-info: #1d4ed8;
  --color-info-bg: #eff6ff;
  /* Comparte el rojo con `error`, pero es un alias semántico RESERVADO solo para la violación de restricción de presupuesto (CBA). Mantener separado de `error` para poder divergir sin tocar los sitios de uso. */
  --color-validation-error: #c0392b;
  --color-validation-error-bg: #fbeae8;
  /* Navy de la barra/chrome institucional (header, sidebar). */
  --color-institutional: #172554;
  --color-institutional-text: #ffffff;
  --color-step-done: #1d4ed8;
  --color-step-active: #1d4ed8;
  --color-step-pending: #cbd5e1;
  --color-step-text-done: #ffffff;
  --color-step-text-active: #ffffff;
  --color-step-text-pending: #94a3b8;
  /* Badge categórico 'Cosecha' (sector primario). Texto sobre cat-cosecha-bg. */
  --color-cat-cosecha: #15803d;
  --color-cat-cosecha-bg: #dcfce7;
  /* Badge categórico 'Impacto' (dato económico). Texto sobre cat-impacto-bg. */
  --color-cat-impacto: #92400e;
  --color-cat-impacto-bg: #fef3c7;
  /* Badge categórico 'Procesamiento' (sector secundario). Texto sobre cat-proceso-bg. */
  --color-cat-proceso: #1d4ed8;
  --color-cat-proceso-bg: #eff6ff;
  /* Velo detrás de un diálogo modal. No es una superficie: nunca usar como fondo de contenido. */
  --color-scrim: rgba(15,23,42,.45);
  /* Paleta categórica de dataviz (series distintas). Usar en orden 1→6; no reutilizar los tokens semánticos de estado (success/error) para series. */
  --color-viz-1: #2563eb;
  --color-viz-2: #15803d;
  --color-viz-3: #92400e;
  --color-viz-4: #64748b;
  --color-viz-5: #172554;
  --color-viz-6: #334155;
  /* Rampa secuencial (un solo tono, claro→oscuro) para treemaps, mapas de calor y degradados de intensidad. */
  --color-viz-seq-1: #e7ecf6;
  --color-viz-seq-2: #b7c6e6;
  --color-viz-seq-3: #7f9bd0;
  --color-viz-seq-4: #3f5da8;
  --color-viz-seq-5: #172554;
  /* Color de énfasis en un gráfico: resalta la serie/dato protagonista sobre el resto. */
  --color-viz-accent: #2563eb;
  /* Líneas de eje/grilla y baseline de gráficos. */
  --color-viz-grid: #e2e8f0;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 14.5px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-display: 28px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 99px;
  --shadow-card: 0 4px 12px rgba(15,23,42,.06);
  --shadow-sidebar: 0 4px 12px rgba(15,23,42,.03);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --content-width: 1100px;
  --content-width-wide: 1360px;
}


/* --- main.css --- */
/* reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  background: var(--color-bg);
  line-height: 1.5;
  min-width: 960px;
}

/* layout */
.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
/* Vistas de dato denso (tablas anchas, dashboards, dataviz). Reemplaza el
   `.page.wide{max-width:1360px}` que cada repo fijaba a mano. */
.container-wide { max-width: var(--content-width-wide); }

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/* sidebar */
.sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-sidebar);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  background: var(--color-institutional);
  color: var(--color-institutional-text);
  padding: var(--space-6);
}

.sidebar-header .logo-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .7;
  margin-bottom: var(--space-1);
}

.sidebar-header h1 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.3;
}

.sidebar-nav {
  padding: var(--space-4);
  flex: 1;
}

.sidebar-nav .nav-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-2) var(--space-2);
}

.sidebar-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.sidebar-nav a:hover {
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
}

.sidebar-nav a.active {
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
  font-weight: 500;
}

/* main content */
.main {
  padding: var(--space-8) var(--space-8);
  overflow-y: auto;
}
/* Ancho de lectura del contenido, centrado (compartido por todas las vistas) */
.main > * {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}
/* Variante ancha para vistas de dato denso: <main class="main main-wide"> */
.main-wide > * { max-width: var(--content-width-wide); }

/* ------------------------------------------------------------
   icon — utilidad de ícono SVG inline.
   Dimensiona con la tipografía (1em) y hereda el color del texto
   (currentColor), para que un ícono siempre combine con su contexto.
   Usa .icon--stroke para íconos de trazo (line) y .icon--fill para
   íconos sólidos. Tamaños: .icon-sm / .icon-lg.
   NOTA: es la CONVENCIÓN de tamaño/color; el set de glifos (pin, share,
   target, download, external, doc) se promueve por separado.
   ------------------------------------------------------------ */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; flex: none; }
.icon-sm { width: .85em; height: .85em; }
.icon-lg { width: 1.5em; height: 1.5em; }
.icon--fill { fill: currentColor; stroke: none; }
.icon--stroke { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.page-header {
  margin-bottom: var(--space-8);
}

.page-header h2 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-heading);
}

.page-header p {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* card */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

.card + .card,
.card + .kpi-grid,
.kpi-grid + .card {
  margin-top: var(--space-6);
}

/* kpi grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.kpi-card .kpi-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.kpi-card .kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}

.kpi-card .kpi-sub {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* badge */
.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: var(--color-action);
  color: var(--color-action-text);
}

.badge.outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* badges categóricos (soft): sector / tipo de dato — ver Figma de referencia */
.badge.cosecha { background: var(--color-cat-cosecha-bg); color: var(--color-cat-cosecha); }
.badge.impacto { background: var(--color-cat-impacto-bg); color: var(--color-cat-impacto); }
.badge.proceso { background: var(--color-cat-proceso-bg); color: var(--color-cat-proceso); }

/* select / input */
.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field-group label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.field-group select,
.field-group input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

.field-group select:focus,
.field-group input:focus {
  outline: none;
  border-color: var(--color-border-focus);
}

.field-group select:disabled,
.field-group input:disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* filter row */
.filter-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  flex-wrap: wrap;
}

.filter-row .field-group {
  min-width: 160px;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}

/* Foco visible por teclado (accesibilidad). Anillo con el token de foco. */
.btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Presionado: leve hundimiento, común a todas las variantes. */
.btn:active {
  transform: translateY(1px);
}

/* Deshabilitado (global, no solo dentro de diálogos). */
.btn:disabled,
.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-action);
  color: var(--color-action-text);
  border-color: var(--color-action);
}

.btn-primary:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
}

.btn-secondary {
  background: var(--color-surface-alt);
  color: var(--color-action-ghost-text);
  border-color: var(--color-action-ghost-border);
}

.btn-secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-action);
}

/* help text */
.help-text {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* placeholder map */
.map-placeholder {
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.map-placeholder .map-icon {
  font-size: 32px;
  opacity: .4;
}

/* section title */
/* ---- Jerarquía de encabezados (ver DESIGN.md §6) --------------
   .section-title  título de vista / módulo (pasos: "1 · Configuración base")
   .card-head/.card-title  título de tarjeta de contenido (grande)
   .block-label    rótulo de sub-bloque dentro de una sección
   ---------------------------------------------------------------- */
.section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--space-4);
}

/* Cabecera de tarjeta de contenido: título + acciones a la derecha */
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.card-head h3,
.card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-heading);
}
.card-lead {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
  max-width: 70ch;
}

/* Rótulo de sub-bloque dentro de una sección/tarjeta */
.block-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* divider */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* version index (usado en index.html) */
.version-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Card horizontal (changelog): meta · descripción · botones */
.version-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5) var(--space-6);
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: minmax(190px, 230px) 1fr minmax(160px, auto);
  gap: var(--space-6);
  align-items: start;
  transition: box-shadow .15s, border-color .15s;
}

.version-card .v-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* versión + fecha en una sola línea */
.version-card .v-topline {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.version-card .v-topline .v-date::before {
  content: "·";
  margin-right: var(--space-2);
  color: var(--color-text-disabled);
}

@media (max-width: 720px) {
  .version-card {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

.version-card:hover {
  border-color: var(--color-border-focus);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.version-card .v-number {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
}

.version-card .v-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

.version-card .v-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.version-card .v-changes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.version-card .v-changes li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding-left: var(--space-3);
  position: relative;
}

.version-card .v-changes li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-text-disabled);
}


/* --- components.css --- */
/* ============================================================
   components.css — capa de componentes PROMOVIDOS.
   Hogar de los componentes que se gradúan desde los prototipos
   vía /promote-component (Fase 3 del plan de sistema de diseño).

   Reglas:
   - Solo var(--token). Nunca colores/tamaños crudos (lo bloquea el CI).
   - Un componente = una clase (o bloque de clases) documentada en design-system/.
   - Los componentes base ya existentes (botón, card, kpi-card, badge, campo,
     help-text, títulos) viven en main.css y NO se mueven aquí: se documentan
     igual en la galería. Esta capa es para lo NUEVO que se promueva.

   Orden de carga en cada vista:
     tokens.css → main.css → components.css
   ============================================================ */

/* ------------------------------------------------------------
   [hidden] — utilidad base.
   El atributo `hidden` de HTML trae display:none, pero cualquier
   componente con display:flex/grid lo pisa por especificidad. Esta
   regla lo restituye para poder ocultar con `el.hidden = true` en vez
   de manipular `style.display`, que deja estilos inline en el markup.
   ------------------------------------------------------------ */
[hidden] { display: none !important; }

/* ------------------------------------------------------------
   dialog — diálogo modal de decisión.  (v10, primer promovido)

   Para preguntas que deben responderse en el momento en que
   aparecen, en vez de vivir como configuración permanente en
   pantalla. Si la pregunta puede contestarse más tarde sin
   bloquear nada, NO uses un diálogo: usa un control en línea.

   Estructura mínima:
     .dialog-backdrop > .dialog > .dialog__title
                                + .dialog__desc
                                + .dialog__options | contenido
                                + .dialog__actions

   El contenedor .dialog-backdrop se oculta con el atributo
   [hidden]. Quien lo abra es responsable de: mover el foco al
   diálogo, atrapar el Tab, cerrar con Esc y devolver el foco al
   elemento que lo disparó.
   ------------------------------------------------------------ */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-scrim);
}
.dialog-backdrop[hidden] { display: none; }

.dialog {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  font-family: var(--font-family);
}
.dialog__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}
.dialog__desc {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.dialog__options {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
/* Cancelar (secundaria) a la izquierda y la que avanza a la derecha: separadas
   para que no se confundan y con la primaria donde termina la lectura. */
.dialog__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ------------------------------------------------------------
   drawer — panel lateral (off-canvas).  (v0.5, promovido desde la maqueta)

   Variante lateral del diálogo, para contenido secundario extenso que
   acompaña a la vista sin taparla del todo: p. ej. la "Caracterización
   del sector". Entra desde la derecha. Si el contenido es una decisión
   corta que bloquea, usa .dialog; si es referencia/detalle, usa .drawer.

   Estructura mínima:
     .drawer-backdrop > .drawer > .drawer__head ( .drawer__title + .drawer__close )
                                + .drawer__body

   Igual que el diálogo, quien lo abre es responsable de: mover el foco al
   panel, atrapar el Tab, cerrar con Esc y devolver el foco al disparador.
   Se oculta con el atributo [hidden] en .drawer-backdrop.
   ------------------------------------------------------------ */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  background: var(--color-scrim);
}
.drawer-backdrop[hidden] { display: none; }

.drawer {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  font-family: var(--font-family);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.drawer__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}
.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  cursor: pointer;
}
.drawer__close:hover { color: var(--color-text-primary); background: var(--color-surface-alt); }

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
}