/* CMH · kit visual da direção B — "Vidro líquido" · versão 2.
   A cor do cliente chega em --acento e --acento-suave, escritas inline no .cmh de cada tela.
   Vidro com desfoque só no que flutua sobre conteúdo (.vidro, .modal, .painel): cartões são translúcidos, sem blur.
   Texto direto sobre o fundo colorido: só --tinta ou --tinta-fundo (contraste medido com 4 cores de cliente).
   v2: o fundo rola junto com a página (preso à janela, o tom forte do alto passava atrás de texto ao rolar);
   a dica só existe enquanto aparece (escondida, criava rolagem lateral); peças que as telas pediram. */

* { box-sizing: border-box; }
sc-for, sc-if { display: contents; }

/* ---------- Tokens ---------- */
.cmh {
  --fonte: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --cod-d-bg: #DCE7FF; --cod-d-tx: #1745A3;
  --cod-n-bg: #E7E2FF; --cod-n-tx: #4B2FB5;
  --cod-m-bg: #D6F2EF; --cod-m-tx: #0B6862;
  --cod-t-bg: #FFEFC7; --cod-t-tx: #855700;
  --cod-fe-bg: #DCF3E2; --cod-fe-tx: #166537;
  --cod-lm-bg: #FCE1E3; --cod-lm-tx: #A1202D;
  --ok-bg: #E4F4E9; --ok-tx: #166537; --ok-forte: #1E8E4F;
  --falta-bg: #FDE2E0; --falta-tx: #A8261A; --falta-forte: #D92D20;
  --aviso-bg: #FFE3C7; --aviso-tx: #8F4300; --aviso-forte: #B54708;
  --info-bg: #E3ECFB; --info-tx: #1C4FA0;
  --fundo: #DCE5F3;
  --fundo-arte: radial-gradient(900px 560px at 4% -6%, color-mix(in srgb, var(--acento) 55%, transparent), transparent 62%),
                radial-gradient(820px 520px at 100% 0%, rgba(124, 92, 230, .42), transparent 58%),
                radial-gradient(1100px 700px at 55% 120%, rgba(14, 160, 150, .38), transparent 62%);
  --sup: rgba(255, 255, 255, .80); --sup-2: rgba(255, 255, 255, .55); --sup-vidro: rgba(255, 255, 255, .55);
  --sup-fixo: rgba(255, 255, 255, .94); --sup-cheia: #FFFFFF;
  --tinta: #0B1424; --tinta-2: #45526A; --tinta-3: #56637A; --tinta-fundo: #2F3A4C;
  --linha: rgba(11, 20, 36, .08); --linha-forte: rgba(11, 20, 36, .15);
  --fds: color-mix(in srgb, var(--acento) 6%, transparent);
  --vidro-borda: rgba(255, 255, 255, .75);
  --vidro-sombra: 0 6px 18px rgba(11, 20, 36, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
  --sombra: 0 1px 1px rgba(11, 20, 36, .04), 0 12px 34px rgba(11, 20, 36, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
  --sombra-flutua: 0 2px 8px rgba(11, 20, 36, .12), 0 26px 52px rgba(11, 20, 36, .22);
  --raio-g: 24px; --raio-m: 16px; --raio-p: 10px;
  min-height: 100vh; margin: 0;
  font-family: var(--fonte); color: var(--tinta); background-color: var(--fundo);
  background-image: var(--fundo-arte); background-attachment: scroll;
  font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "cv11" 1;
}
.cmh :where(h1, h2, h3, h4, p, figure, ul, ol) { margin: 0; }
.cmh :where(ul, ol) { padding: 0; list-style: none; }
.cmh button { font: inherit; color: inherit; cursor: pointer; }
.cmh input, .cmh select, .cmh textarea { font: inherit; color: inherit; }
.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.p { width: 16px; height: 16px; }
.ic.g { width: 22px; height: 22px; }

/* ---------- Vidro: só no que flutua ---------- */
.vidro { background: var(--sup-vidro); border: 1px solid rgba(255, 255, 255, .7); box-shadow: var(--sombra-flutua), inset 0 1px 0 rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
@media (prefers-reduced-transparency: reduce) {
  .vidro, .modal, .painel { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Casca da web: menu em cápsula, topo sem caixa ---------- */
.app { display: flex; align-items: flex-start; min-height: 100vh; }
.cmh-workspace { flex: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.cmh-workspace-nav { position: relative; z-index: 8; margin: 22px 18px 0; padding: 0; }
.cmh-tabs-row { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; }
.cmh-tabs-list { display: flex; align-items: center; gap: 3px; flex: 0 1 auto; width: max-content; max-width: min(900px, calc(100vw - 150px)); min-width: 0; min-height: 44px; padding: 4px; overflow-x: auto; border: 1px solid rgba(255,255,255,.78); border-radius: 14px; background: rgba(255,255,255,.42); box-shadow: 0 5px 16px rgba(11,20,36,.045), inset 0 1px 0 rgba(255,255,255,.78); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); scrollbar-width: thin; }
.cmh-global-actions { display: flex; align-items: center; gap: 8px; flex: 0 1 388px; min-width: 268px; margin-left: auto; }
.cmh-global-search { position: relative; flex: 1 1 340px; min-width: 220px; }
.cmh-notifications { flex: none; }
.cmh-global-search .busca { position: relative; width: 100%; margin: 0; }
.cmh-global-search .busca[data-dica]::after { top: calc(100% + 7px); right: 0; bottom: auto; left: auto; transform: none; }
.cmh-global-search:has(input:focus) .busca::after { content: none; }
.cmh-global-search .busca > svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmh-global-search .busca:focus-within { border-color: color-mix(in srgb, var(--acento) 55%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 13%, transparent), var(--vidro-sombra); }
.cmh-global-search .busca input::-webkit-search-cancel-button { cursor: pointer; }
.cmh-search-results { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(420px, calc(100vw - 24px)); max-height: min(60vh, 460px); overflow: auto; padding: 6px; border: 1px solid rgba(255,255,255,.85); border-radius: 16px; background: rgba(248,251,255,.9); box-shadow: 0 16px 42px rgba(24,43,72,.18), inset 0 1px 0 rgba(255,255,255,.9); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
.cmh-search-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 0; border-radius: 11px; background: transparent; color: var(--tinta); text-align: left; }
.cmh-search-option:hover, .cmh-search-option.is-active { background: rgba(41,101,181,.1); }
.cmh-search-option-copy { display: grid; gap: 3px; min-width: 0; }
.cmh-search-option-title { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cmh-search-option-detail { overflow: hidden; color: var(--tinta-2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cmh-search-option-type { flex: none; padding: 4px 7px; border: 1px solid rgba(41,101,181,.12); border-radius: 999px; color: var(--acento); background: rgba(255,255,255,.66); font-size: 10px; font-weight: 600; }
.cmh-search-message { padding: 16px 12px; color: var(--tinta-2); font-size: 12px; text-align: center; }
.cmh-search-message.is-loading::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 8px; vertical-align: -1px; border: 2px solid rgba(41,101,181,.2); border-top-color: var(--acento); border-radius: 50%; animation: cmh-search-spin .7s linear infinite; }
@keyframes cmh-search-spin { to { transform: rotate(360deg); } }
.cmh-tab { display: inline-flex; align-items: center; flex: none; max-width: min(260px, 48vw); min-height: 34px; padding: 0 4px 0 11px; border: 1px solid transparent; border-radius: 10px; color: var(--tinta-2); background: transparent; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; }
.cmh-tab:hover { background: rgba(255,255,255,.45); color: var(--tinta); }
.cmh-tab.is-active { border-color: color-mix(in srgb, var(--acento) 82%, #FFF); background: var(--acento); color: #FFF; box-shadow: 0 3px 10px color-mix(in srgb, var(--acento) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.28); }
.cmh-tab.is-active:hover { background: var(--acento); color: #FFF; }
.cmh-tab-select { max-width: 205px; overflow: hidden; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cmh-tab-pin { width: 20px; height: 24px; flex: none; display: grid; place-items: center; margin-left: 7px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--tinta-3); opacity: .68; cursor: pointer; transition: background .14s ease, color .14s ease, opacity .14s ease, transform .14s ease; }
.cmh-tab-pin svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cmh-tab:hover .cmh-tab-pin, .cmh-tab-pin:focus-visible, .cmh-tab-pin.is-pinned { opacity: 1; }
.cmh-tab.is-active .cmh-tab-pin { opacity: .82; }
.cmh-tab-pin:hover, .cmh-tab-pin.is-pinned { background: rgba(41,101,181,.1); color: var(--acento); }
.cmh-tab.is-active .cmh-tab-pin { color: rgba(255,255,255,.94); }
.cmh-tab.is-active .cmh-tab-pin:hover { background: rgba(255,255,255,.17); color: #FFF; }
.cmh-tab.after-pinned { position: relative; margin-left: 9px; }
.cmh-tab.after-pinned::before { position: absolute; top: 7px; bottom: 7px; left: -7px; width: 1px; background: rgba(42,61,88,.16); content: ''; }
.cmh-tab.is-pinned:not(.is-active) { background: rgba(41,101,181,.045); }
.cmh-tab-close { width: 20px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--tinta-2); cursor: pointer; transition: background .14s ease, color .14s ease, transform .14s ease; }
.cmh-tab-close { margin-left: 1px; font-size: 17px; line-height: 1; }
.cmh-tab-close:hover { background: rgba(11,20,36,.08); color: var(--tinta); }
.cmh-tab.is-active .cmh-tab-close { color: rgba(255,255,255,.9); }
.cmh-tab.is-active .cmh-tab-close:hover { background: rgba(255,255,255,.17); color: #FFF; }
.cmh-tab-close:active { transform: scale(.9); }
.cmh-tab-close:disabled { display: none; }
.cmh-tab.is-loading { position: relative; }
.cmh-tab.is-loading::after { content: ''; position: absolute; bottom: 2px; left: calc(50% - 7px); width: 14px; height: 2px; border-radius: 2px; background: currentColor; animation: cmh-pulso .85s ease-in-out infinite alternate; }
.cmh-pin-menu { position: fixed; z-index: 1000; width: 232px; padding: 6px; border: 1px solid rgba(255,255,255,.78); border-radius: 15px; background: rgba(247,250,255,.91); box-shadow: 0 14px 38px rgba(25,43,69,.18), inset 0 1px 0 rgba(255,255,255,.9); -webkit-backdrop-filter: blur(22px) saturate(145%); backdrop-filter: blur(22px) saturate(145%); animation: cmh-menu-in .13s ease-out both; }
.cmh-pin-menu button { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 6px 9px; border: 0; border-radius: 10px; background: transparent; color: var(--tinta); text-align: left; font: inherit; cursor: pointer; transition: background .13s ease, transform .13s ease; }
.cmh-pin-menu button:hover, .cmh-pin-menu button:focus-visible { background: rgba(255,255,255,.82); outline: none; }
.cmh-pin-menu button:active { transform: scale(.985); }
.cmh-context-icon { width: 29px; height: 29px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(41,101,181,.09); color: var(--acento); font-size: 15px; }
.cmh-context-copy { display: grid; gap: 2px; }
.cmh-context-title { font-size: 12px; font-weight: 650; line-height: 1.2; }
.cmh-context-detail { color: var(--tinta-3); font-size: 10.5px; line-height: 1.2; }
.cmh-workspace-nav.drop-target { border-radius: 12px; background: rgba(255,255,255,.28); box-shadow: inset 0 0 0 1px rgba(41,101,181,.28); }
.cmh-confirm-overlay { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; background: rgba(43,61,91,.12); -webkit-backdrop-filter: blur(9px) saturate(118%); backdrop-filter: blur(9px) saturate(118%); animation: cmh-menu-in .16s ease-out both; }
.cmh-confirm-dialog { position: relative; isolation: isolate; width: min(440px, 100%); overflow: hidden; padding: 26px; border: 1px solid rgba(255,255,255,.86); border-radius: 25px; background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(238,245,255,.62)); box-shadow: 0 26px 72px rgba(27,47,78,.2), 0 4px 14px rgba(40,70,111,.08), inset 0 1px 0 rgba(255,255,255,.96); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); color: var(--tinta); }
.cmh-confirm-dialog::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--acento) 13%, transparent), transparent 56%), linear-gradient(135deg, rgba(255,255,255,.18), transparent 55%); content: ''; pointer-events: none; }
.cmh-confirm-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.8), color-mix(in srgb, var(--acento) 10%, rgba(255,255,255,.72))); box-shadow: 0 4px 12px rgba(32,66,112,.08), inset 0 1px 0 #FFF; color: var(--acento); }
.cmh-confirm-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cmh-confirm-dialog h2 { margin: 17px 0 7px; font-size: 19px; font-weight: 650; letter-spacing: -.025em; }
.cmh-confirm-dialog p { max-width: 365px; margin: 0; color: var(--tinta-2); font-size: 13.5px; line-height: 1.55; }
.cmh-confirm-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 25px; }
.cmh-confirm-actions button { min-height: 40px; padding: 0 16px; border: 1px solid rgba(255,255,255,.82); border-radius: 999px; background: rgba(255,255,255,.62); box-shadow: 0 3px 10px rgba(32,54,85,.05), inset 0 1px 0 rgba(255,255,255,.9); color: var(--tinta); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .14s ease, transform .14s ease, box-shadow .14s ease; }
.cmh-confirm-actions button:hover { background: rgba(255,255,255,.9); box-shadow: 0 5px 14px rgba(32,54,85,.09), inset 0 1px 0 #FFF; }
.cmh-confirm-actions button:active { transform: scale(.98); }
.cmh-confirm-actions button:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 35%, transparent); outline-offset: 2px; }
.cmh-confirm-actions button.primary { border-color: color-mix(in srgb, var(--acento) 65%, #FFF); background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 88%, #FFF), var(--acento)); color: #FFF; box-shadow: 0 7px 16px color-mix(in srgb, var(--acento) 23%, transparent), inset 0 1px 0 rgba(255,255,255,.38); }
.cmh-confirm-actions button.primary:hover { filter: brightness(1.04); box-shadow: 0 9px 20px color-mix(in srgb, var(--acento) 29%, transparent), inset 0 1px 0 rgba(255,255,255,.44); }
.cmh-tab-panels { flex: 1; min-width: 0; }
.cmh-tab-frame { display: block; min-width: 0; }
.cmh-tab-frame[hidden] { display: none !important; }
.cmh-tab-frame[aria-busy="true"] .conteudo { cursor: progress; }
.cmh-tab-frame.active .principal { view-transition-name: page-principal; }
.cmh-page-styles { display: none; }
.cmh-tab-waiting { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 220px; color: var(--tinta-2); font-size: 13px; }
.cmh-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.8); border-top-color: var(--acento); border-radius: 50%; animation: cmh-gira .72s linear infinite; }
@keyframes cmh-pulso { to { opacity: .25; transform: scale(.72); } }
@keyframes cmh-gira { to { transform: rotate(360deg); } }
@keyframes cmh-menu-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.trilho { flex: none; width: 64px; min-height: 620px; margin: 12px 0 12px 12px; padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 28px; border: 1px solid var(--vidro-borda); background: var(--sup-vidro); box-shadow: 0 10px 30px rgba(11, 20, 36, .12), inset 0 1px 0 rgba(255, 255, 255, .9); }
.marca { width: 36px; height: 36px; border-radius: 11px; background: var(--acento); color: #FFFFFF; display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: -.02em; margin-bottom: 10px; }
.marca-hospital-img { display: block; max-width: 180px; max-height: 52px; object-fit: contain; }
.marca-menu { min-height: 46px; display: grid; place-items: center; }
.marca-menu .marca-hospital-img { width: 40px; max-height: 40px; }
.marca-menu.marca-menu-fundo { width:42px;min-height:44px;max-width:100%;border-radius:11px;background:var(--acento); }
.marca-menu-fundo .marca-hospital-img { width:34px;max-height:36px; }
.marca-h .marca-hospital-img { max-width: 100px; flex: none; }
.login-foto { position: relative; overflow: hidden; isolation: isolate; }
.login-foto > :not(.fotos-login) { position: relative; z-index: 1; }
.fotos-login { position: absolute; inset: 0; z-index: -1; }
.fotos-login::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 20, 38, .15), rgba(9, 20, 38, .8)); }
.fotos-login img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.fotos-login img.ativa { opacity: 1; }
.fotos-login.esperando img:not(.carregada) { opacity: 0; }
.timbrado { display: none; }
@media (prefers-reduced-motion: reduce) { .fotos-login img { transition: none; } }
@media print {
  .cmh { background: #FFF !important; }
  .trilho, .topo, .rodape-tecnico, .cmh-workspace-nav { display: none !important; }
  .timbrado { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; padding: 0 0 12px; border-bottom: 2px solid var(--acento); }
  .timbrado b { font-size: 18px; }
  .timbrado p { font-size: 11px; white-space: pre-line; }
  .conteudo { padding: 0; }
}
.trilho { position: relative; z-index: 10; isolation: isolate; }
.menu-vidro, .menu-bolha { position: absolute; top: 0; left: 0; pointer-events: none; display: none; }
.menu-vidro { z-index: -2; background: var(--sup-vidro); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); transition: clip-path .26s cubic-bezier(.22, .8, .2, 1), opacity .16s ease; }
.menu-vidro::after { content: ''; position: absolute; inset: 0; background: var(--sup-fixo); opacity: 0; transition: opacity .16s ease; }
.trilho.menu-em-destaque .menu-vidro::after { opacity: 1; }
.menu-bolha { z-index: -1; overflow: visible; filter: drop-shadow(0 6px 16px rgba(11, 20, 36, .10)); transition: opacity .16s ease; }
.menu-bolha path { fill: url(#menu-reflexo); stroke: rgba(255,255,255,.5); stroke-width: 1; transition: d .26s cubic-bezier(.22, .8, .2, 1); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu-vidro { background: rgba(242, 247, 255, .88); }
}
@media (prefers-reduced-transparency: reduce) {
  .menu-vidro { background: rgba(242, 247, 255, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.trilho a, .trilho .sair-form button, .trilho .menu-grupo-toggle { position: relative; flex: none; align-self: flex-start; margin-left: 10px; width: max-content; max-width: 42px; height: 42px; padding: 0 12px; border: 0; border-radius: 12px; display: flex; align-items: center; gap: 10px; overflow: hidden; background: transparent; color: var(--tinta-2); text-decoration: none; transform-origin: 21px center; transition: max-width .18s ease-out, transform .16s cubic-bezier(.2,.8,.2,1), background-color .12s, box-shadow .12s, opacity .16s ease; }
.trilho .menu-texto { flex: none; padding-right: 4px; white-space: nowrap; font-size: 14px; font-weight: 600; letter-spacing: -.01em; opacity: 0; transition: opacity .16s ease-out; }
.trilho :is(a, .sair-form button, .menu-grupo-toggle):focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.menu-indicador { width: 34px; height: 34px; flex: none; display: grid; place-items: center; margin: 0; border: 1px solid transparent; border-radius: 11px; color: var(--tinta-3); background: transparent; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, opacity .16s ease; }
.trilho .marca-menu, .trilho .espaco, .trilho .sair-form, .trilho .avatar { transition: opacity .16s ease; }
.menu-indicador svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-fixar { position: relative; z-index: 3; align-self: center; flex: none; width: 26px; height: 24px; display: grid; place-items: center; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 8px; color: var(--tinta-3); background: transparent; opacity: 0; cursor: pointer; transition: opacity .16s ease, background .16s ease, color .16s ease, transform .2s ease; }
.menu-fixar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-fixar:hover, .menu-fixar[aria-pressed="true"] { color: var(--acento); background: rgba(41,101,181,.08); }
.menu-fixar[aria-pressed="true"] svg { transform: rotate(35deg); }
.trilho:is(:hover, :focus-within, .menu-fixo) .menu-fixar { opacity: .8; }
.menu-fixar:focus-visible { opacity: 1 !important; outline: 2px solid var(--acento); outline-offset: 2px; }
@media (min-width: 761px) {
  .trilho.menu-fluido { background: transparent; border-color: transparent; box-shadow: none; }
  .trilho.menu-fluido:not(.menu-em-destaque):not(.menu-recolhido) { background:var(--sup-vidro);border-color:rgba(255,255,255,.5);box-shadow:0 6px 16px rgba(11,20,36,.08); }
  .trilho.menu-fluido:not(.menu-em-destaque) :is(.menu-vidro,.menu-bolha) { opacity:0; }
  .trilho.menu-fluido .menu-vidro, .trilho.menu-fluido .menu-bolha { display: block; }
  .trilho :is(a, .sair-form button, .menu-grupo-toggle):focus-visible { max-width: min(400px, calc(100vw - 48px)); background: #FFFFFF; color: var(--tinta); box-shadow: var(--sombra-flutua); }
  .trilho :is(a, .sair-form button, .menu-grupo-toggle):focus-visible .menu-texto { opacity: 1; transform: none; }
}
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .trilho { clip-path: inset(-24px -420px -24px -24px); transition: clip-path .24s cubic-bezier(.22,.8,.2,1),background-color .16s ease,border-color .16s ease,box-shadow .16s ease; }
  .trilho.menu-recolhido { clip-path: inset(0 0 calc(100% - 64px) 0 round 22px); }
  .trilho.menu-recolhido > :not(.menu-vidro):not(.menu-bolha):not(.menu-indicador) { opacity: 0; pointer-events: none; }
  .trilho.menu-recolhido :is(.menu-vidro, .menu-bolha) { opacity: 0; }
  .trilho.menu-recolhido .menu-indicador { border-color: rgba(255,255,255,.94); color: var(--acento); background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(231,242,255,.86)); box-shadow: 0 5px 15px rgba(26,50,86,.14), inset 0 1px 0 #FFFFFF; }
  .trilho.menu-recolhido .menu-fixar { opacity: 0; pointer-events: none; }
}
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .trilho :is(a, .sair-form button, .menu-grupo-toggle):hover { max-width: min(400px, calc(100vw - 48px)); background: #FFFFFF; color: var(--tinta); box-shadow: var(--sombra-flutua); }
  .trilho :is(a, .sair-form button, .menu-grupo-toggle):hover .menu-texto { opacity: 1; transform: none; }
}
.trilho a.ativo { background: var(--acento); color: #FFFFFF; }
.trilho a.ativo:is(:hover, :focus-visible) { background: var(--acento); color: #FFFFFF; }
@media (min-width: 761px) {
  .trilho.menu-fluido :is(a, .sair-form button, .menu-grupo-toggle) { box-shadow: none; }
  .trilho.menu-fluido :is(a, .sair-form button, .menu-grupo-toggle):is(:hover, :focus-visible):not(.menu-aberto) { max-width: 42px; background: transparent; }
  .trilho.menu-fluido :is(a, .sair-form button, .menu-grupo-toggle):not(.menu-aberto) .menu-texto { opacity: 0; }
  .trilho.menu-fluido :is(a, .sair-form button, .menu-grupo-toggle).menu-aberto { max-width: min(var(--menu-largura), calc(100vw - 48px)); background: transparent; color: var(--tinta); }
  .trilho.menu-fluido :is(a, .sair-form button, .menu-grupo-toggle).menu-aberto { transform:scale(1.1);z-index:2; }
  .trilho.menu-fluido :is(a, .sair-form button, .menu-grupo-toggle).menu-aberto .menu-texto { opacity: 1; transition-delay: .045s; }
  .trilho.menu-fluido :is(a, .sair-form button, .menu-grupo-toggle).menu-aberto:not(.ativo) { background: transparent; box-shadow: none; }
  .trilho.menu-fluido a.ativo, .trilho.menu-fluido a.ativo:is(:hover, :focus-visible) { background: var(--acento); color: #FFFFFF; }
}
@media (prefers-reduced-motion: reduce) {
  .trilho, .trilho a, .trilho .sair-form button, .trilho .menu-texto, .menu-indicador, .menu-fixar, .menu-vidro, .menu-vidro::after, .menu-bolha, .menu-bolha path { transition: none; }
  :root { scroll-behavior: auto; }
  .btn, .cmh-tab, .cmh-tab-close, .cmh-tab-pin { transition: none; }
  .cmh-tab.is-loading::after, .cmh-spinner { animation: none; }
  ::view-transition-old(page-principal), ::view-transition-new(page-principal) { animation-duration: 1ms; }
}
.trilho .espaco { flex: 1; }
:root { scroll-behavior: smooth; }
@view-transition { navigation: auto; }
::view-transition-old(page-principal) {
  animation: pagina-sai 150ms cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(page-principal) {
  animation: pagina-entra 300ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes pagina-sai {
  to { opacity: 0; transform: translateY(-5px) scale(.996); }
}
@keyframes pagina-entra {
  from { opacity: 0; transform: translateY(10px) scale(.994); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
::view-transition-group(page-principal) { animation-duration: 220ms; }
::view-transition-old(page-principal), ::view-transition-new(page-principal) { animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.setor-passos { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.setor-passos > :is(a, span) { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--vidro-borda); border-radius: 14px; background: rgba(255, 255, 255, .5); color: var(--tinta-2); text-decoration: none; }
.setor-passos > :is(a, span) > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .8); font-weight: 600; }
.setor-passos > .atual { background: #FFFFFF; border-color: var(--acento); color: var(--acento); font-weight: 600; }
.setor-passos > .atual > span { background: var(--acento); color: #FFFFFF; }
.setor-passos > i { color: var(--tinta-3); font-style: normal; }
.topo { margin: 12px 12px 0; min-height: 54px; padding-left: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.trilha-nav { font-size: 13px; color: var(--tinta-fundo); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trilha-nav strong { color: var(--tinta); font-weight: 600; }
.trilha-nav .unidade { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; margin-left: -10px; border: 0; border-radius: 999px; background: transparent; color: var(--tinta-fundo); font-size: 13px; font-weight: 500; }
.trilha-nav .unidade:hover { background: rgba(255, 255, 255, .55); }
.busca { margin-left: auto; width: min(340px, 100%); height: 40px; padding: 0 8px 0 14px; display: flex; align-items: center; gap: 10px; border-radius: 999px; border: 1px solid var(--vidro-borda); background: rgba(255, 255, 255, .72); box-shadow: var(--vidro-sombra); color: var(--tinta-2); font-size: 13px; }
.busca input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-size: 13px; color: var(--tinta); }
.busca input::placeholder { color: var(--tinta-2); }
.busca kbd { margin-left: auto; font-family: var(--fonte); font-size: 11px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--linha-forte); color: var(--tinta-2); background: #FFFFFF; }
.icone-btn { position: relative; width: 40px; height: 40px; flex: none; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--vidro-borda); background: rgba(255, 255, 255, .72); box-shadow: var(--vidro-sombra); color: var(--tinta-2); }
.icone-btn:hover { color: var(--tinta); background: #FFFFFF; }
.icone-btn.p { width: 32px; height: 32px; box-shadow: none; }
.ponto-aviso { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--falta-forte); border: 2px solid #FFFFFF; }
.conteudo { padding: 18px 24px 64px; display: flex; flex-direction: column; gap: 16px; }
.conteudo.com-flutua { padding-bottom: 120px; }

/* ---------- Cabeçalho da página e texto ---------- */
.cab { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.cab h1 { font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.cab .sub { margin-top: 6px; font-size: 13px; color: var(--tinta-fundo); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sobre-fundo { color: var(--tinta-fundo); }
.rotulo-secao { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-fundo); }
.titulo-secao { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.mudo { color: var(--tinta-2); }
.mudo-3 { color: var(--tinta-3); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.linha-flex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.grade-lado { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.grade-lado.esq { grid-template-columns: 300px minmax(0, 1fr); }

/* ---------- Botões ---------- */
.btn { position: relative; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--vidro-borda); background: rgba(255, 255, 255, .6); box-shadow: var(--vidro-sombra); color: var(--tinta); font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; transition: transform .16s cubic-bezier(.2,.8,.2,1), background-color .16s ease, box-shadow .16s ease, color .16s ease; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:hover { background: rgba(255, 255, 255, .9); }
.btn.pri { background: var(--acento); color: #FFFFFF; border-color: transparent; font-weight: 600; box-shadow: 0 8px 22px color-mix(in srgb, var(--acento) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn.pri:hover { background: color-mix(in srgb, var(--acento) 88%, #000000); }
.btn.escuro { background: #141517; color: #FFFFFF; border-color: transparent; font-weight: 600; box-shadow: none; }
.btn.perigo { background: #B42318; color: #FFFFFF; border-color: transparent; font-weight: 600; box-shadow: none; }
.btn.fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--tinta-fundo); }
.btn.fantasma:hover { background: rgba(255, 255, 255, .55); }
.btn.p { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn.g { height: 48px; padding: 0 22px; font-size: 15px; }
.btn.bloco { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Pílulas de estado (sempre com texto, nunca só cor) ---------- */
.pilula { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pilula.ok { background: var(--ok-bg); color: var(--ok-tx); }
.pilula.falta { background: var(--falta-bg); color: var(--falta-tx); }
.pilula.aviso { background: var(--aviso-bg); color: var(--aviso-tx); }
.pilula.info { background: var(--info-bg); color: var(--info-tx); }
.pilula.neutro { background: rgba(255, 255, 255, .84); border: 1px solid var(--linha-forte); color: var(--tinta-2); }
.pilula.acento { background: var(--acento); color: #FFFFFF; }
.pilula .ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.contador { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--acento); color: #FFFFFF; }

/* ---------- Abas e seletor segmentado ---------- */
.abas { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid var(--vidro-borda); background: rgba(255, 255, 255, .5); }
.abas button, .abas a { position: relative; height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--tinta-2); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.abas .sel { background: #FFFFFF; color: var(--acento); font-weight: 600; box-shadow: 0 4px 14px rgba(11, 20, 36, .12), inset 0 1px 0 #FFFFFF; }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; border: 1px solid var(--vidro-borda); background: rgba(255, 255, 255, .5); }
.seg button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.seg button.sel { background: #FFFFFF; color: var(--acento); box-shadow: 0 2px 8px rgba(0, 0, 0, .10); }
.bolinha { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bolinha.ok { background: #22A05A; } .bolinha.falta { background: #E5484D; } .bolinha.aviso { background: #D9700A; } .bolinha.vazio { background: #B4B7BC; }
.mes { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 4px; border-radius: 999px; border: 1px solid var(--vidro-borda); background: rgba(255, 255, 255, .6); box-shadow: var(--vidro-sombra); }
.mes button { width: 32px; height: 32px; border-radius: 999px; border: 0; background: transparent; display: grid; place-items: center; color: var(--tinta-2); }
.mes span { padding: 0 8px; font-weight: 600; font-size: 13px; min-width: 132px; text-align: center; }
.editores { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-fundo); }
.editores .avatar { width: 22px; height: 22px; font-size: 10px; background: #7A4FD6; border: 2px solid #FFFFFF; }

/* ---------- Cartões, números e listas ---------- */
.cartao { position: relative; border-radius: var(--raio-g); border: 1px solid var(--vidro-borda); background: var(--sup); box-shadow: var(--sombra); }
.cartao.pad { padding: 18px 20px; }
.cartao-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 16px 20px 12px; }
.cartao-cab h2, .cartao-cab h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cartao-cab .acoes { margin-left: auto; }
.cartao-corpo { padding: 0 20px 18px; }
.cartao-pe { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--linha); }
.divisor { height: 1px; background: var(--linha); border: 0; margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpi { position: relative; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--vidro-borda); background: rgba(255, 255, 255, .72); box-shadow: var(--vidro-sombra); display: flex; flex-direction: column; gap: 4px; }
.kpi .rot { font-size: 12px; font-weight: 500; color: var(--tinta-2); }
.kpi .val { font-size: 28px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.kpi .det { font-size: 12px; color: var(--tinta-2); }
.kpi .det.bom { color: var(--ok-tx); } .kpi .det.ruim { color: var(--falta-tx); }
.kpi .val small { margin-left: 4px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.kpi.destaque { background: #FFFFFF; box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 40%, transparent), var(--vidro-sombra); }
.icone-q { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--acento) 12%, #FFFFFF); color: var(--acento); }
.icone-q.ok { background: var(--ok-bg); color: var(--ok-tx); } .icone-q.aviso { background: var(--aviso-bg); color: var(--aviso-tx); } .icone-q.falta { background: var(--falta-bg); color: var(--falta-tx); }
.lista-c { border-radius: var(--raio-g); border: 1px solid var(--vidro-borda); background: var(--sup); box-shadow: var(--sombra); overflow: hidden; }
.linha-l { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--linha); }
.linha-l:first-child { border-top: 0; }
.linha-l:hover { background: color-mix(in srgb, var(--acento) 5%, transparent); }
.linha-l .txt { flex: 1; min-width: 0; }
.linha-l .txt b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-l .txt span { display: block; font-size: 12.5px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-l .meta { font-size: 12px; color: var(--tinta-2); white-space: nowrap; }
.barra-prog { height: 8px; border-radius: 999px; background: rgba(11, 20, 36, .08); overflow: hidden; }
.barra-prog > i { display: block; height: 100%; border-radius: inherit; background: var(--acento); }
.barra-prog.ok > i { background: var(--ok-forte); } .barra-prog.aviso > i { background: var(--aviso-forte); } .barra-prog.falta > i { background: var(--falta-forte); }

/* ---------- Avatares e códigos da escala ---------- */
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #FFFFFF; background: #3D4450; flex: none; }
.avatar.p { width: 24px; height: 24px; font-size: 10px; }
.avatar.g { width: 44px; height: 44px; font-size: 15px; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.perfil-disparador { padding: 0; border: 0; overflow: hidden; outline-offset: 4px; }
.perfil-disparador:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.75); }
.perfil-disparador:focus-visible { outline: 2px solid var(--acento); }
.perfil-menu { position: fixed; inset: auto; margin: 0; width: min(340px, calc(100vw - 24px)); padding: 14px; border: 1px solid rgba(255,255,255,.9); border-radius: 22px; color: var(--tinta); background: linear-gradient(135deg, rgba(252,254,255,.96), rgba(238,246,255,.90)); box-shadow: 0 18px 48px rgba(29,50,81,.2), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
.perfil-menu:popover-open { animation: cmh-menu-in .16s ease-out; }
.perfil-menu-fechar { position: absolute; top: 8px; right: 9px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tinta-3); font-size: 20px !important; }
.perfil-menu-fechar:hover { background: rgba(41,101,181,.08); }
.perfil-menu-identidade { display: flex; align-items: center; gap: 12px; padding: 10px 16px 16px 3px; border-bottom: 1px solid var(--linha); }
.perfil-menu-identidade > div { min-width: 0; display: grid; gap: 3px; }
.perfil-menu-identidade strong { line-height: 1.3; font-size: 14px; }
.perfil-menu-identidade span:not(.avatar), .perfil-menu-identidade small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--tinta-2); font-size: 12px; }
.perfil-menu-identidade small { color: var(--tinta-3); font-size: 11px; }
.perfil-menu nav { display: grid; gap: 3px; padding-top: 8px; }
.perfil-menu nav a { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 13px; color: var(--tinta); text-decoration: none; transition: background .14s ease; }
.perfil-menu nav a:hover, .perfil-menu nav a:focus-visible { background: rgba(41,101,181,.08); }
.perfil-menu nav a > span:first-of-type { display: grid; gap: 3px; flex: 1; }
.perfil-menu nav a b { font-size: 13px; font-weight: 600; }
.perfil-menu nav a small { font-size: 11px; color: var(--tinta-2); }
.perfil-menu nav a > span:last-child { color: var(--tinta-3); }
.perfil-grade { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.8fr); align-items: start; gap: 18px; }
.perfil-coluna, .perfil-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.perfil-form > h2 { font-size: 15px; font-weight: 600; }
[data-confirmar-email][hidden] { display: none; }
.perfil-foto-corpo { display: flex; flex-direction: column; gap: 16px; }
.perfil-foto-corpo > p { color: var(--tinta-2); font-size: 13px; text-align: center; }
.perfil-foto-previa { position: relative; width: 128px; height: 128px; margin: 0 auto; overflow: hidden; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: #fff; font-size: 38px; font-weight: 600; box-shadow: 0 0 0 5px rgba(255,255,255,.8), var(--vidro-sombra); }
.perfil-foto-previa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.perfil-arquivo { height: auto; min-height: 42px; padding: 8px; max-width: 100%; }
.perfil-arquivo::file-selector-button { margin-right: 8px; padding: 5px 9px; border: 0; border-radius: 7px; color: var(--acento); background: var(--acento-suave); cursor: pointer; }
.perfil-documentos { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 14px 16px; border-radius: 13px; background: rgba(41,101,181,.045); color: var(--tinta-2); font-size: 12px; }
.perfil-documentos strong { margin-left: 7px; font-weight: 500; color: var(--tinta); }
.perfil-documentos small { flex-basis: 100%; color: var(--tinta-3); }
.perfil-vinculos { display: grid; gap: 14px; }
.perfil-vinculos > div { display: grid; gap: 4px; }
.perfil-vinculos span { color: var(--tinta-2); font-size: 12px; }
.perfil-link { color: var(--acento); font-size: 13px; text-decoration: none; }
@media (max-width: 1000px) { .perfil-grade { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) { .perfil-menu:popover-open { animation: none; } .perfil-menu nav a { transition: none; } }
.rostos { display: inline-flex; }
.rostos > *, .rostos .avatar { border: 2px solid #FFFFFF; margin-left: -8px; }
.rostos > *:first-child, .rostos > :first-child > :first-child { margin-left: 0; }
.chip { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 11.5px; font-weight: 650; letter-spacing: -.01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); flex: none; }
.c-D { background: var(--cod-d-bg); color: var(--cod-d-tx); }
.c-N { background: var(--cod-n-bg); color: var(--cod-n-tx); }
.c-M { background: var(--cod-m-bg); color: var(--cod-m-tx); }
.c-T { background: var(--cod-t-bg); color: var(--cod-t-tx); }
.c-FE { background: var(--cod-fe-bg); color: var(--cod-fe-tx); }
.c-LM { background: var(--cod-lm-bg); color: var(--cod-lm-tx); }
.c-F { background: rgba(255, 255, 255, .7); color: var(--tinta-2); font-weight: 600; box-shadow: inset 0 0 0 1px var(--linha-forte); }
.c-PS { width: 28px; background: transparent; border: 1.5px dashed #8C93A0; box-shadow: none; font-size: 9px; font-weight: 700; letter-spacing: 0; color: #4E5563; }

/* ---------- Tabelas (largura no th; nunca colgroup) ---------- */
.tab-caixa { overflow-x: auto; overflow-y: hidden; border-radius: inherit; }
.tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tab th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 12px; font-weight: 500; color: var(--tinta-2); padding: 10px 12px; background: var(--sup-fixo); border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tab td { position: relative; padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tab tr:last-child td { border-bottom: 0; }
.tab tbody tr:hover td { background: color-mix(in srgb, var(--acento) 5%, transparent); }
.tab th:first-child, .tab td:first-child { padding-left: 20px; }
.tab th:last-child, .tab td:last-child { padding-right: 20px; }
.tab .dir { text-align: right; }
.tab .nome b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab .nome i { display: block; font-style: normal; font-size: 11.5px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .rotulo { font-size: 12.5px; font-weight: 600; color: var(--tinta); }
.entrada { width: 100%; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--linha-forte); background: rgba(255, 255, 255, .92); color: var(--tinta); font-size: 14px; }
textarea.entrada { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.entrada:focus { outline: 2px solid color-mix(in srgb, var(--acento) 55%, transparent); outline-offset: 1px; border-color: var(--acento); }
.entrada::placeholder { color: var(--tinta-3); }
.ajuda { font-size: 12px; color: var(--tinta-2); }
.erro-msg { font-size: 12px; font-weight: 600; color: var(--falta-tx); }
.campo.com-erro .entrada { border-color: var(--falta-forte); }
.grade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.grade-form .inteiro { grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--acento); }
.chave { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.chave input { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 24px; margin: 0; flex: none; border-radius: 999px; background: #8A93A3; transition: background .15s; }
.chave input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.chave input:checked { background: var(--acento); }
.chave input:checked::after { transform: translateX(16px); }
.chave input:disabled { opacity: .55; cursor: not-allowed; }
.opcao { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; border: 1px solid var(--linha-forte); background: rgba(255, 255, 255, .7); cursor: pointer; }
.opcao.sel { border-color: var(--acento); background: #FFFFFF; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent); }

/* ---------- Passos, linha do tempo, avisos e vazio ---------- */
.passos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.passo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tinta-fundo); }
.passo .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .75); border: 1px solid var(--linha-forte); color: var(--tinta-2); }
.passo.atual { color: var(--tinta); }
.passo.atual .n { background: var(--acento); color: #FFFFFF; border-color: transparent; }
.passo.feito .n { background: var(--ok-tx); color: #FFFFFF; border-color: transparent; }
.passos .traco { width: 32px; height: 2px; border-radius: 2px; background: var(--linha-forte); }
.tempo { position: relative; display: flex; flex-direction: column; gap: 16px; padding-left: 24px; }
.tempo::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--linha-forte); }
.evento { position: relative; }
.evento::before { content: ""; position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--acento); }
.evento.ok::before { background: var(--ok-forte); border-color: var(--ok-forte); }
.evento.aviso::before { background: var(--aviso-forte); border-color: var(--aviso-forte); }
.evento.falta::before { background: var(--falta-forte); border-color: var(--falta-forte); }
.evento b { font-weight: 600; }
.evento .quando { display: block; font-size: 12px; color: var(--tinta-2); }
.faixa-aviso { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 16px; border: 1px solid; font-size: 13px; line-height: 1.45; }
.faixa-aviso .acoes { align-self: center; }
.faixa-aviso.info { background: #EEF4FD; border-color: #C9DAF5; color: #1C3F7A; }
.faixa-aviso.aviso { background: #FFF4E5; border-color: #F5D7AE; color: #7A3D00; }
.faixa-aviso.falta { background: #FEF0EE; border-color: #F6CFCA; color: #8F1F15; }
.faixa-aviso.ok { background: #EDF8F0; border-color: #C7E8D1; color: #14532D; }
.vazio-estado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 20px; color: var(--tinta-2); }
.vazio-estado .icone-q { width: 48px; height: 48px; border-radius: 16px; }
.vazio-estado b { color: var(--tinta); font-size: 15px; }

/* ---------- Camadas por cima: modal, painel e barra flutuante ---------- */
.modal-fundo { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(11, 20, 36, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal { width: min(560px, 100%); padding: 24px; border-radius: 28px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--sombra-flutua); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.modal h2 { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.painel { position: absolute; z-index: 30; width: 272px; padding: 14px; border-radius: 18px; text-align: left; font-size: 12.5px; cursor: default; background: rgba(255, 255, 255, .96); border: 1px solid rgba(255, 255, 255, .7); box-shadow: var(--sombra-flutua); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.painel h4 { margin: 0 0 2px; font-size: 14px; }
.painel .sub-p { color: var(--tinta-2); }
.painel .linha-d { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--linha); }
.painel .acao { margin-top: 10px; width: 100%; height: 36px; border-radius: 999px; border: 0; background: #141517; color: #FFFFFF; font-weight: 600; }
.flutua { position: fixed; left: calc(50% + 38px); bottom: 22px; transform: translateX(-50%); z-index: 20; display: flex; gap: 10px; align-items: center; }
.capsula { display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; }
.capsula .sep { width: 1px; height: 24px; background: var(--linha-forte); margin: 0 6px; }
.ferr { position: relative; height: 36px; min-width: 36px; padding: 0 10px; border-radius: 999px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.ferr:hover { background: rgba(255, 255, 255, .7); }
.ferr.ativa { background: var(--tinta); color: #FFFFFF; }
.ferr .chip { width: 26px; height: 26px; }
.ferr-rotulo { font-size: 11px; color: var(--tinta-2); font-weight: 500; padding: 0 4px 0 6px; }
.preencher { height: 48px; padding: 0 18px; }
.alerta-pilula { position: relative; height: 48px; padding: 0 16px 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--aviso-tx); border: 0; }
.alerta-pilula .n { min-width: 22px; height: 22px; border-radius: 999px; background: var(--aviso-forte); color: #FFFFFF; display: grid; place-items: center; font-size: 12px; }

/* ---------- Dica ao passar o mouse: data-dica="texto". Várias linhas só pelo renderVals (string JS com \n): escrito no HTML, o \n aparece literal.
   O elemento precisa estar posicionado. A dica só existe enquanto aparece, para não criar rolagem lateral ---------- */
[data-dica]::after { content: none; position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); width: max-content; max-width: 260px; padding: 7px 10px; border-radius: 10px; background: #141517; color: #FFFFFF; font: 500 12px/1.4 var(--fonte); letter-spacing: 0; text-transform: none; text-align: left; white-space: pre-line; box-shadow: 0 8px 20px rgba(11, 20, 36, .22); pointer-events: none; }
[data-dica]:hover::after, [data-dica]:focus-visible::after { content: attr(data-dica); animation: cmh-dica .14s ease-out .2s both; }
.dica-aberta::after { content: attr(data-dica); }
@keyframes cmh-dica { from { opacity: 0; } to { opacity: 1; } }
.dica-abaixo::after { top: calc(100% + 6px); bottom: auto; }
.dica-direita::after, .trilho a[data-dica]::after { left: calc(100% + 10px); top: 50%; bottom: auto; transform: translateY(-50%); }
.dica-fim::after { left: auto; right: 0; transform: none; }

/* ---------- Grade da escala (usada em W18 e afins) ---------- */
.cartao.rola { overflow-x: auto; overflow-y: hidden; }
.grade { --cols: 228px repeat(30, minmax(28px, 1fr)) repeat(3, 50px); min-width: 1218px; }
.grade .linha { display: grid; grid-template-columns: var(--cols); }
.grade .linha > * { position: relative; min-width: 0; }
.grade .cab-dias { position: sticky; top: 0; z-index: 3; height: 50px; background: var(--sup-fixo); border-bottom: 1px solid var(--linha); }
.grade .h-nome { position: sticky; left: 0; z-index: 4; display: flex; align-items: center; padding-left: 16px; font-size: 12px; font-weight: 500; color: var(--tinta-2); background: var(--sup-fixo); box-shadow: 1px 0 0 var(--linha); }
.grade .dia-h { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; line-height: 1.1; color: var(--tinta); cursor: default; }
.grade .dia-h small { margin-top: 3px; font-size: 10.5px; font-weight: 500; color: var(--tinta-3); }
.grade .dia-h.fds { background: var(--fds); }
.grade .dia-h.fer small { color: #A8261A; font-weight: 600; }
.grade .dia-h.fer::before { content: ""; position: absolute; top: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #E5484D; }
.grade .dia-h.ativo, .grade .dia-h:hover { background: var(--acento-suave); box-shadow: inset 0 -2px 0 var(--acento); }
.grade .t-h { display: grid; place-items: center; font-size: 11.5px; font-weight: 500; color: var(--tinta-2); cursor: default; }
.grade .grupo { height: 32px; background: rgba(244, 247, 252, .95); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.grade .g-nome { position: sticky; left: 0; height: 100%; display: inline-flex; align-items: center; gap: 8px; padding-left: 16px; font-size: 12px; font-weight: 600; color: var(--tinta); }
.grade .g-nome em { font-style: normal; font-weight: 500; color: var(--tinta-2); }
.grade .grupo.he { background: rgba(255, 238, 214, .8); border-color: #F5DDBF; }
.grade .grupo.he .g-nome { color: var(--aviso-tx); }
.grade .pessoa { height: 40px; border-bottom: 1px solid var(--linha); }
.grade .pessoa.ini-b { box-shadow: inset 0 1px 0 var(--linha-forte); }
.grade .pessoa:hover { background-color: color-mix(in srgb, var(--acento) 5%, transparent); }
.grade .c-nome { position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 0 10px 0 16px; background: var(--sup-fixo); box-shadow: 1px 0 0 var(--linha); cursor: default; }
.grade .pessoa:hover .c-nome { background: color-mix(in srgb, var(--acento) 6%, #FFFFFF); }
.grade .c-nome b { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade .c-nome i { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade .selo-lider { margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--acento); }
.grade .c { display: grid; place-items: center; cursor: cell; }
.grade .c.fds { background: var(--fds); }
.grade .dia-h.feriado-dia, .grade .c.feriado-dia, .cal .dia.feriado-dia, .lst .dia.feriado-dia, .faixas .feriado-dia { background: var(--aviso-bg); }
.feriado-nome { color: var(--aviso-tx); font-size: 11.5px; font-weight: 600; overflow-wrap: anywhere; }
.grade .he-marca { position: absolute; top: 5px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: #D9700A; box-shadow: 0 0 0 2px #FFFFFF; }
.grade .c.conflito .chip { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #E5484D; }
.grade .c.selecionada .chip { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--acento); }
.grade .c.faixa-c { display: flex; align-items: center; padding: 0 3px; }
.grade .span2 { grid-column: span 2; } .grade .span3 { grid-column: span 3; } .grade .span4 { grid-column: span 4; } .grade .span5 { grid-column: span 5; }
.grade .span6 { grid-column: span 6; } .grade .span7 { grid-column: span 7; } .grade .span11 { grid-column: span 11; } .grade .span15 { grid-column: span 15; }
.grade .faixa { flex: 1; min-width: 0; height: 24px; padding-left: 8px; border-radius: 7px; display: flex; align-items: center; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.grade .faixa.fe { background: var(--cod-fe-bg); color: var(--cod-fe-tx); }
.grade .faixa.lm { background: var(--cod-lm-bg); color: var(--cod-lm-tx); }
.grade .t { display: grid; place-items: center; font-size: 12.5px; font-weight: 550; color: var(--tinta); }
.grade .t.ok { color: var(--ok-tx); }
.grade .t.pendente span { padding: 2px 8px; border-radius: 999px; background: var(--aviso-bg); color: var(--aviso-tx); font-weight: 700; }
.grade .cobertura { height: 32px; border-bottom: 1px solid var(--linha); }
.grade .c-rot { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; padding-left: 16px; font-size: 11.5px; color: var(--tinta-2); white-space: nowrap; background: var(--sup-fixo); box-shadow: 1px 0 0 var(--linha); }
.grade .c-rot b { color: var(--tinta); font-weight: 600; }
.cv { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 4px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.cv.ok { color: var(--ok-tx); }
.cv.sobra { color: var(--tinta-3); font-weight: 500; }
.cv.falta { background: var(--falta-bg); color: var(--falta-tx); }
.grade .t-h[data-dica]::after, .grade .t[data-dica]::after { left: auto; right: 4px; transform: none; }
.grade .dia-h[data-dica]::after, .grade .t-h[data-dica]::after { top: calc(100% + 4px); bottom: auto; }
.grade .c-nome[data-dica]::after { left: calc(100% + 8px); top: 50%; bottom: auto; transform: translateY(-50%); }
.grade:has(.dc1:hover) .dh1, .grade:has(.dc2:hover) .dh2, .grade:has(.dc3:hover) .dh3, .grade:has(.dc4:hover) .dh4, .grade:has(.dc5:hover) .dh5,
.grade:has(.dc6:hover) .dh6, .grade:has(.dc7:hover) .dh7, .grade:has(.dc8:hover) .dh8, .grade:has(.dc9:hover) .dh9, .grade:has(.dc10:hover) .dh10,
.grade:has(.dc11:hover) .dh11, .grade:has(.dc12:hover) .dh12, .grade:has(.dc13:hover) .dh13, .grade:has(.dc14:hover) .dh14, .grade:has(.dc15:hover) .dh15,
.grade:has(.dc16:hover) .dh16, .grade:has(.dc17:hover) .dh17, .grade:has(.dc18:hover) .dh18, .grade:has(.dc19:hover) .dh19, .grade:has(.dc20:hover) .dh20,
.grade:has(.dc21:hover) .dh21, .grade:has(.dc22:hover) .dh22, .grade:has(.dc23:hover) .dh23, .grade:has(.dc24:hover) .dh24, .grade:has(.dc25:hover) .dh25,
.grade:has(.dc26:hover) .dh26, .grade:has(.dc27:hover) .dh27, .grade:has(.dc28:hover) .dh28, .grade:has(.dc29:hover) .dh29, .grade:has(.dc30:hover) .dh30,
.grade:has(.dc31:hover) .dh31 { background: var(--acento-suave); box-shadow: inset 0 -2px 0 var(--acento); }

/* ---------- App do celular ---------- */
.tela { max-width: 430px; margin: 0 auto; padding: 18px 16px 120px; display: flex; flex-direction: column; gap: 16px; font-size: 15px; }
.topo-m { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.topo-m h1 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.topo-m .acoes { margin-left: auto; }
.ola { display: flex; align-items: center; gap: 12px; }
.ola h1 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.ola p { margin-top: 2px; font-size: 13px; color: var(--tinta-fundo); display: flex; align-items: center; gap: 6px; }
.ola .avatar { width: 40px; height: 40px; font-size: 14px; margin-left: auto; background: #7A4FD6; }
.sinc { width: 7px; height: 7px; border-radius: 50%; background: #22A05A; flex: none; }
.destaque { padding: 4px 0 2px; }
.destaque .rot { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-fundo); }
.destaque .grande { margin-top: 8px; font-size: 34px; font-weight: 650; letter-spacing: -.035em; line-height: 1.1; color: var(--tinta); }
.destaque .medio { margin-top: 4px; font-size: 16px; color: var(--tinta-fundo); }
.resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.resumo > span { height: 52px; padding: 0 6px; border-radius: 16px; background: rgba(255, 255, 255, .6); border: 1px solid var(--vidro-borda); font-size: 11.5px; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--tinta-2); line-height: 1.1; }
.resumo b { color: var(--tinta); font-weight: 650; font-size: 16px; letter-spacing: -.02em; margin-bottom: 3px; }
.lista-m { border-radius: 22px; background: var(--sup); border: 1px solid var(--vidro-borda); box-shadow: var(--sombra); overflow: hidden; }
.lista-m .sem { padding: 10px 16px 6px; font-size: 12px; font-weight: 600; color: var(--tinta-3); letter-spacing: .03em; text-transform: uppercase; background: var(--sup-2); }
.lista-m .item { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; min-height: 64px; border-top: 1px solid var(--linha); }
.lista-m .item .data { width: 40px; text-align: center; flex: none; }
.lista-m .item .data b { display: block; font-size: 20px; font-weight: 650; letter-spacing: -.02em; line-height: 1; }
.lista-m .item .data small { font-size: 11px; color: var(--tinta-3); }
.lista-m .item .chip { width: 34px; height: 34px; border-radius: 11px; font-size: 14px; }
.lista-m .item .txt { flex: 1; min-width: 0; }
.lista-m .item .txt b { display: block; font-size: 15px; font-weight: 600; }
.lista-m .item .txt span { font-size: 13px; color: var(--tinta-2); }
.lista-m .item.hoje-i { background: var(--acento-suave); }
.tag { height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap; }
.tag.he { background: var(--aviso-bg); color: var(--aviso-tx); }
.tag.hoje { background: var(--acento); color: #FFFFFF; }
.tag.ok { background: var(--ok-bg); color: var(--ok-tx); }
.tag.falta { background: var(--falta-bg); color: var(--falta-tx); }
.tag.lider { background: var(--info-bg); color: var(--info-tx); }
.barra-m { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; display: flex; gap: 10px; align-items: center; z-index: 10; }
.abas-m { display: flex; padding: 6px; border-radius: 999px; gap: 2px; }
.abas-m a { position: relative; width: 74px; height: 54px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--tinta-2); text-decoration: none; }
.abas-m a.sel { background: #FFFFFF; color: var(--acento); }
.badge { position: absolute; top: 6px; right: 18px; min-width: 17px; height: 17px; border-radius: 999px; background: #D92D20; color: #FFFFFF; font-size: 10px; display: grid; place-items: center; padding: 0 4px; }
.redondo-m { width: 60px; height: 60px; border-radius: 999px; display: grid; place-items: center; color: var(--tinta); border: 0; }
.tela .seg button { height: 44px; }
.tela .icone-btn { width: 44px; height: 44px; }
.destaque .rot .tag, .destaque .rot .pilula { letter-spacing: 0; text-transform: none; }
/* O KPI em destaque não herda o bloco .destaque do app (espaçamento e rótulo em caixa alta). */
.kpi.destaque { padding: 16px 18px; }
.kpi.destaque .rot { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
.lista-m .item .chip.c-PS { width: 34px; font-size: 11px; }

/* ---------- Login (web e app): foto do cliente + formulário; selo CMARCO discreto ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(400px, .9fr); }
.login-foto { position: relative; margin: 12px; border-radius: 28px; overflow: hidden; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; color: #FFFFFF; background: linear-gradient(160deg, color-mix(in srgb, var(--acento) 70%, #0B1424) 0%, #0B1424 100%); }
.login-lado { display: flex; flex-direction: column; justify-content: center; padding: 40px 56px; gap: 22px; }
.selo-cmarco { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-fundo); }
.selo-cmarco .s { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #0B1424; color: #FFFFFF; font-size: 10px; font-weight: 700; }

/* ---------- Telas médias e estreitas ---------- */
@media (max-width: 1100px) {
  .grade-3, .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-lado, .grade-lado.esq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .app { flex-direction: column; align-items: stretch; }
  .trilho { flex-direction: row; width: auto; min-height: 0; margin: 12px 12px 0; padding: 6px 10px; border-radius: 999px; overflow-x: auto; }
  .menu-fixar { opacity: .72; margin: 0; }
  .trilho a, .trilho .sair-form button, .trilho .menu-grupo-toggle { align-self: auto; margin-left: 0; }
  .marca { margin: 0 6px 0 0; }
  .busca { order: 3; width: 100%; margin-left: 0; }
  .conteudo { padding: 14px 12px 64px; }
  .acoes { margin-left: 0; }
  .grade-2, .grade-3, .grade-4, .grade-lado, .grade-lado.esq, .grade-form { grid-template-columns: minmax(0, 1fr); }
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-foto { min-height: 220px; }
  .login-lado { padding: 24px 16px; }
  .flutua { left: 12px; right: 12px; transform: none; overflow-x: auto; }
  .cmh-workspace { min-height: calc(100vh - 74px); }
  .cmh-workspace-nav { margin: 6px 8px 0; }
  .cmh-tabs-row { gap: 6px; min-height: 40px; flex-wrap: wrap; }
  .cmh-tabs-list { max-width: 100%; min-height: 40px; }
  .cmh-global-actions { order: 2; flex: 1 1 100%; min-width: 0; }
  .cmh-global-search { flex: 1 1 0; min-width: 0; }
  .cmh-tab { min-height: 32px; max-width: 190px; }
  .cmh-tab-select { max-width: 135px; font-size: 11.5px; }
}
.cmh-tab.is-pinned { cursor: grab; }
.cmh-tabs-list.is-dragging { overflow: hidden; }
.cmh-tab-drag-ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: .96; box-shadow: 0 12px 30px rgba(27,47,78,.24), 0 2px 8px rgba(27,47,78,.12); will-change: transform; }
.cmh-tab-placeholder { flex: none; border: 1px dashed color-mix(in srgb, var(--acento) 48%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--acento) 9%, transparent); transition: width .14s ease; }

/* Cadastro: confirmação com a mesma superfície de vidro das abas. */
.cadastro-dialog { margin: auto; max-height: calc(100dvh - 40px); overflow-y: auto; }
.cadastro-dialog:not([open]) { display: none; }
.cadastro-dialog::backdrop { background: rgba(43,61,91,.16); backdrop-filter: blur(9px) saturate(118%); }
.cadastro-dialog[open] { animation: cmh-menu-in .16s ease-out both; }
@media (prefers-reduced-motion: reduce) { .cadastro-dialog[open] { animation: none; } }
.especialidades-adicionar { display:flex;align-items:center;gap:8px;max-width:640px; }
.especialidades-adicionar .entrada { flex:1;min-width:0; }
.especialidades-adicionar .btn { font-size:24px;padding:0;width:42px;height:42px;flex:0 0 42px; }
.especialidades-itens { display:flex;flex-wrap:wrap;gap:8px; }
.especialidades-itens:empty { display:none; }
.especialidade-item { display:inline-flex;align-items:center;gap:9px;padding:6px 8px 6px 12px;border-radius:16px;background:var(--acento-suave);color:var(--acento);border:1px solid color-mix(in srgb,var(--acento) 18%,transparent);font-size:13px;max-width:100%; }
.especialidade-item > span { overflow-wrap:anywhere; }
.especialidade-item button { border:0;background:transparent;color:inherit;cursor:pointer;border-radius:50%;width:28px;height:28px;font-size:18px; }
.especialidade-item button:hover { background:color-mix(in srgb,var(--acento) 12%,transparent); }
.cmarco-assinatura { position:fixed;bottom:16px;left:12px;width:64px;height:18px;display:flex;align-items:center;justify-content:center;z-index:5; }
.cmarco-assinatura img { display:block;width:100%;height:auto;object-fit:contain; }
@media(min-width:761px) { .trilho { margin-bottom:36px; } }
@media(max-width:760px) { .cmarco-assinatura { left:10px;bottom:14px;width:56px; } }
@media print { .cmarco-assinatura { display:none; } }
/* The navigation stays reachable as the page scrolls, including its collapsed handle. */
@media (min-width:761px) {
    .trilho { position:sticky;top:12px;align-self:flex-start;min-height:0;height:calc(100dvh - 48px);padding-block:14px;gap:clamp(4px,.65dvh,7px); }
    .trilho a,.trilho .sair-form button,.trilho .menu-grupo-toggle { height:clamp(24px,4dvh,42px); }
    .trilho .menu-fixar { margin-bottom:6px; }
    .trilho .marca-menu { flex:none;margin-bottom:10px; }
}
@media (min-width:761px) and (max-height:560px) {
    .trilho { overflow-y:auto;overflow-x:hidden;scrollbar-width:thin; }
}
/* Keep the rail as tall as its visible controls, without a blank separator. */
@media (min-width:761px) {
    .trilho { height:auto;max-height:calc(100dvh - 72px);margin-bottom:60px; }
    .trilho .espaco { display:none; }
}

/* Page header actions share the same right alignment throughout the system. */
.cab > .acoes, .cab > a.btn { margin-left:auto; }

/* Secondary destinations share the rail's surface and push the workspace aside. */
.navegacao-lateral { display:flex;align-items:stretch;flex:none;position:sticky;top:12px;align-self:flex-start;margin:12px 0 60px 12px;max-height:calc(100dvh - 72px);border-radius:28px;isolation:isolate;z-index:10;transition:background-color .18s ease,box-shadow .18s ease; }
.navegacao-lateral>.trilho { position:relative;top:auto;align-self:stretch;margin:0; }
.navegacao-lateral.submenu-aberto { background:var(--sup-fixo);outline:1px solid rgba(255,255,255,.65);outline-offset:-1px;box-shadow:0 8px 24px rgba(27,47,78,.10); }
.navegacao-lateral.submenu-aberto .trilho.menu-fluido { background:transparent;border-color:transparent;box-shadow:none;clip-path:none;border-radius:28px 0 0 28px; }
.navegacao-lateral.submenu-aberto .trilho :is(.menu-vidro,.menu-bolha) { display:none; }
.navegacao-lateral.submenu-aberto .trilho.menu-fluido .menu-aberto { max-width:42px; }
.navegacao-lateral.submenu-aberto .trilho.menu-fluido .menu-aberto .menu-texto { opacity:0; }
.navegacao-lateral.submenu-aberto .trilho .menu-aberto:not(.ativo):not([aria-expanded="true"]) { background:var(--acento-suave);color:var(--acento); }
.navegacao-lateral.submenu-aberto .trilho.menu-fluido .menu-grupo-toggle[aria-expanded="true"] { background:var(--acento);color:white; }
.trilho .menu-grupo-toggle.ativo { background:var(--acento);color:white; }
.trilho.menu-fluido .menu-grupo-toggle.ativo:is(:hover,:focus-visible) { background:var(--acento);color:white; }
.menu-submenu { position:relative;flex:none;display:flex;flex-direction:column;gap:4px;margin:0;width:0;max-height:0;overflow:hidden;padding:0;border:0;border-radius:0 28px 28px 0;background:transparent;color:var(--tinta);opacity:0;visibility:hidden;pointer-events:none;transition:width .2s cubic-bezier(.22,.8,.2,1),padding .2s ease,opacity .12s ease,visibility 0s .2s; }
.navegacao-lateral.submenu-aberto .menu-submenu[aria-hidden="false"] { width:244px;max-height:calc(100dvh - 72px);padding:14px 10px 14px 12px;overflow-y:auto;opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s; }
.menu-submenu-cab { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 8px 10px;font-size:13px;flex:none; }
.menu-submenu a,.menu-submenu a:is(:hover,:focus-visible) { display:flex;flex:none;align-self:stretch;max-width:none;width:auto;height:auto;min-height:42px;margin:0;padding:10px 12px;gap:10px;border-radius:13px;overflow:visible;background:transparent;box-shadow:none;font-size:13px; }
.menu-submenu a .menu-texto { opacity:1;white-space:normal;font-size:13px;padding:0; }
.menu-submenu a:is(:hover,:focus-visible) { background:rgba(255,255,255,.85); }
.menu-submenu a.ativo { background:var(--acento);color:white; }
.menu-submenu .ic { flex:none;width:18px;height:18px; }
@media(max-width:760px){
  .navegacao-lateral { position:relative;top:auto;align-self:stretch;flex-direction:column;margin:12px 12px 0;max-height:none;border-radius:24px; }
  .navegacao-lateral>.trilho { width:100%;margin:0; }
  .navegacao-lateral.submenu-aberto .trilho.menu-fluido { border-radius:24px 24px 0 0; }
  .navegacao-lateral .menu-submenu { width:100%;border-radius:0 0 24px 24px;transition:max-height .2s ease,padding .2s ease,opacity .12s ease,visibility 0s .2s; }
  .navegacao-lateral.submenu-aberto .menu-submenu[aria-hidden="false"] { width:100%;max-height:380px; }
}
@media(prefers-reduced-motion:reduce){.navegacao-lateral,.menu-submenu{transition:none}}
@media print{.navegacao-lateral{display:none!important}}

.menu-submenu a { color:var(--tinta-2);text-decoration:none;font-weight:500; }
.menu-submenu a:focus-visible { outline:2px solid var(--acento);outline-offset:1px; }
.menu-submenu.perfil-menu { box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; }
.menu-submenu.perfil-menu .perfil-menu-identidade { flex-direction:column;align-items:flex-start;gap:10px;padding:10px 8px 16px; }
.menu-submenu.perfil-menu .perfil-menu-identidade>div { max-width:100%; }
.menu-submenu.perfil-menu nav a { gap:9px;padding:12px 8px; }
.menu-submenu.perfil-menu nav a>span:first-of-type { min-width:0; }
.perfil-disparador[aria-expanded="true"] { box-shadow:0 0 0 2px var(--acento); }

/* A transparent profile image replaces the initials too. */
.perfil-foto-previa:has(img)>span { display:none; }
.perfil-menu nav a>span:first-of-type { display:grid;gap:4px;min-width:0; }
.perfil-menu nav a small { display:block;line-height:1.45; }
.perfil-menu nav a>span:last-child { flex:none;margin-left:auto; }
.perfil-menu nav a .ic { flex:none;align-self:center; }
.menu-submenu.perfil-menu nav a { align-items:center; }

[data-perfil-foto-remover][hidden] { display:none!important; }
/* Compact, personal cards keep the same navigation at every scale level. */
.hier-card { --card-cor:var(--acento);position:relative;min-width:0;border:1px solid var(--vidro-borda);border-radius:17px;background:var(--sup);box-shadow:0 4px 14px rgba(25,40,60,.045); }
.hier-card:hover { border-color:color-mix(in srgb,var(--acento) 35%,white); }
.hier-card-disponivel { border-style:dashed;box-shadow:none;background:color-mix(in srgb,var(--sup) 75%,transparent); }
.hier-card[style*="--card-cor"] { background:color-mix(in srgb,var(--card-cor) 11%,var(--sup-fixo));border-color:color-mix(in srgb,var(--card-cor) 35%,white); }
.hier-card .hier-destino { display:flex;flex-direction:column;gap:11px;min-height:150px;padding:15px;border:0;border-radius:inherit;box-shadow:none;background:transparent;text-decoration:none; }
.hier-card .hier-destino:hover { background:rgba(255,255,255,.18); }
.hier-card .hier-destino-topo { justify-content:flex-start;gap:8px;padding-right:48px; }
.hier-card .hier-icone { width:30px;height:30px;border-radius:9px;color:var(--card-cor);background:rgba(255,255,255,.6); }
.hier-card .hier-icone .ic { width:16px;height:16px; }
.hier-card .hier-destino h2 { font-size:15px;margin-bottom:4px;line-height:1.3; }
.hier-card .hier-destino p { font-size:11px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.hier-card .hier-destino-rodape { padding-top:10px;font-size:11px; }
.hier-card .hier-destino-rodape .btn { font-size:11px;min-height:29px;padding:5px 10px; }
.hier-card-ferramentas { position:absolute;right:9px;top:9px;z-index:3;display:flex;align-items:center;gap:3px; }
.hier-card-mover,.hier-card-cor { position:relative;display:grid;place-items:center;width:23px;height:25px;margin:0;padding:0;border:0;border-radius:7px;background:transparent;color:var(--tinta-3); }
.hier-card-mover { cursor:grab;touch-action:none; }
.hier-card-cor { cursor:pointer; }
.hier-card-ferramentas .ic { width:14px;height:14px; }
.hier-card-mover:hover,.hier-card-cor:hover { background:white;color:var(--acento); }
.hier-card-cor input { position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer; }
.hier-card-arrastando { opacity:.3;outline:2px dashed var(--acento);outline-offset:2px; }
.hier-card-fantasma { position:fixed!important;z-index:1000;pointer-events:none;opacity:.95;transform:rotate(1deg);box-shadow:0 16px 40px rgba(25,40,60,.2); }
.hier-organizacao { display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--tinta-3); }
.hier-organizacao>span:first-child { display:flex;align-items:center;gap:6px; }
.hier-organizacao .ic { width:13px;height:13px; }
.hier-cards-status { margin-left:auto; }
.hier-organizacao [hidden] { display:none!important; }
.hier-vazio { padding:22px;border:1px dashed var(--linha-forte);border-radius:17px;font-size:13px;color:var(--tinta-2); }
.hier-vazio p { margin-top:5px;font-size:12px; }
.hier-grade[data-escalas-cards] { position:relative;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px; }
.hier-card .hier-destino h2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.hier-card-paleta { position:relative; }
.hier-card-paleta>summary { list-style:none; }
.hier-card-paleta>summary::-webkit-details-marker { display:none; }
.hier-card-paleta>div { position:absolute;right:0;top:30px;min-width:160px;padding:12px;border:1px solid var(--linha);border-radius:12px;background:white;box-shadow:var(--sombra-flutua); }
.hier-card-paleta label { display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12px; }
.hier-card-paleta input[type=color] { position:static;opacity:1;inset:auto;width:34px;height:28px;border:1px solid var(--linha);border-radius:7px;padding:2px;background:white;cursor:pointer; }
.hier-card-paleta [data-card-cor-padrao] { width:100%;margin-top:9px;padding:7px;border:0;border-radius:8px;background:var(--acento-suave);color:var(--acento);font-size:11px;text-align:left; }

.hier-card-amostras { display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:13px; }
.hier-card-amostras button { width:21px;height:21px;padding:0;background:var(--amostra);border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px var(--linha);cursor:pointer; }
.hier-card-amostras button:hover { box-shadow:0 0 0 2px var(--amostra); }
.hier-card:has(.hier-card-paleta[open]) { z-index:4; }
.hier-card-renomear { display:grid;place-items:center;width:23px;height:25px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--tinta-3);cursor:pointer; }
.hier-card-renomear:hover { color:var(--acento);background:white; }
.hier-card:has(.hier-card-renomear) .hier-destino-topo { padding-right:102px; }
.hier-card-excluir { display:grid;place-items:center;width:23px;height:25px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--tinta-3);cursor:pointer; }
.hier-card-excluir:hover { color:var(--falta-tx);background:var(--falta-bg); }
.hier-excluir-confirmar { background:var(--falta-forte);color:white; }
.hier-adicionar { align-self:flex-start; }
.hier-adicionar-botao { display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--vidro-borda);border-radius:13px;background:var(--sup);color:var(--acento);font-size:26px;line-height:1;box-shadow:var(--sombra);cursor:pointer; }
.hier-adicionar-botao:hover { background:var(--sup-fixo);border-color:var(--acento); }
.hier-dialog { width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--vidro-borda);border-radius:20px;background:var(--sup-fixo);color:var(--tinta);box-shadow:var(--sombra-flutua); }
.hier-dialog-cab { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 0; }
.hier-dialog-cab h2 { font-size:17px;font-weight:650;line-height:1.3;letter-spacing:-.02em; }
.hier-dialog-fechar { display:grid;place-items:center;flex:none;width:29px;height:29px;padding:0;border:0;border-radius:9px;background:var(--acento-suave);color:var(--tinta-2);font-size:22px;cursor:pointer; }
.hier-dialog-corpo { padding:2px 22px 22px; }
.hier-dialog .hier-form { display:grid;grid-template-columns:1fr;gap:15px;margin-top:18px; }
.hier-dialog-acoes { display:flex;justify-content:flex-end;gap:8px;padding-top:5px; }
.hier-dialog [hidden] { display:none!important; }
.hier-turno-personalizado { display:grid;gap:12px;min-width:0;padding:14px;border:1px solid var(--linha);border-radius:12px; }
.hier-turno-personalizado legend { padding:0 5px;font-size:12px;font-weight:600; }
.hier-horarios { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.hier-turno-noturno { display:flex;align-items:center;gap:8px;font-size:12px; }
.hier-dialog-erros { margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--falta-bg);color:var(--falta-tx);font-size:12px; }
.hier-dialog-erros p+p { margin-top:5px; }
.hier-dialog .hier-dialog-cab { align-items:center;padding:20px 22px 0; }
.hier-dialog .hier-dialog-cab h2 { margin:0; }
.hier-dialog .hier-dialog-fechar { display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;margin:0;padding:0;line-height:1; }
.hier-dialog .hier-dialog-corpo { padding:0 22px 22px; }
.hier-dialog .hier-form { margin-top:18px; }
.hier-dialog .hier-form>p { margin:0;line-height:1.6; }
.hier-dialog .hier-dialog-acoes { align-items:center;justify-content:flex-end;gap:10px;padding-top:7px; }
.hier-dialog .hier-dialog-acoes .btn { box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:none;height:40px;min-height:40px;margin:0;padding:0 16px;border-radius:12px;font-size:13px;line-height:1; }
.hier-dialog .hier-excluir-confirmar { background:var(--falta-forte);color:#fff; }

/* Empty schedule rows remain a usable spreadsheet, without placeholder reports. */
.grade[data-grade-escalavel] .c { padding: 0; }
.grade .grade-vazia-cel { display: block; width: 100%; height: 100%; min-height: 32px; border: 0; background: transparent; cursor: cell; }
.grade .grade-vazia-cel:focus { outline: 2px solid var(--acento); outline-offset: -2px; }
.grade .grade-adicionar { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--linha); border-radius: 7px; background: rgba(255,255,255,.6); color: var(--acento); font-size: 18px; cursor: pointer; }
.grade .c input[aria-invalid=true] { box-shadow: inset 0 0 0 2px #E5484D; }
.grade-profissionais-lista { max-height: 240px; overflow-y: auto; margin: 12px 0; }
.grade-profissional-opcao { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--linha); cursor: pointer; }
.grade-profissional-opcao[hidden] { display: none; }
.grade-profissional-opcao small { display: block; color: var(--tinta-2); margin-top: 3px; }
.grade .g-nome { display: flex; align-items: center; gap: 10px; }
.grade .g-nome .grade-adicionar { margin-left: 8px; }
.cmh .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.grade-barra-flutuante { position: fixed; left: calc(50% + 38px); bottom: 18px; z-index: 25; max-width: calc(100vw - 150px); }
.grade-barra-flutuante .capsula { max-width: 100%; overflow-x: auto; }
.grade-barra-flutuante .ferr { flex: 0 0 auto; cursor: pointer; }
.grade-barra-flutuante .ferr:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (max-width: 1000px) { .grade-barra-flutuante { left: 12px; right: 12px; max-width: none; } }

/* Bandas verticais para sábados e domingos atravessam linhas preenchidas e vazias. */
.grade .dia-h.fds { background: color-mix(in srgb, var(--acento) 13%, #FFFFFF); }
.grade .c.fds { background: color-mix(in srgb, var(--acento) 8%, #FFFFFF); }
.grade .c.feriado-dia { background: color-mix(in srgb, var(--aviso-bg) 80%, #FFFFFF); }
/* A barra precisa cobrir o conteúdo atrás dela e ficar acima da borda inferior da janela. */
.grade-barra-flutuante { bottom: 76px; }
.grade-barra-flutuante .capsula.vidro { background: rgba(255,255,255,.97); border-color: rgba(255,255,255,.95); box-shadow: 0 10px 30px rgba(11,20,36,.2), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.grade-barra-flutuante [data-grade-status] { position: fixed !important; inset: auto auto 0 0 !important; display: block !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 1000px) { .grade-barra-flutuante { bottom: 76px; } }
.grade-barra-flutuante { bottom: clamp(140px, 25vh, 235px); }
.grade-barra-flutuante .capsula.vidro { background: #FFFFFF; }
@media (max-width: 1000px) { .grade-barra-flutuante { bottom: clamp(120px, 22vh, 200px); } }
.grade-barra-flutuante { z-index: 35; }
.grade-barra-flutuante .grade-mover { cursor: grab; touch-action: none; }
.grade-barra-flutuante .grade-mover.arrastando { cursor: grabbing; }
.grade-barra-flutuante.vertical .capsula { flex-direction: column; width: max-content; max-height: calc(100vh - 24px); overflow-y: auto; overflow-x: hidden; border-radius: 20px; padding: 8px; }
.grade-barra-flutuante.vertical .capsula .sep { width: 24px; height: 1px; margin: 5px 0; }
.grade-barra-flutuante.vertical .ferr-rotulo { padding: 3px 0; }
.grade .pessoa.pessoa-identificada { height: 58px; }
.grade .pessoa-identificada .c-nome { flex-direction: row; align-items: center; gap: 8px; padding-right: 8px; }
.grade-avatar { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--acento-suave); color: var(--acento); font-size: 11px; font-weight: 700; }
.grade-avatar img { width: 100%; height: 100%; object-fit: cover; }
.grade-c-nome-dados { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.grade .c-nome .grade-c-nome-dados b { line-height: 1.15; }
.grade .c-nome .grade-c-nome-dados i { margin-top: 2px; }
.grade .c-nome .grade-c-nome-dados small { display: block; margin-top: 2px; overflow: hidden; color: var(--tinta-3); font-size: 10px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }