@layer reset, tokens, foundations, components, layout, pages, overrides;
/* Generated from tokens.source.json. Do not edit manually. */
@layer tokens {
:root {
  --md-sys-color-primary: #003F6E;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D9E5EC;
  --md-sys-color-on-primary-container: #000000;
  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-on-surface: #000000;
  --md-sys-color-surface-variant: #E8E8E8;
  --md-sys-color-on-surface-variant: #404040;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F7F7;
  --md-sys-color-surface-container: #F2F2F2;
  --md-sys-color-surface-container-high: #EBEBEB;
  --md-sys-color-surface-container-highest: #E3E3E3;
  --md-sys-color-surface-dim: #D9D9D9;
  --md-sys-color-surface-bright: #FFFFFF;
  --md-sys-color-outline: #737373;
  --md-sys-color-outline-variant: #C7C7C7;
  --md-sys-color-inverse-surface: #000000;
  --md-sys-color-inverse-on-surface: #FFFFFF;
  --md-sys-color-inverse-primary: #AFC8D9;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-scrim-container: rgba(0, 0, 0, 0.32);
  --md-sys-color-scrim-media: rgba(0, 0, 0, 0.72);
  --md-sys-color-error: #000000;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #E8E8E8;
  --md-sys-color-on-error-container: #000000;
  --md-sys-color-success: #003F6E;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-warning: #000000;
  --md-sys-color-on-warning: #FFFFFF;
  --md-sys-color-info: #003F6E;
  --md-sys-color-on-info: #FFFFFF;
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.10;
  --md-sys-state-pressed-opacity: 0.10;
  --md-sys-state-dragged-opacity: 0.16;
  --md-sys-state-disabled-opacity: 0.38;
  --md-sys-typescale-font-family: 'Noto Sans', sans-serif;
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-weight-regular: 400;
  --md-sys-typescale-weight-medium: 500;
  --md-sys-typescale-weight-bold: 700;
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
  --md-sys-shape-corner-navigation-item: var(--md-sys-shape-corner-small);
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level2: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level3: 0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-none: 0ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
  --md-sys-motion-duration-extra-long1: 700ms;
  --md-sys-motion-duration-extra-long2: 800ms;
  --md-sys-motion-duration-extra-long3: 900ms;
  --md-sys-motion-duration-extra-long4: 1000ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-spacing-0: 0;
  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px;
  --md-sys-spacing-5: 20px;
  --md-sys-spacing-6: 24px;
  --md-sys-spacing-8: 32px;
  --md-sys-spacing-10: 40px;
  --md-sys-spacing-12: 48px;
  --md-sys-spacing-14: 56px;
  --md-sys-spacing-16: 64px;
  --md-sys-layout-content-max: 1200px;
  --md-sys-layout-reading-max: 720px;
  --md-sys-breakpoint-compact-max: 599px;
  --md-sys-breakpoint-medium-min: 600px;
  --md-sys-breakpoint-expanded-min: 840px;
  --md-sys-breakpoint-large-min: 1200px;
  --md-sys-breakpoint-extra-large-min: 1600px;
  --md-sys-density-scale: 0;
  --md-sys-size-border: 1px;
  --md-sys-size-focus-ring: 3px;
  --md-sys-size-touch-target: 48px;
  --md-sys-size-button-height: 40px;
  --md-sys-size-icon-button: 40px;
  --md-sys-size-field-height: 56px;
  --md-sys-size-chip-height: 32px;
  --md-sys-size-progress-linear-height: 4px;
  --md-sys-size-progress-circular: 48px;
  --md-sys-size-dialog-max: 560px;
  --md-sys-size-top-app-bar: 64px;
  --md-sys-size-navigation-rail: 80px;
  --md-sys-size-navigation-drawer: 240px;
  --md-sys-size-navigation-drawer-modal: 360px;
  --md-sys-size-navigation-item: 40px;
  --md-sys-size-navigation-icon: 20px;
  --md-sys-size-home-rail: 320px;
}
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("NotoSans-400.b24487e4975b.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("NotoSans-500.fd1926c7bd7e.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("NotoSans-700.a57530b2d42b.woff2") format("woff2");
}

@font-face {
  font-family: "Material Symbols Outlined PM";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("MaterialSymbolsOutlined-PM.dc04e9cacec6.woff2") format("woff2");
}

@layer reset {
  .pm-app,
  .pm-app * { box-sizing: border-box; }
  .pm-app button,
  .pm-app input,
  .pm-app select,
  .pm-app textarea { font: inherit; }
  .pm-app button { border: 0; }
  .pm-app img { display: block; max-width: 100%; }
}

@layer foundations {
  .pm-app {
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-font-family);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
    letter-spacing: 0;
  }

  .pm-app :focus-visible {
    outline: var(--md-sys-size-focus-ring) solid var(--md-sys-color-primary);
    outline-offset: var(--md-sys-size-border);
  }

  .pm-app a { color: var(--md-sys-color-primary); }
  .pm-app [hidden] { display: none; }
  .pm-app [aria-busy="true"] { cursor: progress; }

  .pm-m3-icon {
    display: inline-flex;
    flex: none;
    font-family: "Material Symbols Outlined PM";
    font-size: var(--md-sys-spacing-6);
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-rendering: optimizeLegibility;
  }

  .pm-m3-display-large { font-size: var(--md-sys-typescale-display-large-size); line-height: var(--md-sys-typescale-display-large-line-height); }
  .pm-m3-headline-large { font-size: var(--md-sys-typescale-headline-large-size); line-height: var(--md-sys-typescale-headline-large-line-height); }
  .pm-m3-headline-small { font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line-height); }
  .pm-m3-title-large { font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line-height); }
  .pm-m3-title-medium { font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line-height); font-weight: var(--md-sys-typescale-weight-medium); }
  .pm-m3-body-medium { font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line-height); }
  .pm-m3-body-small { font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line-height); }
  .pm-m3-label-large { font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line-height); font-weight: var(--md-sys-typescale-weight-medium); }
  /* A escala do plano tem 15 papeis; faltavam sete classes utilitarias, e usar um papel
     sem classe deixava o elemento sem tipografia nenhuma. */
  .pm-m3-display-medium { font-size: var(--md-sys-typescale-display-medium-size); line-height: var(--md-sys-typescale-display-medium-line-height); }
  .pm-m3-display-small { font-size: var(--md-sys-typescale-display-small-size); line-height: var(--md-sys-typescale-display-small-line-height); }
  .pm-m3-headline-medium { font-size: var(--md-sys-typescale-headline-medium-size); line-height: var(--md-sys-typescale-headline-medium-line-height); }
  .pm-m3-title-small { font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line-height); font-weight: var(--md-sys-typescale-weight-medium); }
  .pm-m3-body-large { font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); }
  .pm-m3-label-medium { font-size: var(--md-sys-typescale-label-medium-size); line-height: var(--md-sys-typescale-label-medium-line-height); font-weight: var(--md-sys-typescale-weight-medium); }
  .pm-m3-label-small { font-size: var(--md-sys-typescale-label-small-size); line-height: var(--md-sys-typescale-label-small-line-height); font-weight: var(--md-sys-typescale-weight-medium); }
}

@layer components {
 @scope (.pm-app) {
  .pm-m3-button,
  .pm-m3-icon-button {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    flex: none;
    justify-content: center;
    position: relative;
    transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  }

  .pm-m3-button {
    border-radius: var(--md-sys-shape-corner-full);
    gap: var(--md-sys-spacing-2);
    min-height: var(--md-sys-size-button-height);
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-6);
    text-decoration: none;
  }

  .pm-m3-button--filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
  .pm-m3-button--outlined { background: transparent; box-shadow: inset 0 0 0 var(--md-sys-size-border) var(--md-sys-color-outline); color: var(--md-sys-color-primary); }
  .pm-m3-button--text { background: transparent; color: var(--md-sys-color-primary); padding-inline: var(--md-sys-spacing-3); }
  .pm-m3-button:hover { box-shadow: var(--md-sys-elevation-level1); }
  .pm-m3-button:active { box-shadow: var(--md-sys-elevation-level0); }

  .pm-m3-icon-button {
    background: transparent;
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--md-sys-color-on-surface-variant);
    height: var(--md-sys-size-icon-button);
    padding: var(--md-sys-spacing-2);
    width: var(--md-sys-size-icon-button);
  }
  .pm-m3-icon-button:hover { background: var(--md-sys-color-surface-container-high); }

  .pm-m3-button:disabled,
  .pm-m3-icon-button:disabled,
  .pm-m3-field :disabled { cursor: not-allowed; opacity: var(--md-sys-state-disabled-opacity); }

  .pm-m3-field { display: grid; gap: var(--md-sys-spacing-1); }
  .pm-m3-field__control {
    align-items: center;
    background: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-extra-small);
    box-shadow: inset 0 0 0 var(--md-sys-size-border) var(--md-sys-color-outline);
    display: flex;
    gap: var(--md-sys-spacing-3);
    min-height: var(--md-sys-size-field-height);
    padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  }
  .pm-m3-field__control:focus-within { box-shadow: inset 0 0 0 var(--md-sys-size-focus-ring) var(--md-sys-color-primary); }
  .pm-m3-field__control input,
  .pm-m3-field__control select,
  .pm-m3-field__control textarea { background: transparent; border: 0; color: var(--md-sys-color-on-surface); min-width: 0; outline: 0; width: 100%; }
  .pm-m3-field__label { color: var(--md-sys-color-on-surface-variant); }
  .pm-m3-field__support { color: var(--md-sys-color-on-surface-variant); margin: 0 var(--md-sys-spacing-4); }
  .pm-m3-field--error .pm-m3-field__control { box-shadow: inset 0 0 0 var(--md-sys-size-focus-ring) var(--md-sys-color-error); }

  .pm-m3-card {
    border-radius: var(--md-sys-shape-corner-medium);
    color: var(--md-sys-color-on-surface);
    overflow: hidden;
    padding: var(--md-sys-spacing-6);
  }
  .pm-m3-card--filled { background: var(--md-sys-color-surface-container-highest); }
  .pm-m3-card--elevated { background: var(--md-sys-color-surface-container-low); box-shadow: var(--md-sys-elevation-level1); }
  .pm-m3-card--outlined { background: var(--md-sys-color-surface); box-shadow: inset 0 0 0 var(--md-sys-size-border) var(--md-sys-color-outline-variant); }

  .pm-m3-chip {
    align-items: center;
    background: transparent;
    border-radius: var(--md-sys-shape-corner-small);
    box-shadow: inset 0 0 0 var(--md-sys-size-border) var(--md-sys-color-outline);
    color: var(--md-sys-color-on-surface-variant);
    display: inline-flex;
    gap: var(--md-sys-spacing-2);
    min-height: var(--md-sys-size-chip-height);
    padding: var(--md-sys-spacing-1) var(--md-sys-spacing-4);
  }
  .pm-m3-chip[aria-pressed="true"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); box-shadow: none; }

  .pm-m3-selection-control { align-items: center; color: var(--md-sys-color-on-surface); display: inline-flex; gap: var(--md-sys-spacing-3); min-height: var(--md-sys-size-touch-target); }
  .pm-m3-selection-control input { accent-color: var(--md-sys-color-primary); height: var(--md-sys-spacing-5); width: var(--md-sys-spacing-5); }
  .pm-m3-switch input { appearance: none; background: var(--md-sys-color-surface-container-highest); border-radius: var(--md-sys-shape-corner-full); box-shadow: inset 0 0 0 var(--md-sys-size-border) var(--md-sys-color-outline); height: var(--md-sys-spacing-8); padding: var(--md-sys-spacing-1); width: var(--md-sys-size-field-height); }
  .pm-m3-switch input::before { background: var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-full); content: ""; display: block; height: var(--md-sys-spacing-6); transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); width: var(--md-sys-spacing-6); }
  .pm-m3-switch input:checked { background: var(--md-sys-color-primary); box-shadow: none; }
  .pm-m3-switch input:checked::before { background: var(--md-sys-color-on-primary); transform: translateX(var(--md-sys-spacing-6)); }

  .pm-m3-tabs { box-shadow: inset 0 calc(-1 * var(--md-sys-size-border)) 0 var(--md-sys-color-outline-variant); display: flex; overflow-x: auto; scrollbar-width: none; }
  .pm-m3-tab {
    align-items: center;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    display: inline-flex;
    flex: 1 0 auto;
    justify-content: center;
    min-height: var(--md-sys-size-touch-target);
    padding: var(--md-sys-spacing-3) var(--md-sys-spacing-6);
    position: relative;
  }
  .pm-m3-tab[aria-selected="true"] { color: var(--md-sys-color-primary); }
  .pm-m3-tab[aria-selected="true"]::after { background: var(--md-sys-color-primary); border-radius: var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0 0; bottom: 0; content: ""; height: var(--md-sys-spacing-1); inset-inline: var(--md-sys-spacing-4); position: absolute; }

  .pm-m3-progress-linear { background: var(--md-sys-color-surface-container-highest); height: var(--md-sys-size-progress-linear-height); overflow: hidden; position: relative; width: 100%; }
  .pm-m3-progress-linear::after { animation: pm-m3-progress-linear var(--md-sys-motion-duration-extra-long4) var(--md-sys-motion-easing-standard) infinite; background: var(--md-sys-color-primary); content: ""; inset-block: 0; position: absolute; width: 40%; }
  .pm-m3-progress-circular { animation: pm-m3-progress-spin var(--md-sys-motion-duration-extra-long4) var(--md-sys-motion-easing-standard) infinite; border: var(--md-sys-spacing-1) solid var(--md-sys-color-primary-container); border-radius: var(--md-sys-shape-corner-full); border-top-color: var(--md-sys-color-primary); height: var(--md-sys-size-progress-circular); width: var(--md-sys-size-progress-circular); }

  .pm-m3-dialog {
    background: var(--md-sys-color-surface-container-high);
    border: 0;
    border-radius: var(--md-sys-shape-corner-extra-large);
    box-shadow: var(--md-sys-elevation-level3);
    color: var(--md-sys-color-on-surface);
    max-width: var(--md-sys-size-dialog-max);
    padding: var(--md-sys-spacing-6);
    width: calc(100% - var(--md-sys-spacing-8));
  }
  .pm-m3-dialog::backdrop { background: var(--md-sys-color-scrim-container); }
  .pm-m3-dialog__actions { display: flex; gap: var(--md-sys-spacing-2); justify-content: flex-end; margin-top: var(--md-sys-spacing-6); }

  .pm-m3-snackbar { align-items: center; background: var(--md-sys-color-inverse-surface); border-radius: var(--md-sys-shape-corner-extra-small); box-shadow: var(--md-sys-elevation-level3); color: var(--md-sys-color-inverse-on-surface); display: flex; gap: var(--md-sys-spacing-4); min-height: var(--md-sys-size-touch-target); padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4); }
  /* Sobre a superficie invertida o primary da plataforma fica escuro demais e reprova no
     contraste: a acao do snackbar usa inverse-primary, o papel M3 para exatamente isso. */
  .pm-m3-snackbar .pm-m3-button--text { color: var(--md-sys-color-inverse-primary); }
  .pm-m3-snackbar .pm-m3-button--text::before { background: var(--md-sys-color-inverse-primary); }
  .pm-m3-badge { align-items: center; background: var(--md-sys-color-primary); border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-primary); display: inline-flex; justify-content: center; min-height: var(--md-sys-spacing-5); min-width: var(--md-sys-spacing-5); padding-inline: var(--md-sys-spacing-1); }

  .pm-m3-table-region { max-width: 100%; overflow-x: auto; }
  .pm-m3-table { border-collapse: collapse; min-width: 100%; }
  .pm-m3-table th,
  .pm-m3-table td { border-bottom: var(--md-sys-size-border) solid var(--md-sys-color-outline-variant); padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4); text-align: start; }

  .pm-m3-top-app-bar { align-items: center; background: var(--md-sys-color-surface); display: flex; gap: var(--md-sys-spacing-4); min-height: var(--md-sys-size-top-app-bar); padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4); }
  .pm-m3-top-app-bar__headline { flex: 1; margin: 0; }
  /* Gaveta enxuta: 240dp de largura, 8dp de recuo interno e itens de 40dp. A gaveta larga
     com item de 56dp e indicador em pilula ficava pesada demais para um menu que tem 19
     destinos - o menu tem de sumir na leitura, nao competir com a tela. */
  .pm-m3-navigation-drawer { background: var(--md-sys-color-surface-container-low); display: grid; gap: 2px; padding: var(--md-sys-spacing-2); width: min(var(--md-sys-size-navigation-drawer), calc(100vw - var(--md-sys-spacing-14))); }
  .pm-m3-navigation-rail { align-content: start; background: var(--md-sys-color-surface-container); display: grid; gap: var(--md-sys-spacing-3); justify-items: center; padding-block: var(--md-sys-spacing-6); width: var(--md-sys-size-navigation-rail); }
  .pm-m3-navigation-item { align-items: center; background: transparent; border-radius: var(--md-sys-shape-corner-navigation-item); color: var(--md-sys-color-on-surface-variant); display: flex; font-size: var(--md-sys-typescale-label-large-size); gap: var(--md-sys-spacing-3); line-height: var(--md-sys-typescale-label-large-line-height); min-height: var(--md-sys-size-navigation-item); padding: 0 var(--md-sys-spacing-2); position: relative; text-decoration: none; width: 100%; }
  .pm-m3-navigation-item .pm-m3-icon { font-size: var(--md-sys-size-navigation-icon); }
  /* Camada de estado por cima do indicador: no item ativo o hover escurece o realce em vez
     de trocar a cor dele, que era o efeito de "botao mudando de cor" ao passar o mouse. */
  .pm-m3-navigation-item::before { background: currentColor; border-radius: inherit; content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); }
  .pm-m3-navigation-item:hover::before { opacity: var(--md-sys-state-hover-opacity); }
  .pm-m3-navigation-item:active::before { opacity: var(--md-sys-state-pressed-opacity); }
  /* Ativo: realce neutro e discreto, com a cor da marca no texto e no icone. O bloco azul
     de ponta a ponta chamava mais atencao que o conteudo da pagina. */
  .pm-m3-navigation-item[aria-current="page"] { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-primary); font-weight: var(--md-sys-typescale-weight-medium); }
  .pm-m3-navigation-rail .pm-m3-navigation-item { flex-direction: column; gap: var(--md-sys-spacing-1); justify-content: center; padding: var(--md-sys-spacing-1); }
  /* No rail o indicador e so a pastilha do icone; a camada de estado acompanha ela, nao o
     item inteiro. */
  .pm-m3-navigation-rail .pm-m3-navigation-item::before { content: none; }
  .pm-m3-navigation-rail .pm-m3-navigation-item .pm-m3-icon { border-radius: var(--md-sys-shape-corner-full); padding: var(--md-sys-spacing-1) var(--md-sys-spacing-4); position: relative; }
  .pm-m3-navigation-rail .pm-m3-navigation-item .pm-m3-icon::after { background: currentColor; border-radius: inherit; content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); }
  .pm-m3-navigation-rail .pm-m3-navigation-item:hover .pm-m3-icon::after { opacity: var(--md-sys-state-hover-opacity); }
  .pm-m3-navigation-rail .pm-m3-navigation-item[aria-current="page"] { background: transparent; }
  .pm-m3-navigation-rail .pm-m3-navigation-item[aria-current="page"] .pm-m3-icon { background: var(--md-sys-color-primary-container); }
  .pm-m3-navigation-scrim { background: var(--md-sys-color-scrim-container); inset: 0; position: fixed; z-index: 20; }
  .pm-m3-navigation-modal { background: var(--md-sys-color-surface-container-low); height: 100%; inset-block: 0; inset-inline-start: 0; padding: var(--md-sys-spacing-3); position: fixed; width: min(var(--md-sys-size-navigation-drawer-modal), calc(100vw - var(--md-sys-spacing-14))); z-index: 21; }

  .pm-m3-menu { background: var(--md-sys-color-surface-container); border-radius: var(--md-sys-shape-corner-extra-small); box-shadow: var(--md-sys-elevation-level2); display: grid; padding: var(--md-sys-spacing-2) 0; }
  .pm-m3-menu-item { align-items: center; background: transparent; color: var(--md-sys-color-on-surface); display: flex; gap: var(--md-sys-spacing-3); min-height: var(--md-sys-size-touch-target); padding: var(--md-sys-spacing-2) var(--md-sys-spacing-3); text-align: start; width: 100%; }
  .pm-m3-menu-item:hover { background: var(--md-sys-color-surface-container-highest); }
  .pm-m3-divider { background: var(--md-sys-color-outline-variant); border: 0; height: var(--md-sys-size-border); margin: var(--md-sys-spacing-2) 0; }

  .pm-m3-carousel { background: var(--md-sys-color-surface-container); border-radius: var(--md-sys-shape-corner-medium); min-height: calc(var(--md-sys-spacing-16) * 3); overflow: hidden; position: relative; }
  .pm-m3-carousel__slide { min-height: calc(var(--md-sys-spacing-16) * 3); padding: var(--md-sys-spacing-8); }
  .pm-m3-carousel__controls { align-items: center; bottom: var(--md-sys-spacing-3); display: flex; gap: var(--md-sys-spacing-2); justify-content: center; left: var(--md-sys-spacing-3); position: absolute; right: var(--md-sys-spacing-3); }
  .pm-m3-carousel__dot { background: var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-full); height: var(--md-sys-spacing-2); padding: 0; width: var(--md-sys-spacing-2); }
  .pm-m3-carousel__dot[aria-current="true"] { background: var(--md-sys-color-primary); width: var(--md-sys-spacing-6); }

  [data-pm-tooltip] { position: relative; }
  [data-pm-tooltip]:hover::after,
  [data-pm-tooltip]:focus-visible::after { background: var(--md-sys-color-inverse-surface); border-radius: var(--md-sys-shape-corner-extra-small); color: var(--md-sys-color-inverse-on-surface); content: attr(data-pm-tooltip); inset-block-start: calc(100% + var(--md-sys-spacing-2)); padding: var(--md-sys-spacing-1) var(--md-sys-spacing-2); position: absolute; white-space: nowrap; z-index: 10; }

  @keyframes pm-m3-progress-linear { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }
  @keyframes pm-m3-progress-spin { to { transform: rotate(360deg); } }

  @media (prefers-reduced-motion: reduce) {
    .pm-app *, .pm-app *::before, .pm-app *::after { scroll-behavior: auto; transition-duration: var(--md-sys-motion-duration-none); }
    .pm-m3-progress-linear::after { animation: none; inset-inline: 0; width: 100%; }
    .pm-m3-progress-circular { animation: none; }
  }
 }
}

@layer layout {
 @scope (.pm-app) {
  .pm-m3-gallery-shell { margin: 0 auto; max-width: var(--md-sys-layout-content-max); padding: var(--md-sys-spacing-8); }
  .pm-m3-gallery-header { border-bottom: var(--md-sys-size-border) solid var(--md-sys-color-outline-variant); margin-bottom: var(--md-sys-spacing-8); padding-bottom: var(--md-sys-spacing-6); }
  .pm-m3-gallery-grid { display: grid; gap: var(--md-sys-spacing-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-m3-gallery-section { display: grid; gap: var(--md-sys-spacing-4); }
  .pm-m3-gallery-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-4); }
  .pm-m3-gallery-stack { display: grid; gap: var(--md-sys-spacing-4); }
  .pm-m3-gallery-panel { min-height: var(--md-sys-spacing-16); }

  @media (max-width: 839px) {
    .pm-m3-gallery-shell { padding: var(--md-sys-spacing-4); }
    .pm-m3-gallery-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---- Shell da aplicacao (M3-B) -----------------------------------------
     Uma unica arvore serve os cinco breakpoints. A navegacao e SEMPRE o mesmo
     elemento; o que muda por largura e a forma dele:
       compact  (0-599)     top app bar + drawer modal
       medium   (600-839)   top app bar + drawer modal
       expanded (840-1199)  navigation rail
       large    (1200-1599) standard drawer
       xlarge   (1600+)     standard drawer
     Nao existe segunda copia do menu: duplicar markup duplicaria foco, nomes
     acessiveis e estado ativo. */
  .pm-shell { background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); display: grid; grid-template-areas: "bar" "main"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
  .pm-shell__bar { border-bottom: var(--md-sys-size-border) solid var(--md-sys-color-outline-variant); grid-area: bar; position: sticky; top: 0; z-index: 10; }
  .pm-shell__main { grid-area: main; min-width: 0; overflow-x: hidden; }
  /* Coluna, nao grade: a grade estica as linhas na altura do documento e empurra os
     destinos para fora da tela quando a pagina e longa. Em coluna eles ficam no topo e
     `margin-block-start: auto` no rodape encosta a conta embaixo. */
  .pm-shell__nav { align-content: start; display: flex; flex-direction: column; gap: var(--md-sys-spacing-1); }
  .pm-shell__content { margin: 0 auto; max-width: var(--md-sys-layout-content-max); padding: var(--md-sys-spacing-4); }
  .pm-shell__nav-scrim { display: none; }
  /* Fechar so faz sentido com o menu modal; com navegacao permanente ele nao tem o que
     fechar, e no rail ainda roubava a largura da marca. */
  .pm-shell__nav-close { display: none; }
  .pm-shell__brand { align-items: center; color: var(--md-sys-color-on-surface); display: flex; gap: var(--md-sys-spacing-2); min-width: 0; text-decoration: none; }
  .pm-shell__brand-mark { block-size: var(--md-sys-spacing-6); inline-size: var(--md-sys-spacing-6); object-fit: contain; }
  .pm-shell__brand-name { font-size: var(--md-sys-typescale-label-large-size); font-weight: var(--md-sys-typescale-weight-medium); line-height: var(--md-sys-typescale-label-large-line-height); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pm-shell__nav-head { align-items: center; display: flex; gap: var(--md-sys-spacing-2); min-height: var(--md-sys-spacing-14); padding-inline: var(--md-sys-spacing-2); }
  .pm-shell__nav-group { display: grid; gap: 2px; }
  /* Rotulo de secao em caixa alta pequena, com um fio acima: separa os grupos sem gastar
     altura, que e o que faz um menu de 19 destinos parecer curto. */
  .pm-shell__nav-label { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-label-small-size); letter-spacing: 0.06em; line-height: var(--md-sys-typescale-label-small-line-height); margin: 0; padding: var(--md-sys-spacing-2) var(--md-sys-spacing-2) var(--md-sys-spacing-1); text-transform: uppercase; }
  .pm-shell__nav-group .pm-shell__nav-label { border-top: var(--md-sys-size-border) solid var(--md-sys-color-outline-variant); margin-block-start: var(--md-sys-spacing-2); padding-top: var(--md-sys-spacing-3); }
  .pm-shell__nav-foot { border-top: var(--md-sys-size-border) solid var(--md-sys-color-outline-variant); display: flex; flex-direction: column; gap: 2px; margin-block-start: auto; padding-top: var(--md-sys-spacing-1); }

  /* compact e medium: o menu vira drawer modal, fora do fluxo ate ser aberto.
     `overflow-y: auto` nao e detalhe: o menu do painel administrativo tem 19 destinos e,
     sem rolagem propria, os ultimos (Banners, Permissoes) ficavam abaixo da dobra do
     celular, sem nenhuma forma de chegar neles. */
  @media (max-width: 839px) {
    /* O drawer modal e mais largo que o permanente (360dp contra 280dp, os dois valores do
       M3): no celular ele e a tela inteira da navegacao, entao apertar a largura so faz o
       nome da plataforma virar reticencias. Os 56dp de folga sao a faixa de scrim que
       precisa sobrar para se enxergar o conteudo por tras. */
    .pm-shell__nav { block-size: 100%; inline-size: min(var(--md-sys-size-navigation-drawer-modal), calc(100vw - var(--md-sys-spacing-14))); inset-block: 0; inset-inline-start: 0; overflow-y: auto; overscroll-behavior: contain; padding-block: 0; position: fixed; transform: translateX(-100%); transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate); z-index: 21; }
    /* A marca e o botao de fechar acompanham a rolagem: sem isso, quem rola ate o fim da
       lista perde o unico jeito de fechar o menu sem tocar no scrim. O recuo vertical sai
       do container e vem para o cabecalho e o rodape - preso ao container, ele deixaria uma
       fresta de 12px no topo por onde a lista aparecia passando por cima do cabecalho. */
    .pm-shell__nav-head { background: var(--md-sys-color-surface-container-low); inset-block-start: 0; padding-block: var(--md-sys-spacing-3); position: sticky; z-index: 1; }
    .pm-shell__nav-foot { padding-block-end: var(--md-sys-spacing-3); }
    .pm-shell__nav[hidden] { display: flex; }
    .pm-shell__nav-close { display: inline-flex; }
    .pm-shell[data-nav="open"] .pm-shell__nav { transform: translateX(0); }
    .pm-shell[data-nav="open"] .pm-shell__nav-scrim { background: var(--md-sys-color-scrim-container); display: block; inset: 0; position: fixed; z-index: 20; }
  }

  /* expanded: rail permanente, com rotulo curto sob o icone. */
  @media (min-width: 840px) and (max-width: 1199px) {
    .pm-shell { grid-template-areas: "nav main"; grid-template-columns: var(--md-sys-size-navigation-rail) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .pm-shell__bar { display: none; }
    /* Sem recuo horizontal: o rail ja e estreito, e os 12px de cada lado que a gaveta
       aplica deixavam so 56px para o rotulo - o suficiente para "Solicitacoes" quebrar
       como "Solicitacoe/s". */
    .pm-shell__nav { align-items: center; background: var(--md-sys-color-surface-container); block-size: 100vh; block-size: 100dvh; grid-area: nav; inset-block-start: 0; overflow-y: auto; padding-block: var(--md-sys-spacing-4); padding-inline: 0; position: sticky; width: var(--md-sys-size-navigation-rail); }
    /* O rail tem a largura de um token; o rotulo tem de caber nela. Ele quebra em duas
       linhas em vez de vazar - e o texto continua no DOM, entao o nome acessivel do
       destino nao depende do icone. Com `hyphens: auto` (a pagina declara lang="pt-BR") a
       quebra cai na silaba e sai com hifen, em vez de cortar a palavra em qualquer letra. */
    .pm-shell__nav .pm-m3-navigation-item { flex-direction: column; gap: var(--md-sys-spacing-1); inline-size: 100%; justify-content: center; padding: var(--md-sys-spacing-1) 0; text-align: center; }
    /* Sem recuo no rotulo: cada 4px devolvido e uma palavra que deixa de ser hifenizada -
       com recuo, "Lancamentos" ja nao cabia e quebrava. */
    .pm-shell__nav .pm-m3-navigation-item > span:not(.pm-m3-icon) { font-size: var(--md-sys-typescale-label-small-size); hyphens: auto; line-height: var(--md-sys-typescale-label-small-line-height); overflow-wrap: break-word; }
    .pm-shell__nav .pm-m3-navigation-item[aria-current="page"] { background: transparent; }
    .pm-shell__nav .pm-m3-navigation-item[aria-current="page"] .pm-m3-icon { background: var(--md-sys-color-primary-container); border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-primary); }
    /* No rail o icone e quase o unico sinal do destino, entao ele fica no tamanho cheio -
       os 20dp da gaveta ficariam pequenos demais sem o rotulo ao lado. */
    .pm-shell__nav .pm-m3-icon { font-size: var(--md-sys-spacing-6); padding: var(--md-sys-spacing-1) var(--md-sys-spacing-4); }
    .pm-shell__brand-name, .pm-shell__nav-label { display: none; }
    .pm-shell__nav-head { justify-content: center; padding-inline: 0; }
    .pm-shell__content { padding: var(--md-sys-spacing-6); }
  }

  /* large e extra-large: standard drawer permanente. */
  @media (min-width: 1200px) {
    .pm-shell { grid-template-areas: "nav main"; grid-template-columns: var(--md-sys-size-navigation-drawer) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .pm-shell__bar { display: none; }
    /* Mesmo arranjo do drawer modal: o recuo vertical sai do container e vai para o
       cabecalho e o rodape, para o cabecalho grudado no topo cobrir a lista inteira
       enquanto ela rola por baixo. Com os 19 destinos do painel a lista passa da altura de
       um notebook, entao isso vale tambem na navegacao permanente. */
    .pm-shell__nav { block-size: 100vh; block-size: 100dvh; grid-area: nav; inset-block-start: 0; overflow-y: auto; padding-block: 0; position: sticky; }
    .pm-shell__nav-head { background: var(--md-sys-color-surface-container-low); inset-block-start: 0; padding-block: var(--md-sys-spacing-3); position: sticky; z-index: 1; }
    .pm-shell__nav-foot { padding-block-end: var(--md-sys-spacing-3); }
    .pm-shell__content { padding: var(--md-sys-spacing-8); }
  }

  @media (min-width: 1600px) {
    .pm-shell__content { max-width: var(--md-sys-layout-content-max); }
  }
 }
}

@layer pages {
 @scope (.pm-app) {
  .pm-m3-gallery-title { margin: 0; }
  .pm-m3-gallery-subtitle { color: var(--md-sys-color-on-surface-variant); margin: var(--md-sys-spacing-2) 0 0; }
  .pm-m3-gallery-section h2 { margin: 0; }

  /* ---- Home (M3-B) --------------------------------------------------------
     Duas regioes irmas: a coluna principal (destaque + colunas editoriais) e o
     trilho de Lancamentos ao lado. Antes as secoes eram uma fila unica numa grade
     de 12 colunas, entao destaque e trilho caiam na MESMA linha; a altura da linha
     virava a do trilho - bem mais alto - e sobrava um vazio enorme embaixo do
     destaque. Como regioes irmas, cada uma tem a altura do seu proprio conteudo.

     Fios finos separam as colunas, no lugar de vaos grandes: e o que deixa a
     leitura densa como a de um jornal em vez de espalhada. */
  .pm-home { display: grid; gap: var(--md-sys-spacing-6); }
  .pm-home__head { display: grid; gap: var(--md-sys-spacing-1); }
  .pm-home__title { margin: 0; }
  .pm-home__subtitle { color: var(--md-sys-color-on-surface-variant); margin: 0; }
  .pm-home__panel { align-items: start; display: grid; gap: var(--md-sys-spacing-6); grid-template-columns: minmax(0, 1fr); }
  /* O numero de colunas editoriais depende da largura DESTA coluna, nao da janela:
     com o trilho ao lado, a mesma janela deixa espaco diferente conforme o zoom e o
     modo da navegacao. Container query responde a largura real. */
  .pm-home__main { align-content: start; container: pm-home-main / inline-size; display: grid; gap: var(--md-sys-spacing-6); min-width: 0; }
  .pm-home__editorial { display: grid; gap: var(--md-sys-spacing-6); grid-template-columns: minmax(0, 1fr); }
  /* `stretch` de proposito: o conteudo do trilho fica no topo de qualquer jeito, mas a
     CAIXA dele ocupa a linha inteira - e o fio da lateral acompanha a altura da coluna
     editorial, em vez de parar no meio da pagina como um traco solto. */
  .pm-home__rail { align-self: stretch; min-width: 0; }
  .pm-home__section { display: grid; gap: var(--md-sys-spacing-4); min-width: 0; }
  .pm-home__section-head { align-items: baseline; border-bottom: var(--md-sys-size-border) solid var(--md-sys-color-outline-variant); display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-3); justify-content: space-between; padding-bottom: var(--md-sys-spacing-2); }
  .pm-home__section-head h2 { margin: 0; }
  .pm-home__more { align-items: center; color: var(--md-sys-color-primary); display: inline-flex; gap: var(--md-sys-spacing-1); text-decoration: none; }
  .pm-home__more .pm-m3-icon { font-size: var(--md-sys-spacing-5); }
  .pm-home__grid { display: grid; gap: var(--md-sys-spacing-4); grid-template-columns: minmax(0, 1fr); }
  .pm-home__empty { color: var(--md-sys-color-on-surface-variant); padding-block: var(--md-sys-spacing-8); text-align: center; }
  .pm-home__loading { display: grid; gap: var(--md-sys-spacing-4); padding-block: var(--md-sys-spacing-8); }

  /* Ate 839px o trilho vem abaixo da coluna principal; ali os cards dele ficam lado a
     lado, senao viram uma pilha alta de quatro. */
  @media (min-width: 600px) and (max-width: 839px) {
    .pm-home__rail .pm-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 840px) {
    .pm-home__panel { grid-template-columns: minmax(0, 1fr) minmax(0, var(--md-sys-size-home-rail)); }
    .pm-home__rail { border-inline-start: var(--md-sys-size-border) solid var(--md-sys-color-outline-variant); padding-inline-start: var(--md-sys-spacing-6); }
  }

  @container pm-home-main (min-width: 620px) {
    .pm-home__editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pm-home__editorial > * + * { border-inline-start: var(--md-sys-size-border) solid var(--md-sys-color-outline-variant); padding-inline-start: var(--md-sys-spacing-6); }
  }
 }
}

@layer overrides {
}