/* Under > Integração ("Falha de integração").
   Every new class starts with .uni-. Cards, chips, rows, sheet, buttons and fields come from the existing classes (.as-card, .as-top,
   .fi-name, .as-amt, .as-sub, .as-st, .un-pills, .un-sec, .un-row, .un-addr, .un-note, .un-facts, .un-err, .un-acts, .btn.sm.un-btn, .fi);
   here is only what this screen adds. Tap targets: 40 px or more. Nothing here may create horizontal page scroll at 360, 390 and 430 px. */

/* ---- state filter: five chips with their numbers, wrapping (never a sideways scroll) ---- */
.uni-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.uni-chip { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; max-width: 100%; margin: 0; padding: 7px 12px;
  border: 1px solid var(--v-cardbd, var(--line)); border-radius: 999px; background: var(--v-card, var(--card)); color: var(--v-strong, var(--text));
  font: inherit; font-family: var(--v-sans, inherit); font-size: 13px; font-weight: 500; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.uni-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uni-chip b { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--v-gray-bg, rgba(255,255,255,.08)); color: var(--v-muted, var(--muted));
  font-size: 11.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.uni-chip.on { --uni-on: var(--v-blue, var(--dv-blue)); border-color: var(--uni-on); box-shadow: inset 0 0 0 1px var(--uni-on); font-weight: 600; }
.uni-chip.on b { background: var(--uni-on); color: #fff; }
.uni-chip.hot b { background: #e11d48; color: #fff; }
.uni-chip:focus-visible, .uni-card:focus-visible { outline: 2px solid var(--v-blue, var(--dv-blue)); outline-offset: 2px; }
html.v2[data-theme="dark"] .uni-chip.on { --uni-on: #8fb0ff; }
html.v2[data-theme="dark"] .uni-chip.on b { color: #0b1020; }
html.v2[data-theme="dark"] .uni-chip.hot b { color: #fff; }
.uni-counts { margin-top: -4px; }

/* ---- notes above the list (dry-run, store file not read) and warnings of the detail ---- */
.uni-note { margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere;
  border: 1px solid var(--v-line, var(--line)); background: var(--v-gray-bg, rgba(255,255,255,.05)); color: var(--v-muted, var(--muted)); }
.uni-note.warn { border-color: color-mix(in srgb, var(--warn, #f59e0b) 45%, transparent); background: color-mix(in srgb, var(--warn, #f59e0b) 12%, transparent); color: var(--v-strong, var(--text)); }
.uni-note.bad { border-color: color-mix(in srgb, var(--err, #ef4444) 50%, transparent); background: color-mix(in srgb, var(--err, #ef4444) 12%, transparent); color: var(--v-strong, var(--text)); font-weight: 500; }

/* ---- card ---- */
.uni-card .as-top { align-items: flex-start; gap: 10px; }
.uni-card .fi-name { min-width: 0; overflow-wrap: anywhere; }
.uni-card .as-amt { white-space: nowrap; flex-shrink: 0; }
.uni-card .as-sub, .uni-card .as-sub2 { overflow-wrap: anywhere; }
.uni-card .un-pills { margin-top: 8px; }
.uni-card .un-pills .as-st, .uni-det .un-pills .as-st { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.uni-card.uni-wait { border-left: 3px solid #e11d48; }
.uni-last { margin-top: 8px; }
/* the reason in words: a short name, the sentence, and the technical line when there is one */
.uni-why { margin-top: 9px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere;
  background: var(--v-gray-bg, rgba(255,255,255,.06)); color: var(--v-muted, var(--muted)); }
.uni-why b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--v-strong, var(--text)); }
.uni-why.bad { background: var(--v-err-bg, color-mix(in srgb, var(--err, #ef4444) 11%, transparent)); }
.uni-why.bad b { color: var(--v-err, var(--err)); }
.uni-raw { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 8px; max-height: 3.9em; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  font-family: var(--v-mono, ui-monospace, monospace); font-size: 11px; line-height: 1.3; background: rgba(127,127,127,.14); color: var(--v-strong, var(--text)); }
.uni-raw.big { max-height: 14em; overflow: auto; margin-top: 0; }
.uni-errcard .un-acts, .uni-err .un-acts { justify-content: center; }
.uni-fine .fi-name { color: var(--v-ok, var(--ok)); }

/* ---- detail sheet ---- */
.uni-det { min-width: 0; }
.uni-det .un-row { align-items: baseline; }
.uni-det .un-row > span { flex: 0 1 auto; min-width: 0; }
.uni-det .un-row > b { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.uni-det .un-ct { margin: 6px 0; }
.uni-det .btn.sm.un-btn { flex: 0 0 auto; }
.uni-det .btn.sm.un-btn:disabled { opacity: .55; cursor: default; }
.uni-hint2 { margin-top: 8px; }
.uni-det .uni-note { margin: 10px 0 0; }   /* warnings of the order, between the state line and the buttons */
.uni-sub { margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--v-strong, var(--text)); }
.uni-todo { margin-top: 0; }
.uni-todo li { color: var(--v-strong, var(--text)); }
.uni-link { margin: 6px 0 2px; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.uni-link.ok { color: var(--v-ok, var(--ok)); background: color-mix(in srgb, var(--ok, #22c55e) 12%, transparent); }
.uni-link.warn { color: var(--v-strong, var(--text)); background: color-mix(in srgb, var(--warn, #f59e0b) 14%, transparent); }
.uni-links { margin-top: 12px; }
.uni-foot { margin-top: 16px; justify-content: center; }
.uni-err { text-align: center; }
/* attempts so far and who did what */
.uni-log { padding: 7px 0; border-bottom: 1px solid var(--v-line, var(--line)); font-size: 12.5px; color: var(--v-strong, var(--text)); overflow-wrap: anywhere; }
.uni-log:last-child { border-bottom: 0; }
.uni-log-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.uni-log-b { margin-top: 3px; }
.uni-log .un-note { margin-top: 5px; }
/* what an action answered (top of the sheet) */
.uni-out { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; border: 1px solid transparent; color: var(--v-strong, var(--text)); }
.uni-out b { display: block; font-weight: 600; }
.uni-out p { margin: 4px 0 0; font-size: 12.5px; }
.uni-out.ok { border-color: color-mix(in srgb, var(--ok, #22c55e) 45%, transparent); background: color-mix(in srgb, var(--ok, #22c55e) 12%, transparent); }
.uni-out.err { border-color: color-mix(in srgb, var(--err, #ef4444) 50%, transparent); background: color-mix(in srgb, var(--err, #ef4444) 12%, transparent); }
.uni-out.warn { border-color: color-mix(in srgb, var(--warn, #f59e0b) 50%, transparent); background: color-mix(in srgb, var(--warn, #f59e0b) 12%, transparent); }
.uni-out.info { border-color: color-mix(in srgb, var(--v-blue, var(--dv-blue)) 45%, transparent); background: color-mix(in srgb, var(--v-blue, var(--dv-blue)) 10%, transparent); }
.uni-pend { color: var(--v-muted, var(--muted)); }
/* the three actions: one per row on a phone, so every label is whole at 360 px */
.uni-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.uni-acts .btn.sm.un-btn.uni-act { width: 100%; min-height: 44px; justify-content: center; }
.uni-blocked { margin-top: 8px; line-height: 1.4; }
/* the confirmation that says what the action does (and, for "Marcar como resolvido", the two optional fields) */
.uni-cf { margin-top: 14px; padding: 12px; border-radius: 14px; border: 1px solid var(--v-blue, var(--dv-blue)); background: color-mix(in srgb, var(--v-blue, var(--dv-blue)) 7%, transparent); }
.uni-cf-t { font-size: 15px; font-weight: 600; color: var(--v-strong, var(--text)); }
.uni-cf p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--v-strong, var(--text)); overflow-wrap: anywhere; }
.uni-cf p.uni-cf-w { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--warn, #f59e0b) 14%, transparent); }
.uni-cf p.uni-prog { font-weight: 600; color: var(--v-blue, var(--dv-blue)); }
.uni-lb { display: block; margin: 12px 0 5px; font-size: 12.5px; font-weight: 600; color: var(--v-strong, var(--text)); }
.uni-cf .fi.uni-in { display: block; width: 100%; min-width: 0; margin: 0; box-sizing: border-box; font-size: 16px; }   /* 16 px: iOS does not zoom the page on focus */
.uni-cf textarea.fi.uni-in { min-height: 84px; resize: vertical; line-height: 1.4; }
.uni-hint { margin-top: 5px; line-height: 1.4; }
.uni-cnt { margin-top: 3px; text-align: right; font-variant-numeric: tabular-nums; }
.uni-bad[hidden] { display: none; }
.uni-cf-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.uni-cf-acts .btn.sm.un-btn { width: 100%; min-width: 0; min-height: 44px; justify-content: center; white-space: normal; }
html.v2[data-theme="dark"] .uni-cf p.uni-prog { color: #8fb0ff; }
html.v2[data-theme="dark"] .uni-cf { border-color: #8fb0ff; }
/* A text with no space in it (a URL, a token, a code added later) wraps or is cut: it never makes the sheet scroll sideways */
.uni-det .uni-log-h .as-st { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.uni-det .un-addr, .uni-det .un-addr b, .uni-det .un-facts li, .uni-det .un-note, .uni-det .un-item-b, .uni-det .uni-sub, .uni-blocked { min-width: 0; overflow-wrap: anywhere; }
/* a row: the label keeps its own width, at most 60% of the row (a label that carries a value of the API wraps there), and the value takes the rest.
   The label never shrinks below its words, so a very long value cannot squeeze it into one letter per line. */
.uni-det .un-row > span { flex: 0 0 auto; max-width: 60%; overflow-wrap: anywhere; }
.uni-det .un-row > b { flex: 1 1 0; }