/* MEx · painéis laterais (drawers) com o mesmo sistema de tokens do painel */
html:has(dialog.mex-drawer[open]) { overflow: hidden; }
dialog.mex-drawer.sp-dialog, dialog.mex-drawer.site-dialog {
 box-sizing: border-box; position: fixed; inset: 0 0 0 auto; margin: 0;
 width: min(1280px, 88vw); max-width: 88vw; min-width: 0;
 height: 100dvh; max-height: 100dvh; padding: 28px;
 border: 0; border-left: 1px solid var(--line, #e5e7eb); border-radius: 0;
 background: var(--surface, #fff); color: var(--fg, #18181b);
 box-shadow: -12px 0 40px rgba(0,0,0,.35); overflow: hidden auto; overscroll-behavior: contain;
 animation: mex-drawer-enter 180ms ease-out;
}
dialog.mex-drawer[data-drawer-size="small"] { width: min(560px, 88vw); }
/* Wide content (tables, maps) scrolls inside its own box so the drawer itself never scrolls sideways. */
dialog.mex-drawer > *, dialog.mex-drawer form, dialog.mex-drawer .erp-tab-body, dialog.mex-drawer .erp-tab-panel { min-width: 0; max-width: 100%; }
dialog.mex-drawer.erp-map-dialog { width: 70vw; }
dialog.mex-drawer::backdrop { background: rgba(14,19,17,.6); backdrop-filter: blur(3px); }
dialog.mex-drawer > h2 { padding-right: 52px; overflow-wrap: anywhere; }
dialog.mex-drawer > .mex-drawer-close {
 position: absolute; top: 18px; right: 18px; width: 40px; height: 40px;
 padding: 0; display: grid; place-items: center; border: 1px solid var(--line, #e5e7eb);
 border-radius: 12px; background: var(--surface2, #f3f4f6); color: inherit; font-size: 24px;
 line-height: 1; cursor: pointer;
}
dialog.mex-drawer > .mex-drawer-close:hover { border-color: var(--accent-mid, #2E6A52); }
dialog.mex-drawer footer { flex-wrap: wrap; }
dialog.mex-drawer :focus-visible { outline: 2px solid var(--accent, #1DD06A); outline-offset: 3px; }
@keyframes mex-drawer-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (max-width: 760px) {
 dialog.mex-drawer.sp-dialog, dialog.mex-drawer.site-dialog { width: 100vw; max-width: 100vw; padding: 20px; padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
 dialog.mex-drawer > .mex-drawer-close { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
}
@media (prefers-reduced-motion: reduce) { dialog.mex-drawer { animation: none !important; } }
@media print { dialog.mex-drawer.sp-dialog { position: static; width: 100%; max-width: 100%; height: auto; max-height: none; overflow: visible; box-shadow: none; } }
@media print { dialog.mex-drawer button { display: none !important; } }