/* ============================================================================
   B4B × Innovanalisis · Design Tokens v1.0
   Source of truth: Manual de Uso de Marca (Apr 2026) + HANDOFF_identidad_grafica
   ============================================================================ */

@font-face {
  font-family: 'Creato Display';
  src: url('../fonts/CreatoDisplay-Light.woff') format('woff'),
       url('../fonts/CreatoDisplay-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('../fonts/CreatoDisplay-Regular.woff') format('woff'),
       url('../fonts/CreatoDisplay-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('../fonts/CreatoDisplay-Medium.woff') format('woff'),
       url('../fonts/CreatoDisplay-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
/* Nota: Creato Display SemiBold no estaba disponible en el paquete. Usamos
   Medium para peso 600 (visualmente cercano). Si en algún momento se obtiene
   SemiBold real, reemplazar CreatoDisplay-Medium por CreatoDisplay-SemiBold. */
@font-face {
  font-family: 'Creato Display';
  src: url('../fonts/CreatoDisplay-Medium.woff') format('woff'),
       url('../fonts/CreatoDisplay-Medium.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('../fonts/CreatoDisplay-Bold.woff') format('woff'),
       url('../fonts/CreatoDisplay-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Fallback via Google Fonts — geométrica humanista cercana a Creato Display.
   En producción se reemplaza por los archivos propios de Creato (WOFF2 auto-
   alojados en /assets/fonts/). DM Sans queda como secundaria (datos y UI). */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600;6..12,700;6..12,800&display=swap');

:root {
  /* ===== Colores de marca ===== */
  --c-verde:       #93BD41;
  --c-verde-700:   #6E9B2C;  /* variante oscura (hover, texto) */
  --c-verde-100:   #EAF2D6;  /* tinte suave */

  --c-azul-claro:  #4DADCE;
  --c-azul-700:    #2A7F9B;
  --c-azul-100:    #E0F0F6;

  --c-azul-oscuro: #122E44;  /* navy institucional */
  --c-azul-900:    #0A1D2C;  /* más oscuro */
  --c-azul-050:    #EAF0F5;

  --c-naranja:     #F1AD0A;
  --c-naranja-700: #C48908;
  --c-naranja-100: #FBEACB;

  /* ===== Neutros ===== */
  --c-gris:        #707070;
  --c-gris-400:    #A8A8A8;
  --c-gris-200:    #DCDCDC;
  --c-line:        #E4EBF0;  /* línea sutil con tinte azul */

  --c-surface:     #FFFFFF;
  --c-surface-alt: #F5FAFC;  /* crema/off-white tenue */
  --c-surface-soft:#EEF5F8;

  --c-ink:         #122E44;  /* tinta primaria = azul oscuro */
  --c-muted:       #5B6F80;
  --c-subtle:      #8B9BA8;

  /* ===== Feedback ===== */
  --c-success:     #93BD41;
  --c-warning:     #F1AD0A;
  --c-danger:      #C24A2D;
  --c-info:        #4DADCE;

  /* ===== Tratamiento por módulo (definido en el PPT de Innovanalisis) ===== */
  --mod-1-sip:         #122E44;
  --mod-2-monitoreo:   #93BD41;
  --mod-3-casos:       #4DADCE;
  --mod-4-innovacion:  #F1AD0A;

  /* ===== Tipografía ===== */
  --ff-display: 'Creato Display', 'Nunito Sans', system-ui, sans-serif;
  --ff-body:    'Creato Display', 'Nunito Sans', system-ui, sans-serif;
  --ff-ui:      'DM Sans', system-ui, sans-serif;
  --ff-mono:    'DM Mono', ui-monospace, Menlo, monospace;

  /* Escala tipográfica para web / producto (px) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  56px;
  --fs-5xl:  72px;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-normal:1.5;
  --lh-loose: 1.7;

  /* ===== Espaciado (base 4) ===== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ===== Radii, sombras, duraciones ===== */
  --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(18, 46, 68, 0.05), 0 1px 1px rgba(18, 46, 68, 0.04);
  --sh-2: 0 2px 6px rgba(18, 46, 68, 0.06), 0 1px 2px rgba(18, 46, 68, 0.04);
  --sh-3: 0 10px 28px rgba(18, 46, 68, 0.09), 0 2px 6px rgba(18, 46, 68, 0.05);
  --sh-ring-focus: 0 0 0 3px rgba(147, 189, 65, 0.35);

  --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  --max-w-content: 1240px;
}

/* ============================================================================
   Base
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  color: var(--c-ink);
  background: var(--c-surface);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--c-azul-oscuro);
}
p { margin: 0; line-height: var(--lh-normal); }
a { color: var(--c-azul-700); text-decoration: none; transition: color var(--dur-fast); }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

.container {
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding-left: var(--sp-8);
  padding-right: var(--sp-8);
}

/* ============================================================================
   Componentes base (mini-kit)
   ============================================================================ */

/* Botones */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 12px 22px;
  font-family: var(--ff-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn--primary   { background: var(--c-verde); color: #0A1D11; border-color: var(--c-verde); }
.btn--primary:hover { background: var(--c-verde-700); border-color: var(--c-verde-700); color: #fff; }

.btn--secondary { background: var(--c-azul-oscuro); color: #fff; border-color: var(--c-azul-oscuro); }
.btn--secondary:hover { background: var(--c-azul-900); }

.btn--ghost     { background: transparent; color: var(--c-azul-oscuro); border-color: var(--c-line); }
.btn--ghost:hover { background: var(--c-surface-alt); border-color: var(--c-azul-oscuro); }

.btn--warning   { background: var(--c-naranja); color: #3E2A02; border-color: var(--c-naranja); }
.btn--warning:hover { background: var(--c-naranja-700); color: #fff; }

.btn:focus-visible { outline: none; box-shadow: var(--sh-ring-focus); }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-family: var(--ff-ui);
  border-radius: var(--r-pill);
  background: var(--c-surface-alt);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  letter-spacing: 0.02em;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-gris); }
.chip--green  { background: var(--c-verde-100);   color: var(--c-verde-700);   border-color: transparent; }
.chip--blue   { background: var(--c-azul-100);    color: var(--c-azul-700);    border-color: transparent; }
.chip--navy   { background: var(--c-azul-050);    color: var(--c-azul-oscuro); border-color: transparent; }
.chip--amber  { background: var(--c-naranja-100); color: #7A5A04;              border-color: transparent; }
.chip--muted  { background: var(--c-surface-soft); color: var(--c-muted); }
.chip--danger { background: #FAE3DC; color: #8A3418; }

/* Cards */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.card--flat { box-shadow: none; }
.card--elev { box-shadow: var(--sh-2); }
.card--amber { background: #FEF7E6; border-color: #F3D68A; }

/* Inputs */
.input, .select, .textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-verde);
  box-shadow: var(--sh-ring-focus);
}
.label {
  display: block;
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Semáforo */
.semaforo {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: #fff;
}
.semaforo .light { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.semaforo--verde  { border-left: 3px solid var(--c-verde); }
.semaforo--verde .light  { background: var(--c-verde); }
.semaforo--amarillo { border-left: 3px solid var(--c-naranja); }
.semaforo--amarillo .light { background: var(--c-naranja); }
.semaforo--rojo   { border-left: 3px solid var(--c-danger); }
.semaforo--rojo .light   { background: var(--c-danger); }

/* Utilidades rápidas */
.eyebrow {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.text-muted { color: var(--c-muted); }
.font-mono  { font-family: var(--ff-mono); }
.divider    { height: 1px; background: var(--c-line); width: 100%; }

/* Módulo-color helpers */
.band-m1 { background: var(--mod-1-sip); color: #fff; }
.band-m2 { background: var(--mod-2-monitoreo); color: #0A1D11; }
.band-m3 { background: var(--mod-3-casos); color: #fff; }
.band-m4 { background: var(--mod-4-innovacion); color: #3E2A02; }

/* Density tweak scope */
[data-density="compact"] { --sp-6: 16px; --sp-8: 20px; --sp-12: 32px; --sp-16: 44px; }
[data-intensity="sobria"] {
  --c-verde: #7FAB33;
  --c-naranja: #D69608;
  --c-azul-claro: #3B95B3;
}