/* painel_moldura.css · a moldura do painel (v246, passo 1 do desenho r3, 27/10/2026).
   Menu, barra de cima, barra do celular, ficha lateral, toast, confirmacao, resposta ao lado do
   botao e barra de comando. SO' token (var(--...)), nenhum valor solto de cor, fonte, espaco ou
   raio. Prefixo .pm-: nao encosta nas classes das telas (.area, .aviso, tabela...). Carrega
   DEPOIS de painel_tokens.css e airis-app.css. Vermelho (--red) so' para erro e acao destrutiva;
   o --change nao entra no painel. Fonte do desenho: handoff painel_admin_r3, README "Shell". */
.painel{display:flex;min-height:100vh;background:var(--bg)}
nav.painel-menu{flex:0 0 auto;width:var(--sidebar-w);background:var(--menu-bg);color:var(--aluminum);padding:0;display:flex;flex-direction:column;overflow-y:auto;position:sticky;top:0;height:100vh;transition:width var(--dur-med) var(--ease-standard)}
.painel.pm-fechado nav.painel-menu{width:var(--sidebar-w-sm)}
/* O airis-app.css:136 (:root:root h2,h3,h4{color:var(--ink)}) vence qualquer seletor simples: sem estes
   tres o rotulo de grupo fica Ink sobre Ink (achado da DESIGN, 27/10, medido no WebKit). */
:root:root nav.painel-menu h2{color:var(--menu-group)}
:root:root .pm-folha h2{color:var(--menu-group)}
:root:root .pm-pop h3{color:var(--muted)}
.pm-menu-toggle{min-height:var(--header-h);border:0;border-bottom:1px solid var(--graphite);background:transparent;color:var(--aluminum);font:var(--type-btn-sm);text-align:left;padding:0 var(--sp-7);cursor:pointer}
.pm-menu-toggle:hover{color:var(--soapstone)}
.painel-menu-scroll{display:flex;flex-direction:column;padding:var(--sp-7) 0 var(--sp-11)}
nav.painel-menu h2{margin:0;padding:var(--sp-7) var(--sp-7) var(--sp-1);font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--menu-group)}
nav.painel-menu h2:first-child{padding-top:0}
nav.painel-menu a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--ctl-h);padding:0 var(--sp-7) 0 var(--sp-6);border-left:3px solid transparent;color:var(--aluminum);font:var(--type-body-sm);text-decoration:none;border-bottom:0}
nav.painel-menu a:hover{color:var(--soapstone);background:var(--surface-dark);border-bottom:0}
:root:root nav.painel-menu a{color:var(--aluminum)}
:root:root nav.painel-menu a:hover{color:var(--soapstone)}
/* item atual: cinza escuro e o fio (t216, decidido por ele em 26/10) */
:root:root nav.painel-menu a[aria-current="page"]{background:var(--graphite);border-left-color:var(--teal);color:var(--soapstone);font-weight:var(--fw-semibold)}
nav.painel-menu a:focus-visible{outline:2px solid var(--teal-d);outline-offset:-2px}
nav.painel-menu .pm-ab{display:none;font:var(--type-btn-sm);letter-spacing:var(--ls-chip)}
nav.painel-menu .pm-n{font:var(--type-chip);font-variant-numeric:tabular-nums;color:var(--soapstone);border:1px solid var(--teal);border-radius:var(--r-chip);padding:var(--sp-1) var(--sp-2)}
nav.painel-menu .pm-n:empty{display:none}
.painel.pm-fechado nav.painel-menu h2{font-size:0;padding:0;margin:var(--sp-4) var(--sp-5) var(--sp-1);border-top:1px solid var(--graphite)}
.painel.pm-fechado nav.painel-menu .pm-t,.painel.pm-fechado nav.painel-menu .pm-n{display:none}
.painel.pm-fechado nav.painel-menu .pm-ab{display:inline}

.pm-col{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--page-depth);background-color:var(--bg)}
.pm-top{flex:0 0 auto;position:sticky;top:0;z-index:var(--z-header);min-height:var(--header-h);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);padding:var(--sp-2) var(--sp-9);background:var(--veil-topbar);border-bottom:1px solid var(--border);backdrop-filter:blur(6px)}
.pm-top .pm-btn,.pm-top select{min-height:var(--ctl-h)}
.pm-btn{padding:0 var(--sp-5);border:1px solid var(--border);border-radius:var(--r-hbtn);background:var(--surface);color:var(--ink);font:var(--type-btn-sm);cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-2)}
.pm-btn:hover{background:var(--teal-wash);border-color:var(--teal-line)}
.pm-btn.pm-quieto{color:var(--muted);box-shadow:var(--edge-sunk)}
.pm-btn.pm-nu{border:0;background:transparent;color:var(--muted)}
.pm-btn.pm-nu:hover{color:var(--ink);background:transparent}
.pm-lockup{height:var(--bar-lockup-h-desktop);width:auto;display:block}
#titulo{flex:1 1 120px;min-width:0;font:var(--type-h4);color:var(--ink);overflow-wrap:anywhere;margin:0}
.pm-top label{display:flex;align-items:center;max-width:100%;min-width:0}
.pm-top select{max-width:220px;padding:var(--pad-input);border:1px solid var(--border);border-radius:var(--r-ctl);font:var(--type-body-sm);color:var(--text);background:var(--surface)}
.pm-quem{display:flex;flex-direction:column;align-items:flex-end;line-height:var(--lh-snug);font:var(--type-meta);color:var(--muted)}
.pm-quem b{font-weight:var(--fw-regular);color:var(--text)}
.pm-contador{font:var(--type-chip);font-variant-numeric:tabular-nums;color:var(--teal-d);border:1px solid var(--teal);border-radius:var(--r-chip);padding:var(--sp-1) var(--sp-2)}
.pm-top>div{position:static}
.pm-pop{position:absolute;right:var(--sp-9);top:100%;width:340px;max-width:86vw;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-panel);box-shadow:var(--shadow-pop);z-index:var(--z-pop);display:flex;flex-direction:column}
.pm-pop h3{margin:0;padding:var(--sp-5) var(--sp-7);font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
.pm-pop button{display:flex;justify-content:space-between;gap:var(--sp-5);align-items:center;min-height:var(--ctl-h);padding:var(--sp-4) var(--sp-7);border:0;border-bottom:1px solid var(--border);background:var(--surface);text-align:left;cursor:pointer;font:var(--type-cell);color:var(--ink)}
.pm-pop button:hover{background:var(--teal-wash)}
.pm-pop .pm-todos{color:var(--teal-d);font:var(--type-btn-sm);justify-content:center;border-radius:0 0 var(--r-panel) var(--r-panel)}
.pm-vazio{padding:var(--sp-7);font:var(--type-body-sm);color:var(--muted)}

.pm-main{flex:1 0 auto;width:100%;max-width:1180px;margin:0 auto;padding:var(--sp-11) var(--sp-9) var(--fixed-bar-clear);display:flex;flex-direction:column;gap:var(--sp-9);min-width:0}
.pm-cab{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.pm-grupo{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--teal-d)}
.pm-cab h1{margin:0;font:var(--type-h1);font-size:var(--fs-26);letter-spacing:var(--ls-h1);color:var(--ink)}
.pm-main .area{padding:0;overflow-x:visible;min-width:0}
.pm-main .aviso{margin:0}

/* barra do celular */
.pm-tabbar{display:none}
@media(max-width:899px){
  .painel{display:block}
  nav.painel-menu{display:none}
  .pm-top{padding:var(--sp-2) var(--sp-7)}
  .pm-top .pm-lockup{height:var(--bar-lockup-h)}
  /* handoff: no celular o nome do registro/da tela cai em linha propria */
  #titulo{flex:1 0 100%}
  .pm-quem,.pm-sair{display:none}
  /* o balao do sino nao depende de onde o botao parou (a 390 ia de -221 a 115px) */
  .pm-pop{left:var(--sp-7);right:var(--sp-7);width:auto;max-width:none}
  .pm-main{padding:var(--sp-7) var(--sp-7) calc(var(--tabbar-h) + var(--fixed-bar-clear))}
  .pm-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:var(--tabbar-h);background:var(--surface);border-top:1px solid var(--border);box-shadow:var(--shadow-pop);z-index:var(--z-header)}
  .pm-tabbar button{flex:1;min-width:0;border:0;background:transparent;color:var(--muted);font:var(--type-btn-sm);cursor:pointer;border-top:3px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1)}
  .pm-tabbar button[aria-current="page"]{color:var(--ink);border-top-color:var(--teal)}
}
.pm-folha{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-modal);display:flex;align-items:flex-end}
.pm-folha nav{width:100%;max-height:85vh;overflow-y:auto;background:var(--menu-bg);padding:var(--sp-7) 0 var(--sp-11);border-radius:var(--r-card-lg) var(--r-card-lg) 0 0}
.pm-folha h2{margin:0;padding:var(--sp-7) var(--sp-7) var(--sp-1);font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--menu-group)}
.pm-folha a{display:flex;align-items:center;min-height:var(--ctl-h);padding:0 var(--sp-7);color:var(--aluminum);font:var(--type-body-sm);text-decoration:none;border-bottom:0;border-left:3px solid transparent}
.pm-folha a[aria-current="page"]{background:var(--graphite);border-left-color:var(--teal);color:var(--soapstone)}

/* ficha lateral */
.pm-ficha-fundo{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-modal);display:flex;justify-content:flex-end}
.pm-ficha{width:680px;max-width:100%;height:100%;background:var(--bg);display:flex;flex-direction:column;box-shadow:var(--shadow-pop)}
.pm-ficha-cab{background:var(--surface);border-bottom:1px solid var(--border);padding:var(--sp-7) var(--sp-9);display:flex;gap:var(--sp-5);align-items:flex-start;justify-content:space-between}
.pm-ficha-cab .pm-tipo{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--teal-d)}
.pm-ficha-cab h2{margin:0;font:var(--type-h2);font-size:var(--fs-22);font-weight:var(--fw-bold);color:var(--ink);overflow-wrap:anywhere}
.pm-ficha-cab .pm-sub{font:var(--type-meta);color:var(--muted)}
.pm-ficha-corpo{flex:1;overflow-y:auto;padding:var(--sp-9);display:flex;flex-direction:column;gap:var(--sp-7)}
.pm-ficha-pe{background:var(--veil-bar);border-top:1px solid var(--border);padding:var(--sp-5) var(--sp-9);display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}

/* chip: sempre uma palavra e uma cor */
.pm-chip{font:var(--type-chip);letter-spacing:var(--ls-chip);text-transform:uppercase;padding:var(--pad-chip);border-radius:var(--r-chip);border:1px solid var(--border);background:var(--surface);color:var(--muted)}
.pm-chip.good{border-color:var(--good-line);background:var(--good-bg);color:var(--good-text)}
.pm-chip.warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)}
.pm-chip.error{border-color:var(--red-line);background:var(--red-bg);color:var(--red)}
.pm-chip.info{border-color:var(--info-line);background:var(--info-bg);color:var(--info)}

/* resposta colada no botao (a cicatriz do Publish clicado tres vezes) */
.pm-resp{font:var(--type-body-sm);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-ctl);border:1px solid var(--border);color:var(--muted);align-self:center}
.pm-resp.good{border-color:var(--good-line);background:var(--good-bg);color:var(--good-text)}
.pm-resp.error{border-color:var(--red-line);background:var(--red-bg);color:var(--red)}
.pm-resp.info{border-color:var(--info-line);background:var(--info-bg);color:var(--info)}

/* toast */
.pm-toast{position:fixed;left:50%;bottom:calc(var(--sp-11) + var(--sp-9));transform:translateX(-50%);z-index:var(--z-modal);display:flex;align-items:center;gap:var(--sp-7);max-width:calc(100vw - var(--sp-9));background:var(--menu-bg);color:var(--soapstone);padding:var(--sp-5) var(--sp-7);border-radius:var(--r-card);box-shadow:var(--shadow-toast);font:var(--type-body-sm)}
.pm-toast button{min-height:var(--ctl-h);border:0;background:transparent;color:var(--teal-300);font:var(--type-btn-sm);cursor:pointer}

/* confirmacao */
.pm-conf-fundo{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--sp-7)}
.pm-conf{width:480px;max-width:100%;background:var(--surface);border-radius:var(--r-card-lg);box-shadow:var(--shadow-pop);padding:var(--sp-9);display:flex;flex-direction:column;gap:var(--sp-5)}
.pm-conf h2{margin:0;font:var(--type-h3);color:var(--ink)}
.pm-conf p{margin:0;font:var(--type-body-sm);color:var(--text)}
.pm-conf input{min-height:var(--ctl-h);padding:var(--pad-input);border:1px solid var(--border);border-radius:var(--r-ctl);font:var(--type-body-sm)}
.pm-conf .pm-acoes{display:flex;justify-content:flex-end;gap:var(--sp-4);flex-wrap:wrap}
.pm-prim{min-height:var(--ctl-h);padding:var(--pad-btn);border:0;border-radius:var(--r-ctl);background:var(--teal-700);background-image:var(--accent-grad);color:var(--soapstone);font:var(--type-btn);box-shadow:var(--edge-light),var(--shadow-rec);cursor:pointer}
.pm-prim:hover{background-image:var(--accent-grad-hover)}
.pm-prim:active{box-shadow:var(--edge-press)}
.pm-prim.perigo{background:var(--red);background-image:none;color:var(--surface)}
.pm-prim:disabled{opacity:.45;pointer-events:none}

/* barra de comando (Ctrl+K) */
.pm-cmd-fundo{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-modal);display:flex;justify-content:center;align-items:flex-start;padding:var(--sp-13,64px) var(--sp-7) 0}
.pm-cmd{width:560px;max-width:100%;background:var(--surface);border-radius:var(--r-card-lg);box-shadow:var(--shadow-pop);overflow:hidden}
.pm-cmd input{width:100%;min-height:var(--ctl-h);padding:var(--pad-input);border:0;border-bottom:1px solid var(--border);font:var(--type-body);background:var(--surface);color:var(--text)}
.pm-cmd ul{list-style:none;margin:0;padding:0;max-height:50vh;overflow-y:auto}
.pm-cmd li button{width:100%;min-height:var(--ctl-h);display:flex;justify-content:space-between;gap:var(--sp-5);align-items:center;padding:0 var(--sp-7);border:0;border-bottom:1px solid var(--border);background:var(--surface);text-align:left;font:var(--type-cell);color:var(--ink);cursor:pointer}
.pm-cmd li button:hover,.pm-cmd li button:focus-visible{background:var(--teal-wash)}
.pm-cmd li small{font:var(--type-meta);color:var(--muted)}
@media(prefers-reduced-motion:reduce){nav.painel-menu{transition:none}}