.panel {
  background:var(--surface); min-height:0; overflow:auto; padding:24px 20px 32px; display:flex;
  flex-direction:column; gap:18px; position:relative;
}
/* Detalhes, what is due first: a compact panel header (small avatar + name on one row, beside the close
   button) so "Próximos vencimentos" starts near the top; group headings inside row lists (Rotinas by
   distance, the summary by section); due dates in tabular mono with the relative words beside them */
.pa .panel { animation:none; padding-top:16px; box-shadow:none; }
.panel-close { position:absolute; display:inline-flex; z-index:1; top:16px; right:12px; }
.p-head {
  display:flex; flex-direction:row; align-items:center; justify-content:flex-start; text-align:left; gap:10px;
  min-height:44px; padding-right:52px;
}
.p-head .p-name { margin:0; }
.pa .p-head .av { width:64px; height:64px; }
.p-name { margin:6px 0 0; font-size:18px; font-weight:600; }
.p-role { color:var(--text-2); margin:0; font-size:12px; }
.p-state { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); }
.p-body { display:flex; flex-direction:column; gap:18px; }
.p-nav { margin-top:auto; padding-top:6px; }
.dup-h { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@container (max-width: 1099px) {
  .panel-close { display:inline-flex; }
}