/* clockrex.css
   Estilos dos componentes proprios do Clockrex (mapa, tile, avatar, dock, seletor de
   idioma, cabecalho). CSS copiado de design-system/showcase.html e consumindo SOMENTE
   os tokens semanticos de tokens.css (nunca primitivos --n-*). Sem emoji. */

/* ---------- base necessaria ao showcase ---------- */
[hidden] { display: none !important; }

.clx-app *, .clx-app *::before, .clx-app *::after { box-sizing: border-box; }

.clx-app {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  color: var(--text-1);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}

.clx-app :focus-visible { outline: var(--ring-width) solid var(--focus-ring); outline-offset: var(--ring-offset); }

/* Icones e numeros valem em QUALQUER tela (login, landing, LGPD, erro), nao so dentro do .clx-app:
   presos ao .clx-app, o sprite virava um ponto preto nas telas de entrada. */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 14px; height: 14px; }
.ic-lg { width: 24px; height: 24px; }
.num { font-variant-numeric: tabular-nums; }
.clx-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- cabecalho do app (52px) ---------- */
.clx-head { display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 12px 0 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-floor); }
.org-mark { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font: 700 .625rem/1 var(--font-sans); letter-spacing: .02em; flex: none; }
.org-name { font: var(--type-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn-ind { display: inline-flex; align-items: center; gap: 6px; font: var(--type-meta); color: var(--text-2); white-space: nowrap; }
.conn-ind i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.conn-ind.is-reconnecting i { background: var(--warning); }
.conn-ind.is-offline i { background: var(--text-3); }
.clx-grow { flex: 1; }

/* ---------- area do mapa ---------- */
.clx-floor-wrap { flex: 1; overflow: auto; background: var(--bg-floor); }
.floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min-w), 1fr)); grid-auto-rows: var(--tile-h); grid-auto-flow: dense; gap: var(--tile-gap); padding: 16px; }

/* ---------- tile ---------- */
.tile { --cut: var(--surface-1); position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; padding: 10px 12px; margin: 0; border: 0; border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: var(--shadow-1); color: var(--text-1); text-align: left; cursor: pointer; font: var(--type-body); transition: background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
button.tile:hover { --cut: var(--surface-2); background: var(--surface-2); }
.tile:focus-visible { outline: var(--ring-width) solid var(--focus-ring); outline-offset: var(--ring-offset); }
.tile-head { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 18px; }
.tile-name { flex: 1 1 auto; min-width: 0; font: var(--type-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-meta { display: flex; align-items: center; gap: 5px; flex: none; color: var(--text-2); font: var(--type-meta); font-variant-numeric: tabular-nums; }
.tile-meta .bars { color: var(--voice); }
.people { display: flex; align-items: center; gap: 6px; min-height: var(--avatar-lg); }
.room-lg { grid-column: span 2; grid-row: span 2; }
.room-md { grid-column: span 2; }
.stage { --cut: var(--bg-floor); flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: var(--radius-lg); background: var(--bg-floor); }
.stage .people { flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 184px; }
.seat { width: var(--avatar-lg); height: var(--avatar-lg); border-radius: 50%; border: 1.5px dashed var(--border-strong); flex: none; }

.tile.is-offline .tile-name { color: var(--text-2); }
.tile.is-live { box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-1); }
.tile.is-here { box-shadow: inset 0 0 0 1.5px var(--brand-glow), var(--shadow-1); }
.tile.is-you { background: linear-gradient(180deg, var(--brand-tint), transparent 78%), var(--surface-1); box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 24px -6px var(--brand-glow); }
button.tile.is-you:hover { background: linear-gradient(180deg, var(--brand-tint), transparent 78%), var(--surface-2); }
.tile.is-full { cursor: not-allowed; }
.tile.is-knocking { animation: clx-knock 1.2s var(--ease-standard) infinite; }
@keyframes clx-knock { 0%, 100% { box-shadow: inset 0 0 0 1.5px var(--brand), var(--shadow-1); } 50% { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 5px var(--brand-tint); } }
@media (prefers-reduced-motion: reduce) {
  .tile.is-knocking { animation: none; box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px var(--brand-tint); }
}

/* ---------- chips e selo de status ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: var(--radius-xs); font: 600 .6875rem/1 var(--font-sans); letter-spacing: .01em; white-space: nowrap; }
.chip-brand { background: var(--brand-tint); color: var(--brand-text); }
.chip-warn { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning-text); }

.sdot { --c: var(--status-available); position: relative; display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.sdot.lg { width: 22px; height: 22px; }
.s-available { --c: var(--status-available); }
.s-meeting { --c: var(--status-meeting); }
.s-dnd { --c: var(--status-dnd); }
.s-away { --c: var(--status-away); background: transparent; box-shadow: inset 0 0 0 max(2px, .18em) var(--c); }
.sdot.s-away { box-shadow: inset 0 0 0 2px var(--c); }
.sdot.lg.s-away { box-shadow: inset 0 0 0 4px var(--c); }
.s-meeting::after { content: ""; position: absolute; left: 27%; top: 33%; width: 46%; height: 34%; border-radius: 1px; background: var(--cut, var(--surface-1)); }
.s-dnd::after { content: ""; position: absolute; left: 22%; right: 22%; top: 41%; height: 18%; border-radius: 1px; background: var(--cut, var(--surface-1)); }
.pill { --cut: var(--surface-2); display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 9px; border-radius: var(--radius-full); background: var(--surface-2); border: 1px solid var(--border-default); font: var(--type-label); font-size: .75rem; color: var(--text-1); white-space: nowrap; }

/* ---------- avatar ---------- */
.av { --s: var(--avatar-lg); position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: oklch(.5 .1 var(--h, 262)); color: #FFFFFF; font: 600 calc(var(--s) * .36)/1 var(--font-sans); letter-spacing: -.01em; user-select: none; transition: opacity var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.av-xs { --s: var(--avatar-xs); } .av-sm { --s: var(--avatar-sm); } .av-md { --s: var(--avatar-md); } .av-lg { --s: var(--avatar-lg); } .av-xl { --s: var(--avatar-xl); } .av-2xl { --s: var(--avatar-2xl); }
.av .badge { position: absolute; right: -2px; bottom: -2px; width: max(8px, calc(var(--s) * .3)); height: max(8px, calc(var(--s) * .3)); box-shadow: 0 0 0 2px var(--cut, var(--surface-1)); }
.av .badge.s-away { box-shadow: 0 0 0 2px var(--cut, var(--surface-1)), inset 0 0 0 max(2px, calc(var(--s) * .07)) var(--c); background: var(--cut, var(--surface-1)); }
.av-xs .badge::after, .av-sm .badge::after { display: none; }
.av.is-away { opacity: .55; }
.av.is-speaking { box-shadow: 0 0 0 2px var(--cut, var(--surface-1)), 0 0 0 4px var(--voice); }
.av.is-speaking::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; animation: clx-halo var(--dur-speak) var(--ease-standard) infinite; }
@keyframes clx-halo { 0% { box-shadow: 0 0 0 0 var(--voice-halo); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .av.is-speaking::before { animation: none; box-shadow: 0 0 0 3px var(--voice-halo); }
}
.av.is-selected { box-shadow: 0 0 0 2px var(--cut, var(--surface-1)), 0 0 0 4px var(--brand); }

/* ---------- dock ---------- */
.dock { --cut: var(--surface-1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); background: var(--bg-floor); }
.dock-group { display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-full); }
.dock-sep { width: 1px; height: 22px; background: var(--border-default); margin: 0 4px; }
.dbtn { position: relative; display: inline-grid; place-items: center; width: var(--dock-button); height: var(--dock-button); padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-1); cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.dbtn:hover { background: var(--surface-2); text-decoration: none; }
.dbtn .off-ic { display: none; }
.dbtn[aria-pressed="false"] .on-ic { display: none; }
.dbtn[aria-pressed="false"] .off-ic { display: block; }
.dbtn[data-kind="mic"][aria-pressed="false"] { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); }
.dbtn[data-kind="cam"][aria-pressed="false"] { color: var(--text-2); }
.dbtn:disabled { color: var(--text-3); cursor: not-allowed; background: transparent; }
.dbtn.leave { width: auto; padding: 0 14px; gap: 6px; display: inline-flex; align-items: center; background: var(--danger-fill); color: #FFFFFF; font: var(--type-body-strong); font-size: .8125rem; }
.dbtn.leave:hover { background: color-mix(in oklab, var(--danger-fill), #000 10%); }
.dbtn.leave:disabled { background: var(--surface-2); color: var(--text-3); }
.dbtn .count-badge { position: absolute; top: 2px; right: 0; }
.status-btn { --cut: var(--surface-1); display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; border-radius: var(--radius-full); border: 1px solid var(--border-default); background: var(--surface-1); color: var(--text-1); font: var(--type-label); cursor: pointer; }
.status-btn:hover { border-color: var(--border-strong); }
/* Estado de menu aberto (o JS-MAPA marca aria-expanded no botao, mesmo padrao do .lang-btn):
   realca a borda/fundo e gira o chevron. O menu suspenso em si reaproveita .menu-wrap/.menu. */
.status-btn[aria-expanded="true"] { border-color: var(--border-strong); background: var(--surface-2); }
.status-btn .chev { width: 12px; height: 12px; color: var(--text-2); transition: transform var(--dur-fast) var(--ease-standard); }
.status-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.count-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font: 600 .6875rem/18px var(--font-sans); text-align: center; font-variant-numeric: tabular-nums; }

.tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: var(--z-tooltip); padding: 5px 8px; border-radius: var(--radius-sm); background: var(--surface-inverse); color: var(--text-on-inverse); font: var(--type-meta); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* No cabecalho (topo da tela) o balao para cima saia do .clx-app (overflow: hidden) e so 2px apareciam:
   abre para baixo. O ultimo botao (Sair) encosta na borda direita: balao ancorado pela direita. */
.clx-head .tip::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
.clx-head .tip:hover::after, .clx-head .tip:focus-visible::after { transform: translate(-50%, 0); }
.clx-head > .tip:last-child::after { left: auto; right: 0; transform: translateY(-4px); }
.clx-head > .tip:last-child:hover::after, .clx-head > .tip:last-child:focus-visible::after { transform: none; }

/* ---------- menus e seletor de idioma ---------- */
.menu-wrap { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: transparent; color: var(--text-2); font: 600 .75rem/1 var(--font-sans); letter-spacing: .06em; cursor: pointer; transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--text-1); border-color: var(--border-strong); }
.lang-btn .ic { width: 14px; height: 14px; }
.lang-btn .chev { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease-standard); }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 188px; margin: 0; padding: 4px; list-style: none; background: var(--surface-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); z-index: var(--z-dropdown); }
.menu.up { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.menu li { margin: 0; }
.menu [role^="menuitem"] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-1); font: var(--type-body); text-align: left; text-decoration: none; cursor: pointer; }
.menu [role^="menuitem"]:hover, .menu [role^="menuitem"]:focus-visible { background: var(--surface-2); outline: none; }
.menu [role^="menuitem"]:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.menu .lang-code { font: 600 .6875rem/1 var(--font-sans); letter-spacing: .06em; color: var(--text-2); width: 20px; }
.menu .check { margin-left: auto; visibility: hidden; color: var(--brand-text); }
.menu [aria-checked="true"] .check { visibility: visible; }

/* faixa de conexao (reconnecting/offline) */
.conn-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font: var(--type-meta); color: var(--text-1); background: color-mix(in srgb, var(--warning) 16%, transparent); border-bottom: 1px solid var(--border-subtle); }
.conn-bar.is-offline { background: var(--surface-2); color: var(--text-2); }

/* ===================== Login / formularios (extraido do showcase) ===================== */
.clx-login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg-app)}
.card{background:var(--surface-1);border-radius:var(--radius-2xl);box-shadow:var(--shadow-1);padding:22px}
.login{max-width:380px;width:100%}
.login-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.login-mark{font:400 .8125rem/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-strong)}
.login-tag{margin:4px 0 20px;font:var(--type-meta);color:var(--text-2)}
.stack-y{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.label{font:var(--type-label);color:var(--text-1)}
.input{width:100%;height:var(--control-lg);padding:0 12px;border-radius:var(--radius-md);border:1px solid var(--border-control);background:var(--surface-1);color:var(--text-1);font:var(--type-body);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.input::placeholder{color:var(--text-2)}
.input:hover{border-color:var(--text-2)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 0 0 4px var(--brand-tint)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-md);padding:0 14px;border-radius:var(--radius-md);border:1px solid transparent;font:var(--type-body-strong);font-size:.8125rem;white-space:nowrap;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.btn-lg{height:var(--control-lg);padding:0 18px;font-size:.875rem}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-primary:disabled{background:var(--surface-2);color:var(--text-3);cursor:not-allowed}
.help{display:flex;align-items:center;gap:6px;font:var(--type-meta);color:var(--text-2)}
.help.err{color:var(--danger-text)}
.help .ic{width:14px;height:14px;flex:none}
.check-line{display:flex;gap:10px;align-items:flex-start;font:var(--type-meta);color:var(--text-2);line-height:1.5;cursor:pointer}
.check-line input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--brand);flex:none}

/* ===================== Landing / onboarding publico ===================== */
.clx-public-wrap{align-content:center}
.public-card{width:100%;max-width:680px}
.onboarding-card{max-width:520px}
.public-card h1{margin:8px 0 12px;font:var(--type-headline);color:var(--text-strong)}
.public-copy{max-width:58ch;margin:0 0 24px;font:var(--type-body);line-height:1.6;color:var(--text-2)}
.public-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.public-actions .btn{height:auto;min-height:var(--control-lg);white-space:normal;text-align:center;text-decoration:none}
.public-link{margin:20px 0 0;font:var(--type-meta);color:var(--text-2);text-align:center}
.public-link a{color:var(--brand-text);font-weight:600;text-underline-offset:3px}
.public-feedback{margin:0 0 20px}
.public-feedback.banner>span{min-width:0}

/* ===================== AInbox / mensageria (extraido do showcase, secao 6.8/6.9/6.10) ===================== */
/* So tokens semanticos. Copiado de design-system/showcase.html (bloco "ainbox"). */
.inbox{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);border-radius:var(--radius-2xl);background:var(--bg-floor);border:1px solid var(--border-subtle);overflow:hidden}
@media (max-width:820px){.inbox{grid-template-columns:1fr}}
.inbox-list{--cut:var(--bg-floor);padding:12px;border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:2px;min-height:0}
.search{position:relative;display:flex;align-items:center}
.search .ic{position:absolute;left:10px;color:var(--text-2);pointer-events:none}
.search input{width:100%;height:34px;padding:0 10px 0 32px;border-radius:var(--radius-md);border:1px solid var(--border-control);background:var(--surface-1);color:var(--text-1);font:var(--type-body)}
.search input::placeholder{color:var(--text-2)}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 0 0 4px var(--brand-tint)}
.list-h{display:flex;align-items:center;justify-content:space-between;margin:14px 8px 4px;font:var(--type-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.conv{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 8px;border-radius:var(--radius-md);color:var(--text-1);text-decoration:none;border:0;background:transparent;text-align:left;cursor:pointer;width:100%}
.conv:hover{background:var(--surface-1);text-decoration:none}
.conv.is-active{--cut:var(--surface-2);background:var(--surface-2)}
.conv-main{min-width:0;display:flex;flex-direction:column;gap:1px}
.conv-name{display:flex;align-items:center;gap:5px;font:var(--type-label);min-width:0}
.conv-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-name .ic{color:var(--text-2)}
.conv-prev{display:flex;align-items:center;gap:4px;font:var(--type-meta);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font:var(--type-meta);color:var(--text-2);font-variant-numeric:tabular-nums}
.conv.is-unread .conv-name{font-weight:600;color:var(--text-strong)}
.conv.is-unread .conv-prev{color:var(--text-1)}
.group-ic{width:32px;height:32px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--surface-3);color:var(--text-1)}
.folder{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--radius-md);font:var(--type-label);color:var(--text-1)}
.folder .ic{color:var(--text-2)}
.folder em{margin-left:auto;font-style:normal;font:var(--type-meta);color:var(--text-2)}
.thread{--cut:var(--bg-floor);display:flex;flex-direction:column;min-width:0}
.thread-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-subtle)}
.thread-h b{font:var(--type-subtitle)}
.thread-h span{font:var(--type-meta);color:var(--text-2)}
.msgs{display:flex;flex-direction:column;gap:14px;padding:18px 16px;overflow-y:auto}
.msg{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;max-width:600px}
.msg-body{display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:0}
.msg-meta{font:var(--type-meta);color:var(--text-2);font-variant-numeric:tabular-nums}
.msg-meta b{font-weight:600;color:var(--text-1);margin-right:6px}
.bubble{max-width:62ch;padding:8px 12px;border-radius:4px 14px 14px 14px;background:var(--surface-1);border:1px solid var(--border-subtle);line-height:1.5;overflow-wrap:anywhere}
.msg.own{margin-left:auto;grid-template-columns:minmax(0,1fr)}
.msg.own .msg-body{align-items:flex-end}
.msg.own .bubble{border-radius:14px 4px 14px 14px;background:var(--brand-tint);border-color:color-mix(in srgb,var(--brand) 28%,transparent)}
.msg-sys{align-self:center;padding:4px 12px;border-radius:var(--radius-full);background:var(--surface-1);font:var(--type-meta);color:var(--text-2)}
.reacts{display:flex;gap:4px;flex-wrap:wrap}
.react-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--surface-1);font:var(--type-meta);font-variant-numeric:tabular-nums;cursor:pointer}
.react-chip.mine{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-text)}
.file{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--border-subtle);font:var(--type-label)}
.file span{font:var(--type-meta);color:var(--text-2)}
.composer{display:flex;align-items:flex-end;gap:6px;margin:0 16px 16px;padding:6px;border-radius:var(--radius-xl);border:1px solid var(--border-control);background:var(--surface-1)}
.composer:focus-within{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 0 0 4px var(--brand-tint)}
.composer textarea{flex:1;min-height:32px;max-height:120px;padding:6px 4px;border:0;background:transparent;color:var(--text-1);font:var(--type-body);resize:none}
.composer textarea:focus{outline:none}
.composer textarea::placeholder{color:var(--text-2)}
.composer .dbtn{width:32px;height:32px}
.composer .send{background:var(--brand);color:var(--on-brand)}
.composer .send:hover{background:var(--brand-hover)}
.results{margin-top:8px;border-radius:var(--radius-xl);background:var(--surface-3);box-shadow:var(--shadow-2);padding:6px}
.result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 10px;border-radius:var(--radius-md);border:0;background:transparent;text-align:left;cursor:pointer;width:100%}
.result:hover{background:var(--surface-2)}
.result b{font:var(--type-label)}
.result span{grid-column:1;font:var(--type-meta);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result time{grid-row:1;grid-column:2;font:var(--type-meta);color:var(--text-2)}
mark{background:color-mix(in srgb,var(--warning) 30%,transparent);color:var(--text-1);border-radius:3px;padding:0 2px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:36px 20px}
.empty-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1.5px dashed var(--border-strong);color:var(--text-2)}
.empty-t{font:400 .75rem/1.4 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--text-1)}
.empty p{margin:0;max-width:36ch;font:var(--type-meta);color:var(--text-2);line-height:1.55}
.btn-sm{height:var(--control-sm);padding:0 12px;font-size:.75rem}
/* AInbox como pagina cheia: ocupa a area util abaixo do cabecalho e organiza os dois paineis. */
.clx-inbox-page{flex:1;min-height:0;padding:16px;display:flex}
.clx-inbox-page .inbox{flex:1;min-height:0}
.clx-inbox-page .thread{min-height:0}

/* ===================== LGPD / dialogos (extraido do showcase, secao 6.3/6.14) ===================== */
/* So tokens semanticos. Copiado de design-system/showcase.html (botoes e bloco "Dialogos"). */
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text-1)}
.btn-danger{background:var(--danger-fill);color:#FFFFFF}
.btn-danger:hover{background:color-mix(in oklab,var(--danger-fill),#000 10%)}
.btn-danger:disabled{background:var(--surface-2);color:var(--text-3);cursor:not-allowed}
.modal-stage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.modal{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--radius-2xl);background:var(--surface-3);box-shadow:var(--shadow-3)}
.modal h4{margin:0;font:var(--type-subtitle);color:var(--text-strong)}
.modal p{margin:0;font:var(--type-body);color:var(--text-2);line-height:1.55}
.modal-a{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:4px}
.note{font:var(--type-meta);color:var(--text-2);max-width:80ch;margin:12px 0 0;line-height:1.55}
.clx-lgpd-wrap{min-height:100vh;display:grid;justify-items:center;align-content:start;gap:16px;padding:32px 24px;background:var(--bg-app)}
.clx-lgpd-wrap .modal-stage{width:100%;max-width:640px}
.lgpd-head{width:100%;max-width:640px;display:flex;justify-content:space-between;align-items:center}
.lgpd-mark{font:400 .8125rem/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-strong)}

/* ===================== Cobranca / Assinatura (extraido do showcase #cobranca) ===================== */
/* Pagina cheia abaixo do cabecalho, com rolagem e respiro nas laterais. */
.clx-billing-page{flex:1;min-height:0;overflow:auto;padding:24px;background:var(--bg-app)}
.clx-billing-page>*{max-width:960px}

/* Auxiliares de secao (nao duplicam .card/.stack-y/.field/.btn*, que ja existem acima). */
.overline{font:var(--type-overline);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);margin:0}
.lede{max-width:68ch;color:var(--text-2);margin:0 0 28px;font-size:.9375rem;line-height:1.6}
.note{font:var(--type-meta);color:var(--text-2);max-width:80ch;margin:12px 0 0;line-height:1.55}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:32px;align-items:start}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Plano e valor. */
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:12px 0 6px}
.amount{font:600 2rem/1.1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-strong)}
.per{font:var(--type-meta);color:var(--text-2)}
.calc{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px;margin-top:12px;border-top:1px solid var(--border-subtle);font:var(--type-meta);color:var(--text-2)}
.calc b{color:var(--text-1);font-variant-numeric:tabular-nums}

/* Cartoes-radio de meio de pagamento. */
.pay{border:0;margin:0;padding:0;display:grid;gap:10px}
.paycard{position:relative;display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--border-control);border-radius:var(--radius-xl);background:var(--surface-1);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.paycard input{position:absolute;opacity:0;pointer-events:none}
.paycard:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:linear-gradient(var(--brand-tint),var(--brand-tint)),var(--surface-1)}
.paycard:has(input:focus-visible){outline:var(--ring-width) solid var(--focus-ring);outline-offset:var(--ring-offset)}
.pay-ic{width:36px;height:36px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--surface-2);color:var(--text-1);flex:none}
.paycard b{display:block;font:var(--type-body-strong)}
.paycard small{font:var(--type-meta);color:var(--text-2)}
.radio{margin-left:auto;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-control);flex:none}
.paycard:has(input:checked) .radio{border:5px solid var(--brand)}

/* Estado da assinatura (selo). */
.sub-state{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-full);font:var(--type-label);font-size:.75rem}
.sub-state i{width:7px;height:7px;border-radius:50%;background:currentColor}
.sub-state.ok{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success-text)}
.sub-state.bad{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger-text)}
/* Selo de atencao (convite pendente/enviado/expirado, linha com problema na previa de importacao). */
.sub-state.warn{background:color-mix(in srgb,var(--warning) 14%,transparent);color:var(--warning-text)}
.sub-state+.sub-state{margin-left:6px}

/* Banner de inadimplencia (e variantes do showcase). */
.banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:var(--radius-lg);font:var(--type-label);line-height:1.45}
.banner>span{flex:1;min-width:200px}
.banner-bad{background:color-mix(in srgb,var(--danger) 10%,var(--surface-1));border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);color:var(--text-1)}
.banner-bad .ic{color:var(--danger-text)}
.banner-warn{background:color-mix(in srgb,var(--warning) 10%,var(--surface-1));border:1px solid color-mix(in srgb,var(--warning) 30%,transparent);color:var(--text-1)}
.banner-warn .ic{color:var(--warning-text)}
.banner-off{background:var(--surface-1);border:1px solid var(--border-default);color:var(--text-1)}
.banner-off .ic{color:var(--text-2)}
.banner-ok{background:var(--surface-1);border:1px solid var(--border-subtle);color:var(--text-2)}

/* ===================== Administracao (pagina /admin) ===================== */
/* So tokens semanticos; reaproveita .card/.field/.input/.btn*/.chip/.sub-state. */
.admin-grid{display:grid;grid-template-columns:1fr;gap:var(--space-32)}
.admin-card{display:flex;flex-direction:column;gap:16px}
.admin-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px;align-items:start}
.admin-form .btn{height:var(--control-lg)}
/* Campo com .help fica mais alto que o vizinho; com align-items:end a celula menor descia e os
   rotulos saiam de linha (medido: 20px no cartao de importacao, 16px no da Microsoft). Os campos
   alinham pelo topo e so o botao, que nao tem rotulo, continua preso a base da linha. */
.admin-form>.btn{align-self:end}
/* Ajuda longa e linha de botoes sao FILHAS do grid: sem isto cada uma vira uma coluna estreita
   de ~160px ao lado dos campos, e os botoes quebram para linhas diferentes. Ocupam a linha toda. */
.admin-form>.help,.admin-form>.btn-row{grid-column:1/-1}
/* .check-line (caixa de marcar solta no grid, ex.: "Usar STARTTLS" no /superadmin/smtp) nao e
   campo rotulado nem botao: com align-items:start ela colava no topo de uma linha cuja altura vem
   do botao de 48px. Centraliza na linha, como estava antes desta mudanca. */
.admin-form>.check-line{align-self:center}
.admin-table{width:100%;border-collapse:collapse;font:var(--type-body);color:var(--text-1)}
.admin-table th{text-align:left;font:var(--type-label);color:var(--text-2);padding:8px 10px;border-bottom:1px solid var(--border-default)}
.admin-table td{padding:10px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-empty{padding:16px 10px;color:var(--text-2);font:var(--type-meta)}
/* Rodape do cartao (linha divisoria em cima, botoes alinhados a direita). Empilha em .admin-form>.btn-row
   ja existente para acao inline no meio do formulario; este e o rodape do CARTAO inteiro. */
.admin-card-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;margin-top:4px;padding-top:16px;border-top:1px solid var(--border-subtle)}
@media (min-width:960px){.admin-grid{grid-template-columns:1fr}}

/* =====================================================================================
   REFINAMENTOS AAA (secoes 7/8/6.15 do guia). So tokens semanticos; nada de cor crua.
   Este bloco vem por ultimo de proposito: consolida foco visivel, area de clique minima,
   estados vazio/carregando, movimento reduzido e responsividade < 720px das telas.
   ===================================================================================== */

/* ---------- 8: foco visivel em TUDO (anel 2px --focus-ring, afastamento 2px) ----------
   O .clx-app ja tinha :focus-visible; Login (.clx-login-wrap) e LGPD (.clx-lgpd-wrap) ficam
   FORA do .clx-app, entao o foco nao era estilizado la. Cobre os dois wrappers e reforca
   os controles que o Bootstrap/app.css poderiam apagar. */
.clx-login-wrap :focus-visible,
.clx-lgpd-wrap :focus-visible {
  outline: var(--ring-width) solid var(--focus-ring);
  outline-offset: var(--ring-offset);
}
/* Inputs usam a borda da marca no foco (secao 6.12); anel nos demais controles. */
.clx-app .btn:focus-visible,
.clx-login-wrap .btn:focus-visible,
.clx-lgpd-wrap .btn:focus-visible,
.clx-app .paycard:focus-within,
.clx-app .conv:focus-visible,
.clx-app .result:focus-visible {
  outline: var(--ring-width) solid var(--focus-ring);
  outline-offset: var(--ring-offset);
}
/* Anula o anel branco do Bootstrap/app.css (.btn:focus) que nao segue o token nem o tema. */
.clx-app .btn:focus:not(:focus-visible),
.clx-login-wrap .btn:focus:not(:focus-visible),
.clx-lgpd-wrap .btn:focus:not(:focus-visible),
.clx-app .input:focus,
.clx-login-wrap .input:focus,
.clx-app .search input:focus,
.clx-app .composer textarea:focus { box-shadow: none; }
.clx-login-wrap .input:focus,
.clx-app .input:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px var(--brand-tint); }

/* ---------- botao base .btn (design system; vence o .btn do Bootstrap) ---------- */
/* .btn/.btn-primary/.btn-lg/.btn-sm ja existem no bloco de login acima. Faltava
   .btn-secondary (as telas AInbox/Assinatura/LGPD/Admin usam no cabecalho) - sem ele o
   Bootstrap pintava o botao de cinza fora do token. Definicao do showcase (secao 6.1). */
.btn-secondary { background: var(--surface-2); color: var(--text-1); border-color: var(--border-default); }
.btn-secondary:hover { border-color: var(--border-strong); }
.btn-secondary:disabled { color: var(--text-3); cursor: not-allowed; }
/* Area de clique minima: 32px na interface densa (WCAG 2.5.8 / secao 8). O .btn-sm
   herdava altura menor do Bootstrap; fixa em --control-sm (28) so no denso, e garante
   que .btn simples nao fique abaixo de 32. */
.clx-app .btn, .clx-login-wrap .btn, .clx-lgpd-wrap .btn { min-height: var(--control-md); }
.clx-app .btn-sm, .clx-lgpd-wrap .btn-sm { min-height: var(--control-sm); }
/* Botoes so-icone do dock/cabecalho: 40px (dock) / no minimo 32 no cabecalho denso. */
.clx-head .dbtn { width: var(--control-md); height: var(--control-md); }
.dock .dbtn { min-width: var(--dock-button); min-height: var(--dock-button); }

/* ---------- 6.15: spinner de carregamento (loading nos forms enquanto salva) ----------
   Usado nos botoes das telas com escrita (Admin, LGPD, Assinatura). O icone #i-refresh
   gira; com movimento reduzido o giro para (fica so o icone parado, ainda comunicando
   "processando" pelo estado disabled do botao). */
.clx-spin { animation: clx-rotate 0.8s linear infinite; transform-origin: center; }
@keyframes clx-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .clx-spin { animation: none; }
}
/* Botao ocupado: encolhe o gap e mantem o rotulo (nunca vira largura fixa - secao 9). */
.clx-app .btn[aria-busy="true"], .clx-lgpd-wrap .btn[aria-busy="true"] { cursor: progress; }

/* ---------- 6.15: skeleton do mapa (copiado do showcase; shimmer 1.6s) ----------
   Enquanto o snapshot de presenca nao chega, o mapa mostra tiles fantasmas com brilho.
   Com movimento reduzido, a superficie fica parada (secao 7). */
.sk-floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min-w), 1fr)); grid-auto-rows: var(--tile-h); grid-auto-flow: dense; gap: var(--tile-gap); padding: 16px; }
.sk { border-radius: var(--radius-xl); background: linear-gradient(90deg, var(--surface-1) 0%, var(--surface-2) 50%, var(--surface-1) 100%); background-size: 200% 100%; animation: clx-shimmer 1.6s linear infinite; }
.sk.big { grid-column: span 2; grid-row: span 2; }
@keyframes clx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; background: var(--surface-1); }
}

/* ---------- 8: regiao viva para leitor de tela (aria-live) ----------
   Feedback que e SOBRE o usuario (entrou na sala, batendo, salvo, erro) e anunciado por
   uma regiao polite invisivel. Reaproveita o padrao .clx-sr-only. */
.clx-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =====================================================================================
   RESPONSIVIDADE < 720px (secao 5.7 e 6.15). O mapa ja usa auto-fill; aqui as telas de
   form/inbox empilham e o cabecalho respira sem cortar rotulo (secao 8).
   ===================================================================================== */
@media (max-width: 720px) {
  /* Cabecalho: permite quebrar em duas linhas em vez de espremer/cortar. */
  .clx-head { flex-wrap: wrap; height: auto; min-height: var(--topbar-h); padding: 8px 12px; row-gap: 6px; }
  .clx-head .org-name { max-width: 40vw; }

  /* Dock: agrupa e centraliza quando falta largura (ja tem flex-wrap). */
  .dock { justify-content: center; }

  /* Telas de conteudo cheio: menos padding lateral no celular. */
  .clx-billing-page { padding: 16px; }
  .clx-inbox-page { padding: 8px; }
  .clx-lgpd-wrap { padding: 20px 12px; }
  .clx-login-wrap { padding: 16px; }

  /* Assinatura: as duas colunas viram uma; cartoes de pagamento empilham. */
  .two { grid-template-columns: 1fr; gap: 20px; }

  /* Admin: formularios empilham (label acima de input) e a tabela rola na horizontal
     sem cortar (envolvida por .admin-card, que ganha overflow abaixo). */
  .admin-form { grid-template-columns: 1fr; }
  .admin-card { overflow-x: auto; }
  .admin-table { min-width: 520px; }
  .admin-card-footer { flex-direction: column; align-items: stretch; }
  .admin-card-footer .btn { width: 100%; }
}

/* Abaixo de ~560px a lista da inbox e o thread ja empilham em 820px (regra existente);
   aqui garante que o thread nao fique curto demais quando empilhado. */
@media (max-width: 820px) {
  .clx-inbox-page .thread { min-height: 320px; }
}

/* =====================================================================================
   IDENTIDADE COMPLETA (2026-09-13): tema claro com seletor, marca do tenant, base do
   documento e acabamentos da auditoria tela a tela. So tokens semanticos.
   ===================================================================================== */

/* ---------- base do documento: fundo e texto do tema tambem fora dos wrappers ---------- */
html { background: var(--bg-app); }
body { background: var(--bg-app); color: var(--text-1); font: var(--type-body); -webkit-font-smoothing: antialiased; }
a { color: var(--brand-text); }

/* ---------- foco programatico do FocusOnNavigate ----------
   O Blazor foca o h1 (tabindex=-1) a cada navegacao; nao e parada de Tab, entao sem anel. */
[tabindex="-1"]:focus,
.clx-app [tabindex="-1"]:focus-visible,
.clx-login-wrap [tabindex="-1"]:focus-visible,
.clx-lgpd-wrap [tabindex="-1"]:focus-visible { outline: none; }

/* ---------- seletor de tema (showcase .theme-seg, versao compacta so com icone) ---------- */
.theme-seg { display: inline-flex; align-items: center; flex: none; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--border-default); }
.theme-seg button { position: relative; display: inline-grid; place-items: center; width: 28px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.theme-seg button:hover { color: var(--text-1); }
.theme-seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--text-1); box-shadow: var(--shadow-1); }
.theme-seg button:focus-visible { outline: var(--ring-width) solid var(--focus-ring); outline-offset: var(--ring-offset); }
/* No topo do cartao de entrada (marca | tema | idioma), o tema encosta no idioma. */
.login-top .theme-seg { margin-left: auto; margin-right: 8px; }

/* ---------- mostrar/ocultar senha (secao 6.12; showcase .pw) ---------- */
.pw { position: relative; }
.pw .input { padding-right: 84px; }
.pw .pw-toggle { position: absolute; top: 6px; right: 6px; height: var(--control-sm); }
.clx-login-wrap .pw .pw-toggle, .clx-app .pw .pw-toggle { min-height: var(--control-sm); }

/* ---------- avisos das telas de administracao e rotulo de status do dock ---------- */
.banner-slot > .banner { margin-bottom: 20px; }
.status-label { white-space: nowrap; }

/* ---------- paginas de erro e nao encontrada (estado vazio no cartao de entrada) ---------- */
.empty h1.empty-t { margin: 0; }

/* ---------- marca do tenant no Admin (DESIGN-SYSTEM.md secao 10; showcase #tenant) ---------- */
.brand-color { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.brand-note { margin: 4px 0 0; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.preset { width: 32px; height: 32px; border-radius: var(--radius-md); border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px var(--border-strong); }
.preset[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--text-1); }
.preset:focus-visible { outline: var(--ring-width) solid var(--focus-ring); outline-offset: var(--ring-offset); }
.color-line { display: flex; align-items: center; gap: 10px; }
.color-line input[type="color"] { width: 44px; height: 36px; padding: 2px; border-radius: var(--radius-md); border: 1px solid var(--border-control); background: var(--surface-1); cursor: pointer; }
.contrast-panel { padding: 0 14px; border-radius: var(--radius-lg); background: var(--surface-2); }
.crow { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--border-subtle); font: var(--type-meta); color: var(--text-1); }
.crow:first-child { border-top: 0; }
.crow > .contrast-ratio { justify-self: start; }
.crow-head { font: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--text-2); }
/* "contrast-ratio" e nao "ratio": o Bootstrap tem .ratio (largura 100% e filho absoluto). */
.contrast-ratio { font: 600 .6875rem/1 var(--font-sans); font-variant-numeric: tabular-nums; padding: 4px 7px; border-radius: var(--radius-xs); background: var(--surface-1); color: var(--text-1); white-space: nowrap; }
.contrast-ratio.fail { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); }
/* Previa: os derivados sao redeclarados AQUI para recalcular com a cor candidata (--brand inline);
   declarados so no :root, eles ficariam presos a marca ja salva. Mesmas misturas do tokens.css. */
.brand-preview { --brand-hover: color-mix(in oklab, var(--brand), #000 10%); --brand-text: color-mix(in oklab, var(--brand), #fff 38%); --brand-tint: color-mix(in srgb, var(--brand) 16%, transparent); display: flex; flex-direction: column; gap: 8px; }
:root[data-theme="light"] .brand-preview { --brand-text: color-mix(in oklab, var(--brand), #000 8%); --brand-tint: color-mix(in srgb, var(--brand) 10%, transparent); }
.brand-preview-link { color: var(--brand-text); font: var(--type-body-strong); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .crow { grid-template-columns: 1fr 1fr; }
  .crow > span:first-child { grid-column: 1 / -1; }
}

/* ---------- colisoes com o Bootstrap ----------
   O bootstrap.min.css carrega ANTES e usa os mesmos nomes de classe do design system. Medido no
   navegador em 2026-09-13: .card ganhava borda cinza e texto #212529; .modal ficava fixed com
   z-index 1055 (os dialogos da LGPD cobriam a pagina); .badge:empty escondia o selo de status do
   avatar (o MemberAvatar usa .sdot.badge vazio); .btn pintava hover cinza (#5c636a), clique azul
   (#0a58ca) e opacidade .65 no desabilitado; code saia rosa. Aqui o DS devolve os proprios valores. */
.card { border: 0; color: var(--text-1); }
.modal { position: relative; inset: auto; z-index: auto; width: auto; height: auto; overflow: visible; outline: 0; }
.av .badge { display: inline-block; padding: 0; }
code { color: var(--text-1); font-family: var(--font-mono); font-size: .875em; }
.btn { --bs-btn-disabled-opacity: 1; --bs-btn-focus-box-shadow: none; }
.btn-primary {
  --bs-btn-color: var(--on-brand); --bs-btn-bg: var(--brand); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--on-brand); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--on-brand); --bs-btn-active-bg: var(--brand-press); --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--text-3); --bs-btn-disabled-bg: var(--surface-2); --bs-btn-disabled-border-color: transparent;
}
.btn-secondary {
  --bs-btn-color: var(--text-1); --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--border-default);
  --bs-btn-hover-color: var(--text-1); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text-1); --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-disabled-color: var(--text-3); --bs-btn-disabled-bg: var(--surface-2); --bs-btn-disabled-border-color: var(--border-default);
}
.btn-ghost {
  --bs-btn-color: var(--text-2); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--text-1); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--text-1); --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: transparent;
}
.btn-danger {
  --bs-btn-color: #FFFFFF; --bs-btn-bg: var(--danger-fill); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: color-mix(in oklab, var(--danger-fill), #000 10%); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: color-mix(in oklab, var(--danger-fill), #000 20%); --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--text-3); --bs-btn-disabled-bg: var(--surface-2); --bs-btn-disabled-border-color: transparent;
}

/* ---------- cartao "Importar usuarios" (/admin) ----------
   Prefixo import- de proposito: os nomes genericos (.table, .badge, .alert, .progress, .nav, .step,
   .card, .modal, .btn*, .ratio) colidem com o bootstrap.min.css, que carrega antes. Reaproveita
   .card/.admin-card/.admin-form/.admin-table/.btn*/.sub-state; aqui so entram caixa do resumo,
   lista de contagens e rolagem da tabela da previa. */
.import-status:empty { display: none; }
.import-summary { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 12px 14px; background: var(--surface-1); }
.import-counts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 0; padding: 0; list-style: none; font: var(--type-meta); color: var(--text-2); }
.import-counts b { color: var(--text-1); font-variant-numeric: tabular-nums; }
.import-rows { max-height: 360px; overflow: auto; }
.import-status:focus-visible, .import-summary:focus-visible { outline: var(--ring-width) solid var(--focus-ring); outline-offset: var(--ring-offset); }

/* ---------- cartao "Microsoft 365" (/admin) ----------
   Prefixo integ- pelo mesmo motivo do import-: os nomes genericos (.table, .badge, .alert,
   .progress, .nav, .step, .card, .modal, .btn*, .ratio) colidem com o bootstrap.min.css, que
   carrega antes. Reaproveita .card/.admin-card/.admin-form/.field/.input/.chip/.btn*/.help;
   aqui so entram a regiao de status, a linha do chip com a data e o bloco de ajuda numerada. */
.integ-status:empty { display: none; }
.integ-status:focus-visible { outline: var(--ring-width) solid var(--focus-ring); outline-offset: var(--ring-offset); }
.integ-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.integ-ajuda { border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.integ-help { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 20px; font: var(--type-meta); color: var(--text-2); }

/* =====================================================================================
   SUBDOMINIO / FOTO / MURAL / AUDIO (2026-09-17). So tokens semanticos. Nomes com prefixo
   proprio (inbox-/av-/clx-/mural-/msg-/audio-/perfil-) para nao colidir com o Bootstrap.
   ===================================================================================== */

/* ---------- painel "Nova conversa" da AInbox: rodape de botoes nao pode ficar cortado ----------
   Causa medida: .inbox-list era flex column sem min-height:0 (corrigido acima) dentro de .inbox,
   que tem overflow:hidden - a coluna crescia com a lista de pessoas e a linha de botoes ("Iniciar
   conversa"/"Cancelar") saia da area visivel. .inbox-painel e a coluna do painel inteiro (nao rola
   por si); .inbox-pessoas e a UNICA parte que rola; .inbox-painel-rodape nunca encolhe, entao os
   botoes sempre ficam visiveis. */
.inbox-painel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 8px; }
.inbox-pessoas { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 4px; }
.inbox-painel-rodape { flex: none; }

/* ---------- foto do avatar (.av-foto) ----------
   <img> dentro do .av (que ja e position:relative com border-radius:50%): cobre o circulo
   inteiro sem distorcer e sem vazar quadrado nos cantos (border-radius herdado). z-index proprio
   para o selo de status (.av .badge, que ja e position:absolute) continuar por cima mesmo que a
   marcacao troque a ordem dos filhos no futuro. */
.av-foto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
/* So z-index: o .av .badge original (posicao/tamanho/sombra, acima) continua absolute com
   right/bottom -2px - nao pode ser reafirmado aqui, senao a segunda declaracao vence a primeira
   e o selo perde o encaixe no canto do circulo. */
.av .badge { z-index: 1; }

/* ---------- "bateram na porta" (.clx-knock) ----------
   Cartao flutuante ancorado ACIMA do dock (bottom = altura do dock + respiro), nunca sobre o
   rodape. Largura limitada por min() para nao estourar em 390px (100vw - 32px de margem lateral
   total). Acento de marca no topo (marca aparece SEM depender de --brand-glow, que e mais sutil). */
.clx-knock { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 16px); transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; width: min(320px, calc(100vw - 32px)); padding: 14px 16px; border-radius: var(--radius-xl); border-top: 3px solid var(--brand); background: var(--surface-3); box-shadow: var(--shadow-3); color: var(--text-1); }
.clx-knock-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- mural de anuncios ---------- */
.mural-lista { display: flex; flex-direction: column; gap: 10px; }
.mural-item { padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border-subtle); }
/* Fixado: borda e fundo levemente tingidos com a marca, mesmo recurso do .paycard selecionado. */
.mural-item.is-fixado { border-color: var(--brand); background: linear-gradient(var(--brand-tint), var(--brand-tint)), var(--surface-1); }
.mural-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; font: var(--type-meta); color: var(--text-2); }
.mural-form { display: flex; flex-direction: column; gap: 12px; }

/* ---------- mensagem de audio no thread (.msg-audio) e gravacao em andamento (.audio-rec) ---------- */
.msg-audio { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-subtle); }
.msg-audio audio { flex: 1 1 auto; min-width: 0; max-width: 260px; height: 32px; }
/* Indicador de gravacao na caixa de envio: ponto pulsando na cor de perigo (mesmo tom do mic
   desligado no dock) e a contagem em segundos ao lado, com numeros tabulares. */
.audio-rec { display: inline-flex; align-items: center; gap: 8px; height: var(--control-sm); padding: 0 10px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger-text); font: var(--type-meta); font-variant-numeric: tabular-nums; }
.audio-rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; animation: clx-rec-pulse 1.2s var(--ease-standard) infinite; }
@keyframes clx-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .audio-rec::before { animation: none; }
}

/* ---------- previa da foto na tela /perfil (.perfil-previa) ---------- */
.perfil-previa { width: var(--avatar-2xl); height: var(--avatar-2xl); border-radius: 50%; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border-subtle); flex: none; }
.perfil-previa img { width: 100%; height: 100%; object-fit: cover; }