@font-face {
  font-family: "Share Tech Mono";
  src: url("fonts/share-tech-mono.65d3eea7a186.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Tokens: preto e branco, cantos retos, seleção invertida. O vermelho é só alerta. */
:root {
  color-scheme: light;
  --canvas: #ffffff; --bg: #ffffff; --surface: #f4f4f1; --surface-2: #e8e8e3;
  --line: #e2e2dc; --line-pane: #0a0b0c; --line-strong: #6f7175;
  --text: #0a0b0c; --muted: #54575b;
  --accent: #cf2a1e; --on-accent: #ffffff; --accent-soft: #fbe6e4;
  --primary: #0a0b0c; --on-primary: #ffffff; --primary-hover: #cf2a1e;
  --selected: #0a0b0c; --on-selected: #ffffff; --on-selected-muted: #c9cbcd;
  --bubble-in: #ffffff; --on-bubble-in: #0a0b0c; --bubble-in-line: #d4d4cd;
  --bubble-out: #0a0b0c; --on-bubble-out: #ffffff; --on-bubble-out-muted: #c9cbcd;
  --note-bg: #fff6d6; --note-line: #b9a24a; --on-note: #2f2807;
  --radius: 0; --radius-s: 0; --radius-chip: 0; --radius-bubble: 0;
  --gap: 0px; --pane-border: 1px;
  --shadow: 0 10px 26px rgb(10 11 12 / 0.2);
  --group-size: 0.625rem; --group-weight: 700; --group-case: uppercase; --group-track: 0.09em; --group-color: var(--muted);
  --head-weight: 700;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354575b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bar: 44px; --rail: 60px; --area: 184px; --list: 288px; --side: 280px; --area-w: 0px;
}
:root[data-mode="dark"] {
  color-scheme: dark;
  --canvas: #050506; --bg: #050506; --surface: #101113; --surface-2: #1c1e20;
  --line: #27292c; --line-pane: #44474b; --line-strong: #8f9398;
  --text: #f4f3ee; --muted: #abafb3;
  --accent: #ff3b2f; --on-accent: #050506; --accent-soft: #2c1210;
  --primary: #f4f3ee; --on-primary: #050506; --primary-hover: #ff3b2f;
  --selected: #f4f3ee; --on-selected: #050506; --on-selected-muted: #3d4043;
  --bubble-in: #050506; --on-bubble-in: #f4f3ee; --bubble-in-line: #3a3d41;
  --bubble-out: #f4f3ee; --on-bubble-out: #050506; --on-bubble-out-muted: #3d4043;
  --note-bg: #231d08; --note-line: #8f7f35; --on-note: #f0e4b3;
  --shadow: 0 14px 36px rgb(0 0 0 / 0.7);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23abafb3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 400 0.8125rem/1.45 var(--sans); }
a { color: inherit; text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: var(--head-weight); text-wrap: balance; }
h1 { font-size: 0.9375rem; }
h2 { font-size: 0.8125rem; }
h3 { font-size: 0.8125rem; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
kbd { font: inherit; font-size: 0.6875rem; padding: 0.05rem 0.35rem; border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--muted); }
.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 0.75rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.grow { flex: 1; min-width: 0; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.stack-lg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--text); color: var(--bg); padding: 0.5rem 0.75rem; z-index: 60; }
.skip:focus { left: 0; }

/* Estrutura: barra global, ícones, menu da área e o trabalho. */
.shell { display: grid; grid-template-rows: var(--bar) minmax(0, 1fr); grid-template-columns: var(--rail) var(--area-w) minmax(0, 1fr); height: 100dvh; }
.shell.has-area { --area-w: var(--area); }
:root[data-area-state="closed"] .shell.has-area { --area-w: 0px; }
:root[data-area-state="closed"] .area { display: none; }
.bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem 0 0.625rem; background: var(--canvas); border-bottom: var(--pane-border) solid var(--line-pane); position: relative; z-index: 30; }
.brand { display: flex; align-items: flex-end; gap: 0.125rem; font-family: var(--mono); font-size: 0.9375rem; line-height: 1; text-decoration: none; flex: none; }
/* A imagem vira máscara para herdar a cor do texto nos dois temas. */
.wordmark { display: block; flex: none; height: 1.875rem; aspect-ratio: 479 / 240; background: currentColor; mask: url("strnchn-wordmark.0c82df1c0de5.png") center / contain no-repeat; }
/* As pontas das letras descem abaixo da linha de base; o sufixo acompanha a base, não as pontas. */
.wordmark-suffix { margin-bottom: 0.4em; letter-spacing: -0.06em; }
.search-trigger { display: flex; align-items: center; gap: 0.5rem; margin-inline: auto; width: min(22rem, 34vw); min-height: 1.625rem; padding: 0.1rem 0.35rem 0.1rem 0.5rem; font-size: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); color: var(--muted); text-decoration: none; }
.search-trigger:hover { border-color: var(--line-strong); color: var(--text); }
.search-trigger span { flex: 1; }
.bar-end { display: flex; align-items: center; gap: 0.375rem; flex: none; }
.rail { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.25rem 0.25rem 0.5rem; background: var(--canvas); overflow-y: auto; border-right: var(--pane-border) solid var(--line-pane); }
.rail-end { margin-top: auto; display: grid; gap: 0.125rem; }
.rail-item { position: relative; display: grid; justify-items: center; gap: 0.0625rem; padding: 0.3rem 0 0.25rem; border-radius: var(--radius); color: var(--muted); font-size: 0.625rem; line-height: 1.15; text-decoration: none; border: 0; background: none; cursor: pointer; width: 100%; transition: background-color 120ms ease-out, color 120ms ease-out; }
.rail-item .i { width: 1.05rem; height: 1.05rem; }
.rail-item:hover { background: var(--surface-2); color: var(--text); }
.rail-item[aria-current="page"] { background: var(--selected); color: var(--on-selected); font-weight: 600; }
.rail-item[aria-current="page"]::after { content: ""; position: absolute; top: 50%; right: -0.25rem; width: 0.3rem; height: 0.6rem; transform: translateY(-50%); background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); z-index: 2; }
.rail-count { position: absolute; top: 0.125rem; right: 0.375rem; min-width: 0.8125rem; padding: 0 0.125rem; border-radius: var(--radius-chip); background: var(--primary); color: var(--on-primary); font-size: 0.5625rem; line-height: 0.8125rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.area { overflow-y: auto; padding: 0.25rem 0.375rem 0.75rem; background: var(--canvas); border-right: var(--pane-border) solid var(--line-pane); }
.area-group { padding-top: 0.375rem; }
.area-group + .area-group { margin-top: 0.25rem; }
.area-group > summary, .area-more > summary { list-style: none; cursor: pointer; }
.area-group > summary::-webkit-details-marker, .area-more > summary::-webkit-details-marker { display: none; }
.area-title { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.375rem; font-size: var(--group-size); font-weight: var(--group-weight); text-transform: var(--group-case); letter-spacing: var(--group-track); color: var(--group-color); }
.area-title::after { content: ""; width: 0.75rem; height: 0.75rem; background: var(--chevron) center / contain no-repeat; transform: rotate(-90deg); transition: transform 120ms ease-out; }
.area-group[open] > .area-title::after { transform: none; }
.area-more > summary { color: var(--muted); }
.area-more[open] > summary { display: none; }
.area-link { display: flex; align-items: center; gap: 0.375rem; min-height: 1.5rem; padding: 0.125rem 0.375rem; font-size: 0.75rem; border-radius: var(--radius-s); color: var(--muted); text-decoration: none; transition: background-color 120ms ease-out, color 120ms ease-out; }
.area-link .i { width: 0.875rem; height: 0.875rem; }
.area-link:hover { background: var(--surface-2); color: var(--text); }
.area-link[aria-current="true"] { background: var(--selected); color: var(--on-selected); font-weight: 600; }
.area-count { margin-left: auto; font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.area-count.hot { min-width: 0.9375rem; padding: 0 0.2rem; border-radius: var(--radius-chip); background: var(--primary); color: var(--on-primary); text-align: center; font-weight: 600; line-height: 0.9375rem; }
.area-link[aria-current="true"] .area-count { color: inherit; }
.area-link[aria-current="true"] .area-count.hot { background: var(--on-selected); color: var(--selected); }
.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; margin: 0 var(--gap) var(--gap) 0; background: var(--bg); border-radius: var(--radius); overflow: hidden; grid-column: 3; }
.main > main { flex: 1; min-height: 0; overflow-y: auto; }
.top { display: flex; align-items: center; gap: 0.625rem; min-height: 2.625rem; padding: 0.25rem 1rem; border-bottom: 1px solid var(--line); flex: none; }
.top h1 { min-width: 0; }
.top-end { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.page { padding: 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; width: 100%; }
.page > *, .columns > * { min-width: 0; }
.tabbar { display: none; }
.flash { display: grid; gap: 0.25rem; padding: 0.5rem 0.75rem 0; flex: none; }

/* Menu da pessoa e versão visual */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 40; width: 16.5rem; padding: 0.5rem; display: grid; gap: 0.5rem; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.menu-who { padding: 0.25rem 0.375rem; }
.menu-who strong { display: block; font-weight: 600; }
.menu-label { display: grid; gap: 0.25rem; padding: 0 0.375rem; font-size: 0.75rem; color: var(--muted); }
.menu-link { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4rem 0.375rem; border: 0; border-radius: var(--radius-s); background: none; color: var(--text); font: inherit; text-decoration: none; text-align: left; cursor: pointer; }
.menu-link:hover { background: var(--surface-2); }
.avatar { display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 0; background: var(--primary); color: var(--on-primary); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; }
.avatar-soft { background: var(--surface-2); color: var(--text); }
.switch button, .switch a { flex: 1; padding: 0.2rem 0.55rem; border: 0; border-radius: calc(var(--radius-s) - 2px); background: none; color: var(--muted); font: 500 0.75rem/1.3 var(--sans); text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; }
.switch button:hover, .switch a:hover { color: var(--text); }
.switch { display: inline-flex; border: 1px solid var(--line-strong); }
.switch [aria-pressed="true"], .switch [aria-current="true"] { background: var(--selected); color: var(--on-selected); font-weight: 600; }
.switch-wide { display: flex; }

/* Cronômetro global */
.timer { display: flex; align-items: center; gap: 0.5rem; padding: 0.125rem 0.125rem 0.125rem 0.625rem; border: 1px solid var(--accent); border-radius: var(--radius-s); background: var(--bg); }
.timer a { text-decoration: none; max-width: 16ch; }
.timer-time { font-family: var(--mono); font-size: 0.9375rem; }
.timer button { display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border: 0; border-radius: calc(var(--radius-s) - 2px); background: var(--accent); color: var(--on-accent); cursor: pointer; }

/* Controles */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 1.75rem; padding: 0.2rem 0.625rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: transparent; color: var(--text); font: 500 0.75rem/1.2 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out; }
.btn:hover { background: var(--surface-2); }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-primary:focus-visible { outline-color: var(--on-primary); outline-offset: -4px; }
.btn-primary { clip-path: polygon(0 0, calc(100% - 0.375rem) 0, 100% 0.375rem, 100% 100%, 0 100%); padding-right: 0.8rem; }
.btn-quiet { border-color: transparent; color: var(--muted); }
.btn-quiet:hover { color: var(--text); }
.btn-small { min-height: 1.5rem; padding: 0.1rem 0.45rem; font-size: 0.6875rem; }
.btn-danger:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.icon-btn { position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: var(--radius-s); background: none; color: var(--muted); text-decoration: none; cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.dot { position: absolute; top: 0.1rem; right: 0.1rem; min-width: 0.95rem; padding: 0 0.2rem; border-radius: var(--radius-chip); background: var(--accent); color: var(--on-accent); font-size: 0.625rem; line-height: 0.95rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

label, .label { display: grid; gap: 0.25rem; font-size: 0.75rem; color: var(--muted); min-width: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input:not([type]), select, textarea {
  width: 100%; min-height: 1.875rem; padding: 0.25rem 0.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--bg); color: var(--text); font: 400 0.8125rem/1.4 var(--sans);
}
select { appearance: none; padding-right: 1.6rem; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 0.35rem center; background-size: 1rem; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-color: var(--text); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; }
textarea { resize: vertical; min-height: 4.5rem; }
input[type="checkbox"], input[type="radio"] { appearance: none; width: 0.9375rem; height: 0.9375rem; margin: 0; flex: none; display: inline-grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--bg); cursor: pointer; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"] { border-radius: 0; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--primary); border-color: var(--primary); }
input[type="checkbox"]:checked::after { content: ""; width: 0.6rem; height: 0.32rem; margin-top: -0.12rem; border-left: 2px solid var(--on-primary); border-bottom: 2px solid var(--on-primary); transform: rotate(-45deg); }
input[type="radio"]:checked::after { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--on-primary); }
input[type="file"] { max-width: 100%; font-size: 0.8125rem; color: var(--muted); }
input[type="file"]::file-selector-button { margin-right: 0.5rem; padding: 0.3rem 0.65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: transparent; color: var(--text); font: 500 0.75rem var(--sans); cursor: pointer; }
.check { display: flex; align-items: center; gap: 0.45rem; color: var(--text); font-size: 0.8125rem; }
.fields { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.fields > * { flex: 1 1 150px; min-width: 0; }
.fields > .full { flex-basis: 100%; }
.hint { color: var(--muted); font-size: 0.75rem; }
form.row input.grow { min-width: 8rem; width: auto; }

/* Blocos recolhíveis: a seta fica dentro da coluna, sempre. */
details > summary { cursor: pointer; font-weight: 500; }
.disclosure { border-top: 1px solid var(--line); padding: 0.5rem 0; }
.disclosure > summary, .block > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; list-style: none; }
.disclosure > summary::-webkit-details-marker, .block > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after, .block > summary::after { content: ""; flex: none; width: 1rem; height: 1rem; background: var(--chevron) center / contain no-repeat; transform: rotate(-90deg); transition: transform 120ms ease-out; }
.disclosure[open] > summary::after, .block[open] > summary::after { transform: none; }
.disclosure > *:not(summary) { margin-top: 0.5rem; }
.block { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); }
.block > summary { font-size: var(--group-size); font-weight: var(--group-weight); text-transform: var(--group-case); letter-spacing: var(--group-track); color: var(--group-color); }
.block[open] > summary { margin-bottom: 0.375rem; }

/* Avisos */
.notice { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); font-size: 0.8125rem; }
.notice-error { border-color: var(--accent); background: var(--accent-soft); }
.notice .i { margin-top: 0.15em; }

/* Status: texto sempre; a marca muda de forma. A cor de alerta fica fora daqui. */
.status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.status::before { content: ""; width: 0.6rem; height: 0.6rem; border: 1.5px solid currentColor; border-radius: 50%; flex: none; }
.status-new::before { background: transparent; }
.status-active::before { background: currentColor; }
.status-wait::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.status-done::before { background: currentColor; border-radius: 1px; }
.status-off { color: var(--muted); }
.status-off::before { border-style: dashed; }
.tag { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0 0.35rem; border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--surface); font-size: 0.6875rem; line-height: 1.125rem; white-space: nowrap; color: var(--text); text-decoration: none; }
.tag { border-color: var(--line-strong); background: transparent; }
.tag-alert { border-color: var(--accent); background: transparent; color: var(--accent); font-weight: 600; }
.tag form { display: contents; }
.tag button { display: grid; place-items: center; width: 1rem; height: 1rem; margin-right: -0.25rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.tag button:hover { color: var(--accent); }
.tag button .i { width: 0.75rem; height: 0.75rem; }
.prio { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.75rem; white-space: nowrap; color: var(--muted); }
.prio .i { width: 0.9rem; height: 0.9rem; }
.prio-high, .prio-critical { color: var(--accent); font-weight: 600; }

/* Listas e tabelas */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.rows { border-top: 1px solid var(--line); }
.rows > li, .rows > a { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.25rem; border-bottom: 1px solid var(--line); text-decoration: none; min-width: 0; }
.rows > a:hover { background: var(--surface); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
th, td { padding: 0.45rem 0.75rem 0.45rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.grid tr { position: relative; }
.grid td { vertical-align: middle; padding-block: 0.375rem; }
.grid tbody tr:hover { background: var(--surface); }
.grid th:first-child, .grid td:first-child { padding-left: 1rem; }
.grid th:last-child, .grid td:last-child { padding-right: 1rem; }
.grid .row-link { font-weight: 550; text-decoration: none; }
.grid .row-link::after { content: ""; position: absolute; inset: 0; }
.grid .row-link:focus-visible::after { outline: 2px solid var(--text); outline-offset: -2px; }
.grid thead th { position: sticky; top: 0; z-index: 1; background: var(--bg); }
.toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: end; }
.toolbar > label { flex: 1 1 150px; min-width: 150px; }
.list-tools { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; flex-wrap: wrap; }
.search-field { position: relative; flex: 0 1 18rem; min-width: 10rem; }
.search-field .i { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-field input { padding-left: 1.85rem; }
.popover { position: relative; }
.popover > summary { list-style: none; }
.popover > summary::-webkit-details-marker { display: none; }
.popover-panel { position: absolute; top: calc(100% + 0.25rem); left: 0; z-index: 20; width: 18rem; padding: 0.75rem; display: grid; gap: 0.625rem; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.popover-end .popover-panel { left: auto; right: 0; }
.count-chip { min-width: 1.1rem; padding: 0 0.25rem; border-radius: var(--radius-chip); background: var(--primary); color: var(--on-primary); font-size: 0.6875rem; line-height: 1.1rem; text-align: center; font-weight: 600; }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-s); overflow: hidden; }
.segmented a { padding: 0.25rem 0.625rem; text-decoration: none; font-size: 0.8125rem; color: var(--muted); border-right: 1px solid var(--line); }
.segmented a:last-child { border-right: 0; }
.segmented a[aria-current="true"] { background: var(--selected); color: var(--on-selected); font-weight: 600; }
.page > .segmented a { flex: 1; text-align: center; }
.empty { padding: 1.5rem 0; color: var(--muted); }
.empty strong { display: block; color: var(--text); margin-bottom: 0.25rem; font-weight: 600; }
.empty-center { display: grid; place-content: center; justify-items: center; height: 100%; padding: 2rem; text-align: center; max-width: none; }
.empty-center p { max-width: 42ch; }
.empty-center .mark { display: block; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; color: var(--line-strong); }
.pagination { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem; font-size: 0.8125rem; }
.pagination a { text-decoration: none; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.875rem; background: var(--surface); }
.columns { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: start; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 0.75rem; font-size: 0.8125rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; }

/* Linhas editáveis do painel: parecem leitura até a pessoa mexer. */
.field-rows { display: grid; gap: 0.125rem; }
.field-row { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted); }
.field-row > span:first-child { min-width: 0; }
.field-row input:not([type="checkbox"]), .field-row select { min-height: 1.5rem; padding-block: 0.05rem; padding-left: 0.3rem; border-color: transparent; background-color: transparent; font-size: 0.75rem; }
.field-row select { background-image: none; padding-right: 0.4rem; }
.field-row input:hover, .field-row select:hover { border-color: var(--line-strong); background-color: var(--bg); }
.field-row select:hover { background-image: var(--chevron); padding-right: 1.6rem; }
.field-row .static { padding-left: 0.3rem; color: var(--text); min-height: 1.5rem; display: flex; align-items: center; }

/* Início: próximo passo, filas numa faixa só e os tickets da pessoa. */
.page-home { gap: 0.75rem; }
.tile { display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; background: var(--primary); color: var(--on-primary); }
.tile .i { width: 1rem; height: 1rem; }
.setup { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); background: var(--surface); }
.setup-links { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.setup-links a { display: inline-flex; align-items: center; gap: 0.125rem; min-height: 1.5rem; }
.setup-links a::after { content: ""; width: 0.875rem; height: 0.875rem; background: var(--chevron) center / contain no-repeat; transform: rotate(-90deg); }
/* A faixa é um bloco único: o traço de baixo diz se a fila pede atenção, sem depender só da cor. */
.queues { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-bottom: 0; }
.queue { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border-bottom: 2px solid var(--primary); text-decoration: none; transition: background-color 120ms ease-out; }
.queue + .queue { border-left: 1px solid var(--line); }
.queue:hover { background: var(--surface); }
.queue:focus-visible { outline-offset: -2px; }
.queue .count { font: 400 1.625rem/1 var(--mono); }
.queue-text { grid-column: 1 / -1; align-self: start; display: grid; gap: 0.125rem; }
.queue-text strong { font-weight: 600; }
.queue.is-zero { color: var(--muted); border-bottom-color: var(--line); }
.queue.is-zero .tile { background: var(--surface-2); color: var(--muted); }
.queue.is-alert { border-bottom-color: var(--accent); }
.queue.is-alert .tile { background: var(--accent); color: var(--on-accent); }
.my-tickets { border: 1px solid var(--line); }
.my-tickets > .section-head { margin: 0; padding: 0.5rem 1rem; }
.my-tickets thead th { background: var(--surface); border-top: 1px solid var(--line); }
.my-tickets tbody tr:last-child td { border-bottom: 0; }
.my-tickets .row-link { font-weight: 400; }
.my-tickets .col-id { width: 1%; padding-right: 0.5rem; }
.my-tickets .col-client { width: 22%; }
.my-tickets .col-state { width: 28%; }
.my-tickets .empty { padding: 1.25rem 1rem; border-top: 1px solid var(--line); }
.ticket-id { display: inline-block; padding: 0 0.3rem; background: var(--surface); color: var(--muted); font-size: 0.6875rem; line-height: 1.125rem; white-space: nowrap; }
.ticket-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.5rem; }
@media (max-width: 900px) {
  /* Sem largura para cinco colunas: a faixa vira lista, com o mesmo conteúdo. */
  .queues { grid-template-columns: minmax(0, 1fr); }
  .queue { grid-template-columns: auto minmax(2.25rem, auto) minmax(0, 1fr); grid-template-rows: auto; gap: 0.625rem; padding-block: 0.5rem; }
  .queue, .queue.is-zero, .queue.is-alert { border-bottom-width: 1px; border-bottom-color: var(--line); }
  .queue + .queue { border-left: 0; }
  .queue .count { font-size: 1.25rem; }
  .queue-text { grid-column: 3; align-self: center; }
}
@media (max-width: 760px) {
  .setup-links a { min-height: 2.75rem; }
  .my-tickets > .section-head { padding-inline: 0.75rem; border-bottom: 1px solid var(--line); }
  /* No celular a linha vira duas: o título inteiro em cima, status e cliente embaixo. */
  .my-tickets table, .my-tickets tbody { display: block; }
  .my-tickets thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .my-tickets tbody tr { display: grid; grid-template-columns: 2.5rem auto minmax(0, 1fr); align-items: center; gap: 0.125rem 0.625rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); }
  .my-tickets tbody tr:last-child { border-bottom: 0; }
  .my-tickets .grid tbody td { width: auto; min-width: 0; padding: 0; border: 0; }
  .my-tickets td:nth-child(2) { grid-column: 2 / -1; }
  .my-tickets td.col-state { grid-column: 2; grid-row: 2; }
  .my-tickets td.col-client { grid-column: 3; grid-row: 2; font-size: 0.75rem; }
}

/* Triagem: lista recolhida; o e-mail e as ações só aparecem ao abrir. Funciona sem script. */
.triage-list { border: 1px solid var(--line); }
.triage-item + .triage-item { border-top: 1px solid var(--line); }
.triage-item > summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%) 1rem; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; list-style: none; font-weight: 400; transition: background-color 120ms ease-out; }
.triage-item > summary::-webkit-details-marker { display: none; }
.triage-item > summary::after { content: ""; width: 1rem; height: 1rem; background: var(--chevron) center / contain no-repeat; transform: rotate(-90deg); transition: transform 120ms ease-out; }
.triage-item > summary:hover, .triage-item[open] > summary { background: var(--surface); }
.triage-item[open] > summary { border-bottom: 1px solid var(--line); }
.triage-item[open] > summary::after { transform: none; }
.triage-item > summary:focus-visible { outline-offset: -2px; }
.triage-item strong { font-weight: 600; }
.triage-from { color: var(--muted); font-size: 0.75rem; }
.triage-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 0.875rem 0.875rem; }
.triage-body { max-height: 24rem; overflow-y: auto; overflow-wrap: anywhere; }
.triage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.triage-actions .btn { position: relative; min-height: 2.25rem; padding-inline: 0.875rem; font-size: 0.8125rem; }
.triage-actions .btn-primary { padding-right: 1.125rem; }
.triage-actions input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.triage-actions .btn:has(input:checked) { background: var(--selected); border-color: var(--selected); color: var(--on-selected); }
.triage-actions .btn:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.triage-actions .btn-primary:has(input:focus-visible) { outline-color: var(--on-primary); outline-offset: -4px; }
.triage-actions .btn-danger:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.triage-actions .triage-cancel { margin-left: auto; }
.triage-actions .triage-cancel:has(input:checked) { display: none; }
.triage-form { display: none; }
.triage-detail:has(input[value="criar"]:checked) .triage-form[data-acao="criar"],
.triage-detail:has(input[value="vincular"]:checked) .triage-form[data-acao="vincular"],
.triage-detail:has(input[value="descartar"]:checked) .triage-form[data-acao="descartar"] { display: grid; }
.triage-form .btn { min-height: 2.25rem; padding-inline: 0.875rem; font-size: 0.8125rem; }
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.contact-pop { width: min(24rem, calc(100vw - 2rem)); margin: auto; padding: 0.875rem; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); box-shadow: var(--shadow); }
.contact-pop::backdrop { background: rgb(0 0 0 / 0.42); }
.contact-pop-new { display: none; }
.contact-pop:has(option[value="novo"]:checked) .contact-pop-new { display: grid; }
.contact-pop input[readonly] { background: var(--surface); color: var(--muted); }
.triage-form .btn-danger { border-color: var(--accent); color: var(--accent); }
.triage-form .btn-danger:hover { background: var(--accent); color: var(--on-accent); }
@media (max-width: 760px) {
  .triage-item > summary { grid-template-columns: minmax(0, 1fr) 1rem; gap: 0.125rem 0.5rem; }
  .triage-from { grid-column: 1; grid-row: 2; }
  .triage-item > summary::after { grid-column: 2; grid-row: 1 / 3; }
  .triage-actions .btn, .triage-form .btn { min-height: 2.75rem; }
  .triage-actions .btn { flex: 1 1 auto; }
  .triage-actions .triage-cancel { margin-left: 0; }
}

/* Finanças: o mês é a entrada; cada linha diz o próximo passo. */
.month-nav { display: flex; align-items: center; gap: 0.25rem; }
.month-nav h2 { font-size: 0.9375rem; min-width: 11rem; text-align: center; }
.month-next .i { transform: rotate(180deg); }
.finance-totals .count { font-size: 1.25rem; white-space: nowrap; }
@media (min-width: 901px) { .finance-totals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fin-table .grid td { vertical-align: middle; }
.fin-table .row-link { font-weight: 500; }
.fin-client { display: block; font-weight: 600; }
.fin-sub { display: block; }
.fin-warning { margin: 0 1rem 0.5rem; }
.fin-alert td:first-child { box-shadow: inset 2px 0 var(--accent); }
@media (max-width: 760px) { .fin-alert td:first-child { box-shadow: none; } }

/* Horas a revisar (D-22): mês e cliente no topo, totais, lista por cliente ou por data. */
.hours-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; }
.hours-client select { min-width: 14rem; }
.hours-timers { display: flex; align-items: center; gap: 0.375rem 0.625rem; flex-wrap: wrap; }
.hours-list { border: 1px solid var(--line); }
.hours-list > .section-head { margin: 0; padding: 0.5rem 1rem; gap: 0.5rem; }
.hours-list thead th { background: var(--surface); border-top: 1px solid var(--line); }
.hours-list .empty { padding: 1.25rem 1rem; border-top: 1px solid var(--line); }
.hours-list .tag .i { width: 0.75rem; height: 0.75rem; }
.hours-group th { padding: 0.4375rem 1rem; background: var(--surface); border-top: 1px solid var(--line); font-weight: 400; text-align: left; }
.hours-group-head { display: flex; align-items: center; gap: 0.75rem; }
.hours-table td { vertical-align: top; }
.hours-ticket a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 20rem; text-decoration: none; }
.hours-actions { width: 1%; white-space: nowrap; text-align: right; }
.hours-actions .icon-btn { display: inline-grid; vertical-align: middle; }
.hours-actions .contact-pop { text-align: left; white-space: normal; }
.hours-review { display: inline-grid; width: 10rem; text-align: left; white-space: normal; vertical-align: middle; margin-right: 0.25rem; }
.hours-sub { display: block; }
.hours-history > li { align-items: flex-start; }
@media (max-width: 760px) {
  .hours-list > .section-head { padding-inline: 0.75rem; }
  .hours-table tr { padding-inline: 0.75rem; }
  .hours-table tr.hours-group { padding-block: 0.375rem; background: var(--surface); }
  .hours-group th { flex: 1 1 100%; padding: 0; border: 0; background: none; white-space: normal; }
  .hours-group-head { flex-wrap: wrap; gap: 0.25rem 0.75rem; }
  .hours-table td.pick { width: auto; padding: 0; }
  .hours-actions { width: auto; margin-left: auto; }
  .hours-ticket a { max-width: none; }
}
.fin-next { white-space: nowrap; }
.fin-next form { display: inline; }
.fin-next .btn .i { width: 0.875rem; height: 0.875rem; }
.fin-steps { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fin-steps li { padding: 0.25rem 0.75rem; background: var(--bg); color: var(--muted); font-size: 0.75rem; }
.fin-steps li[aria-current] { background: var(--selected); color: var(--on-selected); font-weight: 600; }
.fin-action { width: 100%; min-height: 2.25rem; font-size: 0.8125rem; }
@media (max-width: 760px) {
  .fin-table .grid td { padding: 0; }
  .fin-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; padding: 0.625rem 0.75rem; }
  .fin-next { flex-basis: 100%; }
  .fin-next .btn { min-height: 2.75rem; }
}

/* Três painéis */
.panes { display: grid; grid-template-columns: var(--list) minmax(0, 1fr) var(--side); height: 100%; min-height: 0; }
.panes-2 { grid-template-columns: minmax(0, 1fr) var(--side); }
.panes-empty { grid-template-columns: var(--list) minmax(0, 1fr); }
.pane-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line-pane); }
.pane-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.pane-side { overflow-y: auto; min-height: 0; border-left: 1px solid var(--line-pane); }
.pane-head { display: flex; align-items: center; gap: 0.5rem; min-height: 2.625rem; padding: 0.25rem 0.75rem; border-bottom: 1px solid var(--line); flex: none; }
.pane-head h1, .pane-head h2 { min-width: 0; }
.pane-head .back { display: none; }
.pane-title { flex: 1 1 0; min-width: 0; }
.row-tight { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.row-tight .status { flex: none; }
.stack-tight { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
.stack-tight > [data-dirty-save], .stack-tight > [data-priority-reason], .stack-tight > [data-status-extra] { margin-block: 0.375rem; }
.pane-title small { display: block; font-size: 0.75rem; color: var(--muted); }
.pane-title small.row-tight { display: flex; }
.list-head { justify-content: space-between; flex-wrap: nowrap; }
.inbox-tools { padding: 0.375rem 0.625rem; display: grid; gap: 0.5rem; border-bottom: 1px solid var(--line); }
.inbox-scroll { overflow-y: auto; min-height: 0; flex: 1; }
.convo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 0.5rem; align-items: center; padding: 0.4rem 0.625rem; text-decoration: none; }
.convo .avatar { grid-row: 1 / 4; align-self: start; margin-top: 0.1rem; }
.convo:hover { background: var(--surface); }
.convo[aria-current="true"] { background: var(--selected); color: var(--on-selected); }
.convo[aria-current="true"] .convo-last, .convo[aria-current="true"] .convo-meta, .convo[aria-current="true"] .status, .convo[aria-current="true"] .prio { color: var(--on-selected-muted); }
.convo-name { font-weight: 600; font-size: 0.8125rem; min-width: 0; }
.convo-time { color: var(--muted); font-size: 0.6875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.convo[aria-current="true"] .convo-time { color: var(--on-selected-muted); }
.convo-count { min-width: 1.15rem; padding: 0 0.25rem; border-radius: var(--radius-chip); background: var(--primary); color: var(--on-primary); font-size: 0.6875rem; line-height: 1.15rem; text-align: center; font-weight: 600; }
.convo[aria-current="true"] .convo-count { background: var(--on-selected); color: var(--selected); }
.convo-last { grid-column: 2 / -1; color: var(--muted); font-size: 0.8125rem; }
.convo-meta { grid-column: 2 / -1; color: var(--muted); font-size: 0.6875rem; display: flex; align-items: center; gap: 0.5rem; min-width: 0; overflow: hidden; }
.convo-meta > * { flex: none; }
.convo-meta .status { flex: 0 1 auto; min-width: 0; font-size: 0.6875rem; overflow: hidden; }
.convo-meta .tag { line-height: 1.05rem; font-size: 0.6875rem; padding-inline: 0.35rem; }
.convo-meta .prio { font-size: 0.6875rem; }
.convo[aria-current="true"] .tag-alert { color: inherit; border-color: currentColor; }

/* Atender: filtros da lista, ações da conversa e painel em abas. */
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.filter-chips a { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 1.375rem; padding: 0 0.375rem; border: 1px solid var(--line); color: var(--muted); font-size: 0.6875rem; white-space: nowrap; text-decoration: none; transition: border-color 120ms ease-out, color 120ms ease-out; }
.filter-chips a:hover { border-color: var(--line-strong); color: var(--text); }
.filter-chips a[aria-current="true"] { background: var(--selected); border-color: var(--selected); color: var(--on-selected); font-weight: 600; }
.filter-chips .num { color: var(--text); font-weight: 600; }
.filter-chips a[aria-current="true"] .num { color: inherit; }
.filter-chips .num:empty { display: none; }
.convo-chat { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--line); }
.convo-chat .convo-name { font-weight: 500; }
.convo-chat.is-unread .convo-name { font-weight: 700; }
.convo-chat.is-unread:not([aria-current="true"]) .convo-last { color: var(--text); }
.convo-chat .convo-meta { margin-top: 0.25rem; }
/* A espera nunca é cortada; quem cede espaço é o nome do responsável. */
.convo-chat .convo-meta .status { flex: none; }
/* Os cabeçalhos das três colunas terminam na mesma linha. */
.panes-tabs .pane-head { min-height: 2.8125rem; }
.convo-owner { flex: 0 1 auto; min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-late { color: var(--accent); font-weight: 600; }
.pane-actions { display: flex; align-items: center; gap: 0.375rem; flex: none; }
.pane-actions form { display: contents; }
.select-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding: 0.3125rem 0.75rem; background: var(--selected); color: var(--on-selected); font-size: 0.75rem; flex: none; }
.select-bar-end { display: flex; gap: 0.25rem; }
.select-bar .btn { border-color: transparent; color: inherit; }
.select-bar .btn:hover { background: transparent; border-color: currentColor; }
.select-bar .btn:focus-visible { outline-color: var(--on-selected); }
/* As abas são botões de opção: funcionam sem script e o teclado anda com as setas. */
.side-tabs { position: sticky; top: 0; z-index: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--bg); border-bottom: 1px solid var(--line); }
.side-tabs-4 span { gap: 0.2rem; font-size: 0.6875rem; }
/* Com o painel mais estreito, quatro abas só cabem com folga sem os ícones. */
@media (min-width: 761px) and (max-width: 1239px) { .side-tabs-4 .i { display: none; } }
.side-tabs label { display: block; color: var(--muted); font-size: 0.75rem; cursor: pointer; }
.side-tabs input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.side-tabs span { display: flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: calc(2.8125rem - 1px); transition: background-color 120ms ease-out, color 120ms ease-out; }
.side-tabs label:hover span { background: var(--surface-2); color: var(--text); }
.side-tabs input:checked + span { background: var(--selected); color: var(--on-selected); font-weight: 600; }
.side-tabs input:focus-visible + span { outline: 2px solid var(--text); outline-offset: -2px; }
.side-panel { display: none; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem; }
.pane-side:has([data-side-tab][value="contato"]:checked) .side-panel[data-tab="contato"],
.pane-side:has([data-side-tab][value="cliente"]:checked) .side-panel[data-tab="cliente"],
.pane-side:has([data-side-tab][value="ticket"]:checked) .side-panel[data-tab="ticket"],
.pane-side:has([data-side-tab][value="horas"]:checked) .side-panel[data-tab="horas"],
.pane-side:has([data-side-tab][value="mais"]:checked) .side-panel[data-tab="mais"] { display: grid; }
.side-title { margin-bottom: 0.25rem; font-size: var(--group-size); font-weight: var(--group-weight); text-transform: var(--group-case); letter-spacing: var(--group-track); color: var(--group-color); }
.side-actions { display: grid; gap: 0.375rem; }
.side-ticket { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.125rem 0.5rem; padding: 0.375rem 0; border-top: 1px solid var(--line); text-decoration: none; }
.side-ticket:hover { background: var(--surface); }
.side-ticket .status { grid-column: 2; }
#formalizar .field-row select:invalid { border-color: var(--line-strong); }
:root[data-side-state="closed"] .panes-tabs { grid-template-columns: var(--list) minmax(0, 1fr); }
:root[data-side-state="closed"] .panes-tabs .pane-side { display: none; }
@media (max-width: 760px) {
  .side-tabs { position: static; }
  .side-tabs span { min-height: 2.75rem; }
  .filter-chips a { min-height: 2rem; }
}

/* Conversa: mensagens e o corte */
.thread { flex: 1; min-height: 0; overflow-y: auto; padding: 0.75rem 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.day-sep { align-self: stretch; display: flex; align-items: center; gap: 0.625rem; margin-block: 0.25rem; color: var(--muted); font-size: 0.6875rem; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.msg-cont { margin-top: -0.25rem; }
.avatar-gap { flex: none; width: 1.5rem; }
.msg .avatar { margin-top: 0.125rem; }
.msg { display: flex; gap: 0.375rem; align-items: flex-start; max-width: min(82%, 46rem); align-self: flex-start; }
.msg > span:empty { display: none; }
.thread-select .msg > span:empty { display: block; flex: none; width: 1.0625rem; }
.msg-out { align-self: flex-end; }
.msg > input { margin-top: 0.5rem; flex: none; }
/* Ações raras da mensagem só aparecem ao passar o mouse ou focar; no toque ficam visíveis. */
.msg-bubble details { margin-top: 0.15rem; color: inherit; }
.msg-bubble details > summary { list-style: none; width: max-content; font-size: 0.6875rem; font-weight: 400; opacity: 0.75; text-decoration: underline; text-underline-offset: 2px; }
.msg-bubble details > summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
  .msg-bubble details:not([open]) { height: 0; overflow: hidden; margin: 0; }
  .msg-bubble:hover details:not([open]), .msg-bubble:focus-within details:not([open]) { height: auto; overflow: visible; margin-top: 0.15rem; }
}
.msg-bubble { min-width: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--bubble-in-line); border-radius: var(--radius-bubble); background: var(--bubble-in); color: var(--on-bubble-in); overflow-wrap: anywhere; min-width: 0; }
.msg-out .msg-bubble { background: var(--bubble-out); border-color: var(--bubble-out); color: var(--on-bubble-out); }
.msg-dismissed .msg-bubble { opacity: 0.62; border: 1px dashed var(--line-strong); }
.msg-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: center; margin-top: 0.2rem; color: var(--muted); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.msg-out .msg-meta { color: var(--on-bubble-out-muted); }
.msg-meta a { color: inherit; }
.msg-meta .tag { color: inherit; border-color: currentColor; background: transparent; line-height: 1.1rem; font-size: 0.6875rem; }
.msg-who { font-size: 0.75rem; font-weight: 600; margin-bottom: 0.05rem; }
.msg-late { opacity: 0.75; }
.msg-suggest { margin-top: 0.35rem; }
.msg-attach { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
.msg-attach img { max-width: 220px; max-height: 180px; border-radius: var(--radius-s); display: block; }
.msg-out .btn, .msg-out .tag { color: inherit; border-color: currentColor; }
input.split-box { display: none; }
.panes:has([data-split-toggle]:checked) input.split-box { display: inline-grid; }
/* O corte: discreto na leitura; no modo de seleção é o que importa, e ganha o acento. */
.cut { display: flex; align-items: center; gap: 0.5rem; margin: 0.375rem 0; color: var(--muted); font-size: 0.6875rem; line-height: 1.3; text-align: center; }
.cut .i { width: 0.875rem; height: 0.875rem; }
.cut::before, .cut::after { content: ""; flex: 1; border-top: 1px dashed var(--line-strong); }
.thread-select .cut { color: var(--accent); font-weight: 600; }
.thread-select .cut::before, .thread-select .cut::after { border-top-color: var(--accent); }

/* Ticket: a mesma linha do tempo, com notas e eventos */
.event { align-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 0.4rem; padding: 0.05rem 0; color: var(--muted); font-size: 0.6875rem; text-align: center; font-variant-numeric: tabular-nums; }
.note { align-self: stretch; padding: 0.45rem 0.7rem; border: 1px dashed var(--note-line); border-radius: var(--radius-s); background: var(--note-bg); color: var(--on-note); font-size: 0.8125rem; overflow-wrap: anywhere; }
.note-label { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.1rem; font-size: 0.6875rem; font-weight: 600; }
.note-label .i { width: 0.85rem; height: 0.85rem; }
.ticket-brief { align-self: stretch; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-s); font-size: 0.8125rem; }
.ticket-brief strong { display: block; font-size: 0.6875rem; color: var(--muted); font-weight: 600; }
.title-input { width: 100%; }
.stat-pair { display: flex; gap: 1.25rem; }
.value strong { display: block; font: 400 1.125rem/1.2 var(--mono); }
.value span { color: var(--muted); font-size: 0.75rem; }
.tall-values { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.chain { display: grid; gap: 0; }
.chain > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); font-size: 0.8125rem; }
.chain .mono { white-space: nowrap; }
.chain .total { border-bottom: 0; font-weight: 600; font-size: 0.9375rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.who { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.who strong { display: block; font-weight: 600; }
.score { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; }
.score label { display: block; }
.score input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.score span { display: grid; justify-items: center; padding: 0.4rem 0.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); color: var(--muted); font-size: 0.6875rem; cursor: pointer; }
.score strong { font: 400 1rem/1.1 var(--mono); color: var(--text); }
.score span:hover { background: var(--surface-2); }
.score input:checked + span { background: var(--selected); border-color: var(--selected); color: var(--on-selected-muted); }
.score input:checked + span strong { color: var(--on-selected); }
.score input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }

/* Campo de resposta único */
.composer { position: relative; flex: none; padding: 0.375rem 0.625rem 0.625rem; }
.composer-box { display: grid; border: 1px solid var(--line-pane); border-radius: var(--radius); background: var(--bg); }
.composer-label { display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.7rem 0; color: var(--muted); font-size: 0.6875rem; font-weight: 600; }
.composer-label .i { width: 0.875rem; height: 0.875rem; }
.composer-box:focus-within { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.composer-box textarea { min-height: 3.25rem; max-height: 40dvh; border: 0; border-radius: var(--radius); background: transparent; resize: vertical; padding: 0.55rem 0.7rem; }
.composer-box textarea:focus-visible { outline: 0; }
.composer[data-mode="note"] .composer-box { background: var(--note-bg); border-color: var(--note-line); border-style: dashed; }
.composer[data-mode="note"] textarea { color: var(--on-note); }
.composer-bar { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.375rem 0.375rem; flex-wrap: wrap; }
.composer-send { margin-left: auto; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; justify-content: flex-end; }
.composer-send select { width: auto; min-height: 1.5rem; max-width: 11rem; padding-block: 0.1rem; font-size: 0.75rem; }
.composer-send .btn { min-height: 1.75rem; }
.tool { position: relative; display: inline-flex; align-items: center; gap: 0.2rem; min-width: 1.5rem; height: 1.5rem; padding: 0 0.3rem; justify-content: center; border: 0; border-radius: var(--radius-s); background: none; color: var(--muted); font-size: 0.75rem; cursor: pointer; }
.tool:hover { background: var(--surface-2); color: var(--text); }
.tool:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 1px; }
.tool-text { padding-inline: 0.375rem; gap: 0.25rem; }
.tool-select { width: auto; min-height: 1.5rem; padding-block: 0.1rem; font-size: 0.75rem; border-color: transparent; background-color: transparent; }
.tool-select:hover { background-color: var(--surface-2); }
.canned { position: absolute; left: 0.75rem; right: 0.75rem; bottom: calc(100% - 0.375rem); z-index: 15; max-height: 15rem; overflow-y: auto; padding: 0.25rem; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.canned button { display: grid; gap: 0.05rem; width: 100%; padding: 0.35rem 0.5rem; border: 0; border-radius: var(--radius-s); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.canned button strong { font-size: 0.75rem; font-weight: 600; }
.canned button span { color: var(--muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canned button:hover, .canned button[aria-selected="true"] { background: var(--selected); color: var(--on-selected); }
.canned button:hover span, .canned button[aria-selected="true"] span { color: var(--on-selected-muted); }
.canned-empty { padding: 0.5rem; color: var(--muted); font-size: 0.8125rem; }

/* Busca global */
.palette { width: min(38rem, calc(100vw - 2rem)); max-height: min(30rem, 80dvh); margin: 12dvh auto auto; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--text); box-shadow: var(--shadow); }
.palette[open] { display: flex; flex-direction: column; }
.palette::backdrop { background: rgb(0 0 0 / 0.42); }
.palette-form { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); }
.palette-form input { border: 0; background: none; padding-inline: 0; font-size: 0.9375rem; }
.palette-form input:focus-visible { outline: 0; }
.palette-form input::-webkit-search-cancel-button { display: none; }
.pane-thread > .notice { margin: 0.5rem 0.75rem 0; flex: none; }
.palette-results { flex: 1; overflow-y: auto; padding: 0.25rem 0.375rem 0.5rem; min-height: 6rem; }
.palette-group { padding: 0.5rem 0.5rem 0.125rem; font-size: var(--group-size); font-weight: var(--group-weight); text-transform: var(--group-case); letter-spacing: var(--group-track); color: var(--muted); }
.palette-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-s); text-decoration: none; min-width: 0; }
.palette-item small { margin-left: auto; color: var(--muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.palette-item:hover, .palette-item[aria-selected="true"] { background: var(--selected); color: var(--on-selected); }
.palette-item:hover small, .palette-item[aria-selected="true"] small { color: var(--on-selected-muted); }
.palette-foot { display: flex; gap: 0.75rem; padding: 0.375rem 0.75rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.6875rem; }
.palette-empty { padding: 1rem 0.5rem; color: var(--muted); }

.radio-tabs label { display: block; }
.radio-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-tabs span { display: block; padding: 0.25rem 0.5rem; text-align: center; color: var(--muted); font-size: 0.75rem; border-radius: calc(var(--radius-s) - 2px); cursor: pointer; }
.radio-tabs input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 1px; }
.radio-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); }
.radio-tabs input:checked + span { background: var(--selected); color: var(--on-selected); box-shadow: none; }
.composer-tabs { display: inline-grid; grid-template-columns: auto auto; }
.composer-tabs span { padding-inline: 0.625rem; white-space: nowrap; }

/* Portal do solicitante */
.hello { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hello h2 { font-size: 1.25rem; }
.client-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.25rem; border-bottom: 1px solid var(--line); text-decoration: none; min-width: 0; }
.client-row:hover { background: var(--surface); }
.waiting { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.75rem 0.875rem; display: grid; gap: 0.5rem; }

.qr { background: #fff; padding: 0.5rem; display: inline-block; border-radius: var(--radius-s); line-height: 0; }
.qr svg, .qr img { width: 220px; height: 220px; display: block; }
.invite { font-family: var(--mono); font-size: 0.8125rem; word-break: break-all; }

/* Entrada: o único lugar com a marca em primeiro plano. */
/* A página tem pelo menos a altura da arte (34 × 0,945em de 100cqi / 63,72 ≈ 50,4% da largura, com folga para o
   ajuste do app.js): ela nunca é cortada. */
.auth { position: relative; container-type: inline-size; min-height: max(100dvh, 52vw); overflow: hidden; background: var(--bg); }
/* A arte passa por trás do formulário: o quadro opaco mantém rótulos, textos e QR Code legíveis. */
.auth-box { width: min(22rem, 100% - 2.5rem); margin: 8dvh auto 0; display: grid; gap: 1rem; padding: 2rem 0; position: relative; z-index: 1; background: var(--bg); }
@media (min-width: 40rem) { .auth-box { width: 25.5rem; padding-inline: 1.75rem; } }
.auth-box > a { justify-self: start; }
.auth-brand { display: flex; align-items: flex-end; gap: 0.1875rem; font: 400 1.75rem/1 var(--mono); }
.auth-brand .wordmark { height: 3.5rem; }
/* A wordmark em ASCII do rodapé de fonsecadev.com: mesmo texto, Share Tech Mono e célula 0,54 × 0,945 em.
   Lá ela é cortada; aqui fica inteira, apoiada no fim da página. A linha mais longa tem 118 colunas:
   118 × 0,54em = 63,72em = a largura toda (100cqi, sem a barra de rolagem). O app.js acerta o arredondamento
   com escala uniforme a partir do canto de baixo, sem mudar a proporção. */
.ascii { position: absolute; left: 0; bottom: 0; margin: 0; width: fit-content; font: 400 calc(100cqi / 63.72)/0.945 var(--mono); color: var(--line-strong); white-space: pre; text-align: left; transform-origin: 0 100%; pointer-events: none; user-select: none; }

/* Menu da área vira gaveta abaixo de 1280 px. */
@media (max-width: 1239px) {
  .shell.has-area { --area-w: 0px; }
  .area { display: none; }
  :root[data-area-state="open"] .area { display: block; position: fixed; top: var(--bar); bottom: 0; left: var(--rail); z-index: 25; width: var(--area); box-shadow: var(--shadow); }
  :root { --list: 264px; --side: 264px; }
}
@media (max-width: 1040px) {
  .panes { grid-template-columns: var(--list) minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
  .panes-2 { grid-template-columns: minmax(0, 1fr); }
  .pane-side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-pane); max-height: none; overflow: visible; }
  .panes:has(.pane-side) { height: auto; }
  .panes:has(.pane-side) .pane-thread, .panes:has(.pane-side) .pane-list { height: calc(100dvh - var(--bar) - var(--gap)); }
  .columns { grid-template-columns: minmax(0, 1fr); }
  .search-trigger span, .search-trigger kbd { display: none; }
  .search-trigger { width: 2rem; padding: 0; justify-content: center; margin-left: auto; margin-right: 0; flex: none; }
}
/* Celular: a mesma tarefa, em uma coluna. */
@media (max-width: 760px) {
  .shell { display: flex; flex-direction: column; height: auto; min-height: 100dvh; padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
  .bar { position: sticky; top: 0; flex: none; min-height: var(--bar); }
  .rail, .area, :root[data-area-state="open"] .area, .bar .switch { display: none; }
  .main { margin: 0; border-radius: 0; flex: 1; overflow: visible; }
  .main > main { overflow: visible; }
  .top { padding: 0.375rem 0.75rem; }
  .page { padding: 0.875rem 0.75rem; }
  .list-tools { padding: 0.625rem 0.75rem; }
  .tabbar { position: fixed; inset: auto 0 0 0; z-index: 30; min-height: 3.5rem; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--bg); border-top: 1px solid var(--line-pane); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { position: relative; display: grid; justify-items: center; gap: 0.1rem; padding: 0.45rem 0 0.35rem; color: var(--muted); font-size: 0.6875rem; text-decoration: none; }
  .tabbar a[aria-current="page"] { color: var(--text); font-weight: 650; }
  .tabbar .i { width: 1.35rem; height: 1.35rem; }
  .panes, .panes-2, .panes-empty, .panes:has(.pane-side) { display: block; height: auto; }
  .panes:has(.pane-side) .pane-thread, .panes:has(.pane-side) .pane-list { height: auto; }
  .pane-list { border-right: 0; }
  .pane-list.has-open { display: none; }
  .pane-empty { display: none; }
  .inbox-scroll { overflow: visible; }
  .thread { overflow: visible; }
  .msg { max-width: 94%; }
  .pane-head { position: sticky; top: var(--bar); z-index: 12; background: var(--bg); }
  .pane-head .back { display: grid; }
  .composer { position: sticky; bottom: calc(3.5rem + env(safe-area-inset-bottom)); background: var(--bg); z-index: 11; border-top: 1px solid var(--line); }
  .pane-side { overflow: visible; }
  .timer a { display: none; }
  .btn, .icon-btn, .tool { min-height: 2.75rem; }
  .icon-btn, .tool { min-width: 2.75rem; height: 2.75rem; }
  .btn-small { min-height: 2.25rem; }
  input, select, textarea { font-size: 1rem !important; min-height: 2.75rem !important; }
  input[type="checkbox"], input[type="radio"] { min-height: 0 !important; width: 1.3rem; height: 1.3rem; }
  .composer-box textarea { min-height: 2.75rem !important; }
  .composer-box:not(:focus-within) .composer-bar > :not(.composer-send), .composer-box:not(:focus-within) .composer-send select { display: none; }
  .composer-send select { max-width: 9.5rem; }
  .pane-head { flex-wrap: wrap; }
  .pane-title { flex-basis: 60%; }
  .col-m-hide { display: none; }
  .grid th:first-child, .grid td:first-child { padding-left: 0.75rem; }
  .grid th:last-child, .grid td:last-child { padding-right: 0.75rem; }
  .palette { margin-top: 2dvh; max-height: 90dvh; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
.push-end { margin-left: auto; }
.grid .clip { display: block; max-width: clamp(22ch, 20vw, 60ch); }

/* Cadastros recolhidos: o botão abre o formulário no lugar. */
.disclosure-action { border-top: 0; padding: 0; }
.disclosure-action > summary { display: inline-flex; width: max-content; min-height: 1.75rem; align-items: center; padding: 0.2rem 0.625rem; border: 1px solid var(--line-strong); font: 500 0.75rem/1.2 var(--sans); }
.disclosure-action > summary:hover { background: var(--surface-2); }
.disclosure-action > summary::after { display: none; }
.disclosure-action[open] > summary { border-color: transparent; padding-left: 0; color: var(--muted); }

/* Ações em lote */
.bulk { display: flex; align-items: flex-end; gap: 0.625rem; flex-wrap: wrap; padding: 0.375rem 1rem; background: var(--surface); border-block: 1px solid var(--line); }
.bulk label { min-width: 9rem; }
.bulk-count { align-self: center; font-weight: 600; font-size: 0.75rem; }
.grid .pick { position: relative; z-index: 1; width: 1%; padding-right: 0.5rem; }
.grid .pick input { vertical-align: middle; }
.push-end { margin-left: auto; }

/* Relatórios */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem 1.5rem; }
.metric strong { display: block; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.metric span { display: block; font-size: 0.6875rem; color: var(--muted); }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem 2rem; }
.chart-figure { margin: 0; min-width: 0; display: grid; gap: 0.375rem; }
.chart-figure figcaption { font-size: var(--group-size); font-weight: var(--group-weight); text-transform: var(--group-case); letter-spacing: var(--group-track); color: var(--group-color); }
.chart { display: block; width: 100%; height: auto; }
.chart-bar { fill: var(--text); }
.chart-hit { fill: transparent; }
.chart-col:hover .chart-bar { fill: var(--accent); }
.chart-col:hover .chart-hit { fill: var(--surface); }
.chart-base { stroke: var(--line-strong); stroke-width: 1; }
.chart-text { fill: var(--muted); font: 400 10px var(--sans); }
.chart-text-strong { fill: var(--text); font: 400 11px var(--sans); }
.chart-empty { padding: 1.5rem 0; color: var(--muted); font-size: 0.75rem; }
@media (max-width: 760px) { .chart-grid { grid-template-columns: minmax(0, 1fr); } }
/* Lista de conversas em duas linhas: o contador fica ao lado da prévia. */
.convo-last-short { grid-column: 2; }
.convo-last-short + .convo-count { grid-column: 3; justify-self: end; }
.convo:has(.convo-last-short) .avatar { grid-row: 1 / 3; }

/* Tabelas largas no celular: cada linha vira um bloco, sem rolagem para o lado e sem perder coluna. */
@media (max-width: 760px) {
  .table-stack, .table-stack tbody, .table-stack tfoot { display: block; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-stack tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.625rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
  .table-stack td { max-width: 100%; padding: 0; border: 0; overflow-wrap: anywhere; }
  .table-stack td.num { text-align: left; }
  .table-stack td.stack-full { flex: 1 1 calc(100% - 2rem); }
}

/* Clientes (D-24): listas de Empresas e Contatos; a empresa e o contato abrem com resumo e abas. */
.page-empty { padding: 1.5rem 1rem; }
.m-label { display: none; font-family: var(--sans); }
.list-tools .segmented a { white-space: nowrap; }
.grid .cell-link { position: relative; z-index: 1; }
.record-sub { display: block; }
.record-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: -0.25rem; }
.record-meta > :not(:last-child)::after { content: "·"; margin-left: 0.5rem; color: var(--muted); }
@media (min-width: 901px) { .queues-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.queue-text strong.clip { display: block; }
.record { display: grid; grid-template-columns: minmax(0, 1fr); }
.record > .record-tabs { display: flex; border-radius: 0; }
.record-tabs a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding-block: 0.375rem; white-space: nowrap; }
.record-panel { border: 1px solid var(--line); border-top: 0; }
.record-panel > .section-head { margin: 0; padding: 0.5rem 1rem; }
.record-panel thead th { background: var(--surface); border-top: 1px solid var(--line); }
.record-panel tbody tr:last-child td { border-bottom: 0; }
.record-panel .empty { padding: 1.25rem 1rem; border-top: 1px solid var(--line); }
.record-panel .pagination { margin: 0; padding: 0.5rem 1rem; border-top: 1px solid var(--line); }
.record-foot, .disclosure.record-foot, .disclosure-action.record-foot { margin: 0; padding: 0.5rem 1rem; border-top: 1px solid var(--line); }
.record-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; }
.record-form .grow { flex: 1 1 14rem; }
.record-subhead { margin: 0; padding: 0.625rem 1rem 0.375rem; border-top: 1px solid var(--line); font-size: var(--group-size); font-weight: var(--group-weight); text-transform: var(--group-case); letter-spacing: var(--group-track); color: var(--group-color); }
.record-list { border-top: 0; padding-inline: 0.75rem; }
/* Sem quebra no desktop: num flex que quebra, o Chrome mede o formulário pelo maior item e o botão desce. */
.record-inline { display: flex; align-items: center; gap: 0.5rem; }
.record-inline select { width: 16rem; min-width: 0; flex: 0 1 auto; }
.record-actions { width: 1%; white-space: nowrap; text-align: right; }
.record-actions form { display: inline; }
.record-actions .contact-pop { text-align: left; white-space: normal; }
@media (max-width: 760px) {
  .page-empty { padding-inline: 0.75rem; }
  .table-stack .m-label { display: inline; }
  .record-table tr { padding-inline: 0.75rem; }
  .record-table td.pick { width: auto; padding: 0; }
  .record-table td:first-child { padding-left: 0; }
  .record-table td:last-child { padding-right: 0; }
  .record-panel > .section-head, .record-foot, .disclosure.record-foot, .disclosure-action.record-foot, .record-subhead, .record-panel .pagination { padding-inline: 0.75rem; }
  .record-panel .empty { padding-inline: 0.75rem; }
  .record-tabs a { padding-inline: 0.25rem; }
  .record-actions { width: auto; margin-left: auto; }
  .record-inline { flex: 1 1 100%; }
  /* O botão de ícone fica no canto da linha, em vez de cair sozinho numa linha nova. */
  .record-table tr:has(td.record-actions .icon-btn) { padding-right: 2.75rem; }
  .record-table td.record-actions:has(.icon-btn) { position: absolute; top: 0.25rem; right: 0.5rem; margin: 0; }
  .record-inline select { width: auto; flex: 1 1 auto; }
}

/* Portal do cliente (D-25): status com nome do cliente, faixa do que pede ação e aviso no topo do ticket. */
.status-alert { color: var(--accent); font-weight: 600; }
@media (min-width: 901px) {
  .queues-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queues-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hello h1 { font-size: 1.25rem; }
.client-banner { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; flex: none; padding: 0.5rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 0.8125rem; }
.client-banner > .i { flex: none; }
.client-banner form { display: inline; }
.client-banner.is-alert { box-shadow: inset 3px 0 var(--accent); }
.client-banner.is-alert > .i { color: var(--accent); }
.contact-pop.pop-wide { width: min(36rem, calc(100vw - 2rem)); }
/* Caixa das tabelas do portal: o visual do bloco do Início da equipe, sem a grade de celular feita para ele. */
.client-box { border: 1px solid var(--line); }
.client-box > .section-head { margin: 0; padding: 0.5rem 1rem; }
.client-box thead th { background: var(--surface); border-top: 1px solid var(--line); }
.client-box tbody tr:last-child td { border-bottom: 0; }
.client-box .row-link { font-weight: 400; }
.client-box .empty { padding: 1.25rem 1rem; border-top: 1px solid var(--line); }
.client-box > .record-foot { margin: 0; }
@media (max-width: 760px) {
  .client-box > .section-head, .client-box .empty { padding-inline: 0.75rem; }
  .client-banner > .grow { flex: 1 1 calc(100% - 2rem); }
  .client-banner { padding-inline: 0.75rem; }
  .client-banner .btn { min-height: 2.75rem; }
}

/* Painel do gestor (D-26): o mês da empresa com tempo e custo; franquia e pacote com a barra de uso. */
.queues-compact .queue { padding-block: 0.4375rem; gap: 0.25rem 0.5rem; }
.queues-compact .count { font-size: 1.25rem; }
.metrics { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.metrics-head { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; flex-wrap: wrap; }
.metrics-head p { margin: 0; display: grid; justify-items: end; }
.quota { display: grid; gap: 0.5rem; padding: 0.625rem 1rem; border: 1px solid var(--line); }
.quota-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; flex-wrap: wrap; }
.quota-bar { display: block; width: 100%; height: 0.375rem; }
.quota-track { fill: var(--surface-2); }
.quota-used { fill: var(--text); }
.quota-used.is-over { fill: var(--accent); }
.quota-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0; }
.quota-stats dt { color: var(--muted); font-size: 0.6875rem; }
.quota-stats dd { margin: 0; font-size: 1rem; }
.quota-stats .is-over { color: var(--accent); }
.list-select { width: auto; min-width: 12rem; }
.client-box tfoot th, .client-box tfoot td { padding-block: 0.4375rem; border-top: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; text-align: left; }
.client-box tfoot td.num { text-align: right; }
.client-box tfoot th:first-child { padding-left: 1rem; }
@media (max-width: 760px) {
  .metrics-head p { justify-items: start; }
  .quota { padding-inline: 0.75rem; }
  .quota-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-box tfoot tr { padding-inline: 0.75rem; border-top: 1px solid var(--line-strong); background: var(--surface); }
  .client-box tfoot th, .client-box tfoot td, .client-box tfoot th:first-child { padding: 0; border: 0; background: none; }
  .list-select { flex: 1 1 100%; }
}