/* Ajuda & Contato: help search + FAQ, contact form, Ouvidoria stepper and
 * forms. Loaded after institucional.css; tokens only. */

/* quick links in the page head */
.qnav { margin: 0; padding: 0; border-top: 1px solid var(--color-text); }
.qnav a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); transition: color var(--dur-fast); }
.qnav a:hover b { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.qnav .oct { --s: 36px; font-size: 12px; }
.qnav a > span:not(.oct) { display: flex; flex-direction: column; line-height: 1.25; }
.qnav b { font-weight: 600; }
.qnav small { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }

/* ── help search ──────────────────────────────────────────────────────── */
.hsearch { display: grid; gap: 8px; padding: 20px 22px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 2px solid var(--color-text); }
.hsearch__row { display: flex; gap: 8px; flex-wrap: wrap; }
.hsearch__box { position: relative; flex: 1 1 280px; display: block; }
.hsearch__box .ico { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--color-muted); pointer-events: none; }
.hsearch__box input {
  width: 100%; min-height: 48px; padding: 0 14px 0 44px; border: 1px solid var(--color-text); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-text); font: 400 17px/1.3 var(--font-body);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.hsearch__box input:hover { border-color: var(--color-brand); }
.hsearch__box input:focus { outline: none; border-color: var(--color-brand); box-shadow: var(--focus-ring); }
.hsearch__box input::placeholder { color: var(--color-muted); }
.hsearch .result-count { margin: 0; }

.help { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px 32px; margin-top: 24px; align-items: start; }
.hcats { position: sticky; top: 16px; }
.hcats ul { margin: 0; padding: 0; border-top: 1px solid var(--color-text); }
.hcats a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; font-size: 15px; transition: color var(--dur-fast), padding var(--dur-fast); }
.hcats a:hover { color: var(--color-brand); padding-left: 6px; }
.hcats .mono { font-size: 12px; color: var(--color-muted); }

.hgroups { display: grid; gap: 24px; min-width: 0; }
.hgroup { background: var(--color-surface); border: 1px solid var(--color-border); padding: 20px 24px 8px; scroll-margin-top: 80px; }
.hgroup__h { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.hgroup__h .oct { --s: 32px; font-size: 11px; }
.faq { border-top: 1px solid var(--color-border); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 52px; padding: 12px 0; font-weight: 600; font-size: 16px; line-height: 1.35; transition: color var(--dur-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-brand); }
.faq summary:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.faq summary .ico { flex: none; transition: transform var(--dur-base) var(--ease); }
.faq[open] summary .ico { transform: rotate(180deg); }
.faq[open] summary { color: var(--color-brand); }
.faq__a { padding: 0 0 16px; color: var(--color-muted); max-width: 68ch; }
.faq__a p { margin: 0; }
.faq__a a { color: var(--color-brand); text-underline-offset: 3px; }
.help mark { background: var(--color-brand-tint); color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-brand); padding: 0 1px; }

/* ── contato ──────────────────────────────────────────────────────────── */
.ct__info { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 14px; }
.ct__info .ficha { margin-top: 4px; }
.ct__info .ficha div { grid-template-columns: 96px minmax(0, 1fr); }
.ct__info a:not(.lnk) { overflow-wrap: anywhere; }
.ct__note { font-size: 15px; color: var(--color-muted); }
.ct__form { grid-column: 5 / 13; }
.form__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form__legal { margin: 0; font-size: 13px; color: var(--color-muted); flex: 1 1 240px; }
.form__legal a, .field--check a { color: var(--color-brand); text-underline-offset: 3px; }
.field .opt { text-transform: none; letter-spacing: 0; }
.field--check .field__error { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.done { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 20px; background: var(--color-success-bg); border-left: 3px solid var(--color-success); }
.done > .oct { --s: 48px; background: var(--color-success); }
.done p { margin: 0 0 10px; }
.done__t { font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--color-text); }
.done:focus { outline: none; }
.done:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.done--ouv, .done--status { display: block; }
.proto { display: grid; gap: 4px; margin: 6px 0 14px !important; padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-text); }
.proto b { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); font-weight: 600; letter-spacing: .02em; color: var(--color-brand); overflow-wrap: anywhere; }
.done .ficha { margin: 0 0 14px; }

/* ── ouvidoria ────────────────────────────────────────────────────────── */
.stepper { counter-reset: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 24px; padding: 0; border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--color-border); }
.stepper__i { display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 16px 0; position: relative; }
.stepper__i + .stepper__i { padding-left: 16px; border-left: 1px solid var(--color-border); }
.stepper__i .oct { --s: 36px; font-size: 14px; background: var(--color-brand); }
.stepper__i > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stepper__i > div b { font-weight: 600; line-height: 1.25; }
.stepper__i > div span { font-size: 14px; color: var(--color-muted); line-height: 1.35; }
.stepper[data-step] .stepper__i[data-state="next"] .oct { background: var(--color-border); color: var(--color-text); }
.stepper[data-step] .stepper__i[data-state="done"] .oct { background: var(--color-success); }
.stepper[data-step] .stepper__i[data-state="now"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--color-brand); }
.stepper__i:first-child::after { left: 0; }
.done .stepper { grid-template-columns: 1fr; margin: 4px 0 14px; background: var(--color-surface); border: 1px solid var(--color-border); }
.done .stepper__i { padding: 10px 12px; border-left: 0; }
.done .stepper__i + .stepper__i { border-top: 1px solid var(--color-border); padding-left: 12px; }
.done .stepper__i[data-state="now"]::after { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }

.ouv__form { grid-column: 1 / 8; }
.ouv__side { grid-column: 8 / 13; display: flex; flex-direction: column; }
.ouv__side > .form, .ouv__side > .done { margin-bottom: 20px; }
.ouv__side .form { gap: 14px; }
.ouv__side .btn { justify-self: start; }
.ouv__about { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 15px; color: var(--color-muted); }
.ouv__about b { color: var(--color-text); font-weight: 600; }
.ouv__about a { color: var(--color-brand); overflow-wrap: anywhere; }
.st-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px !important; padding: 6px 12px; border: 1px solid var(--color-text); font-weight: 600; background: var(--color-surface); }
.st-badge::before { content: ""; width: 10px; height: 10px; clip-path: var(--oct); background: var(--color-brand); }
.st-badge[data-status="respondida"]::before { background: var(--color-success); }

.tipo { border: 0; padding: 0; margin: 0; min-width: 0; }
.tipo legend { padding: 0; margin-bottom: 6px; }
.tipo__opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tipo__o { position: relative; display: block; cursor: pointer; }
.tipo__o input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tipo__o span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 10px; text-align: center;
  border: 1px solid var(--color-text); background: var(--color-surface); font-weight: 600; font-size: 15px;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.tipo__o:hover span { border-color: var(--color-brand); color: var(--color-brand); }
.tipo__o input:checked + span { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.tipo__o input:focus-visible + span { box-shadow: var(--focus-ring); }
.tipo.has-error .tipo__o span { border-color: var(--color-error); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .hcats { top: 64px; }
  .hgroup { scroll-margin-top: 130px; }
}
@media (max-width: 899px) {
  .help { grid-template-columns: 1fr; }
  .hcats { position: static; }
  .hcats ul { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
  .hcats a { border: 1px solid var(--color-border); background: var(--color-surface); padding: 4px 10px; min-height: 40px; gap: 10px; }
  .hcats a:hover { padding-left: 10px; border-color: var(--color-brand); }
  .ct__info, .ct__form, .ouv__form, .ouv__side { grid-column: 1 / -1; }
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepper__i:nth-child(3) { padding-left: 0; border-left: 0; }
  .stepper__i:nth-child(n+3) { border-top: 1px solid var(--color-border); }
}
@media (max-width: 759px) {
  .hsearch { padding: 16px; }
  .hsearch__row .btn { flex: 1 1 auto; }
  .hgroup { padding: 16px 16px 4px; }
  .tipo__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .done { grid-template-columns: 1fr; padding: 16px; }
  .form__act .btn { width: 100%; }
}
@media (max-width: 479px) {
  .stepper { grid-template-columns: 1fr; }
  .stepper__i + .stepper__i { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border); }
}

/* components.css styles text inputs with a :not() chain that outranks
   `.field [aria-invalid]`, so an invalid input kept a white background:
   restate the error state with the same weight. */
.field input[aria-invalid="true"]:not(.visually-hidden):not([type=checkbox]):not([type=radio]),
.field.has-error input:not(.visually-hidden):not([type=checkbox]):not([type=radio]) { border-color: var(--color-error); background: var(--color-error-bg); }
.ouv__side .proto b { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); white-space: nowrap; }

/* with the rail, four «tipo» options do not fit their labels below 1280 (Reclamação overflowed at 1024) */
@media (max-width: 1279px) { .tipo__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }