/* ==========================================================================
   Compêndio — Webfonts (self-hosted)
   IBM Plex family (SIL Open Font License). Latin + Latin-Ext subsets only,
   downloaded from Google Fonts and served locally from assets/fonts/.
   ========================================================================== */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-serif-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-serif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-serif-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-serif-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-serif-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-serif-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-serif-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-serif-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ==========================================================================
   Compêndio — Color tokens
   Institutional, clinical palette tuned for WCAG 2.1 AA. Base ramps first,
   semantic aliases at the bottom. Prefer the semantic aliases in product code.
   ========================================================================== */

:root {
  /* ---- Neutral / slate ------------------------------------------------ */
  --gray-50:  #F6F8FA;
  --gray-100: #ECEFF3;
  --gray-200: #DCE2E9;
  --gray-300: #C3CCD6;
  --gray-400: #9AA7B5;
  --gray-500: #6B7A8B;
  --gray-600: #4E5C6B;
  --gray-700: #374350;
  --gray-800: #232E39;
  --gray-900: #131A22;

  /* ---- Primary — institutional blue ----------------------------------- */
  --blue-50:  #EAF2FB;
  --blue-100: #CFE1F6;
  --blue-200: #A6C8EE;
  --blue-300: #6FA6E2;
  --blue-400: #3D82D1;
  --blue-500: #1A63B8;   /* primary brand */
  --blue-600: #134E97;
  --blue-700: #0E3D78;
  --blue-800: #0B2F5C;
  --blue-900: #082241;

  /* ---- Secondary — teal (clinical accent) ----------------------------- */
  --teal-50:  #E6F6F4;
  --teal-100: #C2E9E4;
  --teal-200: #93D7CE;
  --teal-300: #5FBFB4;
  --teal-500: #138A7E;
  --teal-600: #0F6E64;
  --teal-700: #0C564E;

  /* ---- Success — "Incorporado" --------------------------------------- */
  --green-50:  #E7F5EC;
  --green-100: #C5E8D1;
  --green-300: #6DBF8C;
  --green-500: #1E8E4E;
  --green-600: #176E3D;
  --green-700: #115730;

  /* ---- Warning — "Em análise" ---------------------------------------- */
  --amber-50:  #FBF1DD;
  --amber-100: #F6E0B4;
  --amber-300: #E6B24E;
  --amber-500: #B97607;
  --amber-600: #935D05;
  --amber-700: #6F4604;

  /* ---- Danger — "Não incorporado" ------------------------------------ */
  --red-50:  #FBEAEB;
  --red-100: #F6CDD0;
  --red-300: #E08188;
  --red-500: #C5303A;
  --red-600: #9E2630;
  --red-700: #7C1D26;

  /* ---- Info — "Em consulta / atualização" ----------------------------- */
  --violet-50:  #EEEBFA;
  --violet-300: #A99BE3;
  --violet-500: #5B47B8;
  --violet-600: #463690;

  /* ======================================================================
     Semantic aliases — use these in product & component code
     ====================================================================== */

  /* Surfaces */
  --surface-page:         var(--gray-50);
  --surface-card:         #FFFFFF;
  --surface-raised:       #FFFFFF;
  --surface-sunken:       var(--gray-100);
  --surface-inverse:      var(--gray-900);
  --surface-brand:        var(--blue-500);
  --surface-brand-strong: var(--blue-600);
  --surface-brand-subtle: var(--blue-50);
  --surface-accent-subtle:var(--teal-50);
  --surface-disabled:     var(--gray-100);

  /* Text */
  --text-strong:   var(--gray-900);
  --text-body:     var(--gray-800);
  --text-muted:    var(--gray-600);
  --text-subtle:   var(--gray-500);
  --text-disabled: var(--gray-400);
  --text-on-brand: #FFFFFF;
  --text-on-inverse: var(--gray-50);
  --text-link:     var(--blue-600);
  --text-link-hover: var(--blue-700);

  /* Borders */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--blue-500);
  --border-focus:   var(--blue-500);

  /* Status — surface / text / border triplets */
  --status-success-surface: var(--green-50);
  --status-success-text:    var(--green-700);
  --status-success-solid:   var(--green-600);
  --status-success-border:  var(--green-300);

  --status-warning-surface: var(--amber-50);
  --status-warning-text:    var(--amber-700);
  --status-warning-solid:   var(--amber-600);
  --status-warning-border:  var(--amber-300);

  --status-danger-surface:  var(--red-50);
  --status-danger-text:     var(--red-700);
  --status-danger-solid:    var(--red-600);
  --status-danger-border:   var(--red-300);

  --status-info-surface:    var(--blue-50);
  --status-info-text:       var(--blue-700);
  --status-info-solid:      var(--blue-600);
  --status-info-border:     var(--blue-200);

  --status-neutral-surface: var(--gray-100);
  --status-neutral-text:    var(--gray-700);
  --status-neutral-solid:   var(--gray-600);
  --status-neutral-border:  var(--gray-300);

  /* Focus ring (used everywhere — WCAG visible focus) */
  --focus-ring: 0 0 0 3px rgba(26, 99, 184, 0.40);
  --focus-ring-danger: 0 0 0 3px rgba(197, 48, 58, 0.35);
}


/* ==========================================================================
   Compêndio — Typography tokens
   IBM Plex Sans (UI/body) · IBM Plex Serif (long-form parecer reading) ·
   IBM Plex Mono (codes, process numbers, dosages).
   Type scale is a ~1.2 modular scale anchored at 16px.
   ========================================================================== */

:root {
  /* ---- Families ------------------------------------------------------- */
  --font-sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Weights -------------------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Font sizes (rem-based, 16px root) ------------------------------ */
  --text-2xs: 0.6875rem;  /* 11px — micro labels, uppercase eyebrows */
  --text-xs:  0.75rem;    /* 12px — captions, metadata */
  --text-sm:  0.8125rem;  /* 13px — dense UI, table cells */
  --text-md:  0.9375rem;  /* 15px — default UI text */
  --text-base:1rem;       /* 16px — body / document base */
  --text-lg:  1.125rem;   /* 18px — lead paragraph */
  --text-xl:  1.375rem;   /* 22px — card / section heading */
  --text-2xl: 1.75rem;    /* 28px — page title */
  --text-3xl: 2.25rem;    /* 36px — display */
  --text-4xl: 3rem;       /* 48px — hero display */

  /* ---- Line heights --------------------------------------------------- */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;  /* long-form parecer reading */

  /* ---- Letter spacing ------------------------------------------------- */
  --tracking-tight:  -0.014em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;  /* uppercase eyebrows / table headers */

  /* ---- Semantic role tokens ------------------------------------------- */
  --font-display:    var(--font-sans);
  --font-heading:    var(--font-sans);
  --font-body:       var(--font-sans);
  --font-document:   var(--font-serif);  /* parecer body copy */
  --font-code:       var(--font-mono);
}


/* ==========================================================================
   Compêndio — Spacing tokens
   4px base grid. Use --space-* for padding, margins, and gaps.
   ========================================================================== */

:root {
  --space-0:  0;
  --space-px: 1px;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-7:  1.75rem;  /* 28 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* Layout rhythm */
  --gutter:        var(--space-6);
  --section-gap:   var(--space-12);
  --content-max:   1240px;   /* app content max width */
  --reading-max:   72ch;     /* parecer document column */
  --sidebar-width: 264px;
  --topbar-height: 60px;
}


/* ==========================================================================
   Compêndio — Radius tokens
   Restrained corner rounding — institutional, not playful.
   ========================================================================== */

:root {
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Semantic */
  --radius-control: var(--radius-sm);  /* buttons, inputs */
  --radius-card:    var(--radius-md);
  --radius-panel:   var(--radius-lg);
  --radius-badge:   var(--radius-sm);
}


/* ==========================================================================
   Compêndio — Elevation & border tokens
   Soft, low-spread shadows in a cool neutral. Elevation is used sparingly —
   most surfaces sit flat with a 1px border; shadow signals true layering
   (menus, dialogs, toasts, sticky bars).
   ========================================================================== */

:root {
  --shadow-xs: 0 1px 2px rgba(19, 26, 34, 0.06);
  --shadow-sm: 0 1px 3px rgba(19, 26, 34, 0.08), 0 1px 2px rgba(19, 26, 34, 0.05);
  --shadow-md: 0 4px 12px rgba(19, 26, 34, 0.10), 0 2px 4px rgba(19, 26, 34, 0.05);
  --shadow-lg: 0 12px 28px rgba(19, 26, 34, 0.14), 0 4px 8px rgba(19, 26, 34, 0.06);
  --shadow-xl: 0 24px 48px rgba(19, 26, 34, 0.18);

  /* Inset for sunken fields / wells */
  --shadow-inset: inset 0 1px 2px rgba(19, 26, 34, 0.06);

  /* Border widths */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* Semantic elevation */
  --elevation-card:   var(--shadow-sm);
  --elevation-popover:var(--shadow-md);
  --elevation-dialog: var(--shadow-xl);
  --elevation-toast:  var(--shadow-lg);
}


/* ==========================================================================
   Compêndio — Motion tokens
   Quick, functional motion. No bounce, no decorative loops. Transitions
   are short and use a single standard ease. Respects reduced-motion.
   ========================================================================== */

:root {
  --duration-instant: 80ms;  /* @kind other */
  --duration-fast:    120ms; /* @kind other */
  --duration-base:    180ms; /* @kind other */
  --duration-slow:    260ms; /* @kind other */

  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);    /* @kind other */
  --ease-entrance:  cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-exit:      cubic-bezier(0.4, 0, 1, 1);    /* @kind other */

  --transition-control: color var(--duration-fast) var(--ease-standard),
                        background-color var(--duration-fast) var(--ease-standard),
                        border-color var(--duration-fast) var(--ease-standard),
                        box-shadow var(--duration-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms; /* @kind other */
    --duration-fast: 0ms;    /* @kind other */
    --duration-base: 0ms;    /* @kind other */
    --duration-slow: 0ms;    /* @kind other */
  }
}


/* ==========================================================================
   Compêndio — Base layer
   Light reset + element defaults wired to tokens. Sets the typographic
   baseline and the global accessible focus treatment.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { color: var(--text-link-hover); text-decoration: underline; }

small { font-size: var(--text-xs); }

code, kbd, samp {
  font-family: var(--font-code);
  font-size: 0.92em;
}

/* Accessible, consistent focus everywhere (WCAG 2.4.7) */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* Eyebrow / overline utility */
.cmp-eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Selection */
::selection {
  background: var(--blue-100);
  color: var(--blue-900);
}


/* ==========================================================================
   Compêndio — Buttons, badges, pills, tags, avatars
   ========================================================================== */

/* ---- Button --------------------------------------------------------- */
.cmp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: 1;
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  border: var(--border-width-strong) solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  transition: var(--transition-control);
}
.cmp-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cmp-btn:disabled,
.cmp-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; pointer-events: none; }
.cmp-btn__icon { display: inline-flex; width: 18px; height: 18px; flex: none; }
.cmp-btn__icon svg { width: 100%; height: 100%; }

/* sizes */
.cmp-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.cmp-btn--lg { height: 48px; padding: 0 var(--space-6); font-size: var(--text-base); }
.cmp-btn--block { display: flex; width: 100%; }
.cmp-btn--icon-only { padding: 0; width: 40px; }
.cmp-btn--icon-only.cmp-btn--sm { width: 32px; }
.cmp-btn--icon-only.cmp-btn--lg { width: 48px; }

/* primary */
.cmp-btn--primary { background: var(--blue-500); color: var(--text-on-brand); border-color: var(--blue-500); }
.cmp-btn--primary:hover { background: var(--blue-600); border-color: var(--blue-600); }
.cmp-btn--primary:active { background: var(--blue-700); border-color: var(--blue-700); }

/* secondary (neutral outline) */
.cmp-btn--secondary { background: var(--surface-card); color: var(--text-body); border-color: var(--border-default); }
.cmp-btn--secondary:hover { background: var(--gray-50); border-color: var(--border-strong); }
.cmp-btn--secondary:active { background: var(--gray-100); }

/* tonal (brand subtle) */
.cmp-btn--tonal { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-50); }
.cmp-btn--tonal:hover { background: var(--blue-100); border-color: var(--blue-100); }
.cmp-btn--tonal:active { background: var(--blue-200); }

/* ghost */
.cmp-btn--ghost { background: transparent; color: var(--blue-600); border-color: transparent; }
.cmp-btn--ghost:hover { background: var(--blue-50); }
.cmp-btn--ghost:active { background: var(--blue-100); }

/* danger */
.cmp-btn--danger { background: var(--red-600); color: #fff; border-color: var(--red-600); }
.cmp-btn--danger:hover { background: var(--red-700); border-color: var(--red-700); }
.cmp-btn--danger:focus-visible { box-shadow: var(--focus-ring-danger); }

/* ---- Badge ---------------------------------------------------------- */
.cmp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  padding: 3px var(--space-2);
  border-radius: var(--radius-badge);
  border: var(--border-width) solid transparent;
  white-space: nowrap;
}
.cmp-badge--neutral { background: var(--status-neutral-surface); color: var(--status-neutral-text); border-color: var(--status-neutral-border); }
.cmp-badge--info    { background: var(--status-info-surface);    color: var(--status-info-text);    border-color: var(--status-info-border); }
.cmp-badge--success { background: var(--status-success-surface); color: var(--status-success-text); border-color: var(--status-success-border); }
.cmp-badge--warning { background: var(--status-warning-surface); color: var(--status-warning-text); border-color: var(--status-warning-border); }
.cmp-badge--danger  { background: var(--status-danger-surface);  color: var(--status-danger-text);  border-color: var(--status-danger-border); }
.cmp-badge--solid   { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.cmp-badge--count   { min-width: 18px; height: 18px; justify-content: center; border-radius: var(--radius-pill); padding: 0 5px; font-size: var(--text-2xs); }

/* ---- Status pill (parecer lifecycle) -------------------------------- */
.cmp-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 5px var(--space-3) 5px var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid transparent;
  white-space: nowrap;
}
.cmp-pill__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }
.cmp-pill--incorporado     { background: var(--status-success-surface); color: var(--status-success-text); border-color: var(--status-success-border); }
.cmp-pill--nao-incorporado { background: var(--status-danger-surface);  color: var(--status-danger-text);  border-color: var(--status-danger-border); }
.cmp-pill--em-analise      { background: var(--status-warning-surface); color: var(--status-warning-text); border-color: var(--status-warning-border); }
.cmp-pill--em-consulta     { background: var(--status-info-surface);    color: var(--status-info-text);    border-color: var(--status-info-border); }
.cmp-pill--arquivado       { background: var(--status-neutral-surface); color: var(--status-neutral-text); border-color: var(--status-neutral-border); }

/* ---- Tag (removable filter chip) ------------------------------------ */
.cmp-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 5px var(--space-2) 5px var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  color: var(--text-body);
  border: var(--border-width) solid var(--border-subtle);
}
.cmp-tag__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: var(--radius-xs);
  background: transparent; border: none; cursor: pointer; color: var(--text-muted);
  transition: var(--transition-control);
}
.cmp-tag__remove:hover { background: var(--gray-300); color: var(--text-strong); }

/* ---- Avatar --------------------------------------------------------- */
.cmp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  overflow: hidden;
  flex: none;
  user-select: none;
}
.cmp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cmp-avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.cmp-avatar--lg { width: 48px; height: 48px; font-size: var(--text-lg); }


/* ==========================================================================
   Compêndio — Form controls
   Field wrapper, text input, textarea, select, search, checkbox, radio, switch
   ========================================================================== */

/* ---- Field (label + help + error wrapper) --------------------------- */
.cmp-field { display: flex; flex-direction: column; gap: var(--space-2); }
.cmp-field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  line-height: 1.2;
}
.cmp-field__req { color: var(--red-600); margin-left: 2px; }
.cmp-field__optional { color: var(--text-subtle); font-weight: var(--weight-regular); margin-left: var(--space-2); }
.cmp-field__help { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; }
.cmp-field__error {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--status-danger-text); font-weight: var(--weight-medium);
}

/* ---- Input / textarea / select -------------------------------------- */
.cmp-input,
.cmp-textarea,
.cmp-select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text-body);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  transition: var(--transition-control);
  appearance: none;
}
.cmp-input, .cmp-select { height: 40px; padding: 0 var(--space-3); }
.cmp-textarea { min-height: 96px; padding: var(--space-3); line-height: var(--leading-normal); resize: vertical; }
.cmp-input::placeholder, .cmp-textarea::placeholder { color: var(--text-subtle); }
.cmp-input:hover, .cmp-textarea:hover, .cmp-select:hover { border-color: var(--border-strong); }
.cmp-input:focus, .cmp-textarea:focus, .cmp-select:focus {
  outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring);
}
.cmp-input:disabled, .cmp-textarea:disabled, .cmp-select:disabled {
  background: var(--surface-disabled); color: var(--text-disabled); cursor: not-allowed;
}
.cmp-input--invalid, .cmp-textarea--invalid, .cmp-select--invalid { border-color: var(--red-500); }
.cmp-input--invalid:focus, .cmp-textarea--invalid:focus, .cmp-select--invalid:focus { box-shadow: var(--focus-ring-danger); }

.cmp-input--sm, .cmp-select--sm { height: 32px; font-size: var(--text-sm); }
.cmp-input--lg, .cmp-select--lg { height: 48px; font-size: var(--text-base); }

/* Select chevron */
.cmp-select-wrap { position: relative; width: 100%; }
.cmp-select { padding-right: var(--space-8); cursor: pointer; }
.cmp-select-wrap::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px;
  transform: translateY(-65%) rotate(45deg);
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  pointer-events: none;
}

/* ---- Input group (leading icon / addon) ----------------------------- */
.cmp-inputgroup { position: relative; display: flex; align-items: center; width: 100%; }
.cmp-inputgroup__icon {
  position: absolute; left: var(--space-3); display: inline-flex;
  width: 18px; height: 18px; color: var(--text-subtle); pointer-events: none;
}
.cmp-inputgroup__icon svg { width: 100%; height: 100%; }
.cmp-inputgroup .cmp-input { padding-left: calc(var(--space-3) + 18px + var(--space-2)); }

/* ---- Search field --------------------------------------------------- */
.cmp-search { position: relative; display: flex; align-items: center; width: 100%; }
.cmp-search__icon {
  position: absolute; left: var(--space-3); width: 18px; height: 18px;
  color: var(--text-subtle); pointer-events: none; display: inline-flex;
}
.cmp-search__icon svg { width: 100%; height: 100%; }
.cmp-search .cmp-input {
  padding-left: calc(var(--space-3) + 18px + var(--space-2));
  border-radius: var(--radius-pill);
  background: var(--surface-card);
}
.cmp-search__clear {
  position: absolute; right: 8px; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: none; background: transparent; border-radius: 50%;
  color: var(--text-muted); cursor: pointer; transition: var(--transition-control);
}
.cmp-search__clear:hover { background: var(--gray-100); color: var(--text-strong); }

/* ---- Checkbox & radio ----------------------------------------------- */
.cmp-choice { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; user-select: none; }
.cmp-choice__control {
  position: relative; flex: none; width: 18px; height: 18px; margin-top: 1px;
  border: var(--border-width-strong) solid var(--border-strong);
  background: var(--surface-card);
  transition: var(--transition-control);
}
.cmp-choice--checkbox .cmp-choice__control { border-radius: 4px; }
.cmp-choice--radio .cmp-choice__control { border-radius: 50%; }
.cmp-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.cmp-choice:hover .cmp-choice__control { border-color: var(--blue-400); }
.cmp-choice input:focus-visible + .cmp-choice__control { box-shadow: var(--focus-ring); border-color: var(--border-focus); }
.cmp-choice input:checked + .cmp-choice__control { background: var(--blue-500); border-color: var(--blue-500); }
/* checkmark */
.cmp-choice--checkbox input:checked + .cmp-choice__control::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* radio dot */
.cmp-choice--radio input:checked + .cmp-choice__control::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; transform: translate(-50%, -50%);
}
.cmp-choice input:disabled + .cmp-choice__control { background: var(--surface-disabled); border-color: var(--border-default); }
.cmp-choice__label { font-size: var(--text-md); color: var(--text-body); line-height: 1.4; }
.cmp-choice__sub { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* ---- Switch --------------------------------------------------------- */
.cmp-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; user-select: none; }
.cmp-switch__track {
  position: relative; flex: none; width: 40px; height: 22px; border-radius: var(--radius-pill);
  background: var(--gray-300); transition: var(--transition-control);
}
.cmp-switch__thumb {
  position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--duration-fast) var(--ease-standard);
}
.cmp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cmp-switch input:checked + .cmp-switch__track { background: var(--blue-500); }
.cmp-switch input:checked + .cmp-switch__track .cmp-switch__thumb { transform: translateX(18px); }
.cmp-switch input:focus-visible + .cmp-switch__track { box-shadow: var(--focus-ring); }
.cmp-switch input:disabled + .cmp-switch__track { opacity: 0.5; }
.cmp-switch__label { font-size: var(--text-md); color: var(--text-body); }


/* ==========================================================================
   Compêndio — Cards & data table
   ========================================================================== */

/* ---- Card ----------------------------------------------------------- */
.cmp-card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-card);
}
.cmp-card--flat { box-shadow: none; }
.cmp-card--interactive { cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.cmp-card--interactive:hover { border-color: var(--border-default); box-shadow: var(--shadow-md); }
.cmp-card--interactive:active { box-shadow: var(--shadow-sm); }
.cmp-card--interactive:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--border-focus); }
.cmp-card__body { padding: var(--space-5); }
.cmp-card__header { padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cmp-card__footer { padding: var(--space-4) var(--space-5); border-top: var(--border-width) solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-3); }
.cmp-card__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong); }
.cmp-card--accent { border-left: 3px solid var(--blue-500); }

/* ---- Data table ----------------------------------------------------- */
.cmp-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cmp-table thead th {
  text-align: left;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--gray-50);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-default);
  white-space: nowrap;
}
.cmp-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
  color: var(--text-body);
  vertical-align: middle;
}
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.cmp-table--hover tbody tr:hover { background: var(--blue-50); }
.cmp-table--zebra tbody tr:nth-child(even) { background: var(--gray-50); }
.cmp-table--zebra.cmp-table--hover tbody tr:hover { background: var(--blue-50); }
.cmp-table__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.cmp-table__primary { font-weight: var(--weight-semibold); color: var(--text-strong); }
.cmp-table th.cmp-table__sortable { cursor: pointer; }
.cmp-table th.cmp-table__sortable:hover { color: var(--text-strong); }

/* ---- Empty state ---------------------------------------------------- */
.cmp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); color: var(--text-muted); }
.cmp-empty__icon { width: 40px; height: 40px; color: var(--gray-400); }
.cmp-empty__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-body); }
.cmp-empty__text { font-size: var(--text-sm); max-width: 42ch; }


/* ==========================================================================
   Compêndio — Feedback: alert, toast, dialog, tooltip
   ========================================================================== */

/* ---- Alert (inline banner) ------------------------------------------ */
.cmp-alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  border: var(--border-width) solid transparent;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.cmp-alert__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.cmp-alert__icon svg { width: 100%; height: 100%; }
.cmp-alert__body { flex: 1 1 auto; }
.cmp-alert__title { font-weight: var(--weight-semibold); color: var(--text-strong); margin-bottom: 2px; }
.cmp-alert__close { flex: none; background: transparent; border: none; cursor: pointer; color: var(--text-muted); width: 20px; height: 20px; padding: 0; }
.cmp-alert--info    { background: var(--status-info-surface);    border-color: var(--status-info-border);    color: var(--status-info-text); }
.cmp-alert--success { background: var(--status-success-surface); border-color: var(--status-success-border); color: var(--status-success-text); }
.cmp-alert--warning { background: var(--status-warning-surface); border-color: var(--status-warning-border); color: var(--status-warning-text); }
.cmp-alert--danger  { background: var(--status-danger-surface);  border-color: var(--status-danger-border);  color: var(--status-danger-text); }
.cmp-alert--info .cmp-alert__icon    { color: var(--status-info-solid); }
.cmp-alert--success .cmp-alert__icon { color: var(--status-success-solid); }
.cmp-alert--warning .cmp-alert__icon { color: var(--status-warning-solid); }
.cmp-alert--danger .cmp-alert__icon  { color: var(--status-danger-solid); }

/* ---- Toast ---------------------------------------------------------- */
.cmp-toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-width: 300px; max-width: 420px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-toast);
  font-size: var(--text-sm);
}
.cmp-toast__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.cmp-toast__icon svg { width: 100%; height: 100%; }
.cmp-toast--success .cmp-toast__icon { color: var(--green-300); }
.cmp-toast--danger .cmp-toast__icon { color: var(--red-300); }
.cmp-toast--info .cmp-toast__icon { color: var(--blue-300); }
.cmp-toast__title { font-weight: var(--weight-semibold); }
.cmp-toast__text { color: var(--gray-300); margin-top: 2px; }
.cmp-toast__close { margin-left: auto; background: transparent; border: none; color: var(--gray-400); cursor: pointer; width: 20px; height: 20px; flex: none; }
.cmp-toast__close:hover { color: #fff; }

/* ---- Dialog --------------------------------------------------------- */
.cmp-dialog-overlay {
  position: fixed; inset: 0; background: rgba(11, 26, 41, 0.55);
  display: flex; align-items: center; justify-content: center; padding: var(--space-6);
  z-index: 1000;
}
.cmp-dialog {
  width: 100%; max-width: 520px;
  background: var(--surface-card);
  border-radius: var(--radius-panel);
  box-shadow: var(--elevation-dialog);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 90vh;
}
.cmp-dialog__header { padding: var(--space-5) var(--space-6) var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); }
.cmp-dialog__heading { flex: 1 1 auto; }
.cmp-dialog__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--text-strong); }
.cmp-dialog__desc { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }
.cmp-dialog__close { flex: none; background: transparent; border: none; cursor: pointer; color: var(--text-muted); width: 28px; height: 28px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; }
.cmp-dialog__close:hover { background: var(--gray-100); color: var(--text-strong); }
.cmp-dialog__body { padding: 0 var(--space-6) var(--space-5); font-size: var(--text-md); color: var(--text-body); overflow-y: auto; }
.cmp-dialog__footer { padding: var(--space-4) var(--space-6); border-top: var(--border-width) solid var(--border-subtle); display: flex; justify-content: flex-end; gap: var(--space-3); background: var(--gray-50); }

/* ---- Tooltip -------------------------------------------------------- */
.cmp-tooltip { position: relative; display: inline-flex; }
.cmp-tooltip__bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--gray-900); color: #fff;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  white-space: nowrap; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transition: opacity var(--duration-fast) var(--ease-standard);
  pointer-events: none; z-index: 50;
}
.cmp-tooltip__bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--gray-900);
}
.cmp-tooltip:hover .cmp-tooltip__bubble,
.cmp-tooltip:focus-within .cmp-tooltip__bubble { opacity: 1; visibility: visible; }


/* ==========================================================================
   Compêndio — Navigation: tabs, breadcrumbs, pagination, sidebar
   ========================================================================== */

/* ---- Tabs ----------------------------------------------------------- */
.cmp-tabs { display: flex; gap: var(--space-1); border-bottom: var(--border-width) solid var(--border-subtle); }
.cmp-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-medium);
  color: var(--text-muted); background: transparent; border: none; cursor: pointer;
  padding: var(--space-3) var(--space-3); margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: var(--transition-control);
}
.cmp-tab:hover { color: var(--text-strong); }
.cmp-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.cmp-tab[aria-selected="true"] { color: var(--blue-700); border-bottom-color: var(--blue-500); font-weight: var(--weight-semibold); }
.cmp-tab__count { font-size: var(--text-xs); color: var(--text-subtle); background: var(--gray-100); padding: 1px 6px; border-radius: var(--radius-pill); }
.cmp-tab[aria-selected="true"] .cmp-tab__count { color: var(--blue-700); background: var(--blue-50); }

/* ---- Breadcrumbs ---------------------------------------------------- */
.cmp-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); }
.cmp-breadcrumbs__item { color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.cmp-breadcrumbs__item:hover { color: var(--text-link-hover); text-decoration: underline; }
.cmp-breadcrumbs__sep { color: var(--gray-400); display: inline-flex; width: 14px; height: 14px; }
.cmp-breadcrumbs__current { color: var(--text-strong); font-weight: var(--weight-semibold); white-space: nowrap; }

/* ---- Pagination ----------------------------------------------------- */
.cmp-pagination { display: flex; align-items: center; gap: var(--space-1); }
.cmp-pagination__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-body); background: transparent; border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-control);
}
.cmp-pagination__btn:hover { background: var(--gray-100); }
.cmp-pagination__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cmp-pagination__btn[aria-current="page"] { background: var(--blue-500); color: #fff; }
.cmp-pagination__btn:disabled { color: var(--text-disabled); cursor: not-allowed; }
.cmp-pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 36px; color: var(--text-subtle); }

/* ---- Sidebar nav ---------------------------------------------------- */
.cmp-sidenav { display: flex; flex-direction: column; gap: var(--space-1); }
.cmp-sidenav__group-label {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-subtle); padding: var(--space-3) var(--space-3) var(--space-1);
}
.cmp-sidenav__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-medium);
  color: var(--text-body); text-decoration: none; border-radius: var(--radius-sm);
  border: none; background: transparent; cursor: pointer; width: 100%; text-align: left;
  transition: var(--transition-control);
}
.cmp-sidenav__item:hover { background: var(--gray-100); color: var(--text-strong); }
.cmp-sidenav__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cmp-sidenav__icon { flex: none; width: 20px; height: 20px; color: var(--text-muted); display: inline-flex; }
.cmp-sidenav__icon svg { width: 100%; height: 100%; }
.cmp-sidenav__item[aria-current="page"] { background: var(--blue-50); color: var(--blue-700); font-weight: var(--weight-semibold); }
.cmp-sidenav__item[aria-current="page"] .cmp-sidenav__icon { color: var(--blue-600); }
.cmp-sidenav__badge { margin-left: auto; }

/* ---- Topbar --------------------------------------------------------- */
.cmp-topbar {
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--topbar-height); padding: 0 var(--space-6);
  background: var(--surface-card); border-bottom: var(--border-width) solid var(--border-subtle);
}