@font-face {
  font-family: Barlow;
  src: url("assets/barlow_400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Barlow;
  src: url("assets/barlow_600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/barlow_condensed_700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --fundo: #f3f6f8;
  --branco: #fff;
  --tinta: #0c1d2b;
  --suave: #4d6272;
  --azul: #00578a;
  --celeste: #e1f2f8;
  --linha: #dce5ec;
  --raio: 12px;
  --titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  color: var(--tinta);
  background: var(--fundo);
  font: 400 16px/1.45 Barlow, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { font: 700 1.4rem/1.08 var(--titulo); }
h1 { font-size: clamp(2.4rem, 5vw, 3.55rem); }
h2 { font-size: 1.75rem; }
strong, label, legend, th, dt { font-weight: 600; }
a { color: var(--azul); }
a, p, dd, h1, h2, h3, label { overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
[hidden] { display: none !important; }

.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  inset: 10px auto auto 12px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--branco);
}

.shell {
  display: grid;
  grid-template: auto 1fr / 222px minmax(0, 1fr);
  min-height: 100dvh;
}

.topbar {
  grid-area: 1 / 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 9px clamp(20px, 3vw, 44px);
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
}

.breadcrumb { color: var(--suave); font-size: .9375rem; font-weight: 600; }
.mobile-brand { display: none; }
.session { display: flex; align-items: center; gap: 12px; color: var(--suave); font-size: .9375rem; }

.sidebar {
  position: sticky;
  top: 0;
  grid-area: 1 / 1 / 3;
  align-self: start;
  min-height: 100dvh;
  padding: 24px 15px;
  background: var(--branco);
  border-right: 1px solid var(--linha);
  border-top: 4px solid var(--azul);
}

.brand, .mobile-brand {
  align-items: center;
  gap: 10px;
  color: var(--tinta);
  text-decoration: none;
}

.brand { display: flex; padding: 0 4px 20px; border-bottom: 1px solid var(--linha); }
.brand img, .mobile-brand img, .auth-brand img { object-fit: contain; flex: none; }
.brand strong, .mobile-brand strong { font: 700 1.95rem/1 var(--titulo); }
.brand small { display: block; margin-top: 4px; color: var(--suave); font-size: .8125rem; line-height: 1.2; }
.nav { display: grid; gap: 4px; margin-top: 19px; }
.nav a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 11px;
  border-inline-start: 3px solid transparent;
  border-radius: 6px;
  color: var(--suave);
  font-weight: 600;
  text-decoration: none;
}

.nav a:hover { background: var(--fundo); color: var(--azul); }
.nav a[aria-current] { background: var(--celeste); color: var(--azul); border-inline-start-color: var(--azul); }

main {
  grid-area: 2 / 2;
  width: 100%;
  max-width: 1640px;
  min-width: 0;
  margin-inline: auto;
  padding: 28px clamp(20px, 3vw, 44px) 42px;
}

.public-shell { grid-template-columns: minmax(0, 1fr); }
.public-shell :is(.topbar, main) { grid-column: 1; }
.public-shell .topbar { justify-content: flex-start; }
.public-shell .mobile-brand { display: flex; }
.public-shell main { max-width: 1000px; }

.page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 22px;
}

.page-head h1 { margin: 2px 0 5px; }
.page-head p:not(.eyebrow), .muted { color: var(--suave); }
.eyebrow {
  color: var(--azul);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.panel { min-width: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); }
.panel-head { padding: 15px 18px 12px; }
.panel-head p { margin-top: 4px; color: var(--suave); font-size: .875rem; }
.matrix-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.section-panel, .form-panel { padding: clamp(14px, 2vw, 22px); }
.form-panel { max-width: 650px; }
.form-panel > h2 { margin-bottom: 14px; }
.stack { display: grid; gap: 14px; align-content: start; min-width: 0; }

.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #a8c8d9;
  border-radius: 7px;
  background: var(--branco);
  color: var(--azul);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
}

.button:hover { background: var(--celeste); }
.button.primary { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.button.primary:hover { background: #00446c; }
.button.danger { background: #882f30; border-color: #882f30; color: var(--branco); }
.button.danger:hover { background: #6d2122; }
.button.compact { padding-inline: 11px; font-size: .9375rem; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: 4px;
  font-weight: 600;
  text-decoration: none;
}

.back-link::before { content: "‹"; font-size: 1.4em; line-height: 1; }
.back-link:hover, .person-link:hover, .record-title:hover { text-decoration: underline; }

.filters {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px 16px;
  margin-bottom: 15px;
}

.filters > .field { flex: 1 1 145px; }
.filters > .button-row { flex: 0 0 auto; }
.field { display: grid; gap: 4px; align-content: start; min-width: 0; }
.field > fieldset, .checklist-item { min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend { color: var(--tinta); font-size: .9375rem; }
.field input:is([type="radio"], [type="checkbox"]) { accent-color: var(--azul); }
.field label:has(input:is([type="radio"], [type="checkbox"])) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
}
.field:has(> input[type="checkbox"]) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; }
.field > input[type="checkbox"] { grid-area: 1 / 1; width: 20px; height: 20px; }
.field:has(> input[type="checkbox"]) > label { grid-area: 1 / 2; display: flex; align-items: center; min-height: 44px; }
.field:has(> input[type="checkbox"]) > :is(.help, .errorlist) { grid-column: 1 / -1; }

input:not([type="radio"], [type="checkbox"], [type="hidden"]), select, textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid #aabac6;
  border-radius: 7px;
  background: var(--branco);
  color: var(--tinta);
}

textarea { min-height: 110px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #536978; opacity: 1; }
.field-invalid :is(input, select, textarea) { border-color: #a53d3f; }
.help { color: var(--suave); font-size: .875rem; }
.help ul, .errorlist { margin-block: 4px 0; padding-inline-start: 19px; }
.errorlist { color: #882f30; font-weight: 600; font-size: .9375rem; }
.messages { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.notice { padding: 10px 14px; border: 1px solid #a5cbdf; border-radius: 8px; background: var(--celeste); }
.notice.error { border-color: #e1b0b0; background: #fbe7e6; color: #882f30; }
.notice.success { border-color: #abd2bd; background: #e2f3e9; color: #175941; }

.specialist, .approved, .done { --estado-fundo: #e2f3e9; --estado-tinta: #175941; --estado-acento: #288363; }
.user, .revalidate, .pending, .help { --estado-fundo: #fff3cf; --estado-tinta: #694b00; --estado-acento: #a36c05; }
.recycle, .rejected, .failed { --estado-fundo: #fbe7e6; --estado-tinta: #882f30; --estado-acento: #bb5756; }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 5px;
  background: var(--estado-fundo, #edf1f4);
  color: var(--estado-tinta, #495d6a);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.status-chip.revalidate { text-transform: uppercase; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.metric {
  min-width: 0;
  padding: 9px 12px 11px;
  border: 1px solid var(--linha);
  border-top: 3px solid var(--estado-acento, #778894);
  border-radius: 8px;
  background: var(--branco);
}

.metric dt { color: var(--suave); font-size: .875rem; overflow-wrap: anywhere; }
.metric dd, .big-number { font: 700 2.25rem/1.1 var(--titulo); font-variant-numeric: tabular-nums; }
.dashboard-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); gap: 14px; }
.bar-list { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.bar-heading { display: flex; justify-content: space-between; gap: 10px; }
.bar-list p { color: var(--suave); font-size: .875rem; }
.bar-list progress { display: block; width: 100%; height: 11px; margin: 3px 0 5px; accent-color: var(--azul); }
.pending-panel { display: grid; align-content: start; gap: 7px; }
.pending-panel > a { justify-self: start; }
.sync-strip { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; color: var(--suave); font-size: .875rem; }
.sync-status:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; }
.sync-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #778894; flex: none; }
.sync-status[data-state="online"]::before { background: #288363; }
.sync-status:is([data-state="stale"], [data-state="expired"]) { color: #882f30; font-weight: 600; }
.sync-status:is([data-state="stale"], [data-state="expired"])::before { background: #bb5756; }
.generated { color: var(--suave); font-size: .8125rem; }
.dashboard-data .generated { margin-top: 4px; }

.table-scroll { overflow: auto; border-top: 1px solid var(--linha); border-radius: 0 0 var(--raio) var(--raio); }
.table-scroll:focus-visible { outline-offset: -3px; }
.matrix-table { width: 100%; border-spacing: 0; text-align: left; font-size: .875rem; }
.matrix-table :is(th, td) { min-width: 112px; padding: 8px 7px; border-bottom: 1px solid #e6edf1; vertical-align: top; }
.matrix-table thead th { background: #edf4f8; color: #284558; line-height: 1.16; }
.matrix-table tbody tr:last-child > * { border-bottom: 0; }
.matrix-table tbody tr:nth-child(even), .matrix-table tbody tr:nth-child(even) th { background: #f9fbfc; }

.matrix-table :is(thead th:first-child, tbody th) {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 137px;
  max-width: 180px;
  padding-inline: 13px;
  box-shadow: 1px 0 var(--linha);
}

.matrix-table tbody th { background: var(--branco); }
.matrix-table th small, .cell-detail { display: block; margin-top: 3px; color: var(--suave); font-weight: 400; }
.matrix-table .numeric { text-align: center; font-variant-numeric: tabular-nums; }
.person-link { display: inline-flex; align-items: center; min-height: 32px; color: var(--tinta); text-decoration: none; line-height: 1.15; }

.empty-state { display: grid; gap: 7px; justify-items: start; padding: 14px 18px 19px; color: var(--suave); }
.empty-state :is(h2, h3) { color: var(--tinta); }
.record-list { margin: 0; padding: 0; list-style: none; }
.record-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--linha);
}

.record-list:first-child > li:first-child { border-top: 0; }
.record-main { min-width: 0; flex: 1 1 230px; }
.record-main > .status-chip { margin-top: 5px; }
.record-title { color: var(--tinta); font: 600 1.0625rem/1.3 Barlow, Arial, sans-serif; text-decoration: none; }
.record-title:is(a) { display: inline-flex; align-items: center; min-height: 32px; }
.record-status { display: grid; gap: 3px; }
.qualification-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 10px; }
.qualification { display: grid; align-content: start; gap: 8px; padding: 14px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr)); gap: 9px 12px; }
.facts dt { color: var(--suave); font-size: .875rem; }
.facts dd { font-weight: 600; }
.report-scope { margin-bottom: 12px; }

.assessment-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(215px, .36fr); align-items: start; gap: 14px; }
.selection, .assessment-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.assessment-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.assessment-fields > :last-child { grid-column: 1 / -1; }
.assessment-guide p { color: var(--suave); }
.assessment-guide .button { justify-self: start; }
.checklist { margin: 0; padding-inline-start: 22px; }
.checklist li {
  display: list-item;
  padding: 9px 0 9px 3px;
  border-bottom: 1px solid var(--linha);
  overflow-wrap: anywhere;
}

.checklist li::marker { color: var(--azul); font-weight: 600; }
.checklist-item > div { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.checklist-item > div > div { flex: 1 1 135px; }
.checklist-item label:has(input[type="radio"]) {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--linha);
  border-radius: 7px;
  font-size: .875rem;
  cursor: pointer;
}
.checklist-item label:has(input:checked) { border-color: var(--azul); background: var(--celeste); }
.checklist-item label:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.checklist .question-prompt { margin-bottom: 5px; }
.question-level { display: block; color: var(--azul); font-size: .8125rem; }
.answer-list .question-prompt { margin-bottom: 6px; }

.plan-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 14px; }
.plan-queues details { border-top: 1px solid var(--linha); }
.plan-queues summary { min-height: 44px; padding: 11px 2px; font-weight: 600; cursor: pointer; }
.plan-queues details > p { padding: 0 2px 10px; }
.plan-queues .record-list > li, .mission-results .record-list > li { padding-inline: 2px; }
.scenario-choices { margin: 0; padding: 0; border: 0; }
.scenario-choices .button-row { column-gap: 15px; }
.mission-results { padding-top: 14px; border-top: 1px solid var(--linha); }

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 16px;
  margin: clamp(12px, 5vw, 70px) auto;
}

.auth-brand {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 265px;
  padding: clamp(20px, 4vw, 42px);
  border-top: 4px solid #e3c66a;
  border-radius: var(--raio);
  background: var(--tinta);
  color: var(--branco);
}

.auth-brand p { color: var(--celeste); }
.auth-layout .button { justify-self: start; min-width: 110px; }
.error-page { max-width: 650px; padding: clamp(20px, 4vw, 45px); }
.error-page > p:not(.eyebrow) { color: var(--suave); }

@media (max-width: 1000px) {
  .shell:not(.public-shell) { grid-template-columns: 174px minmax(0, 1fr); }
  .sidebar { padding-inline: 10px; }
  .brand img { width: 34px; }
  .assessment-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .shell { display: block; }
  .topbar { min-height: 52px; padding: 6px 12px; }
  .breadcrumb, .brand { display: none; }
  .mobile-brand { display: flex; }
  .mobile-brand strong { font-size: 1.55rem; }
  .session { gap: 8px; font-size: .875rem; }
  .sidebar { position: static; min-height: auto; padding: 3px 8px; border: 0; border-bottom: 1px solid var(--linha); }
  .nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0; }
  .nav a { justify-content: center; min-height: 44px; padding: 4px 6px; font-size: .875rem; border-inline-start: 0; border-bottom: 2px solid transparent; }
  .nav a[aria-current] { border-bottom-color: var(--azul); }
  main { padding: 17px 12px 28px; }
  .page-head { flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
  .filters { padding: 10px; gap: 8px; }
  .filters > .field { flex-basis: 130px; }
  .metric-grid { gap: 4px; }
  .metric { padding: 6px 3px; text-align: center; }
  .metric dt { font-size: .6875rem; line-height: 1.08; min-height: 2.16em; }
  .metric dd { font-size: 1.55rem; }
  .dashboard-overview, .auth-layout, .plan-layout { grid-template-columns: minmax(0, 1fr); }
  .panel-head { padding-inline: 12px; }
  .matrix-table :is(thead th:first-child, tbody th) { min-width: 108px; max-width: 125px; padding-inline: 8px; }
  .person-link, .record-title:is(a) { min-height: 44px; }
  .record-list > li { padding: 9px 12px; }
  .selection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selection > :first-child { grid-column: 1 / -1; }
  .auth-brand { min-height: 0; }
}

@media print {
  @page { size: landscape; margin: 11mm; }
  :root { background: #fff; color: #111; font-size: 10pt; }
  .shell, main { display: block; min-height: 0; max-width: none; margin: 0; padding: 0; }
  .topbar, .sidebar, .skip-link, .no-print, .sync-strip, .messages { display: none !important; }
  .report-head { margin-bottom: 8px; }
  .report-head h1 { font-size: 24pt; }
  .metric-grid, .dashboard-overview, .report-scope { break-inside: avoid; }
  .dashboard-overview { grid-template-columns: 2fr 1fr; }
  .metric, .panel { border-color: #aaa; }
  .matrix-scroll { overflow: visible; }
  .matrix-table { table-layout: fixed; font-size: 7.5pt; }
  .matrix-table :is(th, td), .matrix-table :is(thead th:first-child, tbody th) {
    position: static;
    min-width: 0;
    max-width: none;
    padding: 3px 2px;
    box-shadow: none;
    overflow-wrap: anywhere;
  }

  .matrix-table th:first-child { width: 12%; }
  .matrix-table th:last-child { width: 7%; }
  .matrix-table tr { break-inside: avoid; }
  .matrix-table .status-chip { display: inline; padding: 0; color: #111; font-size: inherit; }
  .matrix-table .person-link { display: inline; min-height: 0; }
  .matrix-table small { color: #333; }
  .matrix-table a { color: inherit; }
}