/* ==========================================================================
   CAMJAL Microcrédito — design tokens & base styles
   Source of truth: docs/02-design/DESIGN.md (from the brand manual v1.0).
   Change colours HERE, never inline. Components reference tokens only.
   Self-hosted fonts only — no CDN (ADR-0001 / SECURITY.md).
   ========================================================================== */

@font-face { font-family: "Sora"; src: url("../fonts/Sora-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Brand */
  --c-navy: #0B1F3A;        /* Azul Marinho — primary */
  --c-gold: #C9A24A;        /* Ouro CAMJAL — accent, values */
  --c-pearl: #F6F4EF;       /* Pérola — app background */
  --c-blue: #1C3A63;        /* Azul Profundo — support */
  --c-gold-light: #E4C987;  /* Ouro Claro — gold on dark */
  --c-graphite: #1F2430;    /* Grafite — body text */
  --c-mist: #E7EAF0;        /* Névoa — lines, tables */
  --c-white: #FFFFFF;

  /* Loan status (system) — see DESIGN.md §3 */
  --s-on-track: #2E8B57;    /* Em dia */
  --s-due-soon: #C9A24A;    /* A vencer */
  --s-overdue: #C2412D;     /* Vencido */
  --s-at-risk: #1C3A63;     /* Em risco / carência */
  --s-default: #8A5A1E;     /* Incumprimento */
  --s-written-off: #8A93A3; /* Dívida morta */
  --s-settled: #2E8B57;     /* Liquidado */

  /* Semantic */
  --c-bg: var(--c-pearl);
  --c-surface: var(--c-white);
  --c-text: var(--c-graphite);
  --c-muted: #5B6475;
  --c-line: var(--c-mist);
  --c-primary: var(--c-navy);
  --c-accent: var(--c-gold);
  --c-danger: var(--s-overdue);
  --c-success: var(--s-on-track);

  /* Type */
  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape & space */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --shadow: 0 1px 2px rgba(11, 31, 58, .06), 0 4px 16px rgba(11, 31, 58, .06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--c-navy); line-height: 1.2; margin: 0 0 var(--space-3); }
a { color: var(--c-blue); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-gold); outline-offset: 2px;
}
.num, .money { font-variant-numeric: tabular-nums; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); background: var(--c-white); padding: var(--space-2) var(--space-3); z-index: 100; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
.stack > * + * { margin-top: var(--space-4); }
.muted { color: var(--c-muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 18px; border-radius: var(--radius); border: 1px solid transparent; font: 700 15px var(--font-head); text-decoration: none; cursor: pointer; }
.btn--primary { background: var(--c-navy); color: var(--c-white); }
.btn--accent { background: var(--c-gold); color: var(--c-navy); }
.btn--ghost { background: transparent; border-color: var(--c-line); color: var(--c-navy); }
.btn--danger { background: var(--c-danger); color: var(--c-white); }

/* Status chip */
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 700 12px var(--font-body); letter-spacing: .02em; white-space: nowrap; }
.chip--on-track { color: var(--s-on-track); background: color-mix(in srgb, var(--s-on-track) 14%, transparent); }
.chip--due-soon { color: #8A6A1E; background: color-mix(in srgb, var(--s-due-soon) 22%, transparent); }
.chip--overdue { color: var(--s-overdue); background: color-mix(in srgb, var(--s-overdue) 14%, transparent); }
.chip--at-risk { color: var(--s-at-risk); background: color-mix(in srgb, var(--s-at-risk) 14%, transparent); }
.chip--default { color: var(--s-default); background: color-mix(in srgb, var(--s-default) 14%, transparent); }
.chip--written-off { color: #5B6475; background: color-mix(in srgb, var(--s-written-off) 22%, transparent); }
.chip--settled { color: var(--s-settled); background: color-mix(in srgb, var(--s-settled) 14%, transparent); }

/* Card */
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow); }

/* Welcome / auth shell */
.shell { min-height: 100vh; display: grid; place-items: center; padding: var(--space-5); }
.shell__card { max-width: 440px; width: 100%; text-align: center; }
.shell__logo { height: 56px; margin: 0 auto var(--space-5); display: block; }

/* Error pages */
.error-page { padding: var(--space-7) 0; text-align: center; }
.error-code { font: 700 72px var(--font-head); color: var(--c-gold); }

/* ==========================================================================
   Staff shell & components (DESIGN §5). Tokens only — no inline styles (CSP).
   ========================================================================== */

.btn--block { display: flex; justify-content: center; width: 100%; min-height: 44px; }
.btn--inverse { color: var(--c-white); border-color: rgba(255, 255, 255, .35); }
.btn { min-height: 44px; }
button.btn { font-family: var(--font-head); }

/* Forms */
.field { display: grid; gap: var(--space-1); text-align: left; }
.field label { font-weight: 600; color: var(--c-navy); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--c-text);
  background: var(--c-white); border: 1px solid #B9C0CC; border-radius: var(--radius);
}
.field__help { color: var(--c-muted); }
.field__error { color: var(--c-danger); font-weight: 600; }
.field--error input { border-color: var(--c-danger); }
.money-input { text-align: right; font-variant-numeric: tabular-nums; }

/* Flash banner */
.flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid var(--c-line); background: var(--c-white); text-align: left; }
.flash--ok { border-color: var(--c-success); color: #1F6B41; background: color-mix(in srgb, var(--c-success) 10%, white); }
.flash--error { border-color: var(--c-danger); color: #8E2C1D; background: color-mix(in srgb, var(--c-danger) 8%, white); }
.flash--warning { border-color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 14%, white); }

/* App frame */
body.app { background: var(--c-bg); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--c-navy); color: var(--c-white); position: sticky; top: 0; z-index: 20; }
.topbar__brand { display: inline-flex; }
.topbar__meta { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; }
.topbar__branch { color: var(--c-gold-light); font-weight: 600; }
.topbar__user { display: grid; line-height: 1.2; text-align: right; }
.topbar__user small { color: var(--c-gold-light); }
.topbar__logout { margin: 0; }
.lang-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font: 700 13px var(--font-head); color: var(--c-gold-light); text-decoration: none; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--radius); }
.shell__card .lang-toggle { color: var(--c-navy); border-color: var(--c-line); }

.frame { display: grid; grid-template-columns: 220px 1fr; max-width: 1200px; margin: 0 auto; min-height: calc(100vh - 56px); }
.sidenav { padding: var(--space-5) var(--space-3); }
.sidenav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.sidenav a { display: block; padding: 10px 14px; border-radius: var(--radius); color: var(--c-navy); text-decoration: none; font-weight: 600; min-height: 44px; }
.sidenav a:hover { background: var(--c-mist); }
.sidenav a[aria-current="page"] { background: var(--c-navy); color: var(--c-white); }
.content { padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-4); align-content: start; }

.tabbar { display: none; }

/* KPI tiles */
.kpi-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kpi { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow); }
.kpi__label { color: var(--c-muted); font-size: 14px; font-weight: 600; }
.kpi__value { font: 700 28px var(--font-head); color: var(--c-navy); margin-top: var(--space-1); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 14px; border-bottom: 1px solid var(--c-line); text-align: left; }
.table thead th { position: sticky; top: 0; background: var(--c-pearl); color: var(--c-navy); font: 700 13px var(--font-head); }
.table td.money, .table th.money { text-align: right; }
.table tbody tr:hover { background: color-mix(in srgb, var(--c-mist) 50%, white); }

/* Dialog (native <dialog>) */
dialog { border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow); max-width: 480px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(11, 31, 58, .5); }

/* Phone: bottom tab bar replaces the side nav */
@media (max-width: 760px) {
  .frame { grid-template-columns: 1fr; }
  .sidenav { display: none; }
  .content { padding-bottom: 88px; }
  .topbar__branch, .topbar__user small { display: none; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--c-white); border-top: 1px solid var(--c-line); }
  .tabbar a { flex: 1; display: grid; place-items: center; min-height: 56px; padding: 6px; color: var(--c-navy); text-decoration: none; font: 600 12px var(--font-body); }
  .tabbar a[aria-current="page"] { color: var(--c-white); background: var(--c-navy); }
}

@media print { .topbar, .sidenav, .tabbar, .skip-link { display: none; } .frame { display: block; } }

/* Admin screens */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.filters .field { min-width: 160px; }
.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--c-line); }
.tabs a { padding: 10px 16px; text-decoration: none; color: var(--c-navy); font-weight: 600; border-bottom: 3px solid transparent; min-height: 44px; }
.tabs a[aria-current="page"] { border-bottom-color: var(--c-gold); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.actions form { margin: 0; }
.check { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; min-height: 44px; }
.check input { width: 20px; height: 20px; }
fieldset.card { border: 1px solid var(--c-line); margin: 0; }
fieldset.card legend { font: 700 16px var(--font-head); color: var(--c-navy); padding: 0 var(--space-2); }
.form--narrow { max-width: 560px; }
.form__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pagination { display: flex; gap: var(--space-3); align-items: center; justify-content: center; }
pre.json { background: var(--c-pearl); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--space-3); overflow-x: auto; margin: 0 0 var(--space-3); font-size: 13px; }
code { font-size: 13px; background: var(--c-pearl); padding: 1px 6px; border-radius: var(--radius-sm); }
.placeholders code { display: inline-block; margin: 2px 0; }
.topbar__link { color: var(--c-gold-light); font-size: 13px; }
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; width: 100%; padding: 10px 12px; border: 1px solid #B9C0CC; border-radius: var(--radius); }
details summary { cursor: pointer; color: var(--c-blue); }

/* Clients */
.client-head { display: flex; align-items: center; gap: var(--space-4); }
.client-photo { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; border: 2px solid var(--c-line); }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin: 0; }
.details dt { color: var(--c-muted); font-size: 13px; }
.details dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.reference-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.tabs { overflow-x: auto; }
.tabs a { white-space: nowrap; }

/* Collateral */
.gallery { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.gallery img { width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--c-line); }
.label-page { background: var(--c-white); margin: 0; padding: var(--space-4); }
.label80 { width: 80mm; max-width: 100%; margin: 0 auto; padding: 4mm; border: 1px dashed var(--c-line); font-size: 12px; }
.label80 p { margin: 0 0 2mm; overflow-wrap: anywhere; }
.label80__brand { font: 700 11px var(--font-head); letter-spacing: .04em; }
.label80__tag { font: 700 28px var(--font-head); letter-spacing: .06em; }
@media print {
  @page { size: 80mm auto; margin: 0; }
  .label-page { padding: 0; }
  .label80 { border: 0; width: 80mm; }
  .no-print { display: none; }
}

/* Rules */
.rule-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .rule-layout { grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); } .sim-panel { position: sticky; top: var(--space-4); } }
.step-no { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: var(--space-2); border-radius: 50%; background: var(--c-navy); color: var(--c-white); font: 700 14px var(--font-head); }
.sim-panel { display: grid; gap: var(--space-3); }
.sim-summary { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: 0; }
.table--compact th, .table--compact td { padding: 6px 8px; font-size: 13px; }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { font-weight: 600; color: var(--c-navy); padding: 0; }