/* Catálogo (v11.1, 08/11): cópias das telas do painel do inForm (inform-web), com os tokens reais do tema
   Grafite escuro (fundo 16 17 20, superfície 25 27 31, elevado 36 38 43, linha 59 62 68, destaque 63 191 174),
   Instrument Sans + JetBrains Mono, cantos de 8/10/6/4 px, cartão com sombra de 1px como no app.
   Estas cenas não são escaladas: ocupam a tela do palco em tamanho real, como uma janela do painel. */

:root {
  /* lidos pelo motor da constelação (o mesmo do painel) */
  --c-bg: 16 17 20; --c-surface: 25 27 31; --c-raised: 36 38 43; --c-line: 59 62 68;
  --c-ink: 239 239 240; --c-mute: 175 177 182; --c-brand: 63 191 174; --c-brand-ink: 11 15 20;
  --c-accent-2: 176 165 234; --c-info: 147 189 240; --c-danger: 242 155 155; --c-warn: 232 192 104; --c-ok: 127 207 158;
}

.cd.cd-real {
  position: absolute; inset: 0; width: auto; height: auto; margin: 0; transform: none; gap: 0; justify-content: stretch;
  container-type: size; container-name: tela;
  font: 400 13px/1.45 'Instrument Sans', 'Geist', system-ui, sans-serif; color: rgb(var(--c-ink));
}
.cd-real .mono, .cd-real .pmo { font-family: 'JetBrains Mono', var(--mono); }

/* ------------------------------------------------------------------ janela do painel */
.pw { position: absolute; inset: 8px; display: flex; overflow: hidden; border-radius: 12px; background: rgb(var(--c-bg)); border: 1px solid rgb(var(--c-line) / .55); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.pw-rail { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 44px; padding: 10px 0; border-right: 1px solid rgb(var(--c-line) / .5); background: rgb(var(--c-bg)); }
.pw-logo { width: 24px; height: 24px; margin-bottom: 8px; }
.pw-rail button, .pw-rail span.pw-ri { display: grid; place-items: center; width: 30px; height: 28px; border-radius: 6px; color: rgb(var(--c-mute)); transition: background-color .2s, color .2s; }
.pw-rail svg, .pw-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pw-rail .on { background: rgb(var(--c-brand) / .14); color: rgb(var(--c-brand)); }
.pw-rail hr { width: 22px; border: 0; border-top: 1px solid rgb(var(--c-line) / .6); margin: 4px 0; }
.pw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pw-top { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-bottom: 1px solid rgb(var(--c-line) / .5); }
.pw-top b { font-weight: 600; font-size: 13.5px; }
.pw-top small { font-size: 11px; color: rgb(var(--c-mute)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-eu { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11.5px; white-space: nowrap; }
.pw-eu small { display: block; font-size: 10px; line-height: 1.1; }
.pw-c { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 10px 12px; }
.pw-sub { font-size: 11.5px; color: rgb(var(--c-mute)); margin-bottom: 8px; }
[data-tela-g]:not(.on) { display: none !important; }

/* avatar das pessoas (cores do painel) */
.pa { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; font: 500 8.5px/1 'Instrument Sans', sans-serif; color: #fff; background: oklch(.52 .075 var(--h, 241)); }
.pa-g { width: 24px; height: 24px; font-size: 9.5px; }

/* botões e rótulos do painel */
.pbt { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid rgb(var(--c-line) / .8); background: rgb(var(--c-surface)); font-size: 11.5px; font-weight: 500; color: rgb(var(--c-ink)); white-space: nowrap; transition: background-color .2s, border-color .2s; }
.pbt .pw-ic { width: 13px; height: 13px; }
.pbt-p { background: rgb(var(--c-brand)); border-color: rgb(var(--c-brand)); color: rgb(var(--c-brand-ink)); }
.pbt.on:not(.pbt-p) { border-color: rgb(var(--c-brand) / .7); background: rgb(var(--c-brand) / .12); }
.ptag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 500; white-space: nowrap; background: rgb(var(--c-raised)); color: rgb(var(--c-mute)); }
.ptag-w { background: rgb(var(--c-warn) / .16); color: rgb(var(--c-warn)); }
.ptag-d { background: rgb(var(--c-danger) / .16); color: rgb(var(--c-danger)); }
.ptag-ok { background: rgb(var(--c-ok) / .16); color: rgb(var(--c-ok)); }
.ptag-b { background: rgb(var(--c-brand) / .16); color: rgb(var(--c-brand)); }
.pd { color: rgb(var(--c-danger)); } .pw2 { color: rgb(var(--c-warn)); } .pok { color: rgb(var(--c-ok)); } .pbr { color: rgb(var(--c-brand)); } .pmu { color: rgb(var(--c-mute)); }
.pabas { display: flex; gap: 2px; border-bottom: 1px solid rgb(var(--c-line) / .55); margin-bottom: 10px; }
.pabas button { padding: 6px 9px 7px; font-size: 12px; color: rgb(var(--c-mute)); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.pabas button.on { color: rgb(var(--c-ink)); border-color: rgb(var(--c-ink)); font-weight: 600; }

/* ------------------------------------------------------------------ quadro (kanban) */
.kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; height: 100%; min-height: 0; }
.kc { display: flex; flex-direction: column; min-height: 0; border-radius: 10px; background: rgb(var(--c-surface)); }
.kc > header { display: flex; align-items: center; gap: 6px; padding: 8px 10px 6px; font-size: 12px; font-weight: 600; }
.kc > header span { font-weight: 400; color: rgb(var(--c-mute)); font-size: 11.5px; }
.kc > header i { margin-left: auto; font-style: normal; color: rgb(var(--c-mute)); letter-spacing: .1em; }
.kc-b { display: flex; flex-direction: column; gap: 6px; padding: 0 6px 6px; min-height: 0; overflow: hidden; }
.pk { display: block; width: 100%; text-align: left; padding: 8px 10px 6px; border-radius: 8px; background: rgb(var(--c-raised)); box-shadow: 0 1px 1px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .05); transition: box-shadow .2s, transform .2s; }
.pk:hover { box-shadow: 0 1px 1px rgba(0, 0, 0, .45), 0 0 0 1px rgb(var(--c-brand) / .5); }
.pk.sel { box-shadow: 0 0 0 1.5px rgb(var(--c-brand)); }
.pk-c, .pk-pr, .pk-t, .pk-s, .pk-tag, .pri-q, .pri-h { display: block; }
.pk-tag { width: max-content; }
.pk-r { display: flex !important; }
.pri-h { display: flex !important; }
.pk-c { font-size: 9.5px; color: rgb(var(--c-mute)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-pr { font-size: 10.5px; font-weight: 600; }
.pk-t { font-size: 12px; line-height: 1.35; font-weight: 500; margin: 1px 0; }
.pk-s { font-size: 10.5px; color: rgb(var(--c-mute)); }
.pk-tag { margin-top: 3px; }
.pk-r { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.pk-dl { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; }
.pk-dl .pw-ic { width: 11px; height: 11px; }
.pk-n { margin-left: auto; font: 400 9.5px/1 'JetBrains Mono', monospace; color: rgb(var(--c-mute) / .8); }
.kc-feita .pk-t { color: rgb(var(--c-mute)); }
/* gaveta da tarefa (TaskDrawer) */
.pdw { position: absolute; top: 0; right: 0; bottom: 0; width: min(240px, 78%); display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgb(var(--c-surface)); border-left: 1px solid rgb(var(--c-line) / .7); box-shadow: -14px 0 30px rgba(0, 0, 0, .35); transform: translateX(105%); transition: transform .35s var(--ease-out); z-index: 3; }
.pdw.on { transform: none; }
.pdw-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pdw-t { font-size: 13px; font-weight: 600; line-height: 1.3; }
.pdw dl { display: grid; grid-template-columns: 74px 1fr; gap: 6px 8px; font-size: 11.5px; }
.pdw dt { color: rgb(var(--c-mute)); }
.pdw .pbt-p { align-self: flex-start; margin-top: auto; }
/* quadros: lista lateral (empresas, projetos, setores) */
.pqs { flex: none; width: 150px; padding: 10px 6px; border-right: 1px solid rgb(var(--c-line) / .5); display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; overflow: hidden; }
.pqs p { padding: 6px 8px 2px; font-size: 10px; color: rgb(var(--c-mute)); }
.pqs button { text-align: left; padding: 4px 8px 4px 16px; border-radius: 6px; color: rgb(var(--c-ink) / .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .2s; }
.pqs button.on { background: rgb(var(--c-raised)); color: rgb(var(--c-ink)); font-weight: 600; }
.pqs .pqs-d { display: flex; justify-content: space-between; padding-left: 8px; font-weight: 600; }
.pqs .pqs-d small { font-weight: 400; color: rgb(var(--c-mute)); }
.pdiv { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; color: rgb(var(--c-mute)); }

/* ------------------------------------------------------------------ prazos (calendário do mês) */
.pcal-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pcal-h b { font-size: 14px; font-weight: 600; margin-left: 4px; }
.pcal-h .pbt { height: 24px; padding: 0 7px; }
.pcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid rgb(var(--c-line) / .55); border-radius: 8px; overflow: hidden; background: rgb(var(--c-surface)); }
.pcal > em { padding: 4px 6px; font-size: 10px; font-style: normal; color: rgb(var(--c-mute)); border-bottom: 1px solid rgb(var(--c-line) / .55); }
.pcal > div { min-height: 58px; padding: 4px 4px 3px; border-right: 1px solid rgb(var(--c-line) / .4); border-bottom: 1px solid rgb(var(--c-line) / .4); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcal > div:nth-of-type(7n) { border-right: 0; }
.pcal > div > b { font-size: 10.5px; font-weight: 500; padding: 0 2px; width: max-content; }
.pcal > div > b.hoje { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: rgb(var(--c-brand)); color: rgb(var(--c-brand-ink)); font-weight: 600; padding: 0; }
.pcal > div.fora > b { color: rgb(var(--c-mute) / .55); }
.pcp { display: flex; align-items: center; gap: 3px; padding: 1px 4px; border-radius: 4px; background: rgb(var(--c-raised)); font-size: 9.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.pcp .pw-ic { width: 9px; height: 9px; flex: none; }
.pcp.feita { text-decoration: line-through; color: rgb(var(--c-mute)); }
.pcp.sel { box-shadow: 0 0 0 1px rgb(var(--c-brand)); }
.pcal small { font-size: 9px; color: rgb(var(--c-mute)); padding-left: 3px; }

/* ------------------------------------------------------------------ lembretes */
.plp { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .5); }
.plp p { font-size: 10px; color: rgb(var(--c-mute)); }
.plp b { display: block; font-size: 12.5px; font-weight: 600; }
.plp .pmo { margin-left: auto; font-size: 18px; font-weight: 600; }
.pll { border-radius: 10px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .5); overflow: hidden; }
.pll > p { padding: 6px 10px; font-size: 11px; font-weight: 600; }
.pll > p small { font-weight: 400; color: rgb(var(--c-mute)); }
.plr { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid rgb(var(--c-line) / .45); transition: opacity .3s; }
.plr > .pmo { font-size: 11.5px; font-weight: 600; }
.plr-t { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plr-m { display: flex; align-items: center; gap: 5px; font-size: 10px; color: rgb(var(--c-mute)); white-space: nowrap; overflow: hidden; }
.plr-m .pa { width: 15px; height: 15px; font-size: 7px; }
.plr-a { display: flex; gap: 4px; }
.plr-a .pbt { height: 22px; padding: 0 7px; font-size: 10.5px; }
.plr.feito { opacity: .45; }
.plr.feito .plr-t { text-decoration: line-through; }

/* ------------------------------------------------------------------ respostas */
.prs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; height: 100%; min-height: 0; }
.prs-l { display: flex; flex-direction: column; border-radius: 10px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .5); overflow: hidden; min-height: 0; }
.prs-l > p { padding: 6px 10px; font-size: 10.5px; color: rgb(var(--c-danger)); font-weight: 600; }
.pri { display: block; width: 100%; text-align: left; padding: 7px 10px; border-top: 1px solid rgb(var(--c-line) / .45); transition: background-color .2s; }
.pri.on { background: rgb(var(--c-raised)); }
.pri-h { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.pri-h small { margin-left: auto; font-weight: 400; font-size: 10px; color: rgb(var(--c-mute)); }
.pri-q { font-size: 10.5px; color: rgb(var(--c-mute)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pri-a { font-size: 11.5px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prs-d { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 10px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .5); min-height: 0; overflow: hidden; }
.prs-d .pbl { align-self: flex-end; max-width: 92%; padding: 6px 9px; border-radius: 8px; background: rgb(var(--c-raised)); font-size: 11px; }
.prs-d .pbl small { display: block; font-size: 9.5px; color: rgb(var(--c-mute)); }
.prs-d .pbl.ela { align-self: flex-start; background: rgb(var(--c-bg)); border: 1px solid rgb(var(--c-line) / .6); }
.prs-d .presumo { padding: 7px 9px; border-radius: 8px; background: rgb(var(--c-bg)); border: 1px solid rgb(var(--c-line) / .6); font-size: 11px; }
.prs-d .presumo small { display: block; font-size: 9.5px; color: rgb(var(--c-mute)); }

/* ------------------------------------------------------------------ grupos de WhatsApp */
.pg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pg-h b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.pg-h p { font-size: 10.5px; color: rgb(var(--c-mute)); }
.pg-acs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pg-st { font-weight: 600; }
.pfala { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pfala button { text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid rgb(var(--c-line) / .7); background: rgb(var(--c-bg) / .6); font-size: 11px; color: rgb(var(--c-mute)); transition: border-color .2s, background-color .2s; }
.pfala button b { display: block; color: rgb(var(--c-ink)); font-size: 12px; font-weight: 600; }
.pfala button.on { border-color: rgb(var(--c-ink) / .8); background: rgb(var(--c-raised)); }
.pbox { padding: 10px; border-radius: 10px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .5); }
.pbox > b { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.psg { padding: 8px 10px; border-top: 1px solid rgb(var(--c-line) / .45); }
.psg:first-child { border-top: 0; }
.psg-t { font-size: 12px; font-weight: 500; }
.psg-m { font-size: 10px; color: rgb(var(--c-mute)); margin: 1px 0 5px; }
.psg .pbt { height: 22px; font-size: 10.5px; }
.pap-r { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid rgb(var(--c-line) / .45); }
.pap-r:first-child { border-top: 0; }
.pap-t { font-size: 12px; }
.pap-m { font-size: 10px; color: rgb(var(--c-mute)); }
.pfl { font-size: 11px; padding: 6px 10px; border-top: 1px solid rgb(var(--c-line) / .45); }
.pfl small { display: block; font-size: 9.5px; color: rgb(var(--c-mute)); }

/* ------------------------------------------------------------------ personalizar (temas) */
.pte { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; height: 100%; min-height: 0; }
.pte-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start; overflow: hidden; }
.ptc { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; border: 1px solid rgb(var(--c-line) / .6); background: rgb(var(--c-surface)); text-align: left; transition: border-color .2s, box-shadow .2s; }
.ptc.on { border-color: rgb(var(--c-brand)); box-shadow: 0 0 0 1px rgb(var(--c-brand)); }
.ptc-m { position: relative; height: 34px; background: var(--tb); padding: 5px 6px; display: grid; grid-template-columns: 9px 1fr; gap: 4px; }
.ptc-m i { border-radius: 2px; background: var(--ts); }
.ptc-m u { display: grid; gap: 3px; align-content: start; }
.ptc-m u::before { content: ""; height: 3px; width: 60%; border-radius: 2px; background: var(--tk); }
.ptc-m u::after { content: ""; height: 12px; border-radius: 3px; background: var(--ts); border: 1px solid var(--tl); }
.ptc-m em { position: absolute; right: 6px; top: 5px; width: 14px; height: 4px; border-radius: 2px; background: var(--tbr); }
.ptc b { padding: 4px 6px 5px; font-size: 10.5px; font-weight: 600; }
/* prévia do tema escolhido: recebe as cores pelas variáveis --p* */
.ptv { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .5); }
.ptv > p { font-size: 10px; color: rgb(var(--c-mute)); }
.ptv > p b { display: block; font-size: 12px; color: rgb(var(--c-ink)); }
.pmini { flex: 1; display: grid; grid-template-columns: 26px 1fr; border-radius: 8px; overflow: hidden; background: var(--pb); color: var(--pk); border: 1px solid var(--pl); transition: background-color .4s, color .4s; }
.pmini > i { background: var(--pb); border-right: 1px solid var(--pl); display: grid; align-content: start; gap: 6px; padding: 8px 6px; }
.pmini > i::before { content: ""; height: 10px; border-radius: 3px; background: var(--pbr); }
.pmini > div { padding: 8px; display: grid; gap: 6px; align-content: start; }
.pmini .pm-h { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; }
.pmini .pm-h span { padding: 2px 6px; border-radius: 4px; background: var(--pbr); color: var(--pbg2, #0b0f14); font-size: 9px; }
.pmini .pm-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; font-size: 9px; color: var(--pm); }
.pmini .pm-n b { display: block; font-size: 13px; color: var(--pk); }
.pmini .pm-l { border-radius: 6px; background: var(--ps); border: 1px solid var(--pl); padding: 5px 6px; display: grid; gap: 4px; font-size: 9.5px; }
.pmini .pm-l span { display: flex; justify-content: space-between; }
.pmini .pm-l em { font-style: normal; color: var(--pbr); }

/* ------------------------------------------------------------------ rotinas */
.prt { border-radius: 10px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .5); overflow: hidden; }
.prt-r { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr) 40px 62px; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid rgb(var(--c-line) / .45); font-size: 11px; }
.prt-r:first-child { border-top: 0; font-size: 10px; color: rgb(var(--c-mute)); }
.prt-r > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.prt-r > b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prt-r .pmo { font-size: 10.5px; font-weight: 600; justify-content: flex-end; }
.prt-r.nova:not(.on) { display: none; }
.prt-r.nova.on { background: rgb(var(--c-brand) / .07); }
.pmodal { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; }
.pmodal.on { opacity: 1; visibility: visible; transition: opacity .25s; }
.pmodal > div { width: min(92%, 380px); max-height: 94%; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .7); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.pmodal h4 { font-size: 13.5px; font-weight: 600; display: flex; justify-content: space-between; }
.pmodal .ppass { display: flex; gap: 10px; font-size: 10.5px; color: rgb(var(--c-mute)); border-bottom: 1px solid rgb(var(--c-line) / .5); padding-bottom: 6px; }
.pmodal .ppass .on { color: rgb(var(--c-ink)); font-weight: 600; }
.pmd { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 7px 9px; text-align: left; border-top: 1px solid rgb(var(--c-line) / .45); font-size: 11px; color: rgb(var(--c-mute)); transition: background-color .2s; }
.pmd:hover { background: rgb(var(--c-raised)); }
.pmd b { display: block; font-size: 12px; color: rgb(var(--c-ink)); font-weight: 600; }
.pmd .pw-ic { margin-top: 2px; color: rgb(var(--c-ink)); }
.pfd { display: grid; gap: 3px; font-size: 10.5px; color: rgb(var(--c-mute)); }
.pfd span { padding: 6px 8px; border-radius: 6px; background: rgb(var(--c-bg)); border: 1px solid rgb(var(--c-line) / .7); color: rgb(var(--c-ink)); font-size: 11.5px; }
.ptoast { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 20px); padding: 7px 12px; border-radius: 8px; background: rgb(var(--c-raised)); border: 1px solid rgb(var(--c-line)); font-size: 11.5px; opacity: 0; transition: opacity .3s, transform .3s var(--ease-out); z-index: 5; white-space: nowrap; }
.ptoast.on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ constelação (motor do painel) */
.cd-mapa .cx { position: absolute; inset: 8px; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .55); }
.cx-cab { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgb(var(--c-line) / .6); }
.cx-n { font-size: 12px; color: rgb(var(--c-mute)); }
.cx-n b { font-family: 'JetBrains Mono', monospace; font-weight: 400; color: rgb(var(--c-ink)); }
.cx-dica { font-size: 10.5px; color: rgb(var(--c-mute)); margin-top: 1px; }
.cx-bt { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid rgb(var(--c-line) / .8); font-size: 12px; color: rgb(var(--c-ink)); }
.cx-bt[aria-expanded="true"] { background: rgb(var(--c-raised)); }
.cx-bt svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cx-area { position: relative; flex: 1; min-height: 0; background: rgb(var(--c-bg)); }
.cx-area canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.cx-aj { position: absolute; top: 8px; right: 8px; width: 180px; padding: 10px; border-radius: 10px; background: rgb(var(--c-surface) / .96); border: 1px solid rgb(var(--c-line) / .7); display: grid; gap: 4px; }
.cx-aj[hidden] { display: none; }
.cx-aj-t { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.cx-aj-s { font-size: 10.5px; color: rgb(var(--c-mute)); }
.cx-ck { display: flex; align-items: center; gap: 7px; font-size: 11.5px; cursor: pointer; }
.cx-ck input { position: absolute; opacity: 0; pointer-events: none; }
.cx-ck i { width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid var(--cc); display: grid; place-items: center; }
.cx-ck input:checked + i { background: var(--cc); }
.cx-ck input:checked + i::after { content: ""; width: 6px; height: 3px; margin-top: -2px; border-left: 1.6px solid #101114; border-bottom: 1.6px solid #101114; transform: rotate(-45deg); }
.cx-ck input:focus-visible + i { outline: 2px solid rgb(var(--c-brand)); outline-offset: 2px; }
.cx-ck span { color: rgb(var(--c-ink)); }
.cx-card { position: absolute; left: 8px; bottom: 8px; width: min(240px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow: hidden; padding: 10px; border-radius: 10px; background: rgb(var(--c-surface) / .97); border: 1px solid rgb(var(--c-line) / .7); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); display: grid; gap: 3px; }
.cx-card[hidden] { display: none; }
.cx-c-cat { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.cx-c-t { font-size: 13px; font-weight: 600; }
.cx-c-f { font-size: 11.5px; color: rgb(var(--c-ink) / .88); }
.cx-c-m { font-size: 10px; color: rgb(var(--c-mute)); margin-top: 2px; }
.cx-c-l { font-size: 10px; color: rgb(var(--c-mute)); margin-top: 4px; }
.cx-c-vs { display: flex; flex-wrap: wrap; gap: 3px; }
.cx-c-vs button { padding: 1px 6px; border-radius: 4px; background: rgb(var(--c-raised)); font-size: 10.5px; color: rgb(var(--c-ink)); }

/* ------------------------------------------------------------------ larguras da tela do palco (container) */
/* média (palco do computador, ~520 px): lista de quadros vira botões em cima; respostas sem o detalhe */
@container tela (max-width: 700px) {
  .pqs { display: none; }
  .pqs-m { display: flex !important; }
  .pw-top small { display: none; }
  .prs { grid-template-columns: minmax(0, 1fr); }
  .prs-d { display: none; }
  .pte { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pte-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ptc-m { height: 22px; }
  .ptc b { font-size: 9.5px; padding: 3px 5px 4px; }
  .pg-acs .pbt span { display: none; }
}
/* estreita: quadro compacto */
@container tela (max-width: 560px) {
  .pw-c { padding: 8px 10px; }
  .kb { gap: 6px; }
  .kc > header { padding: 6px 8px 4px; font-size: 11px; }
  .kc > header i { display: none; }
  .kc-b { padding: 0 5px 5px; gap: 5px; }
  .pk { padding: 7px 8px 5px; }
  .pk-c, .pk-n { display: none !important; }
  .pk-t { font-size: 11px; }
  .pk-s { font-size: 9.5px; }
  .pk-r { gap: 4px; flex-wrap: wrap; }
  .pcal > div { min-height: 46px; padding: 3px; }
  .pcp { font-size: 8.5px; padding: 1px 3px; }
  .pcal-h .pbt:not(.pbt-p):not([data-acao]) { display: none; }
  .plr { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .plr-a .pbt:first-child { display: none; }
  .prt-r { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 40px 58px; }
  .prt-r > :nth-child(3) { display: none; }
  .pfala { grid-template-columns: minmax(0, 1fr); }
}
/* celular: sem o menu lateral */
@container tela (max-width: 420px) {
  .pw { inset: 4px; }
  .pw-rail { display: none; }
  .pw-top { height: 36px; }
  .pw-eu span { display: none; }
  .pw-c { padding: 8px; }
  .kb { gap: 4px; }
  .kc > header { padding: 5px 6px 3px; font-size: 10px; }
  .kc-b { padding: 0 3px 3px; gap: 4px; }
  .pk { padding: 6px 6px 4px; }
  .pk-tag { display: none !important; }
  .pk-t { font-size: 10px; }
  .pcp .pw-ic { display: none; }
  .pcal > div { min-height: 40px; padding: 2px; }
  .pcp { font-size: 7.5px; padding: 0 2px; }
  .plr { grid-template-columns: 32px minmax(0, 1fr); }
  .plr-a { grid-column: 2; }
  .plp .pmo { font-size: 14px; }
  .pte-g { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .prt-r { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 54px; }
  .prt-r > :nth-child(3), .prt-r > :nth-child(4) { display: none; }
  .cx-aj { width: 160px; }
  .pdw { width: 86%; }
}

/* tela alta (tela cheia): calendário e listas ocupam a altura, como no painel */
@container tela (min-height: 560px) {
  .pcal > div { min-height: 92px; }
  .pcp { font-size: 10.5px; padding: 2px 5px; }
  .pk-t { font-size: 13px; }
  .kc-b { gap: 8px; }
}

/* ------------------------------------------------------------------ tela cheia (a cópia do painel em tamanho real) */
.ct-cheia { position: absolute; top: 14px; right: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 6px;
  border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface) / .94); color: rgb(var(--c-ink)); font: 500 11px/1 'Instrument Sans', sans-serif; cursor: pointer; }
.ct-cheia svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-tela-cheia { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(10px, 3vw, 36px); background: rgba(4, 7, 10, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ct-tela-cheia[hidden] { display: none; }
.ct-tela-cheia > div { position: relative; width: min(1180px, 100%); height: min(760px, 100%); }
.ct-tela-cheia .cd.cd-real { inset: 0; }
.ct-tela-cheia .ct-cheia-x { position: absolute; top: -6px; right: -6px; z-index: 7; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface)); color: rgb(var(--c-ink)); cursor: pointer; }
.ct-tela-cheia .ct-cheia-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
body.ct-cheia-on { overflow: hidden; }
.pqs-m { display: none; gap: 4px; flex-wrap: wrap; overflow: hidden; margin-bottom: 6px; }
.pqs-m button { padding: 3px 7px; border-radius: 6px; border: 1px solid rgb(var(--c-line) / .7); font-size: 10.5px; white-space: nowrap; }
.pqs-m button.on { background: rgb(var(--c-raised)); border-color: rgb(var(--c-ink) / .6); font-weight: 600; }
.pw-rail-m { display: none; }