/* ==========================================================
   Nicaragua en Línea — Civic Modern Design System
   Version 2.0 — Full redesign
   ========================================================== */

/* -------- Fonts (Google) -------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ==========================================================
     COLOR — All color tokens moved to color-system.css.
     Load color-system.css BEFORE this file. The tokens below
     define non-color design decisions (radius, shadow, type, layout).
     ========================================================== */

  /* Shadows use the brand hue for tonal coherence (defined in color-system.css) */
  /* --nel-shadow-brand is set by color-system.css */

  /* Focus ring aliases into color-system.css */
  /* --nel-focus-ring is set by color-system.css */

  /* ---------- RADIUS ---------- */
  --nel-r-xs:             4px;
  --nel-r-sm:             8px;
  --nel-r-md:             12px;
  --nel-r-lg:             16px;
  --nel-r-xl:             20px;
  --nel-r-pill:           999px;

  /* ---------- SHADOWS (very restrained) ---------- */
  --nel-shadow-1:         0 1px 2px rgba(15,23,42,.06);
  --nel-shadow-2:         0 4px 12px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --nel-shadow-3:         0 12px 32px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  /* --nel-shadow-brand & --nel-focus-ring — see color-system.css */

  /* ---------- SPACING (8pt) ---------- */
  --nel-s-1:              4px;
  --nel-s-2:              8px;
  --nel-s-3:              12px;
  --nel-s-4:              16px;
  --nel-s-5:              24px;
  --nel-s-6:              32px;
  --nel-s-7:              48px;
  --nel-s-8:              64px;
  --nel-s-9:              80px;
  --nel-s-10:             120px;

  /* ---------- TYPOGRAPHY ---------- */
  --nel-font-sans:        'Manrope', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --nel-font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Type scale — modest, government-appropriate */
  --nel-t-display:        clamp(40px, 4.5vw, 60px);   /* Hero H1 */
  --nel-t-h1:             clamp(30px, 3vw, 40px);
  --nel-t-h2:             clamp(24px, 2.2vw, 30px);
  --nel-t-h3:             20px;
  --nel-t-h4:             17px;
  --nel-t-body-lg:        17px;
  --nel-t-body:           15px;
  --nel-t-sm:             13px;
  --nel-t-xs:             12px;
  --nel-t-micro:          11px;

  --nel-lh-display:       1.08;
  --nel-lh-heading:       1.2;
  --nel-lh-body:          1.55;
  --nel-lh-tight:         1.4;

  /* Track (letter-spacing) */
  --nel-track-tight:      -0.02em;
  --nel-track-normal:     -0.005em;
  --nel-track-caps:       0.06em;

  /* ---------- LAYOUT ---------- */
  --nel-container:        1280px;
  --nel-container-narrow: 1080px;
  --nel-gutter:           24px;
  --nel-header-h:         72px;

  /* ---------- MOTION ---------- */
  --nel-ease-out:         cubic-bezier(.22,.61,.36,1);
  --nel-ease-in-out:      cubic-bezier(.6,.05,.4,.95);
  --nel-t-fast:           140ms;
  --nel-t-med:            240ms;
  --nel-t-slow:           360ms;
}

/* ==================== BASE ==================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--nel-font-sans);
  font-size: var(--nel-t-body);
  line-height: var(--nel-lh-body);
  color: var(--nel-fg);
  background: var(--nel-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  letter-spacing: var(--nel-track-normal);
}

/* Prevent Spanish long-word hyphenation */
html[lang="es"] body,
html[lang="es"] h1, html[lang="es"] h2, html[lang="es"] h3, html[lang="es"] h4,
html[lang="es"] .no-hyphens {
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--nel-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection { background: var(--nel-brand-soft); color: var(--nel-brand-ink); }

/* Focus visible for keyboard nav */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--nel-focus-ring);
  border-color: var(--nel-accent);
}

/* ==================== HEADINGS ==================== */
h1, .h1 { font-size: var(--nel-t-h1); line-height: var(--nel-lh-heading); font-weight: 700; letter-spacing: var(--nel-track-tight); margin: 0; color: var(--nel-brand-ink); }
h2, .h2 { font-size: var(--nel-t-h2); line-height: var(--nel-lh-heading); font-weight: 700; letter-spacing: var(--nel-track-tight); margin: 0; color: var(--nel-brand-ink); }
h3, .h3 { font-size: var(--nel-t-h3); line-height: var(--nel-lh-tight); font-weight: 600; margin: 0; color: var(--nel-brand-ink); }
h4, .h4 { font-size: var(--nel-t-h4); line-height: var(--nel-lh-tight); font-weight: 600; margin: 0; color: var(--nel-brand-ink); }

.display { font-size: var(--nel-t-display); line-height: var(--nel-lh-display); font-weight: 700; letter-spacing: var(--nel-track-tight); color: var(--nel-brand-ink); margin: 0; }

.eyebrow {
  font-size: var(--nel-t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--nel-track-caps);
  color: var(--nel-accent);
}

.lead { font-size: var(--nel-t-body-lg); color: var(--nel-fg-secondary); line-height: 1.6; }
.meta { font-size: var(--nel-t-sm); color: var(--nel-fg-muted); }
.mono { font-family: var(--nel-font-mono); font-size: 0.92em; }

/* ==================== CONTAINERS ==================== */
.container { max-width: var(--nel-container); margin: 0 auto; padding: 0 var(--nel-gutter); }
.container-narrow { max-width: var(--nel-container-narrow); margin: 0 auto; padding: 0 var(--nel-gutter); }

/* ==================== BUTTON ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  height: 44px;
  border-radius: var(--nel-r-sm);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: all var(--nel-t-fast) var(--nel-ease-out);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--nel-brand);
  color: #fff;
  box-shadow: var(--nel-shadow-1);
}
.btn-primary:hover { background: var(--nel-brand-ink); box-shadow: var(--nel-shadow-brand); }

.btn-accent {
  background: var(--nel-accent);
  color: #fff;
}
.btn-accent:hover { background: var(--nel-accent-ink); }

.btn-secondary {
  background: var(--nel-surface);
  color: var(--nel-brand-ink);
  border-color: var(--nel-line-strong);
}
.btn-secondary:hover { background: var(--nel-surface-2); border-color: var(--nel-brand-mid); }

/* Ver guía — outlined secondary, brand-tinted; pairs with primary / Próximamente */
.btn-guide {
  gap: 6px;
  background: var(--nel-surface, #fff);
  color: var(--nel-brand-800, #124696);
  border: 1px solid var(--nel-brand-200, #C7D6EE);
  font-weight: 600;
}
.btn-guide:hover { background: var(--nel-brand-50, #F3F6FC); border-color: var(--nel-brand-600, #1E7DDD); }
.btn-guide svg { flex-shrink: 0; }

.btn-ghost {
  background: transparent;
  color: var(--nel-brand-ink);
}
.btn-ghost:hover { background: var(--nel-surface-2); }

.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; border-radius: 10px; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 6px; }
.btn-icon { padding: 0; width: 44px; }
.btn-icon.btn-sm { width: 36px; }

.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ==================== INPUT ==================== */
.input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--nel-surface);
  border: 1px solid var(--nel-line-strong);
  border-radius: var(--nel-r-sm);
  color: var(--nel-fg);
  font-size: 15px;
  transition: all var(--nel-t-fast) var(--nel-ease-out);
}
.input::placeholder { color: var(--nel-fg-subtle); }
.input:hover { border-color: var(--nel-brand-mid); }
.input:focus { border-color: var(--nel-accent); box-shadow: var(--nel-focus-ring); outline: none; }
.input.is-invalid { border-color: var(--nel-danger); background: var(--nel-danger-soft); }
.input-lg { height: 56px; padding: 0 20px; font-size: 17px; border-radius: 10px; }

textarea.input { height: auto; padding: 12px 14px; min-height: 120px; resize: vertical; }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--nel-fg-secondary); }
.field-label .req { color: var(--nel-danger); margin-left: 2px; }
.field-hint { font-size: 12px; color: var(--nel-fg-muted); }
.field-error { font-size: 12px; color: var(--nel-danger); display: flex; align-items: center; gap: 4px; }

/* ==================== CARD ==================== */
.card {
  background: var(--nel-surface);
  border: 1px solid var(--nel-line);
  border-radius: var(--nel-r-md);
  overflow: hidden;
}
.card-hover { transition: all var(--nel-t-med) var(--nel-ease-out); }
.card-hover:hover { border-color: var(--nel-brand-mid); box-shadow: var(--nel-shadow-2); transform: translateY(-2px); }
.card-body { padding: 20px; }
.card-body-lg { padding: 28px; }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--nel-line); display: flex; align-items: center; justify-content: space-between; }
.card-footer { padding: 12px 20px; border-top: 1px solid var(--nel-line); background: var(--nel-canvas); }

/* ==================== BADGE ==================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  height: 24px;
  border-radius: var(--nel-r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.badge-brand   { background: var(--nel-brand-soft); color: var(--nel-brand-ink); }
.badge-success { background: var(--nel-success-soft); color: var(--nel-success-ink); }
.badge-warning { background: var(--nel-warning-soft); color: var(--nel-warning-ink); }
.badge-danger  { background: var(--nel-danger-soft); color: var(--nel-danger-ink); }
.badge-info    { background: var(--nel-info-soft); color: var(--nel-accent-ink); }
.badge-neutral { background: var(--nel-surface-2); color: var(--nel-fg-secondary); border: 1px solid var(--nel-line); }

.badge-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* Institution chip */
.chip-inst {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 4px;
  border-radius: var(--nel-r-pill);
  background: var(--nel-brand-soft);
  color: var(--nel-brand-ink);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--nel-brand-mid);
}
.chip-inst .chip-avatar {
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--nel-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}

/* ==================== ICONS ==================== */
.icon { width: 20px; height: 20px; stroke-width: 1.75; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

.icon-plate {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--nel-brand-soft);
  color: var(--nel-brand);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-plate-lg { width: 56px; height: 56px; border-radius: 14px; }

/* Service illustration frame — for 2.5D icons */
.svc-illus {
  width: 72px; height: 72px;
  display: block;
  object-fit: contain;
}
.svc-illus-lg { width: 96px; height: 96px; }

/* ==================== TABLE ==================== */
.table-wrap {
  background: var(--nel-surface);
  border: 1px solid var(--nel-line);
  border-radius: var(--nel-r-md);
  overflow: hidden;
}
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table thead th {
  text-align: left;
  padding: 12px 16px;
  background: var(--nel-canvas);
  border-bottom: 1px solid var(--nel-line-strong);
  color: var(--nel-fg-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--nel-track-caps);
}
.table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--nel-line);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--nel-canvas); }

/* ==================== STEPPER ==================== */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}
.step {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  position: relative;
}
.step + .step::before {
  content: '';
  position: absolute;
  left: -50%;
  top: 18px;
  width: 100%;
  height: 2px;
  background: var(--nel-line-strong);
  z-index: 0;
}
.step.is-complete + .step::before,
.step + .step.is-current::before { background: var(--nel-brand); }
.step-num {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--nel-surface);
  border: 2px solid var(--nel-line-strong);
  color: var(--nel-fg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  z-index: 1;
  flex-shrink: 0;
  transition: all var(--nel-t-med) var(--nel-ease-out);
}
.step-label { font-size: 13px; color: var(--nel-fg-muted); font-weight: 500; }
.step.is-current .step-num { background: var(--nel-brand); border-color: var(--nel-brand); color: #fff; box-shadow: 0 0 0 4px var(--nel-brand-soft); }
.step.is-current .step-label { color: var(--nel-brand-ink); font-weight: 600; }
.step.is-complete .step-num { background: var(--nel-success); border-color: var(--nel-success); color: #fff; }
.step.is-complete .step-label { color: var(--nel-fg-secondary); }

/* ==================== TIMELINE ==================== */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 12px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--nel-line);
}
.timeline-item { position: relative; padding-bottom: 24px; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -24px; top: 6px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--nel-surface);
  border: 2px solid var(--nel-line-strong);
}
.timeline-item.is-done::before { background: var(--nel-success); border-color: var(--nel-success); }
.timeline-item.is-current::before { background: var(--nel-brand); border-color: var(--nel-brand); box-shadow: 0 0 0 4px var(--nel-brand-soft); }

/* ==================== TABS ==================== */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--nel-line);
}
.tab {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--nel-fg-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--nel-t-fast);
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
}
.tab:hover { color: var(--nel-brand-ink); }
.tab.is-active { color: var(--nel-brand-ink); border-bottom-color: var(--nel-brand); font-weight: 600; }

/* Segmented control */
.segmented {
  display: inline-flex;
  background: var(--nel-surface-2);
  border-radius: var(--nel-r-sm);
  padding: 3px;
  gap: 2px;
}
.segmented button {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--nel-fg-muted);
  cursor: pointer;
  transition: all var(--nel-t-fast);
}
.segmented button.is-active { background: var(--nel-surface); color: var(--nel-brand-ink); box-shadow: var(--nel-shadow-1); font-weight: 600; }

/* ==================== ALERT ==================== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--nel-r-sm);
  font-size: 14px;
  line-height: 1.5;
}
.alert-icon { flex-shrink: 0; margin-top: 1px; }
.alert-info    { background: var(--nel-info-soft); color: var(--nel-accent-ink); border: 1px solid rgba(11,105,199,.16); }
.alert-success { background: var(--nel-success-soft); color: var(--nel-success-ink); border: 1px solid rgba(15,122,80,.16); }
.alert-warning { background: var(--nel-warning-soft); color: var(--nel-warning-ink); border: 1px solid rgba(180,83,9,.16); }
.alert-danger  { background: var(--nel-danger-soft); color: var(--nel-danger-ink); border: 1px solid rgba(180,35,24,.16); }

/* ==================== UTILITY ==================== */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; }
.gap-1   { gap: 4px; }
.gap-2   { gap: 8px; }
.gap-3   { gap: 12px; }
.gap-4   { gap: 16px; }
.gap-5   { gap: 24px; }
.gap-6   { gap: 32px; }

.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

.hidden { display: none !important; }
.grow   { flex-grow: 1; }
.center { display: grid; place-items: center; }

.text-brand    { color: var(--nel-brand-ink); }
.text-accent   { color: var(--nel-accent); }
.text-muted    { color: var(--nel-fg-muted); }
.text-secondary{ color: var(--nel-fg-secondary); }
.text-success  { color: var(--nel-success-ink); }
.text-warning  { color: var(--nel-warning-ink); }
.text-danger   { color: var(--nel-danger-ink); }

.bg-canvas   { background: var(--nel-canvas); }
.bg-surface  { background: var(--nel-surface); }
.bg-warm     { background: var(--nel-canvas-warm); }
.bg-brand    { background: var(--nel-brand); color: #fff; }
.bg-brand-soft { background: var(--nel-brand-soft); }

.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 24px; } .mt-6 { margin-top: 32px; } .mt-7 { margin-top: 48px; } .mt-8 { margin-top: 64px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 24px; } .mb-6 { margin-bottom: 32px; } .mb-7 { margin-bottom: 48px; } .mb-8 { margin-bottom: 64px; }
.p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-5 { padding: 24px; } .p-6 { padding: 32px; }

.divider { height: 1px; background: var(--nel-line); margin: 24px 0; border: none; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--nel-line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--nel-fg-subtle); background-clip: content-box; border: 3px solid transparent; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}