/* ============================================================================
 * site-illos.css — vector illustration vocabulary for the Nama site.
 * Same approach as "Slot direito — produto + prova" (Arte Stand WAIC v2):
 * miniature real-content UI — file chips with colored extensions, white cards,
 * citation pills, Lucide icons. No bitmap assets.
 * ========================================================================== */

.illo {
  width: 100%; height: 100%; padding: 12px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.illo svg { display: block; }

/* file chip — icon + name + colored extension */
.ichip {
  display: flex; align-items: center; gap: 7px;
  background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 9px;
  padding: 6px 11px; font-size: 11.5px; font-weight: 600; color: #3F3F46;
  white-space: nowrap; box-shadow: 0 1px 2px rgba(26,26,26,0.05);
}
.ichip svg { width: 13px; height: 13px; color: #9CA1AB; flex: none; }
.ichip .ext { font-size: 10.5px; font-weight: 700; margin-left: 1px; }
.ext-pdf { color: #F87171; } .ext-xls { color: #34D399; } .ext-doc { color: #60A5FA; }
.ext-eml { color: #A78BFA; } .ext-csv { color: #FBBF24; }
.istack { display: flex; flex-direction: column; gap: 7px; }

.iarrow { color: #9CA1AB; display: flex; flex: none; }
.iarrow svg { width: 15px; height: 15px; }

/* white miniature card */
.icard {
  background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 10px;
  padding: 11px 13px; box-shadow: 0 10px 26px -16px rgba(15,23,42,0.22);
}
.icard .ihead {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; color: #0B1220;
  padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid #EEF0F4;
  white-space: nowrap;
}
.icard .ihead svg { width: 13px; height: 13px; color: #2684FF; flex: none; }
.icard .ihead .ok {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 999px; background: #DCFCE7; color: #166534;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.icard .ihead .ok svg { width: 9px; height: 9px; color: #166534; }

/* skeleton text lines */
.ln { display: block; height: 5px; border-radius: 3px; background: #E8ECF4; margin: 6px 0; }
.ln.b { background: #C7DEFF; }
.ln.w90 { width: 90%; } .ln.w76 { width: 76%; } .ln.w64 { width: 64%; } .ln.w52 { width: 52%; }

/* real micro-copy inside cards (decorative scale) */
.itxt { font-size: 11.5px; line-height: 1.55; color: #3F3F46; font-weight: 500; max-width: 230px; }
.itxt b { color: #09090B; font-weight: 700; }
.ipill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 13px; height: 13px; padding: 0 3px; border-radius: 4px;
  background: #EFF6FF; color: #0050B0; font-size: 8.5px; font-weight: 700;
  vertical-align: 1px;
}
.ihlt {
  background: #EFF6FF; box-shadow: 0 0 0 2px #EFF6FF; border-radius: 2px;
  color: #1E3A8A; font-weight: 600;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ifoot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.ifchip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: 999px; background: #F4F4F5; color: #52525B;
  font-size: 9px; font-weight: 700; white-space: nowrap;
}
.ifchip svg { width: 9px; height: 9px; }

/* file-type badges (Content Library) — calm white "file" tiles; the format label
   carries the SAME pastel extension-color vocabulary used by .ext chips elsewhere,
   so the only loud categorical color on the page stays the hero graph. */
.fbadges { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; }
.fbadge {
  position: relative; width: 38px; height: 44px; border-radius: 6px;
  background: #FFFFFF; border: 1px solid #E4E4E7;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em; color: #94A3B8;
  box-shadow: 0 1px 2px rgba(26,26,26,0.05);
}
.fbadge::after {
  content: ''; position: absolute; top: -1px; right: -1px;
  border-style: solid; border-width: 0 11px 11px 0;
  border-color: #F1F5F9 #F1F5F9 #E4E4E7 transparent;
  border-top-right-radius: 6px;
}
.fb-txt { color: #94A3B8; } .fb-doc { color: #60A5FA; } .fb-ppt { color: #FB7185; }
.fb-csv { color: #FBBF24; } .fb-xls { color: #34D399; } .fb-pdf { color: #F87171; }

/* search hub node (Deep Search) */
.ihub {
  width: 38px; height: 38px; border-radius: 11px; background: #FFFFFF;
  border: 1px solid #C7DEFF; box-shadow: 0 8px 20px -10px rgba(38,132,255,0.45);
  display: grid; place-items: center; flex: none; position: relative; z-index: 1;
}
.ihub svg { width: 17px; height: 17px; color: #2684FF; }

/* connector strokes between illo elements */
.ilink { position: absolute; inset: 0; pointer-events: none; }
.ilink path { fill: none; stroke: #C7DEFF; stroke-width: 1.6; }

/* channel pills (APIs & channels) */
.ipills { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.ipillrow {
  display: flex; align-items: center; gap: 8px;
  background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 999px;
  padding: 4px 12px; font-size: 11.5px; font-weight: 600; color: #3F3F46;
  white-space: nowrap; box-shadow: 0 1px 2px rgba(26,26,26,0.05);
}
.ipillrow svg { width: 13px; height: 13px; color: #2684FF; flex: none; }
.ipillrow .st { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #34D399; }

/* mini bar chart (Analytics) */
.ibars { display: flex; align-items: flex-end; gap: 7px; height: 64px; padding: 0 4px; border-bottom: 1.5px solid #E4E4E7; }
.ibars i { display: block; width: 16px; border-radius: 4px 4px 0 0; background: #C7DEFF; }
.ibars i.hi { background: #2684FF; }
.ibarcap { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; color: #71717A; }
.ibarcap .dot { width: 6px; height: 6px; border-radius: 50%; background: #2684FF; }

/* mini browser (SmartPages) */
.ibrowser { width: 168px; padding: 0; overflow: hidden; }
.ibrowser .ibar {
  height: 18px; background: #FAFAFA; border-bottom: 1px solid #EEF0F4;
  display: flex; align-items: center; gap: 4px; padding: 0 8px;
}
.ibrowser .ibar i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.ibrowser .ibar i:nth-child(1) { background: #EF4444; }
.ibrowser .ibar i:nth-child(2) { background: #F59E0B; }
.ibrowser .ibar i:nth-child(3) { background: #22C55E; }
.ibrowser .ibody { padding: 10px 12px 12px; }