/* ============================================================
   @itrend-minecon/ui v0.3.0 — bundle de entrega (dist/).
   GENERADO por scripts/dist-build.js — NO EDITAR A MANO.
   Orden de carga: tokens → main → components.
   Generado: 2026-09-01
   ============================================================ */

/* --- 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;
  --color-success: #334155;
  --color-success-bg: #e2e8f0;
  --color-warning: #475569;
  --color-warning-bg: #f1f5f9;
  --color-error: #1e293b;
  --color-error-bg: #e2e8f0;
  --color-info: #1d4ed8;
  --color-info-bg: #eff6ff;
  /* ÚNICA excepción de color a la escala neutra. Reservado SOLO para violación de restricción de presupuesto (CBA). No usar para estados informativos. */
  --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);
  --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;
}


/* --- 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: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.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: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.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);
}

/* 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;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}

.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);
}

/* 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);
}

.dialog__actions .btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}