/* ============================================================================
   DGSN Civil · CIVIL-PLATFORM COMPONENTS
   Extends the shared design system (tokens/base/components/layout) with the
   UI unique to the civil-information platform: classification chrome, search
   console, segmented search modes, result rows, the individual dossier header,
   record blocks and the ID-card preview. Loaded LAST so it can build on tokens.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   PANEL: surface card crowned with the tricolor flag ribbon
   --------------------------------------------------------------------------- */
.panel {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-7);
  overflow: hidden;
}
.panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--ribbon);
}
.panel__head { margin-bottom: var(--space-5); }
@media (max-width: 560px) { .panel { padding: var(--space-5); } }

/* ---------------------------------------------------------------------------
   CLASSIFICATION CHROME  (confidentiality + audit framing)
   --------------------------------------------------------------------------- */
.classif-chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-heading);
  font-size: 0.62rem; font-weight: var(--fw-black);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--c-red-700); background: var(--color-danger-bg);
  border-radius: var(--radius-full); white-space: nowrap;
}
.classif-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
@media (max-width: 900px) { .classif-chip { display: none; } }

/* Content-level confidentiality / audit notice */
.classif-note {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  font-size: var(--fs-sm); color: var(--color-ink-soft);
}
.classif-note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-accent); }
.classif-note strong { color: var(--color-ink); }

/* Sidebar audit reminder */
.app__nav-note {
  margin-top: var(--space-5);
  display: flex; gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05);
  color: var(--color-chrome-ink-muted);
  font-size: var(--fs-xs); line-height: 1.45;
}
.app__nav-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-highlight); margin-top: 1px; }

/* User dropdown header */
.menu__head { padding: var(--space-2) var(--space-3); }
.menu__head strong { display: block; font-size: var(--fs-sm); color: var(--color-ink); }
.menu__head span { font-size: var(--fs-xs); color: var(--color-ink-muted); font-family: var(--font-mono); }

/* ---------------------------------------------------------------------------
   LARGE INPUT (search bar)
   --------------------------------------------------------------------------- */
.input--lg { padding: 0.95rem 1rem; font-size: var(--fs-md); }
.input-group--lg .input { padding-left: 3rem; }
.input-group--lg .input-group__icon { left: 1rem; }
.input-group--lg .input-group__icon svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   SEARCH CONSOLE
   --------------------------------------------------------------------------- */
.seg {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.seg__btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.6rem 0.95rem;
  font-family: var(--font-heading);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--color-ink-soft);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.seg__btn svg { width: 16px; height: 16px; }
.seg__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.seg__btn.is-active {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
  box-shadow: var(--shadow-sm);
}

.searchbar { display: flex; gap: var(--space-3); align-items: stretch; }
.searchbar .input-group { flex: 1; }
.searchbar .btn { flex-shrink: 0; }
@media (max-width: 620px) {
  .searchbar { flex-direction: column; }
  .searchbar .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   SOURCE CARD (connected national registries)
   --------------------------------------------------------------------------- */
.source {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.source__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft); color: var(--color-primary);
}
.source__icon svg { width: 22px; height: 22px; }
.source__meta { min-width: 0; }
.source__meta strong { display: block; font-size: var(--fs-sm); color: var(--color-ink); }
.source__meta span { font-size: var(--fs-xs); color: var(--color-ink-muted); }
.source__status { margin-left: auto; flex-shrink: 0; }
@media (max-width: 400px) {
  .source { flex-wrap: wrap; row-gap: var(--space-2); }
  .source__status { margin-left: calc(44px + var(--space-3)); }
}

/* ---------------------------------------------------------------------------
   PERSON RESULT ROW
   --------------------------------------------------------------------------- */
.results-list { display: grid; gap: var(--space-3); }
.person {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.person:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--c-green-200); }
.person__photo {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: grid; place-items: center; overflow: hidden;
  background: var(--color-primary-soft); color: var(--color-primary);
  font-family: var(--font-heading); font-weight: var(--fw-black); font-size: var(--fs-lg);
  border: 1px solid var(--color-border);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__main { flex: 1; min-width: 0; }
.person__name {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-md); color: var(--color-ink);
}
.person__sub { font-size: var(--fs-sm); color: var(--color-ink-muted); margin-top: 2px; }
.person__ids { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.person__id { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs-xs); color: var(--color-ink-soft); }
.person__id svg { width: 14px; height: 14px; color: var(--color-ink-muted); }
.person__id b { font-weight: var(--fw-semibold); color: var(--color-ink); font-family: var(--font-mono); }
.person__go { flex-shrink: 0; color: var(--color-ink-muted); display: grid; place-items: center; }
.person__go svg { width: 22px; height: 22px; }
.person:hover .person__go { color: var(--color-primary); }
@media (max-width: 620px) {
  .person { gap: var(--space-3); }
  .person__go { display: none; }
}

/* ---------------------------------------------------------------------------
   DOSSIER HEADER (individual profile)
   --------------------------------------------------------------------------- */
.dossier { display: flex; gap: var(--space-6); align-items: flex-start; }
.dossier__body { flex: 1; min-width: 0; }
.dossier__name { font-size: var(--fs-2xl); }
.dossier__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.dossier__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); }
.dossier__fact { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--fs-sm); color: var(--color-ink-soft); }
.dossier__fact svg { width: 16px; height: 16px; color: var(--color-ink-muted); }
.dossier__fact b { color: var(--color-ink); font-weight: var(--fw-semibold); font-family: var(--font-mono); }
@media (max-width: 640px) {
  .dossier { gap: var(--space-4); }
}
@media (max-width: 460px) {
  .dossier { flex-direction: column; align-items: center; text-align: center; }
  .dossier__facts, .dossier__tags { justify-content: center; }
}

/* ---------------------------------------------------------------------------
   ID PHOTO / PORTRAIT PLACEHOLDER
   --------------------------------------------------------------------------- */
.id-photo {
  position: relative;
  width: 128px; height: 160px; flex-shrink: 0;
  border-radius: var(--radius-md); overflow: hidden;
  background: linear-gradient(160deg, var(--c-green-100), var(--c-green-200));
  color: var(--c-green-800);
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: var(--fw-black); font-size: var(--fs-4xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.id-photo img { width: 100%; height: 100%; object-fit: cover; }
.id-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ribbon);
}
.id-photo--sm { width: 96px; height: 120px; font-size: var(--fs-2xl); }

/* ---------------------------------------------------------------------------
   BULLETIN CARDS (judicial record bulletins B1/B2/B3)
   --------------------------------------------------------------------------- */
.bulletin {
  text-align: center; padding: var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface);
}
.bulletin__n { font-family: var(--font-heading); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-ink-muted); }
.bulletin__status { font-family: var(--font-heading); font-weight: var(--fw-black); font-size: var(--fs-lg); color: var(--color-success); margin-top: 4px; }
.bulletin__status.has { color: var(--color-warning); }
.bulletin__meta { font-size: var(--fs-xs); color: var(--color-ink-muted); margin-top: var(--space-2); }

/* ---------------------------------------------------------------------------
   RECORD SOURCE STAMP (provenance line on record tabs)
   --------------------------------------------------------------------------- */
.source-stamp {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--fs-xs); color: var(--color-ink-muted);
}
.source-stamp svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------------
   ID-CARD PREVIEW (landing hero panel)
   --------------------------------------------------------------------------- */
.idcard {
  position: relative;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, #fff, var(--c-gray-50));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  overflow: hidden;
}
.idcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--ribbon); }
.idcard__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.idcard__head img { width: 34px; height: 34px; }
.idcard__head strong { font-family: var(--font-heading); font-size: var(--fs-sm); color: var(--color-ink); display: block; }
.idcard__head span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-ink-muted); }
.idcard__body { display: flex; gap: var(--space-4); }
.idcard__grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
.idcard__grid dt { font-size: 0.6rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-ink-muted); }
.idcard__grid dd { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-ink); }
.idcard__match {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border-strong);
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--color-success); font-weight: var(--fw-semibold);
}
.idcard__match svg { width: 16px; height: 16px; }
@media (max-width: 420px) {
  .idcard__body { flex-direction: column; }
  .idcard__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   STEP CARDS (landing "how it works")
   --------------------------------------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); counter-reset: flow; }
.flow__item { position: relative; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.flow__num {
  counter-increment: flow;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: var(--space-3);
  background: var(--color-primary-soft); color: var(--color-primary);
  font-family: var(--font-heading); font-weight: var(--fw-black);
}
.flow__num::before { content: counter(flow); }
.flow__item h4 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.flow__item p { font-size: var(--fs-sm); }
@media (max-width: 900px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .flow { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   DGSN EMBLEM (police shield)
   The shared layout crops emblems into circles, which suits round crests only.
   The shield keeps its own outline: small corner radius, contained artwork.
   The white plate and padding come from the shared rules, so the emblem stays
   readable on the dark sidebar and footer as well as on light cards.
   --------------------------------------------------------------------------- */
.brand__logo,
.hero__panel-emblem,
.auth__aside-emblem {
  border-radius: var(--radius-sm);
  object-fit: contain;
}