/* Gerado por node scripts/generate-design-system.mjs. Não editar. */

/* ---------------------------------------------------------------------------
   Tipografia da marca — família Passo (manual pp.16–18).
   Arquivos oficiais fornecidos pela Troca Pontos (pacote "2024-07-01 Passo
   TrocaPontos"), convertidos de TTF desktop para WOFF e servidos localmente
   a partir de src/fonts/passo/. Nenhum recurso tipográfico é carregado de
   origem externa.

   O arquivo variável cobre o intervalo 100–800 e atende à escala inteira com
   um único download; os estáticos permanecem declarados antes dele como
   fallback para navegadores sem suporte a font-variation-settings.

   Este pacote não traz WOFF2: o compressor Brotli não estava disponível no
   ambiente de build. Ver docs/design-system/tipografia.md.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Passo";
  src: url("assets/fonts/passo/Passo-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Passo";
  src: url("assets/fonts/passo/Passo-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Passo";
  src: url("assets/fonts/passo/Passo-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Passo";
  src: url("assets/fonts/passo/Passo-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@supports (font-variation-settings: normal) {
  @font-face {
    font-family: "Passo";
    src: url("assets/fonts/passo/Passo-Variable.woff") format("woff");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
  }
}
:root {
  --color-brand-primary: #6B0080;
  --color-brand-dark: #4B005A;
  --color-brand-mid: #81009B;
  --color-brand-accent: #D500FF;
  --color-brand-soft: #FAE4FF;
  --color-palette-orange: #FF5900;
  --color-palette-syracuse: #D04300;
  --color-palette-persimmon: #F35400;
  --color-palette-pumpkin: #FF7300;
  --color-palette-seashell: #FFF3ED;
  --color-palette-folly: #FF0056;
  --color-palette-crimson: #DB0049;
  --color-palette-amaranth: #EC004F;
  --color-palette-pink: #FF80AA;
  --color-palette-mimi: #FFDBE7;
  --color-palette-jonquil: #FFCE00;
  --color-palette-mikado: #FFC400;
  --color-palette-gold: #FFD324;
  --color-palette-mustard: #FFDB49;
  --color-palette-lemon: #FFF4C8;
  --color-palette-aquamarine: #00ECB5;
  --color-palette-sea: #009572;
  --color-palette-jungle: #00AA83;
  --color-palette-mint: #00C99A;
  --color-palette-azure: #EBFFFA;
  --color-palette-davys: #575757;
  --color-palette-battleship: #9B9B9B;
  --color-palette-silver: #C6C6C6;
  --color-palette-platinum: #E5E5E5;
  --color-palette-smoke: #F4F4F4;
  --color-ink: #25002D;
  --color-ui-success: #00664E;
  --color-ui-danger: #B0003B;
  --color-ui-warning: #765D00;
  --color-ui-dark-page: #19151C;
  --color-ui-dark-card: #251F29;
  --color-ui-dark-elevated: #332A39;
  --color-ui-dark-border: #938697;
  --spacing: 0.25rem;
  --radius-control: 0.5rem;
  --radius-panel: 0.75rem;
  --radius-editorial-sm: 12px;
  --radius-editorial-md: 18px;
  --radius-editorial-lg: 24px;
  --radius-editorial-xl: 32px;
  --radius-editorial-2xl: 42px;
  --container-institutional: 1200px;
  --container-reading: 70ch;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 800;
  --font-passo: "Passo", "Inter", system-ui, Arial, sans-serif;
  --font-inter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --breakpoint-2xsm: 375px;
  --breakpoint-xsm: 425px;
  --breakpoint-3xl: 2000px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --text-title-2xl: 72px;
  --text-title-2xl--line-height: 90px;
  --text-title-xl: 60px;
  --text-title-xl--line-height: 72px;
  --text-title-lg: 48px;
  --text-title-lg--line-height: 60px;
  --text-title-md: 36px;
  --text-title-md--line-height: 44px;
  --text-title-sm: 30px;
  --text-title-sm--line-height: 38px;
  --text-title-xs: 24px;
  --text-title-xs--line-height: 32px;
  --text-theme-xl: 20px;
  --text-theme-xl--line-height: 30px;
  --text-theme-sm: 14px;
  --text-theme-sm--line-height: 20px;
  --text-theme-xs: 12px;
  --text-theme-xs--line-height: 18px;
  --color-current: currentColor;
  --color-transparent: transparent;
  --color-white: #ffffff;
  --color-black: var(--color-ui-dark-page);
  --color-brand-25: #FDF5FF;
  --color-brand-50: var(--color-brand-soft);
  --color-brand-100: #F3CEFA;
  --color-brand-200: #E5ACEF;
  --color-brand-300: #D58AE3;
  --color-brand-400: #CA70DC;
  --color-brand-500: var(--color-brand-primary);
  --color-brand-600: var(--color-brand-mid);
  --color-brand-700: var(--color-brand-dark);
  --color-brand-800: #3D004A;
  --color-brand-900: #30003A;
  --color-brand-950: var(--color-ink);
  --color-blue-light-25: var(--color-brand-25);
  --color-blue-light-50: var(--color-brand-50);
  --color-blue-light-100: var(--color-brand-100);
  --color-blue-light-200: var(--color-brand-200);
  --color-blue-light-300: var(--color-brand-300);
  --color-blue-light-400: var(--color-brand-400);
  --color-blue-light-500: var(--color-brand-500);
  --color-blue-light-600: var(--color-brand-600);
  --color-blue-light-700: var(--color-brand-700);
  --color-blue-light-800: var(--color-brand-800);
  --color-blue-light-900: var(--color-brand-900);
  --color-blue-light-950: var(--color-brand-950);
  --color-gray-25: #FCFBFD;
  --color-gray-50: var(--color-palette-smoke);
  --color-gray-100: #F1EDF3;
  --color-gray-200: var(--color-palette-platinum);
  --color-gray-300: var(--color-palette-silver);
  --color-gray-400: #767078;
  --color-gray-500: var(--color-palette-davys);
  --color-gray-600: #4A424D;
  --color-gray-700: #3B333F;
  --color-gray-800: var(--color-ui-dark-elevated);
  --color-gray-900: var(--color-ui-dark-card);
  --color-gray-950: var(--color-ui-dark-page);
  --color-gray-dark: var(--color-ui-dark-card);
  --color-orange-25: var(--color-palette-seashell);
  --color-orange-50: var(--color-palette-seashell);
  --color-orange-100: #FFE0CF;
  --color-orange-200: #FFBC99;
  --color-orange-300: #FF945C;
  --color-orange-400: var(--color-palette-pumpkin);
  --color-orange-500: #A33800;
  --color-orange-600: #8F3100;
  --color-orange-700: #7A2900;
  --color-orange-800: #652200;
  --color-orange-900: #501B00;
  --color-orange-950: #3B1400;
  --color-success-25: var(--color-palette-azure);
  --color-success-50: var(--color-palette-azure);
  --color-success-100: #C4F7E9;
  --color-success-200: #98E9D5;
  --color-success-300: #64DABF;
  --color-success-400: var(--color-palette-aquamarine);
  --color-success-500: var(--color-ui-success);
  --color-success-600: var(--color-ui-success);
  --color-success-700: #00543F;
  --color-success-800: #004532;
  --color-success-900: #003728;
  --color-success-950: #00291D;
  --color-error-25: #FFF5F8;
  --color-error-50: var(--color-palette-mimi);
  --color-error-100: #FFD3E2;
  --color-error-200: #FFB1CB;
  --color-error-300: var(--color-palette-pink);
  --color-error-400: var(--color-palette-pink);
  --color-error-500: var(--color-ui-danger);
  --color-error-600: var(--color-ui-danger);
  --color-error-700: #970032;
  --color-error-800: #7C0029;
  --color-error-900: #620020;
  --color-error-950: #470017;
  --color-warning-25: #FFFBEF;
  --color-warning-50: var(--color-palette-lemon);
  --color-warning-100: #FFF0B2;
  --color-warning-200: #FFE78A;
  --color-warning-300: var(--color-palette-mustard);
  --color-warning-400: var(--color-palette-jonquil);
  --color-warning-500: var(--color-ui-warning);
  --color-warning-600: var(--color-ui-warning);
  --color-warning-700: #604B00;
  --color-warning-800: #4C3B00;
  --color-warning-900: #392C00;
  --color-warning-950: #271E00;
  --color-theme-pink-500: var(--color-palette-folly);
  --color-theme-purple-500: var(--color-brand-mid);
  --shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-theme-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-theme-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
    0px 1px 2px 0px rgba(16, 24, 40, 0.06);
  --shadow-theme-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-theme-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-datepicker: -5px 0 0 var(--color-ui-dark-elevated), 5px 0 0 var(--color-ui-dark-elevated);
  --shadow-focus-ring: 0px 0px 0px 4px color-mix(in srgb, var(--color-brand-primary) 18%, transparent);
  --shadow-slider-navigation: 0px 1px 2px 0px rgba(16, 24, 40, 0.1), 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
  --shadow-tooltip: 0px 4px 6px -2px rgba(16, 24, 40, 0.05),
    -8px 0px 20px 8px rgba(16, 24, 40, 0.05);
  --drop-shadow-4xl: 0 35px 35px rgba(0, 0, 0, 0.25), 0 45px 65px rgba(0, 0, 0, 0.15);
  --color-tp-purple: var(--color-brand-primary);
  --color-tp-russian-violet: var(--color-brand-dark);
  --color-tp-mauveine: var(--color-brand-mid);
  --color-tp-phlox: var(--color-brand-accent);
  --color-tp-pale-purple: var(--color-brand-soft);
  --color-tp-orange: var(--color-palette-orange);
  --color-tp-syracuse-orange: var(--color-palette-syracuse);
  --color-tp-persimmon: var(--color-palette-persimmon);
  --color-tp-pumpkin: var(--color-palette-pumpkin);
  --color-tp-seashell: var(--color-palette-seashell);
  --color-tp-folly: var(--color-palette-folly);
  --color-tp-crimson: var(--color-palette-crimson);
  --color-tp-amaranth: var(--color-palette-amaranth);
  --color-tp-tickle-me-pink: var(--color-palette-pink);
  --color-tp-mimi-pink: var(--color-palette-mimi);
  --color-tp-jonquil: var(--color-palette-jonquil);
  --color-tp-mikado-yellow: var(--color-palette-mikado);
  --color-tp-gold: var(--color-palette-gold);
  --color-tp-mustard: var(--color-palette-mustard);
  --color-tp-lemon-chiffon: var(--color-palette-lemon);
  --color-tp-aquamarine: var(--color-palette-aquamarine);
  --color-tp-sea-green: var(--color-palette-sea);
  --color-tp-jungle-green: var(--color-palette-jungle);
  --color-tp-mint: var(--color-palette-mint);
  --color-tp-azure: var(--color-palette-azure);
  --color-tp-davys-gray: var(--color-palette-davys);
  --color-tp-battleship-gray: var(--color-palette-battleship);
  --color-tp-silver: var(--color-palette-silver);
  --color-tp-platinum: var(--color-palette-platinum);
  --color-tp-white-smoke: var(--color-palette-smoke);
  --color-brand-ramp-1: var(--color-brand-dark);
  --color-brand-ramp-2: #65007A;
  --color-brand-ramp-3: #7E0098;
  --color-brand-ramp-4: #9700B5;
  --color-brand-ramp-5: #AF00D1;
  --color-brand-proof-dark: #40004F;
  --tp-gradient-deep: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-dark) 100%);
  --tp-gradient-primary: linear-gradient(135deg, var(--color-brand-mid) 0%, var(--color-brand-primary) 100%);
  --tp-gradient-vivid: linear-gradient(135deg, var(--color-brand-accent) 0%, var(--color-brand-mid) 100%);
  --tp-gradient-royal: linear-gradient(135deg, var(--color-brand-mid) 0%, var(--color-brand-dark) 100%);
  --tp-gradient-bright: linear-gradient(135deg, var(--color-brand-accent) 0%, var(--color-brand-primary) 100%);
  --z-index-1: 1;
  --z-index-9: 9;
  --z-index-99: 99;
  --z-index-999: 999;
  --z-index-9999: 9999;
  --z-index-99999: 99999;
  --z-index-999999: 999999;
}

:root {
  color-scheme: light;
  --tp-text: var(--color-ink);
  --tp-muted: var(--color-palette-davys);
  --tp-page: #FAF8FB;
  --tp-surface: var(--color-white);
  --tp-elevated: var(--color-white);
  --tp-border: var(--color-palette-platinum);
  --tp-border-strong: #807184;
  --tp-action: var(--color-brand-primary);
  --tp-action-hover: var(--color-brand-dark);
  --tp-on-action: var(--color-white);
  --tp-danger-action: var(--color-ui-danger);
  --tp-on-danger: var(--color-white);
  --tp-accent-action: var(--color-palette-jonquil);
  --tp-on-accent: var(--color-brand-dark);
  --tp-on-dark: var(--color-white);
  --tp-focus: var(--color-brand-primary);
  --tp-soft: var(--color-brand-soft);
  --tp-info: var(--color-brand-primary);
  --tp-success: var(--color-ui-success);
  --tp-success-soft: var(--color-palette-azure);
  --tp-danger: var(--color-ui-danger);
  --tp-danger-soft: var(--color-palette-mimi);
  --tp-warning: var(--color-ui-warning);
  --tp-warning-soft: var(--color-palette-lemon);
  --tp-inverse-surface: var(--color-brand-dark);
  --tp-chart-1: var(--color-brand-primary);
  --tp-chart-2: var(--color-palette-sea);
  --tp-chart-3: var(--color-palette-syracuse);
  --tp-chart-4: var(--color-brand-mid);
  --tp-chart-5: var(--color-palette-crimson);
  --tp-chart-6: var(--color-ui-warning);
  --tp-chart-text: var(--tp-muted);
  --tp-chart-grid: var(--tp-border);
  --tp-tooltip-bg: var(--color-ink);
  --tp-tooltip-text: var(--color-white);
  --tp-space-1: 4px;
  --tp-space-2: 8px;
  --tp-space-3: 12px;
  --tp-space-4: 16px;
  --tp-space-5: 24px;
  --tp-space-6: 32px;
  --tp-space-7: 48px;
  --tp-section-mobile: 68px;
  --tp-section-tablet: 82px;
  --tp-section-desktop: 104px;
  --tp-radius: var(--radius-control);
  --tp-card-radius: var(--radius-panel);
  --tp-control-height: 44px;
  --tp-cell-padding: 16px;
  --tp-font-body: 14px;
  --tp-font-small: 12px;
  --tp-line-height: 1.5;
  --tp-tracking-heading: -0.035em;
  --tp-border-width: 1px;
  --tp-focus-width: 3px;
  --tp-focus-offset: 3px;
  --tp-disabled-opacity: 0.55;
  --tp-shadow: 0 8px 24px color-mix(in srgb, var(--color-brand-dark) 8%, transparent);
  --tp-shadow-float: 0 20px 56px color-mix(in srgb, var(--color-brand-dark) 18%, transparent);
  --tp-overlay: color-mix(in srgb, var(--color-brand-dark) 55%, transparent); /* V21 22/09/2026: veu roxo, decidido pela marca */
  --tp-z-menu: 50;
  --tp-z-dialog: 100000;
  --tp-z-toast: 100001;
  --tp-duration: 160ms;
  --tp-easing: ease-out;
  /* p.11 imprime "6 cm | 170 px" duas vezes, e as duas reguas medem coisas
     diferentes. Na versao principal os 170 px sao o wordmark nu (170,11 un
     medidos). Na preferencial sao a caixa cheia (170,08 un), com o wordmark em
     apenas 128,23 un dentro dela. Sao dois minimos, e o sistema declara os
     dois em vez de fundir um no outro. */
  --tp-logo-width: 170px;
  /* p.10, medida em vetor. O "t" que a prancha desenha como marcador de
     reserva ocupa 48,47 un num wordmark de 296,90 un = 0,163254. Confirmado na
     p.11, onde a caixa da preferencial deixa 20,93 un de sobra num wordmark de
     128,23 un = 0,163224. Nao e a altura do "t" do wordmark (37,13 un =
     0,125059): o marcador desenhado e 1,305x maior nos dois eixos, e foi essa
     confusao que produziu os 24 px anteriores — 0,14118, 13,5% abaixo da
     norma. A 170 px a reserva correta e 27,75 px por lado. */
  --tp-logo-protection-ratio: 0.163254;
  --tp-logo-protection: calc(var(--tp-logo-width) * var(--tp-logo-protection-ratio));
  /* Minimo da versao preferencial: a caixa inteira em 170 px. O wordmark
     dentro dela vale 170 / (1 + 2 x 0,163254) = 128,15 px, que e a medida da
     prancha (128,23) com 0,06% de diferenca. */
  /* Escala de exibicao da marca onde ela e o assunto da peca (painel de
     autenticacao). E tamanho, nao norma: os 170 px da p.11 sao o minimo, e a
     area de protecao, sendo fracao, acompanha qualquer escala. */
  --tp-logo-width-hero: 220px;
  --tp-logo-lockup-width: 170px;
  --tp-logo-lockup-wordmark: calc(var(--tp-logo-lockup-width) / (1 + 2 * var(--tp-logo-protection-ratio)));
  /* p.07, medida em vetor por dois caminhos independentes: raio interno
     394,67 un (extremos horizontais 459,82 e 1249,16), diametro externo
     1273,04 un (largura do `getBBox` do proprio anel), logo faixa de
     241,84 un — confirmada por varredura de `isPointInFill` no eixo do centro,
     que devolve 241,84. Faixa / diametro = 0,189979. Os 205,49 un que se leem
     direto do `d` sao so o trecho *reto* da ponta da faixa: faltam ali os dois
     cantos arredondados de 18,18 un (205,49 + 2 x 18,18 = 241,85). A faixa
     deixa de ser pixel por escala e passa a ser a fracao medida, para as tres
     escalas errarem juntas ou acertarem juntas. */
  --tp-graphic-arc-ratio: 0.189979;
  /* Grade de desenho de icone, manual pp.22-24, texto literal: 24x24 px dentro
     de um artboard de 48x48 px, cantos arredondados entre 1 px e 4 px e 2 px de
     espessura de tracado. Eram numeros que so existiam em prosa; viram token
     para que quem desenhar um icone da marca encontre a grade no sistema. */
  --tp-icon-grid: 24px;
  --tp-icon-artboard: 48px;
  --tp-icon-stroke: 2;
  --tp-icon-corner-min: 1px;
  --tp-icon-corner-max: 4px;

  /* Camada semântica oficial: primitives → funções → componentes. */
  --tp-surface-page: var(--tp-page);
  --tp-surface-card: var(--tp-surface);
  --tp-surface-elevated: var(--tp-elevated);
  --tp-surface-inverse: var(--tp-inverse-surface);
  --tp-text-primary: var(--tp-text);
  --tp-text-secondary: var(--tp-muted);
  --tp-text-muted: var(--tp-muted);
  --tp-text-inverse: var(--tp-on-dark);
  --tp-border-default: var(--tp-border);
  --tp-border-subtle: var(--color-palette-platinum);
  --tp-action-primary: var(--tp-action);
  --tp-action-primary-hover: var(--tp-action-hover);
  --tp-action-primary-active: var(--color-brand-dark);
  --tp-action-primary-disabled: color-mix(in srgb, var(--tp-action) 55%, var(--tp-surface));
  --tp-action-primary-foreground: var(--tp-on-action);
  --tp-status-success-foreground: var(--tp-success);
  --tp-status-success-background: var(--tp-success-soft);
  --tp-status-success-border: var(--tp-success);
  --tp-status-warning-foreground: var(--tp-warning);
  --tp-status-warning-background: var(--tp-warning-soft);
  --tp-status-warning-border: var(--tp-warning);
  --tp-status-danger-foreground: var(--tp-danger);
  --tp-status-danger-background: var(--tp-danger-soft);
  --tp-status-danger-border: var(--tp-danger);
  --tp-status-info-foreground: var(--tp-info);
  --tp-status-info-background: var(--tp-soft);
  --tp-status-info-border: var(--tp-info);
  --tp-space-0: 0;
  --tp-space-half: 2px;
  --tp-space-8: 64px;
  --tp-space-9: 80px;
  --tp-radius-none: 0;
  --tp-radius-xs: 4px;
  --tp-radius-sm: 6px;
  --tp-radius-md: var(--tp-radius);
  --tp-radius-lg: var(--tp-card-radius);
  --tp-radius-xl: 18px;
  --tp-radius-2xl: 20px;
  --tp-radius-3xl: 24px;
  --tp-radius-full: 999px;
  --tp-elevation-0: none;
  --tp-elevation-1: var(--tp-shadow);
  --tp-elevation-2: var(--tp-shadow-float);
  --tp-elevation-3: 0 28px 80px color-mix(in srgb, var(--color-brand-dark) 24%, transparent);
  --tp-elevation-overlay: var(--tp-shadow-float);
  --tp-duration-fast: 120ms;
  --tp-duration-normal: var(--tp-duration);
  --tp-duration-slow: 240ms;
  --tp-easing-standard: ease;
  --tp-easing-enter: var(--tp-easing);
  --tp-easing-exit: cubic-bezier(.4, 0, 1, 1);
  --tp-breakpoint-mobile: 620px;
  --tp-breakpoint-tablet: 860px;
  --tp-breakpoint-desktop: 1120px;
  --tp-breakpoint-wide: 1440px;

  --tp-type-display-lg-family: var(--font-passo);
  --tp-type-display-lg-size: clamp(2.75rem, 7vw, 6.5rem);
  --tp-type-display-lg-weight: 700;
  --tp-type-display-lg-line-height: 1.02;
  --tp-type-display-lg-letter-spacing: -0.055em;
  --tp-type-display-md-family: var(--font-passo);
  --tp-type-display-md-size: clamp(2.25rem, 5vw, 4.5rem);
  --tp-type-display-md-weight: 700;
  --tp-type-display-md-line-height: 1.06;
  --tp-type-display-md-letter-spacing: -0.045em;
  --tp-type-heading-xl-family: var(--font-passo);
  --tp-type-heading-xl-size: clamp(2rem, 3.5vw, 3rem);
  --tp-type-heading-xl-weight: 700;
  --tp-type-heading-xl-line-height: 1.1;
  --tp-type-heading-xl-letter-spacing: -0.04em;
  --tp-type-heading-lg-family: var(--font-passo);
  --tp-type-heading-lg-size: clamp(1.75rem, 2.8vw, 2.25rem);
  --tp-type-heading-lg-weight: 700;
  --tp-type-heading-lg-line-height: 1.15;
  --tp-type-heading-lg-letter-spacing: -0.035em;
  --tp-type-heading-md-family: var(--font-passo);
  --tp-type-heading-md-size: 1.5rem;
  --tp-type-heading-md-weight: 700;
  --tp-type-heading-md-line-height: 1.2;
  --tp-type-heading-md-letter-spacing: -0.025em;
  --tp-type-heading-sm-family: var(--font-passo);
  --tp-type-heading-sm-size: 1.125rem;
  --tp-type-heading-sm-weight: 700;
  --tp-type-heading-sm-line-height: 1.3;
  --tp-type-heading-sm-letter-spacing: -0.015em;
  --tp-type-body-lg-family: var(--font-inter);
  --tp-type-body-lg-size: 1.125rem;
  --tp-type-body-lg-weight: 400;
  --tp-type-body-lg-line-height: 1.6;
  --tp-type-body-lg-letter-spacing: 0;
  --tp-type-body-md-family: var(--font-inter);
  --tp-type-body-md-size: 1rem;
  --tp-type-body-md-weight: 400;
  --tp-type-body-md-line-height: 1.5;
  --tp-type-body-md-letter-spacing: 0;
  --tp-type-body-sm-family: var(--font-inter);
  --tp-type-body-sm-size: 0.875rem;
  --tp-type-body-sm-weight: 400;
  --tp-type-body-sm-line-height: 1.5;
  --tp-type-body-sm-letter-spacing: 0;
  --tp-type-label-lg-family: var(--font-inter);
  --tp-type-label-lg-size: 0.9375rem;
  --tp-type-label-lg-weight: 600;
  --tp-type-label-lg-line-height: 1.35;
  --tp-type-label-lg-letter-spacing: 0;
  --tp-type-label-md-family: var(--font-inter);
  --tp-type-label-md-size: 0.875rem;
  --tp-type-label-md-weight: 600;
  --tp-type-label-md-line-height: 1.35;
  --tp-type-label-md-letter-spacing: 0;
  --tp-type-label-sm-family: var(--font-inter);
  --tp-type-label-sm-size: 0.75rem;
  --tp-type-label-sm-weight: 700;
  --tp-type-label-sm-line-height: 1.4;
  --tp-type-label-sm-letter-spacing: 0.04em;
  --tp-type-caption-family: var(--font-inter);
  --tp-type-caption-size: 0.6875rem;
  --tp-type-caption-weight: 500;
  --tp-type-caption-line-height: 1.4;
  --tp-type-caption-letter-spacing: 0.02em;

  /* Fundacao: alias que o portal ja consumia sem declaracao. */
  --tp-action-soft: var(--tp-soft);

  /* Elevacao por papel: os componentes deixam de citar --shadow-theme-* do
     TailAdmin diretamente e passam pela camada semantica. */
  --tp-elevation-menu: var(--shadow-theme-lg);
  --tp-elevation-tooltip: var(--shadow-theme-md);
  --tp-elevation-dialog: var(--shadow-theme-xl);

  /* Escala de empilhamento completa; os literais 30/35/40/45/999999 saem. */
  --tp-z-dropdown: 30;
  --tp-z-popover: 35;
  --tp-z-sticky: 40;
  --tp-z-overlay: 99999;
  --tp-z-drawer: 100000;
  --tp-z-preloader: 999999;

  /* Estados por variante de botao: o disabled deixa de ser sempre roxo. */
  --tp-action-secondary-disabled: var(--tp-surface);
  --tp-action-tertiary-disabled: transparent;
  --tp-action-danger-hover: color-mix(in srgb, var(--tp-danger-action) 85%, var(--color-ink));
  --tp-action-danger-active: color-mix(in srgb, var(--tp-danger-action) 72%, var(--color-ink));
  --tp-action-danger-disabled: color-mix(in srgb, var(--tp-danger-action) 55%, var(--tp-surface));
  --tp-action-accent-hover: color-mix(in srgb, var(--tp-accent-action) 88%, var(--color-ink));
  --tp-action-accent-active: color-mix(in srgb, var(--tp-accent-action) 78%, var(--color-ink));
  --tp-action-accent-disabled: color-mix(in srgb, var(--tp-accent-action) 55%, var(--tp-surface));
  --tp-action-inverse-hover: color-mix(in srgb, var(--color-white) 88%, var(--color-brand-dark));
  --tp-action-inverse-active: color-mix(in srgb, var(--color-white) 78%, var(--color-brand-dark));
  --tp-action-inverse-disabled: color-mix(in srgb, var(--color-white) 55%, var(--tp-surface));

  /* Componentes novos. */
  --tp-component-toast-width: 22rem;
  --tp-component-toast-gap: var(--tp-space-3);
  --tp-component-field-height-sm: var(--tp-component-button-height-sm);
  --tp-component-field-height-md: var(--tp-component-field-min-height);
  --tp-component-field-height-lg: var(--tp-component-button-height-lg);
  --tp-component-pagination-size: 2.25rem;
  --tp-component-skeleton-speed: 1400ms;
  --tp-component-button-primary-background: var(--tp-action-primary);
  --tp-component-button-primary-foreground: var(--tp-action-primary-foreground);
  --tp-component-button-primary-hover: var(--tp-action-primary-hover);
  --tp-component-button-primary-active: var(--tp-action-primary-active);
  --tp-component-button-height-sm: 36px;
  --tp-component-button-height-md: var(--tp-control-height);
  --tp-component-button-height-lg: 52px;
  --tp-component-field-min-height: var(--tp-control-height);
  --tp-component-card-radius: var(--tp-radius-xl);
  --tp-component-inbox-list-width: 21rem;
  --tp-component-contact-width: 20rem;
  --tp-component-message-max-width: 44rem;
  --tp-component-composer-min-height: 7rem;
  --tp-component-focus-ring: var(--tp-focus-width) solid var(--tp-focus);
}
.dark, [data-theme="dark"] {
  color-scheme: dark;
  --tp-text: #F6F0F8;
  --tp-muted: #D0C6D4;
  --tp-page: var(--color-ui-dark-page);
  --tp-surface: var(--color-ui-dark-card);
  --tp-elevated: var(--color-ui-dark-elevated);
  --tp-border: #4D4153;
  --tp-border-strong: var(--color-ui-dark-border);
  --tp-action: #EDBAF7;
  --tp-action-hover: var(--color-brand-soft);
  --tp-on-action: var(--color-brand-dark);
  --tp-focus: #EDBAF7;
  --tp-soft: #39203F;
  --tp-info: #EDBAF7;
  --tp-success: #80E4CC;
  --tp-success-soft: #123E33;
  --tp-danger: #FFABC6;
  --tp-danger-soft: #501B30;
  --tp-warning: var(--color-palette-mustard);
  --tp-warning-soft: #423700;
  --tp-border-subtle: #4D4153;
  --tp-action-primary-active: var(--color-brand-soft);
  --tp-chart-1: #EDBAF7;
  --tp-chart-2: var(--color-palette-aquamarine);
  --tp-chart-3: var(--color-orange-200);
  --tp-chart-4: var(--color-brand-400);
  --tp-chart-5: var(--color-palette-pink);
  --tp-chart-6: var(--color-palette-mustard);
  --tp-chart-text: var(--tp-muted);
  --tp-chart-grid: var(--tp-border);
  /* No tema escuro o realce caminha para o branco, nao para a tinta. */
  --tp-action-danger-hover: color-mix(in srgb, var(--tp-danger-action) 85%, var(--color-white));
  --tp-action-danger-active: color-mix(in srgb, var(--tp-danger-action) 72%, var(--color-white));
  --tp-action-accent-hover: color-mix(in srgb, var(--tp-accent-action) 88%, var(--color-white));
  --tp-action-accent-active: color-mix(in srgb, var(--tp-accent-action) 78%, var(--color-white));
  --tp-action-inverse-hover: color-mix(in srgb, var(--color-white) 88%, var(--color-brand-dark));
  --tp-action-inverse-active: color-mix(in srgb, var(--color-white) 78%, var(--color-brand-dark));
  --tp-elevation-menu: 0 12px 32px color-mix(in srgb, #000000 55%, transparent);
  --tp-elevation-tooltip: 0 6px 18px color-mix(in srgb, #000000 50%, transparent);
  --tp-elevation-dialog: 0 28px 64px color-mix(in srgb, #000000 62%, transparent);
  --tp-tooltip-bg: var(--color-ui-dark-elevated);
  --tp-tooltip-text: var(--tp-text);
  /* Alias redeclarado: calculado so no :root, ele guardaria o anel do tema claro
     quando o tema escuro vier de um conteiner. */
  --tp-component-focus-ring: var(--tp-focus-width) solid var(--tp-focus);
}
[data-density="compact"] {
  --tp-control-height: 36px;
  --tp-cell-padding: 8px;
  --tp-font-body: 13px;
  /* Aliases que leem a altura de controle. Declarados so no :root, eles sao
     calculados uma vez ali e ignoram a densidade aplicada a um conteiner:
     botao e campo ficavam em 44px no modo compacto. */
  --tp-component-button-height-md: var(--tp-control-height);
  --tp-component-field-min-height: var(--tp-control-height);
  --tp-component-field-height-md: var(--tp-component-field-min-height);
}
[data-profile="institutional"] {
  --tp-control-height: 50px;
  --tp-card-radius: var(--radius-editorial-lg);
  --tp-radius: var(--radius-editorial-sm);
  --tp-font-body: 16px;
}
/* Contexto: superficie de marca. Sobre o gradiente e o Russian violet o foco
   roxo do tema claro some (1,15 a 1,34:1); ali o anel passa a branco nos dois
   temas. O alias do anel vai junto porque e calculado no elemento que o declara.
   Superficie clara aninhada volta ao foco do tema (igual a --tp-action). */
.tp-hero, .tp-inverse-stage, .tp-journey, .tp-graphic-gradient, .tp-graphic-on-brand, .tp-brand-panel {
  --tp-focus: var(--color-white);
  --tp-component-focus-ring: var(--tp-focus-width) solid var(--tp-focus);
}
:is(.tp-hero, .tp-inverse-stage, .tp-journey, .tp-graphic-gradient, .tp-graphic-on-brand, .tp-brand-panel) :is(.tp-card, .tp-journey-card) {
  --tp-focus: var(--tp-action);
  --tp-component-focus-ring: var(--tp-focus-width) solid var(--tp-focus);
}

.tp-brand { display: inline-flex; flex: none; align-items: center; justify-content: center; padding: var(--tp-logo-protection); min-inline-size: calc(var(--tp-logo-width) + 2 * var(--tp-logo-protection)); background: var(--color-white); border-radius: var(--tp-radius); }
.tp-brand img { display:block; inline-size: var(--tp-logo-width); min-inline-size:var(--tp-logo-width); block-size:auto; max-inline-size:none; object-fit:contain; flex:none; }
/* A versao preferencial da p.11 e este mesmo bloco no seu minimo: a caixa em
   170 px, e o wordmark dentro dela no que sobra depois da area de protecao.
   `.tp-brand` sozinho aplica o minimo da versao *principal* (wordmark de
   170 px), que entrega uma caixa de 225,5 px — acima do minimo, nunca abaixo. */
/* No painel de autenticacao a marca e o assunto da peca, entao ela sobe de
   escala. 170 px e o minimo da p.11, nao o tamanho; a area de protecao e
   fracao da largura e acompanha sozinha (220 x 0,163254 = 35,9 px). */
.tp-brand-panel .tp-brand { padding: calc(var(--tp-logo-width-hero) * var(--tp-logo-protection-ratio)); min-inline-size: calc(var(--tp-logo-width-hero) + 2 * var(--tp-logo-width-hero) * var(--tp-logo-protection-ratio)); }
.tp-brand-panel .tp-brand img { inline-size: var(--tp-logo-width-hero); min-inline-size: var(--tp-logo-width-hero); }
.tp-brand-lockup-min { min-inline-size: var(--tp-logo-lockup-width); padding: calc(var(--tp-logo-lockup-wordmark) * var(--tp-logo-protection-ratio)); }
.tp-brand-lockup-min img { inline-size: var(--tp-logo-lockup-wordmark); min-inline-size: var(--tp-logo-lockup-wordmark); }
/* Os cinco fundos autorizados da versao secundaria negativa (p.8). A reserva
   em volta do wordmark e a mesma area de protecao da p.10, para que a faixa
   nao seja so uma tarja de cor. */
/* Palco para comparar os dois minimos da p.11. A caixa de `.tp-brand` e branca
   e some sobre o cartao branco: o palco escurece o fundo para que a *caixa*
   apareca, que e justamente o que se esta comparando. A cota marca a largura
   total de cada construcao. */
.tp-logo-minimo { display: grid; justify-items: center; gap: var(--tp-space-3); padding: var(--tp-space-5); border-radius: var(--tp-radius); background: var(--color-brand-soft); }
.tp-logo-minimo .tp-brand { box-shadow: var(--tp-shadow); }
.tp-logo-minimo b { display: block; font-size: var(--tp-type-caption-size); font-weight: var(--tp-type-label-md-weight); color: var(--color-brand-dark); }
/* Tira de prova da p.32: as primarias sobre o fundo escuro contra o qual o
   manual valida as secundarias. So o Russian violet e proibido ali, e a prancha
   marca essa unica excecao com o simbolo de proibicao. */
.tp-prova-escura { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-4); padding: var(--tp-space-5); border-radius: var(--tp-radius); background: var(--color-brand-proof-dark); color: var(--color-white); }
.tp-prova-escura figure { display: grid; justify-items: center; gap: var(--tp-space-2); margin: 0; font-size: var(--tp-type-caption-size); }
.tp-prova-escura i { display: block; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--tp-radius-full); }
.tp-prova-escura figure[data-proibido] i { outline: 2px solid var(--color-white); outline-offset: 2px; opacity: .55; }
.tp-prova-escura figure[data-proibido] figcaption { text-decoration: line-through; }
.tp-fundos-negativa { display: grid; gap: var(--tp-space-3); }
.tp-fundos-negativa > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tp-space-3); padding: calc(var(--tp-logo-lockup-wordmark) * var(--tp-logo-protection-ratio)) var(--tp-space-5); border-radius: var(--tp-radius); background: var(--color-brand-ramp-1); }
.tp-fundos-negativa > div:nth-child(2) { background: var(--color-brand-ramp-2); }
.tp-fundos-negativa > div:nth-child(3) { background: var(--color-brand-ramp-3); }
.tp-fundos-negativa > div:nth-child(4) { background: var(--color-brand-ramp-4); }
.tp-fundos-negativa > div:nth-child(5) { background: var(--color-brand-ramp-5); }
.tp-fundos-negativa img { display: block; inline-size: var(--tp-logo-lockup-wordmark); block-size: auto; }
.tp-fundos-negativa span { font-size: var(--tp-type-caption-size); color: var(--color-white); }
.tp-fundos-negativa code { color: inherit; background: none; }
.tp-brand .tp-brand-negative { display:none; }
.dark .tp-brand, [data-theme="dark"] .tp-brand, .tp-brand-inverse { background: var(--color-brand-dark); }
.dark .tp-brand .tp-brand-positive, [data-theme="dark"] .tp-brand .tp-brand-positive, .tp-brand-inverse .tp-brand-positive { display:none; }
.dark .tp-brand .tp-brand-negative, [data-theme="dark"] .tp-brand .tp-brand-negative, .tp-brand-inverse .tp-brand-negative { display:block; }
/* Versao preferencial negativa quando o painel que a recebe ja e o campo roxo
   (manual p.5): a reserva continua sendo a da p.10, mas a caixa nao pinta fundo
   proprio — pintar desenharia um retangulo dentro de outro. */
.tp-brand.tp-brand-field { background: none; border-radius: 0; }
.tp-core { font-synthesis:none; margin:0; background:var(--tp-page); color:var(--tp-text); font:var(--tp-font-body)/var(--tp-line-height) var(--font-inter); }
.tp-core *, .tp-core *::before, .tp-core *::after { box-sizing:border-box; }
.tp-core h1,.tp-core h2,.tp-core h3 { color:var(--tp-text); font-weight:700; letter-spacing:var(--tp-tracking-heading); }
.tp-core img { max-inline-size:100%; block-size:auto; }
:where(.tp-core a) { color:var(--tp-action); text-underline-offset:0.2em; }
.tp-core :focus-visible, :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline:var(--tp-component-focus-ring); outline-offset:var(--tp-focus-offset); }
.tp-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tp-skip { position:fixed; inset-block-start:-10rem; inset-inline-start:var(--tp-space-4); z-index:var(--tp-z-preloader); background:var(--tp-surface); color:var(--tp-action); padding:var(--tp-space-4); }
.tp-skip:focus { inset-block-start:var(--tp-space-4); }
.tp-demo-banner { padding:var(--tp-space-2) var(--tp-space-4); background:var(--tp-soft); color:var(--tp-info); font:var(--tp-font-small)/1.5 var(--font-inter); text-align:center; }
.tp-font-note { font-size:var(--tp-font-small); color:var(--tp-muted); }
.tp-standalone { max-inline-size:var(--container-institutional); margin-inline:auto; padding:var(--tp-space-5); }
.tp-standalone main { display:grid; gap:var(--tp-space-5); }
.tp-standalone header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--tp-space-4); }
.tp-caption { color:var(--tp-muted); }
[hidden], [x-cloak] { display:none !important; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } }
[data-scroll-limit="options"] { max-height:16rem; }
/* ---------------------------------------------------------------------------
   Escala tipografica publicada: 13 degraus consumindo os 65 tokens
   --tp-type-*. Ate aqui os tokens existiam sem nenhuma classe que os lesse.
   --------------------------------------------------------------------------- */
.tp-display-lg { font-family: var(--tp-type-display-lg-family); font-size: var(--tp-type-display-lg-size); font-weight: var(--tp-type-display-lg-weight); line-height: var(--tp-type-display-lg-line-height); letter-spacing: var(--tp-type-display-lg-letter-spacing); }
.tp-display-md { font-family: var(--tp-type-display-md-family); font-size: var(--tp-type-display-md-size); font-weight: var(--tp-type-display-md-weight); line-height: var(--tp-type-display-md-line-height); letter-spacing: var(--tp-type-display-md-letter-spacing); }
.tp-heading-xl { font-family: var(--tp-type-heading-xl-family); font-size: var(--tp-type-heading-xl-size); font-weight: var(--tp-type-heading-xl-weight); line-height: var(--tp-type-heading-xl-line-height); letter-spacing: var(--tp-type-heading-xl-letter-spacing); }
.tp-heading-lg { font-family: var(--tp-type-heading-lg-family); font-size: var(--tp-type-heading-lg-size); font-weight: var(--tp-type-heading-lg-weight); line-height: var(--tp-type-heading-lg-line-height); letter-spacing: var(--tp-type-heading-lg-letter-spacing); }
.tp-heading-md { font-family: var(--tp-type-heading-md-family); font-size: var(--tp-type-heading-md-size); font-weight: var(--tp-type-heading-md-weight); line-height: var(--tp-type-heading-md-line-height); letter-spacing: var(--tp-type-heading-md-letter-spacing); }
.tp-heading-sm { font-family: var(--tp-type-heading-sm-family); font-size: var(--tp-type-heading-sm-size); font-weight: var(--tp-type-heading-sm-weight); line-height: var(--tp-type-heading-sm-line-height); letter-spacing: var(--tp-type-heading-sm-letter-spacing); }
.tp-body-lg { font-family: var(--tp-type-body-lg-family); font-size: var(--tp-type-body-lg-size); font-weight: var(--tp-type-body-lg-weight); line-height: var(--tp-type-body-lg-line-height); letter-spacing: var(--tp-type-body-lg-letter-spacing); }
.tp-body-md { font-family: var(--tp-type-body-md-family); font-size: var(--tp-type-body-md-size); font-weight: var(--tp-type-body-md-weight); line-height: var(--tp-type-body-md-line-height); letter-spacing: var(--tp-type-body-md-letter-spacing); }
.tp-body-sm { font-family: var(--tp-type-body-sm-family); font-size: var(--tp-type-body-sm-size); font-weight: var(--tp-type-body-sm-weight); line-height: var(--tp-type-body-sm-line-height); letter-spacing: var(--tp-type-body-sm-letter-spacing); }
.tp-label-lg { font-family: var(--tp-type-label-lg-family); font-size: var(--tp-type-label-lg-size); font-weight: var(--tp-type-label-lg-weight); line-height: var(--tp-type-label-lg-line-height); letter-spacing: var(--tp-type-label-lg-letter-spacing); }
.tp-label-md { font-family: var(--tp-type-label-md-family); font-size: var(--tp-type-label-md-size); font-weight: var(--tp-type-label-md-weight); line-height: var(--tp-type-label-md-line-height); letter-spacing: var(--tp-type-label-md-letter-spacing); }
.tp-label-sm { font-family: var(--tp-type-label-sm-family); font-size: var(--tp-type-label-sm-size); font-weight: var(--tp-type-label-sm-weight); line-height: var(--tp-type-label-sm-line-height); letter-spacing: var(--tp-type-label-sm-letter-spacing); }
.tp-caption { font-family: var(--tp-type-caption-family); font-size: var(--tp-type-caption-size); font-weight: var(--tp-type-caption-weight); line-height: var(--tp-type-caption-line-height); letter-spacing: var(--tp-type-caption-letter-spacing); }
.tp-display-lg, .tp-display-md, .tp-heading-xl, .tp-heading-lg, .tp-heading-md, .tp-heading-sm { color: var(--tp-text); text-wrap: balance; }
.tp-label-sm { text-transform: uppercase; }

/* Rotulo de formulario e listas editoriais: usados pelo markup e pelo exemplo
   minimo exportado, ate agora sem definicao. */
.tp-label { display: block; color: var(--tp-text); font-family: var(--tp-type-label-md-family); font-size: var(--tp-type-label-md-size); font-weight: var(--tp-type-label-md-weight); line-height: var(--tp-type-label-md-line-height); margin-block-end: var(--tp-space-1); }
.tp-label > span, .tp-label .tp-label-hint { color: var(--tp-muted); font-weight: var(--tp-type-body-sm-weight); }
.tp-label-required::after { content: " *"; color: var(--tp-danger); }
.tp-list { display: grid; gap: var(--tp-space-2); margin-block: var(--tp-space-3) 0; padding-inline-start: 1.25rem; color: var(--tp-muted); font-family: var(--tp-type-body-sm-family); font-size: var(--tp-type-body-sm-size); line-height: var(--tp-type-body-sm-line-height); }
.tp-list > li { padding-inline-start: .15rem; }
.tp-list > li::marker { color: var(--tp-action); }
.tp-list-plain { list-style: none; padding-inline-start: 0; }

/* Troca Pontos shared UI + portal adapter. Author in src/css/style.css.
   All visual colors resolve from the source token layer. */
:where(.tp-body, .tp-core) { margin: 0; background: var(--tp-page); color: var(--tp-text); font-family: var(--font-inter); line-height: 1.6; }
:where(.tp-body, .tp-core) *, :where(.tp-body, .tp-core) *::before, :where(.tp-body, .tp-core) *::after { box-sizing: border-box; }
:where(.tp-body, .tp-core) h1, :where(.tp-body, .tp-core) h2, :where(.tp-body, .tp-core) h3, :where(.tp-body, .tp-core) h4, :where(.tp-body, .tp-core) p { margin: 0; }
:where(.tp-body, .tp-core) h1, :where(.tp-body, .tp-core) h2 { font-family: var(--tp-type-heading-lg-family); }
:where(.tp-body, .tp-core) h1 { line-height: var(--tp-type-heading-xl-line-height); letter-spacing: var(--tp-type-heading-xl-letter-spacing); }
:where(.tp-body, .tp-core) h2 { font-size: var(--tp-type-heading-lg-size); line-height: var(--tp-type-heading-lg-line-height); letter-spacing: var(--tp-type-heading-lg-letter-spacing); }
:where(.tp-body, .tp-core) h3 { font-size: var(--tp-type-heading-sm-size); font-weight: var(--tp-type-heading-sm-weight); line-height: var(--tp-type-heading-sm-line-height); letter-spacing: var(--tp-type-heading-sm-letter-spacing); }
:where(.tp-body, .tp-core) h4 { font-weight: var(--tp-type-heading-sm-weight); }
:where(.tp-body, .tp-core) p { color: var(--tp-muted); }
:where(.tp-body, .tp-core) a { text-underline-offset: .2em; }
:where(.tp-body, .tp-core) button, :where(.tp-body, .tp-core) input, :where(.tp-body, .tp-core) select, :where(.tp-body, .tp-core) textarea { font: inherit; }
:where(.tp-body, .tp-core) :where(section[id], main[id]) { scroll-margin-top: 7rem; }
.tp-eyebrow { display: block; color: var(--tp-action); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-block-end: .7rem; }
.tp-stack { display: grid; gap: 1.25rem; min-width: 0; }
.tp-grid { display: grid; gap: 1.25rem; min-width: 0; }
.tp-grid > * { min-width: 0; }
/* Itens de pilha encolhem com a coluna: sem isto, a trilha auto do grid assumia
   o min-content do filho (tabela de 39rem, demo de grade) e a pagina ganhava
   rolagem horizontal a 390px. Mesmo contrato de .tp-grid > *. */
.tp-stack > * { min-width: 0; }
.tp-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tp-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tp-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.tp-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; min-width: 0; }
.tp-row-end { justify-content: flex-end; }
.tp-between { justify-content: space-between; }
.tp-card { padding: 1.5rem; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-component-card-radius); min-width: 0; }
.tp-card > p { font-size: .9375rem; margin-block-start: .6rem; }
.tp-card > .tp-badge { margin-block-end: .9rem; }
.tp-card-link { text-decoration: none; transition: border-color .15s; }
.tp-card-link:hover { border-color: var(--tp-action); }
.tp-card-soft { background: var(--tp-soft); }
.tp-card-number { font-size: 2.4rem; line-height: 1.2; letter-spacing: -.04em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tp-action); display: block; }
.tp-badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: var(--tp-radius-full); padding: .25rem .65rem; font-size: .72rem; font-weight: 700; line-height: 1.5; color: var(--tp-action); background: var(--tp-soft); max-width: 100%; }
.tp-badge-success { color: var(--tp-success); background: var(--tp-success-soft); }
.tp-badge-warning { color: var(--tp-warning); background: var(--tp-warning-soft); }
.tp-badge-danger { color: var(--tp-danger); background: var(--tp-danger-soft); }
.tp-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid transparent; border-radius: var(--tp-radius-md); min-height: var(--tp-component-button-height-md); padding: .65rem 1rem; font-family: var(--tp-type-label-md-family); font-weight: var(--tp-type-label-md-weight); font-size: var(--tp-type-label-md-size); line-height: var(--tp-type-label-md-line-height); text-decoration: none; cursor: pointer; transition: background-color var(--tp-duration-fast) var(--tp-easing-standard), border-color var(--tp-duration-fast) var(--tp-easing-standard), color var(--tp-duration-fast) var(--tp-easing-standard); text-align: center; }
.tp-button-primary { background: var(--tp-component-button-primary-background); color: var(--tp-component-button-primary-foreground); }
.tp-button-primary:hover { background: var(--tp-component-button-primary-hover); color: var(--tp-component-button-primary-foreground); }
.tp-button-primary:active:not(:disabled) { background: var(--tp-component-button-primary-active); }
.tp-button-secondary { background: var(--tp-surface); border-color: var(--tp-border-strong); color: var(--tp-text); }
.tp-button-secondary:hover { border-color: var(--tp-action); color: var(--tp-action); }
.tp-button-ghost { color: var(--tp-action); background: transparent; }
/* Pressionado ganha pista de forma (borda efetiva de 2px) e deixa de ser igual
   ao hover; o hover do ghost so existe onde ha ponteiro, para nao ficar preso
   depois de um toque. */
.tp-button[aria-pressed="true"] { background: var(--tp-soft); color: var(--tp-action); border-color: var(--tp-action); box-shadow: inset 0 0 0 1px var(--tp-action); }
@media (hover: hover) { .tp-button-ghost:hover { background: var(--tp-soft); color: var(--tp-action); border-color: var(--tp-action); } }
.tp-button-tertiary { background: transparent; border-color: transparent; color: var(--tp-action-primary); padding-inline: .5rem; }
.tp-button-tertiary:hover { background: var(--tp-soft); color: var(--tp-action-primary-hover); }
.tp-button-danger { background: var(--tp-danger-action); color: var(--tp-on-danger); }
.tp-button-inverse { background: var(--color-white); color: var(--color-brand-dark); }
.tp-button-accent { background: var(--tp-accent-action); color: var(--tp-on-accent); }
.tp-button-icon { padding: .6rem; min-width: var(--tp-control-height, 2.75rem); }
.tp-button-sm { min-height: var(--tp-component-button-height-sm); padding: .45rem .75rem; font-size: var(--tp-type-label-sm-size); }
.tp-button-lg { min-height: var(--tp-component-button-height-lg); padding: .8rem 1.25rem; font-size: var(--tp-type-label-lg-size); }
.tp-button:active:not(:disabled) { transform: translateY(1px); }
/* O desabilitado deixa de ser sempre roxo: cada variante conserva sua
   identidade e so perde contraste/interacao. */
.tp-button:disabled, .tp-button[aria-disabled="true"] { opacity: var(--tp-disabled-opacity); cursor: not-allowed; box-shadow: none; color: var(--tp-muted); }
.tp-button:disabled:active, .tp-button[aria-disabled="true"]:active { transform: none; }
.tp-button-primary:disabled, .tp-button-primary[aria-disabled="true"] { background: var(--tp-action-primary-disabled); border-color: transparent; color: var(--tp-action-primary-foreground); }
.tp-button-secondary:disabled, .tp-button-secondary[aria-disabled="true"] { background: var(--tp-action-secondary-disabled); border-color: var(--tp-border); color: var(--tp-muted); }
.tp-button-ghost:disabled, .tp-button-ghost[aria-disabled="true"], .tp-button-tertiary:disabled, .tp-button-tertiary[aria-disabled="true"] { background: var(--tp-action-tertiary-disabled); border-color: transparent; color: var(--tp-muted); }
.tp-button-danger:disabled, .tp-button-danger[aria-disabled="true"] { background: var(--tp-action-danger-disabled); border-color: transparent; color: var(--tp-on-danger); }
.tp-button-inverse:disabled, .tp-button-inverse[aria-disabled="true"] { background: var(--tp-action-inverse-disabled); border-color: transparent; color: var(--color-brand-dark); }
.tp-button-accent:disabled, .tp-button-accent[aria-disabled="true"] { background: var(--tp-action-accent-disabled); border-color: transparent; color: var(--tp-on-accent); }
.tp-link { color: var(--tp-action); font-weight: 600; text-decoration: underline; }
/* !important preventivo em .tp-field-error, .tp-field-success, .tp-notice e
   .tp-type-display: hoje nenhum elemento depende dele (medido em 21/09/2026:
   retirar nao altera nenhum dos casos do portal, atendimento, ERP e
   institucional). Ele garante a cor do estado contra regras de contexto que
   repintam p com especificidade 0,1,1 ou maior (.tp-hero p, .tp-inverse-stage p,
   .tp-journey p, .tp-graphic-gradient :is(p)). Nao remover sem medir de novo. */
.tp-help { font-size: .8rem; color: var(--tp-muted); line-height: 1.5; }
.tp-field { display: grid; gap: .4rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.tp-field label, .tp-field legend { font-size: .875rem; color: var(--tp-text); font-weight: 600; }
.tp-field label span { font-size: .8rem; font-weight: 400; color: var(--tp-muted); }
.tp-input { display: block; width: 100%; min-width: 0; background: var(--tp-surface); color: var(--tp-text); border: 1px solid var(--tp-border-strong); border-radius: var(--tp-radius-md); min-height: var(--tp-component-field-min-height); padding: .65rem .8rem; font-family: var(--tp-type-body-sm-family); font-size: var(--tp-type-body-sm-size); line-height: var(--tp-type-body-sm-line-height); }
.tp-input::placeholder { color: var(--tp-muted); opacity: 1; }
.tp-input[readonly] { background: var(--tp-page); }
.tp-input[aria-invalid="true"] { border-color: var(--tp-danger); }
.tp-field-error { color: var(--tp-danger) !important; font-size: .8rem; }
.tp-field-error:empty { display: none; }
.tp-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; padding-block: .5rem; }
.tp-check input, .tp-table input { accent-color: var(--tp-action); }
.tp-switch { display: inline-flex; align-items: center; gap: .75rem; border: 0; background: none; text-align: start; width: fit-content; min-height: var(--tp-control-height); cursor: pointer; }
.tp-switch-track { display: inline-flex; width: 2.75rem; height: 1.5rem; border-radius: 100rem; padding: .2rem; background: var(--tp-muted); }
.tp-switch-track span { width: 1.1rem; height: 1.1rem; background: var(--tp-surface); border-radius: 100rem; }
.tp-switch[aria-checked="true"] .tp-switch-track { background: var(--tp-action); justify-content: end; }
/* Familia de icones da marca. A espessura vem do token da grade do manual
   (pp.22-24), nao de um literal: mudar a norma passa a ser mudar um numero. */
.tp-icon { width: var(--tp-icon-grid); height: var(--tp-icon-grid); fill: none; stroke: currentColor; stroke-width: var(--tp-icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Demonstracao da grade: o artboard da prancha com o desenho de 24 no centro. */
.tp-icon-grade { display: grid; place-items: center; inline-size: var(--tp-icon-artboard); block-size: var(--tp-icon-artboard); border: var(--tp-border-width) dashed var(--tp-border); border-radius: var(--tp-icon-corner-max); color: var(--tp-action); }
.tp-icon-grade > .tp-icon { outline: var(--tp-icon-corner-min) solid color-mix(in srgb, var(--tp-action) 22%, transparent); }
.tp-icon-grade-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-4); }
.tp-icon-grade-demo > p { flex: 1 1 18rem; margin: 0; }
.tp-icon-tile { display: grid; justify-items: center; gap: .7rem; padding: 1rem; border: 1px solid var(--tp-border); border-radius: var(--tp-radius); color: var(--tp-action); }
.tp-icon-tile span { font-size: .75rem; color: var(--tp-muted); }
.tp-inverse-stage { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--tp-surface-inverse); color: var(--tp-on-dark); border-radius: var(--tp-radius); padding: 1.25rem; }
.tp-inverse-stage p { color: var(--tp-on-dark); font-size: .8rem; }
.tp-notice { padding: 1rem; border-inline-start: 3px solid var(--tp-action); background: var(--tp-soft); color: var(--tp-text) !important; font-size: .875rem; border-radius: .5rem; }
.tp-alert { border: 1px solid var(--tp-border); border-inline-start: 3px solid var(--tp-action); padding: 1.1rem; border-radius: var(--tp-radius); background: var(--tp-soft); }
.tp-alert p { margin-block-start: .35rem; font-size: .875rem; }
.tp-alert-success { border-inline-start-color: var(--tp-success); background: var(--tp-success-soft); }
.tp-alert-danger { border-inline-start-color: var(--tp-danger); background: var(--tp-danger-soft); }
.tp-alert .tp-button { margin-block-start: .75rem; }
.tp-empty { display: grid; gap: .65rem; place-items: center; text-align: center; padding: 2rem; border: 1px dashed var(--tp-border); border-radius: var(--tp-radius); }
.tp-empty p { font-size: .875rem; }
.tp-progress { display: block; width: 100%; height: .75rem; accent-color: var(--tp-action); border: 0; border-radius: 1rem; margin-block-start: .65rem; }
.tp-progress::-webkit-progress-bar { background: var(--tp-soft); border-radius: 1rem; }
.tp-progress::-webkit-progress-value { background: var(--tp-action); border-radius: 1rem; }
.tp-spinner { display: inline-block; width: 1.2rem; height: 1.2rem; border: 2px solid var(--tp-border); border-block-start-color: currentColor; border-radius: 50%; animation: tp-spin .8s linear infinite; }
@keyframes tp-spin { to { transform: rotate(360deg); } }
.tp-skeleton { height: 1rem; width: 80%; border-radius: var(--tp-radius); background: var(--tp-border); }
.tp-avatar { display: inline-grid; place-items: center; background: var(--tp-soft); color: var(--tp-action); width: 2.75rem; height: 2.75rem; border-radius: 50%; font-size: .8rem; font-weight: 700; }
.tp-dropdown, .tp-tooltip-wrap { position: relative; width: fit-content; max-width: 100%; }
.tp-menu { position: absolute; inset-block-start: calc(100% + .4rem); inset-inline-start: 0; min-width: 14rem; max-width: min(22rem, 85vw); padding: .5rem; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-md); box-shadow: var(--tp-elevation-menu); z-index: var(--tp-z-dropdown); }
.tp-menu button, .tp-menu a { display: block; width: 100%; text-align: start; padding: .65rem; border: none; border-radius: .4rem; background: transparent; color: var(--tp-text); font-size: .875rem; }
.tp-menu button:hover { background: var(--tp-soft); color: var(--tp-action); }
.tp-menu > p, .tp-menu > strong { display: block; padding: .4rem; }
/* Item com titulo e descricao: duas linhas, como .tp-reference-panel a. Sem isto
   o texto saia colado ("Atribuir a mimAssume o atendimento..."). */
.tp-menu :is(button, a):has(> strong + span) { display: grid; gap: .15rem; }
.tp-menu :is(button, a) > strong + span { color: var(--tp-muted); font-size: var(--tp-type-caption-size); font-weight: 500; }
/* Item atual (aria-current): mesma pista do item selecionado da fila. */
.tp-menu [role="menuitem"][aria-current="true"] { background: var(--tp-soft); box-shadow: inset 3px 0 0 var(--tp-action-primary); font-weight: 700; }
.tp-tooltip { position: absolute; inset-inline-start: 0; inset-block-end: calc(100% + .3rem); width: 13rem; background: var(--tp-tooltip-bg); color: var(--tp-tooltip-text); border-radius: var(--tp-radius-md); padding: .65rem; font-size: .75rem; box-shadow: var(--tp-elevation-tooltip); z-index: var(--tp-z-dropdown); }
.tp-dialog { background: var(--tp-surface); color: var(--tp-text); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-2xl); padding: 1.75rem; width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; box-shadow: var(--tp-elevation-dialog); z-index: var(--tp-z-dialog); }
.tp-dialog::backdrop { background: var(--tp-overlay); }
.tp-drawer { inset-inline-start: auto; inset-inline-end: 0; inset-block: 0; margin-block: 0; margin-inline-start: auto; margin-inline-end: 0; width: min(29rem, calc(100% - 1rem)); max-height: 100dvh; min-height: 100dvh; border-radius: var(--tp-radius-2xl) 0 0 var(--tp-radius-2xl); z-index: var(--tp-z-drawer); }
[dir="rtl"] .tp-drawer { border-radius: 0 var(--tp-radius-2xl) var(--tp-radius-2xl) 0; }
.tp-description { display: grid; margin: 0; }
.tp-description div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .8rem; border-block-end: 1px solid var(--tp-border); }
.tp-description dt { color: var(--tp-muted); }
.tp-description dd { margin: 0; font-weight: 600; }
.tp-timeline { display: grid; gap: 1.25rem; border-inline-start: 2px solid var(--tp-border); padding-inline-start: 1.5rem; }
.tp-timeline span { display: block; font-size: .8rem; color: var(--tp-muted); }
.tp-tablist { display: flex; flex-wrap: wrap; border-block-end: 1px solid var(--tp-border); gap: .35rem; }
.tp-tab { color: var(--tp-muted); background: transparent; padding: .75rem .85rem; min-height: 2.75rem; border: 0; border-block-end: 3px solid transparent; font-size: .875rem; font-weight: 600; cursor: pointer; }
.tp-tab[aria-selected="true"] { color: var(--tp-action); border-block-end-color: var(--tp-action); }
@media (hover: hover) { .tp-tab:not([aria-selected="true"]):hover { color: var(--tp-text); border-block-end-color: var(--tp-border-strong); } }
.tp-tabpanel { display: grid; gap: .8rem; padding-block: 1.5rem; }
.tp-faq details { border-block-end: 1px solid var(--tp-border); }
.tp-faq summary { cursor: pointer; padding: 1.25rem .25rem; font-weight: 600; }
.tp-faq details p { padding: 0 .25rem 1.25rem; font-size: .9375rem; max-width: 55rem; }
.tp-steps { display: flex; padding: 0; list-style: none; flex-wrap: wrap; gap: 1rem; margin: 0; }
.tp-steps li { display: flex; gap: .5rem; align-items: center; color: var(--tp-muted); font-size: .8rem; }
.tp-steps li span { display: inline-grid; place-items: center; border: 1px solid var(--tp-border); width: 1.75rem; height: 1.75rem; border-radius: 50%; }
.tp-steps li[aria-current="step"] { color: var(--tp-action); font-weight: 700; }
.tp-steps li[aria-current="step"] span { color: var(--tp-on-action); background: var(--tp-action); border-color: var(--tp-action); }
.tp-toolbar { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(11rem, .7fr) auto; gap: .9rem; align-items: end; }
.tp-table-scroll { overflow-x: auto; border: 1px solid var(--tp-border); border-radius: var(--tp-radius); min-width: 0; }
.tp-table { border-collapse: collapse; width: 100%; min-width: 39rem; font-size: .875rem; }
.tp-table caption { text-align: start; color: var(--tp-muted); font-size: .8rem; padding: 1rem; }
.tp-table th, .tp-table td { text-align: start; padding: var(--tp-cell-padding); border-block-start: 1px solid var(--tp-border); vertical-align: middle; }
.tp-table th { font-weight: 600; }
.tp-table thead { background: var(--tp-page); }
@media (hover: hover) { .tp-table tbody tr:hover { background: var(--tp-soft); } }
.tp-table .tp-selected { background: var(--tp-soft); }
.tp-table th .tp-help { display: block; margin-block-start: .2rem; font-weight: 400; }
.tp-table-sort { background: transparent; border: 0; color: inherit; cursor: pointer; font-weight: inherit; text-align: start; padding-block: .4rem; }
.tp-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Densidade compacta: os aliases de altura ja seguem o contexto, mas o padding
   vertical do tamanho padrao sozinho passa de 36px (41,7px no botao e 43,8px no
   campo). No compacto ele cai para o mesmo do tamanho sm; sm, lg e icone ficam. */
[data-density="compact"] .tp-button:not(.tp-button-sm, .tp-button-lg, .tp-button-icon) { padding-block: .45rem; }
[data-density="compact"] .tp-input:not(.tp-input-sm, .tp-input-lg, textarea) { padding-block: .35rem; }
.tp-code { display: block; overflow: auto; background: var(--tp-page); padding: 1rem; border: 1px solid var(--tp-border); border-radius: var(--tp-radius); font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tp-text); }
.tp-palette { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .7rem; }
.tp-swatch { border: 1px solid var(--tp-border); border-radius: .8rem; overflow: hidden; background: var(--tp-surface); }
.tp-swatch-color { height: 5rem; }
.tp-swatch-text { display: grid; gap: .2rem; padding: .75rem; font-size: .75rem; }
.tp-swatch-text code { color: var(--tp-muted); font-size: .68rem; }
.tp-swatch-purple { background: var(--color-brand-primary); }.tp-swatch-dark { background: var(--color-brand-dark); }.tp-swatch-mid { background: var(--color-brand-mid); }.tp-swatch-accent { background: var(--color-brand-accent); }.tp-swatch-soft { background: var(--color-brand-soft); }
.tp-swatch-orange { background: var(--color-palette-orange); }.tp-swatch-pink { background: var(--color-palette-folly); }.tp-swatch-yellow { background: var(--color-palette-jonquil); }.tp-swatch-green { background: var(--color-palette-sea); }.tp-swatch-gray { background: var(--color-palette-smoke); }
.tp-type-display { font-family: var(--font-passo); font-weight: 700; font-size: clamp(2.25rem, 4vw, 3.75rem); line-height: 1.1; color: var(--tp-action) !important; }
.tp-type-ui { font-family: var(--font-inter); font-size: 1.1rem; }
.tp-logo-stage { min-height: 10rem; display: grid; place-items: center; border: 1px dashed var(--tp-border); border-radius: var(--tp-radius); padding: 1.5rem; background: var(--tp-surface); }
.tp-chart-demo { display: grid; gap: .65rem; }
.tp-chart-row { display: grid; grid-template-columns: 6rem 1fr 2rem; gap: .7rem; align-items: center; font-size: .8rem; }
.tp-chart-row meter { width: 100%; height: 1.2rem; }
.tp-chart-row meter::-webkit-meter-optimum-value { background: var(--tp-action); }
@media (prefers-reduced-motion: reduce) { :where(.tp-body, .tp-core) *, :where(.tp-body, .tp-core) *::before, :where(.tp-body, .tp-core) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 620px) { .tp-grid-2, .tp-grid-3, .tp-toolbar { grid-template-columns: 1fr; } }
.tp-swatch-palette-orange { background:var(--color-palette-orange); }
.tp-swatch-palette-syracuse { background:var(--color-palette-syracuse); }
.tp-swatch-palette-persimmon { background:var(--color-palette-persimmon); }
.tp-swatch-palette-pumpkin { background:var(--color-palette-pumpkin); }
.tp-swatch-palette-seashell { background:var(--color-palette-seashell); }
.tp-swatch-palette-folly { background:var(--color-palette-folly); }
.tp-swatch-palette-crimson { background:var(--color-palette-crimson); }
.tp-swatch-palette-amaranth { background:var(--color-palette-amaranth); }
.tp-swatch-palette-pink { background:var(--color-palette-pink); }
.tp-swatch-palette-mimi { background:var(--color-palette-mimi); }
.tp-swatch-palette-jonquil { background:var(--color-palette-jonquil); }
.tp-swatch-palette-mikado { background:var(--color-palette-mikado); }
.tp-swatch-palette-gold { background:var(--color-palette-gold); }
.tp-swatch-palette-mustard { background:var(--color-palette-mustard); }
.tp-swatch-palette-lemon { background:var(--color-palette-lemon); }
.tp-swatch-palette-aquamarine { background:var(--color-palette-aquamarine); }
.tp-swatch-palette-sea { background:var(--color-palette-sea); }
.tp-swatch-palette-jungle { background:var(--color-palette-jungle); }
.tp-swatch-palette-mint { background:var(--color-palette-mint); }
.tp-swatch-palette-azure { background:var(--color-palette-azure); }
.tp-swatch-palette-davys { background:var(--color-palette-davys); }
.tp-swatch-palette-battleship { background:var(--color-palette-battleship); }
.tp-swatch-palette-silver { background:var(--color-palette-silver); }
.tp-swatch-palette-platinum { background:var(--color-palette-platinum); }
.tp-swatch-palette-smoke { background:var(--color-palette-smoke); }
/* Os cinco gradientes oficiais da p.34, sempre por token de marca. */
.tp-swatch-gradient-deep { background:var(--tp-gradient-deep); }
.tp-swatch-gradient-primary { background:var(--tp-gradient-primary); }
.tp-swatch-gradient-vivid { background:var(--tp-gradient-vivid); }
.tp-swatch-gradient-royal { background:var(--tp-gradient-royal); }
.tp-swatch-gradient-bright { background:var(--tp-gradient-bright); }

/* System Atendimento: fila, conversa, contexto e recuperação. */
.tp-divider { border: 0; border-block-start: 1px solid var(--tp-border-default); margin: 0; }
.tp-support-demo { display: grid; gap: var(--tp-space-4); min-width: 0; }
.tp-support-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tp-space-3); }
.tp-support-kpi { display: grid; gap: var(--tp-space-half); padding: var(--tp-space-4); border: 1px solid var(--tp-border-default); border-radius: var(--tp-radius-lg); background: var(--tp-surface-card); }
.tp-support-kpi strong { color: var(--tp-text-primary); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.tp-support-kpi span { color: var(--tp-text-secondary); font-size: var(--tp-type-label-sm-size); }
.tp-support-toolbar { display: grid; grid-template-columns: minmax(16rem, 1fr) auto auto; gap: var(--tp-space-3); align-items: end; padding: var(--tp-space-4); border: 1px solid var(--tp-border-default); border-radius: var(--tp-radius-lg); background: var(--tp-surface-card); }
.tp-support-toolbar .tp-field { min-width: 0; }
.tp-support-shell { display: grid; grid-template-columns: minmax(15rem, var(--tp-component-inbox-list-width)) minmax(0, 1fr) minmax(15rem, var(--tp-component-contact-width)); min-height: 42rem; overflow: hidden; border: 1px solid var(--tp-border-default); border-radius: var(--tp-radius-lg); background: var(--tp-surface-card); box-shadow: var(--tp-elevation-1); }
.tp-inbox-panel, .tp-contact-panel, .tp-conversation-panel { min-width: 0; }
.tp-inbox-panel, .tp-contact-panel { background: var(--tp-surface-page); }
.tp-inbox-panel { border-inline-end: 1px solid var(--tp-border-default); }
.tp-contact-panel { border-inline-start: 1px solid var(--tp-border-default); }
.tp-inbox-heading, .tp-contact-heading, .tp-conversation-header { display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-3); min-height: 4.5rem; padding: var(--tp-space-4); border-block-end: 1px solid var(--tp-border-default); }
.tp-inbox-heading h3, .tp-contact-heading h3 { font-family: var(--tp-type-heading-sm-family); font-size: var(--tp-type-heading-sm-size); }
.tp-inbox-list { display: grid; align-content: start; max-block-size: 37.5rem; overflow-y: auto; }
/* O item da fila empilha: avatar à esquerda, e à direita nome/preview na
   primeira linha e os sinais (status, prioridade, SLA, canal) na segunda.
   Em coluna lateral esses sinais somam largura fixa e, numa fila de ~335px,
   empurram o nome para ~98px e estouram o painel. Empilhado, eles quebram
   em linha e o nome fica legível em qualquer largura. */
.tp-inbox-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tp-space-half) var(--tp-space-3); width: 100%; max-inline-size: 100%; padding: var(--tp-space-3); border: 0; border-block-end: 1px solid var(--tp-border-default); background: transparent; color: var(--tp-text-primary); text-align: start; cursor: pointer; }
.tp-inbox-item > .tp-avatar { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.tp-inbox-item-selected { background: var(--tp-soft); }
@media (hover: hover) { .tp-inbox-item:hover { background: var(--tp-soft); } }
.tp-inbox-item-selected { box-shadow: inset 3px 0 0 var(--tp-action-primary); }
.tp-inbox-item-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tp-space-half); min-width: 0; }
.tp-inbox-item-title, .tp-inbox-item-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-inbox-item-title { color: var(--tp-text-primary); font-size: var(--tp-type-label-md-size); font-weight: 700; }
.tp-inbox-item-preview { color: var(--tp-text-secondary); font-size: var(--tp-type-body-sm-size); }
.tp-inbox-item-meta { display: flex; align-items: center; gap: var(--tp-space-2); color: var(--tp-text-secondary); font-size: var(--tp-type-caption-size); white-space: nowrap; }
/* A faixa de sinais do item vai para a segunda linha, encostada no conteúdo,
   e pode quebrar: rótulos como "Aguardando cliente" e "Vence em 42 min" não
   cabem lado a lado numa fila estreita. */
.tp-inbox-item > .tp-inbox-item-meta { grid-column: 2; grid-row: 2; flex-wrap: wrap; white-space: normal; row-gap: var(--tp-space-half); min-inline-size: 0; }
.tp-unread-dot { inline-size: .45rem; block-size: .45rem; border-radius: var(--tp-radius-full); background: var(--tp-action-primary); }
.tp-conversation-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; background: var(--tp-surface-card); }
.tp-conversation-header { align-items: flex-start; }
.tp-conversation-heading { display: grid; gap: var(--tp-space-half); min-width: 0; }
.tp-conversation-heading h3 { overflow-wrap: anywhere; color: var(--tp-text-primary); font-family: var(--tp-type-heading-sm-family); font-size: var(--tp-type-heading-sm-size); }
.tp-conversation-heading p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tp-text-secondary); font-size: var(--tp-type-body-sm-size); }
.tp-conversation-controls { display: flex; align-items: center; gap: var(--tp-space-2); flex-wrap: wrap; justify-content: flex-end; }
.tp-status-select { min-height: var(--tp-component-button-height-sm); max-width: 12rem; padding: .4rem .6rem; border: 1px solid var(--tp-border-strong); border-radius: var(--tp-radius-sm); background: var(--tp-surface-card); color: var(--tp-text-primary); font: var(--tp-type-label-sm-weight) var(--tp-type-label-sm-size)/var(--tp-type-label-sm-line-height) var(--tp-type-label-sm-family); }
.tp-message-list { display: grid; align-content: start; gap: var(--tp-space-4); min-width: 0; padding: var(--tp-space-5); overflow-y: auto; background: var(--tp-surface-page); }
.tp-message-row { display: flex; gap: var(--tp-space-2); max-width: var(--tp-component-message-max-width); }
.tp-message-row-outgoing, .tp-message-row-internal { justify-self: end; flex-direction: row-reverse; }
.tp-message-content { display: grid; gap: var(--tp-space-half); min-width: 0; }
.tp-message-row-grouped > .tp-avatar { visibility: hidden; }
.tp-message-bubble { margin: 0; padding: var(--tp-space-3) var(--tp-space-4); border: 1px solid var(--tp-border-default); border-radius: var(--tp-radius-lg); background: var(--tp-surface-card); color: var(--tp-text-primary); font-size: var(--tp-type-body-sm-size); line-height: var(--tp-type-body-sm-line-height); overflow-wrap: anywhere; }
.tp-message-row-outgoing .tp-message-bubble { border-color: var(--tp-action-primary); background: var(--tp-soft); }
.tp-message-row-internal .tp-message-bubble { border-color: var(--tp-status-warning-border); background: var(--tp-status-warning-background); }
.tp-message-row-system .tp-message-bubble { border-style: dashed; background: var(--tp-status-info-background); }
.tp-message-row-error .tp-message-bubble { border-color: var(--tp-status-danger-border); background: var(--tp-status-danger-background); }
.tp-message-meta { display: flex; align-items: center; gap: var(--tp-space-2); color: var(--tp-text-secondary); font-size: var(--tp-type-caption-size); }
.tp-message-row-outgoing .tp-message-meta, .tp-message-row-internal .tp-message-meta { justify-content: flex-end; }
.tp-message-actions { display: flex; gap: var(--tp-space-2); align-items: center; }
.tp-attachment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tp-space-2); align-items: center; margin-block-start: var(--tp-space-2); padding: var(--tp-space-2); border: 1px solid var(--tp-border-default); border-radius: var(--tp-radius-sm); background: var(--tp-surface-page); }
.tp-attachment-media { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--tp-radius-sm); background: var(--tp-soft); color: var(--tp-action-primary); font-size: var(--tp-type-label-sm-size); font-weight: 700; }
.tp-attachment strong { display: block; color: var(--tp-text-primary); font-size: var(--tp-type-label-sm-size); overflow-wrap: anywhere; }
.tp-attachment span { color: var(--tp-text-secondary); font-size: var(--tp-type-caption-size); }
.tp-composer { display: grid; gap: var(--tp-space-2); padding: var(--tp-space-4); border-block-start: 1px solid var(--tp-border-default); background: var(--tp-surface-card); }
.tp-composer textarea { min-height: var(--tp-component-composer-min-height); resize: vertical; }
.tp-composer-toolbar { display: flex; align-items: center; gap: var(--tp-space-2); flex-wrap: wrap; }
.tp-composer-toolbar .tp-button-primary { margin-inline-start: auto; }
.tp-quick-replies { display: flex; gap: var(--tp-space-2); flex-wrap: wrap; }
.tp-quick-reply { max-width: 100%; padding: .4rem .65rem; border: 1px solid var(--tp-border-default); border-radius: var(--tp-radius-full); background: var(--tp-surface-page); color: var(--tp-text-secondary); font-size: var(--tp-type-label-sm-size); cursor: pointer; }
.tp-quick-reply:hover { border-color: var(--tp-action-primary); color: var(--tp-action-primary); background: var(--tp-soft); }
.tp-contact-body { display: grid; gap: var(--tp-space-4); padding: var(--tp-space-4); }
.tp-contact-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tp-space-3); align-items: center; }
.tp-contact-profile strong { color: var(--tp-text-primary); }
.tp-contact-profile p { font-size: var(--tp-type-body-sm-size); }
.tp-contact-list { display: grid; gap: var(--tp-space-3); margin: 0; }
.tp-contact-list div { display: grid; gap: var(--tp-space-half); }
.tp-contact-list dt { color: var(--tp-text-secondary); font-size: var(--tp-type-caption-size); }
.tp-contact-list dd { margin: 0; color: var(--tp-text-primary); font-size: var(--tp-type-body-sm-size); overflow-wrap: anywhere; }
.tp-tag-list { display: flex; gap: var(--tp-space-2); flex-wrap: wrap; }
.tp-tag { display: inline-flex; padding: .25rem .55rem; border-radius: var(--tp-radius-full); background: var(--tp-soft); color: var(--tp-action-primary); font-size: var(--tp-type-caption-size); font-weight: 700; }
.tp-sla { display: inline-flex; align-items: center; gap: var(--tp-space-half); color: var(--tp-text-secondary); font-size: var(--tp-type-caption-size); font-weight: 700; white-space: nowrap; }
.tp-sla::before { content: ""; inline-size: .55rem; block-size: .55rem; flex: none; border-radius: var(--tp-radius-full); background: currentColor; }
.tp-status-badge { display: inline-flex; align-items: center; gap: var(--tp-space-half); width: fit-content; padding: .25rem .55rem; border-radius: var(--tp-radius-full); color: var(--tp-status-info-foreground); background: var(--tp-status-info-background); font-size: var(--tp-type-caption-size); font-weight: 700; }
.tp-status-open { color: var(--tp-status-info-foreground); background: var(--tp-status-info-background); }
.tp-status-pending { color: var(--tp-status-warning-foreground); background: var(--tp-status-warning-background); }
.tp-status-resolved { color: var(--tp-status-success-foreground); background: var(--tp-status-success-background); }
.tp-priority-high { color: var(--tp-status-danger-foreground); }
.tp-priority-medium { color: var(--tp-status-warning-foreground); }
.tp-priority-low { color: var(--tp-status-success-foreground); }
.tp-file-label { cursor: pointer; }
.tp-file-label input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* O foco cai no input recortado em 1px; o anel precisa aparecer no rotulo. */
.tp-file-label:has(input:focus-visible) { outline: var(--tp-component-focus-ring); outline-offset: var(--tp-focus-offset); }
@media (max-width: 1120px) {
  .tp-support-shell { grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); }
  .tp-contact-panel { grid-column: 1 / -1; border-block-start: 1px solid var(--tp-border-default); border-inline-start: 0; }
  .tp-contact-body { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .tp-contact-heading { display: none; }
}
@media (max-width: 860px) {
  .tp-support-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-support-toolbar { grid-template-columns: 1fr 1fr; }
  .tp-support-toolbar .tp-field:first-child { grid-column: 1 / -1; }
  .tp-support-shell { grid-template-columns: 1fr; }
  .tp-inbox-panel { border-inline-end: 0; border-block-end: 1px solid var(--tp-border-default); }
  .tp-inbox-list { max-block-size: 18rem; }
  .tp-contact-body { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .tp-support-kpis, .tp-support-toolbar { grid-template-columns: 1fr; }
  .tp-support-toolbar .tp-field:first-child { grid-column: auto; }
  .tp-conversation-header { display: grid; }
  .tp-conversation-controls { justify-content: flex-start; }
  .tp-message-list { padding: var(--tp-space-3); }
  .tp-message-row { max-width: 100%; }
  .tp-contact-body { grid-template-columns: 1fr; }
  .tp-composer-toolbar .tp-button-primary { margin-inline-start: 0; width: 100%; }
}
/* ===========================================================================
   Estados e componentes acrescentados a fundacao (itens 2, 3, 5, 6, 7 e 8).
   CSS puro sobre os tokens --tp-: o export portatil roda sem Tailwind.
   =========================================================================== */

/* --- 2. Botao: realce/acionamento por variante e estado de carregamento --- */
.tp-button-secondary:active:not(:disabled) { background: var(--tp-soft); border-color: var(--tp-action); color: var(--tp-action); }
.tp-button-ghost:active:not(:disabled) { background: color-mix(in srgb, var(--tp-action) 18%, var(--tp-surface)); color: var(--tp-action-primary-hover); }
.tp-button-tertiary:active:not(:disabled) { background: color-mix(in srgb, var(--tp-action) 18%, var(--tp-surface)); color: var(--tp-action-primary-hover); }
.tp-button-danger:hover:not(:disabled) { background: var(--tp-action-danger-hover); color: var(--tp-on-danger); }
.tp-button-danger:active:not(:disabled) { background: var(--tp-action-danger-active); }
.tp-button-inverse:hover:not(:disabled) { background: var(--tp-action-inverse-hover); color: var(--color-brand-dark); }
.tp-button-inverse:active:not(:disabled) { background: var(--tp-action-inverse-active); }
.tp-button-accent:hover:not(:disabled) { background: var(--tp-action-accent-hover); color: var(--tp-on-accent); }
.tp-button-accent:active:not(:disabled) { background: var(--tp-action-accent-active); }
.tp-button-loading { cursor: progress; pointer-events: none; }
.tp-button-loading::before { content: ""; flex: none; inline-size: 1em; block-size: 1em; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: var(--tp-radius-full); animation: tp-spin .8s linear infinite; }
.tp-button-loading > .tp-spinner { display: none; }
@media (prefers-reduced-motion: reduce) { .tp-button-loading::before { animation: none; opacity: .6; } }

/* --- 3. Campos: hover, desabilitado, sucesso, indeterminado e tamanhos ---- */
.tp-input:hover:not(:disabled):not([readonly]) { border-color: var(--tp-action); }
.tp-input:disabled, .tp-input[aria-disabled="true"], .tp-status-select:disabled { background: var(--tp-page); border-color: var(--tp-border); color: var(--tp-muted); cursor: not-allowed; opacity: var(--tp-disabled-opacity); }
.tp-status-select:hover:not(:disabled) { border-color: var(--tp-action); }
.tp-input[readonly]:hover { border-color: var(--tp-border-strong); }
.tp-field select:hover:not(:disabled), .tp-field textarea:hover:not(:disabled):not([readonly]), .tp-field input:hover:not(:disabled):not([readonly]) { border-color: var(--tp-action); }
.tp-field select:disabled, .tp-field textarea:disabled, .tp-field input:disabled { background: var(--tp-page); border-color: var(--tp-border); color: var(--tp-muted); cursor: not-allowed; opacity: var(--tp-disabled-opacity); }
.tp-field:has(select:disabled) label, .tp-field:has(textarea:disabled) label, .tp-field:has(input:disabled) label { color: var(--tp-muted); }
.tp-field[data-state="success"] .tp-input, .tp-field[data-state="success"] select, .tp-field[data-state="success"] textarea { border-color: var(--tp-success); }
.tp-input[data-state="success"], .tp-input[data-valid="true"] { border-color: var(--tp-success); }
.tp-input[data-state="success"]:hover:not(:disabled) { border-color: var(--tp-success); }
.tp-input[data-state="error"], .tp-input[aria-invalid="true"]:hover:not(:disabled) { border-color: var(--tp-danger); }
.tp-field-success { color: var(--tp-success) !important; font-size: .8rem; }
.tp-field-success:empty { display: none; }
.tp-input-sm { min-height: var(--tp-component-field-height-sm); padding: .35rem .6rem; font-size: var(--tp-type-label-sm-size); }
.tp-input-md { min-height: var(--tp-component-field-height-md); padding: .65rem .8rem; font-size: var(--tp-type-body-sm-size); }
.tp-input-lg { min-height: var(--tp-component-field-height-lg); padding: .85rem 1rem; font-size: var(--tp-type-body-md-size); }
.tp-check input { inline-size: 1.05rem; block-size: 1.05rem; flex: none; }
.tp-check input:hover:not(:disabled) { outline: var(--tp-border-width) solid var(--tp-action); outline-offset: 2px; }
.tp-check input:disabled { cursor: not-allowed; }
.tp-check:has(input:disabled) { color: var(--tp-muted); cursor: not-allowed; opacity: var(--tp-disabled-opacity); }
.tp-check input:indeterminate { accent-color: var(--tp-action); outline: 2px solid var(--tp-action); outline-offset: 2px; }
.tp-check[data-state="success"] { color: var(--tp-success); }
.tp-check[data-state="success"] input { accent-color: var(--tp-success); }
.tp-check[data-state="error"] input, .tp-check input[aria-invalid="true"] { accent-color: var(--tp-danger); outline: 2px solid var(--tp-danger); outline-offset: 2px; }
.tp-switch-track { transition: background-color var(--tp-duration-fast) var(--tp-easing-standard); }
.tp-switch:hover:not(:disabled):not([aria-disabled="true"]) .tp-switch-track { background: var(--tp-border-strong); }
.tp-switch[aria-checked="true"]:hover:not(:disabled):not([aria-disabled="true"]) .tp-switch-track { background: var(--tp-action-hover); }
.tp-switch:disabled, .tp-switch[aria-disabled="true"] { cursor: not-allowed; opacity: var(--tp-disabled-opacity); }
.tp-switch:disabled .tp-switch-track, .tp-switch[aria-disabled="true"] .tp-switch-track { background: var(--tp-border); }
.tp-switch[data-state="success"][aria-checked="true"] .tp-switch-track { background: var(--tp-success); }

/* --- 6. Convencao dos quatro tons completa: aviso, informacao e fechar ---- */
.tp-alert { position: relative; }
.tp-alert-warning { border-inline-start-color: var(--tp-status-warning-border); background: var(--tp-status-warning-background); }
.tp-alert-info { border-inline-start-color: var(--tp-status-info-border); background: var(--tp-status-info-background); }
.tp-alert-warning p, .tp-alert-info p, .tp-alert-success p, .tp-alert-danger p { color: var(--tp-text); }
.tp-badge-info { color: var(--tp-status-info-foreground); background: var(--tp-status-info-background); }
.tp-alert-icon { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; flex: none; margin-block-end: var(--tp-space-2); border-radius: var(--tp-radius-full); border: var(--tp-border-width) solid currentColor; color: var(--tp-action); font-size: var(--tp-type-caption-size); font-weight: 700; line-height: 1; }
.tp-alert-icon::before { content: "i"; }
.tp-alert-success .tp-alert-icon { color: var(--tp-status-success-foreground); }
.tp-alert-success .tp-alert-icon::before { content: "\2713"; }
.tp-alert-warning .tp-alert-icon { color: var(--tp-status-warning-foreground); }
.tp-alert-warning .tp-alert-icon::before { content: "!"; }
.tp-alert-danger .tp-alert-icon { color: var(--tp-status-danger-foreground); }
.tp-alert-danger .tp-alert-icon::before { content: "\2715"; }
.tp-alert-close { position: absolute; inset-block-start: .55rem; inset-inline-end: .55rem; display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border: 0; border-radius: var(--tp-radius-md); background: transparent; color: var(--tp-text); font-size: 1rem; line-height: 1; cursor: pointer; }
.tp-alert-close::before { content: "\2715"; }
.tp-alert-close:hover { background: color-mix(in srgb, var(--tp-text) 10%, transparent); }
.tp-alert:has(.tp-alert-close) { padding-inline-end: 3rem; }

/* --- 5. Regiao de avisos temporarios ------------------------------------- */
.tp-toast-region { position: fixed; inset-block-end: var(--tp-space-5); inset-inline-end: var(--tp-space-5); inset-inline-start: auto; z-index: var(--tp-z-toast); display: grid; gap: var(--tp-component-toast-gap); align-content: end; inline-size: min(var(--tp-component-toast-width), calc(100vw - 2 * var(--tp-space-4))); max-block-size: calc(100dvh - 2 * var(--tp-space-5)); overflow: hidden auto; pointer-events: none; }
.tp-toast-region > * { pointer-events: auto; }
.tp-toast-region-start { inset-inline-start: var(--tp-space-5); inset-inline-end: auto; }
.tp-toast-region-top { inset-block: var(--tp-space-5) auto; align-content: start; }
.tp-toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--tp-space-3); align-items: start; padding: var(--tp-space-3) var(--tp-space-4); border: var(--tp-border-width) solid var(--tp-border-default); border-inline-start: 3px solid var(--tp-action-primary); border-radius: var(--tp-radius-lg); background: var(--tp-surface-elevated); color: var(--tp-text-primary); box-shadow: var(--tp-elevation-2); font-family: var(--tp-type-body-sm-family); font-size: var(--tp-type-body-sm-size); line-height: var(--tp-type-body-sm-line-height); animation: tp-toast-in var(--tp-duration-normal) var(--tp-easing-enter) both; }
.tp-toast::before { content: "i"; display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; flex: none; border: var(--tp-border-width) solid currentColor; border-radius: var(--tp-radius-full); color: var(--tp-action-primary); font-size: var(--tp-type-caption-size); font-weight: 700; line-height: 1; }
.tp-toast:has(.tp-toast-icon)::before { content: none; }
.tp-toast-icon { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; flex: none; color: var(--tp-action-primary); }
.tp-toast-body { display: grid; gap: var(--tp-space-half); min-inline-size: 0; }
.tp-toast strong, .tp-toast-title { display: block; color: var(--tp-text-primary); font-family: var(--tp-type-label-md-family); font-size: var(--tp-type-label-md-size); font-weight: var(--tp-type-label-md-weight); line-height: var(--tp-type-label-md-line-height); }
.tp-toast p { margin: 0; color: var(--tp-text-secondary); overflow-wrap: anywhere; }
.tp-toast-success { border-inline-start-color: var(--tp-status-success-border); }
.tp-toast-success::before { content: "\2713"; color: var(--tp-status-success-foreground); }
.tp-toast-success .tp-toast-icon { color: var(--tp-status-success-foreground); }
.tp-toast-warning { border-inline-start-color: var(--tp-status-warning-border); }
.tp-toast-warning::before { content: "!"; color: var(--tp-status-warning-foreground); }
.tp-toast-warning .tp-toast-icon { color: var(--tp-status-warning-foreground); }
.tp-toast-danger { border-inline-start-color: var(--tp-status-danger-border); }
.tp-toast-danger::before { content: "\2715"; color: var(--tp-status-danger-foreground); }
.tp-toast-danger .tp-toast-icon { color: var(--tp-status-danger-foreground); }
.tp-toast-info { border-inline-start-color: var(--tp-status-info-border); }
.tp-toast-info::before { content: "i"; color: var(--tp-status-info-foreground); }
.tp-toast-info .tp-toast-icon { color: var(--tp-status-info-foreground); }
.tp-toast-close { display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; flex: none; border: 0; border-radius: var(--tp-radius-md); background: transparent; color: var(--tp-text-secondary); font-size: .9rem; line-height: 1; cursor: pointer; }
.tp-toast-close::before { content: "\2715"; }
.tp-toast-close:hover { background: var(--tp-soft); color: var(--tp-action); }
.tp-toast.is-leaving, .tp-toast[data-state="closing"] { animation: tp-toast-out var(--tp-duration-normal) var(--tp-easing-exit) both; }
@keyframes tp-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tp-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .tp-toast, .tp-toast.is-leaving, .tp-toast[data-state="closing"] { animation: none; } }
@media (max-width: 620px) { .tp-toast-region { inset-inline: var(--tp-space-4); inline-size: auto; } }

/* --- 7. Carregamento, esqueleto e falha em container --------------------- */
.tp-loading-host { position: relative; }
/* O veu usa --tp-z-overlay, degrau de pagina: sem contexto proprio ele pintava
   por cima do cabecalho sticky quando o host rolava para baixo dele. O contexto
   so existe durante a carga; fixo, ele prenderia os menus do host embaixo do
   painel vizinho (o menu de atribuicao ficava 40% coberto pelo contato). */
.tp-loading-host[aria-busy="true"], [aria-busy="true"]:has(> .tp-loading-overlay) { isolation: isolate; }
.tp-loading-overlay { position: absolute; inset: 0; z-index: var(--tp-z-overlay); display: grid; place-content: center; justify-items: center; gap: var(--tp-space-3); padding: var(--tp-space-4); border-radius: inherit; background: color-mix(in srgb, var(--tp-surface) 78%, transparent); color: var(--tp-text-secondary); font-size: var(--tp-type-label-sm-size); text-align: center; }
.tp-loading-overlay[hidden] { display: none; }
.tp-loading-host[aria-busy="true"] > .tp-loading-overlay, [aria-busy="true"] > .tp-loading-overlay { display: grid; cursor: progress; }
.tp-loading-host[aria-busy="false"] > .tp-loading-overlay, [aria-busy="false"] > .tp-loading-overlay { display: none; }
.tp-loading-host[aria-busy="true"] { cursor: progress; }
.tp-loading-overlay .tp-spinner { inline-size: 1.75rem; block-size: 1.75rem; color: var(--tp-action); }
.tp-skeleton, .tp-skeleton-line, .tp-skeleton-avatar { background-image: linear-gradient(90deg, var(--tp-border) 0%, color-mix(in srgb, var(--tp-border) 45%, var(--tp-surface)) 50%, var(--tp-border) 100%); background-size: 200% 100%; animation: tp-shimmer var(--tp-component-skeleton-speed) ease-in-out infinite; }
.tp-skeleton-text { display: grid; gap: var(--tp-space-2); inline-size: 100%; }
.tp-skeleton-line { block-size: .75rem; inline-size: 100%; border-radius: var(--tp-radius-full); background-color: var(--tp-border); }
.tp-skeleton-line-sm { block-size: .6rem; }
.tp-skeleton-line-lg { block-size: 1.1rem; }
.tp-skeleton-text > .tp-skeleton-line:last-child { inline-size: 60%; }
.tp-skeleton-avatar { inline-size: 2.75rem; block-size: 2.75rem; flex: none; border-radius: var(--tp-radius-full); background-color: var(--tp-border); }
.tp-skeleton-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tp-space-3); align-items: center; padding: var(--tp-space-3); border-block-end: var(--tp-border-width) solid var(--tp-border-default); }
.tp-skeleton-row:last-child { border-block-end: 0; }
@keyframes tp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tp-skeleton, .tp-skeleton-line, .tp-skeleton-avatar { animation: none; background-image: none; background-color: var(--tp-border); } }
.tp-error-state { display: grid; gap: .65rem; place-items: center; text-align: center; padding: 2rem; border: var(--tp-border-width) solid var(--tp-status-danger-border); border-radius: var(--tp-radius-md); background: var(--tp-status-danger-background); color: var(--tp-text); }
.tp-error-state::before { content: "!"; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 2px solid currentColor; border-radius: var(--tp-radius-full); color: var(--tp-status-danger-foreground); font-size: 1.1rem; font-weight: 700; line-height: 1; }
.tp-error-state:has(.tp-error-state-icon)::before { content: none; }
.tp-error-state strong { color: var(--tp-text); font-family: var(--tp-type-label-lg-family); font-size: var(--tp-type-label-lg-size); font-weight: var(--tp-type-label-lg-weight); }
.tp-error-state p { color: var(--tp-text); font-size: var(--tp-type-body-sm-size); max-inline-size: 42ch; }
.tp-progress-indeterminate { position: relative; display: block; inline-size: 100%; block-size: .5rem; overflow: hidden; border-radius: var(--tp-radius-full); background: var(--tp-soft); }
.tp-progress-indeterminate::before { content: ""; position: absolute; inset-block: 0; inline-size: 35%; border-radius: inherit; background: var(--tp-action); animation: tp-progress-slide 1.2s var(--tp-easing-standard) infinite; }
@keyframes tp-progress-slide { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }
@media (prefers-reduced-motion: reduce) { .tp-progress-indeterminate::before { animation: none; inline-size: 100%; inset-inline-start: 0; opacity: .55; } }

/* --- 8. Tabela: cabecalho fixo, celulas compostas e paginacao ------------- */
.tp-table-sticky { position: relative; }
.tp-table-sticky thead th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--tp-surface-page); box-shadow: inset 0 -1px 0 var(--tp-border-default); }
.tp-table-scroll-sticky { max-block-size: 28rem; overflow: auto; }
.tp-cell-actions { display: flex; align-items: center; gap: var(--tp-space-2); justify-content: flex-end; white-space: nowrap; }
.tp-table td.tp-cell-actions, .tp-table th.tp-cell-actions { text-align: end; }
.tp-cell-user { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tp-space-3); align-items: center; min-inline-size: 0; }
.tp-cell-user > .tp-avatar { inline-size: 2.25rem; block-size: 2.25rem; }
.tp-cell-user-main { display: grid; gap: var(--tp-space-half); min-inline-size: 0; }
.tp-cell-user strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tp-text-primary); font-family: var(--tp-type-label-md-family); font-size: var(--tp-type-label-md-size); font-weight: var(--tp-type-label-md-weight); }
.tp-cell-user span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tp-text-secondary); font-size: var(--tp-type-caption-size); }
.tp-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tp-space-3); padding-block: var(--tp-space-3); color: var(--tp-text-secondary); font-size: var(--tp-type-label-sm-size); }
.tp-pagination-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-half); margin: 0; padding: 0; list-style: none; }
.tp-pagination-item { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--tp-component-pagination-size); min-block-size: var(--tp-component-pagination-size); padding-inline: var(--tp-space-2); border: var(--tp-border-width) solid transparent; border-radius: var(--tp-radius-md); background: transparent; color: var(--tp-text-secondary); font-family: var(--tp-type-label-sm-family); font-size: var(--tp-type-label-sm-size); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; }
.tp-pagination-item:hover:not(:disabled):not([aria-disabled="true"]):not([aria-current="page"]) { background: var(--tp-soft); color: var(--tp-action); }
.tp-pagination-item:disabled, .tp-pagination-item[aria-disabled="true"] { opacity: var(--tp-disabled-opacity); cursor: not-allowed; }
.tp-pagination-item[aria-current="page"] { background: var(--tp-action); border-color: var(--tp-action); color: var(--tp-on-action); font-weight: 700; }
.tp-pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--tp-component-pagination-size); color: var(--tp-text-secondary); }
.tp-page-size { display: inline-flex; align-items: center; gap: var(--tp-space-2); color: var(--tp-text-secondary); font-size: var(--tp-type-label-sm-size); white-space: nowrap; }
.tp-page-size select { min-block-size: var(--tp-component-button-height-sm); padding: .3rem .5rem; border: var(--tp-border-width) solid var(--tp-border-strong); border-radius: var(--tp-radius-md); background: var(--tp-surface-card); color: var(--tp-text-primary); font: inherit; cursor: pointer; }
.tp-page-size select:hover:not(:disabled) { border-color: var(--tp-action); }
.tp-page-size select:disabled { opacity: var(--tp-disabled-opacity); cursor: not-allowed; }
@media (max-width: 620px) { .tp-pagination { justify-content: center; } }
/* ===========================================================================
   Itens 1 e 9: classes que o markup ja usa e o atendimento completo.
   Regra de escopo: estado nunca e comunicado so por cor. Cada nivel traz
   forma, marcador ou peso proprio alem do tom.
   =========================================================================== */

/* --- 1. Classes usadas pelo markup e ate aqui inexistentes --------------- */
.tp-tabs { display: grid; gap: 0; min-inline-size: 0; }
.tp-nav-home { display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; flex: none; border-radius: var(--tp-radius-md); background: var(--tp-action); color: var(--tp-on-action); }
.tp-nav-home svg { display: block; inline-size: 1.25rem; block-size: 1.25rem; }

/* Prioridade: rotulo com forma propria; o glifo distingue os tres niveis
   sem depender da cor, que fica a cargo das variantes ja existentes. */
.tp-priority { display: inline-flex; align-items: center; gap: .3rem; inline-size: fit-content; max-inline-size: 100%; padding: .15rem .5rem; border: var(--tp-border-width) solid currentColor; border-radius: var(--tp-radius-full); background: color-mix(in srgb, currentColor 10%, transparent); font-family: var(--tp-type-label-sm-family); font-size: var(--tp-type-caption-size); font-weight: 600; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tp-priority::before { content: "\25CF"; font-size: .7em; line-height: 1; }
.tp-priority-high { font-weight: 800; }
.tp-priority-high::before { content: "\25B2"; }
.tp-priority-medium { font-weight: 700; }
.tp-priority-medium::before { content: "\25A0"; }
.tp-priority-low { font-weight: 600; }
.tp-priority-low::before { content: "\25BC"; }

/* As classes aplicadas na bolha (:class="'tp-message-' + message.type")
   espelham o que as linhas .tp-message-row-* ja faziam no elemento pai. */
.tp-message-incoming { border-color: var(--tp-border-default); background: var(--tp-surface-card); }
.tp-message-outgoing { border-color: var(--tp-action-primary); background: var(--tp-soft); }
.tp-message-internal { border-color: var(--tp-status-warning-border); background: var(--tp-status-warning-background); }
.tp-message-system { border-style: dashed; border-color: var(--tp-status-info-border); background: var(--tp-status-info-background); }
.tp-message-error { border-color: var(--tp-status-danger-border); background: var(--tp-status-danger-background); }
.tp-message-internal::before, .tp-message-system::before, .tp-message-error::before { display: block; margin-block-end: var(--tp-space-half); color: var(--tp-text-secondary); font-size: var(--tp-type-caption-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tp-message-internal::before { content: "Nota interna"; }
.tp-message-system::before { content: "Sistema"; }
.tp-message-error::before { content: "Falha no envio"; }

/* --- 9. SLA por nivel: cor + forma do marcador --------------------------- */
.tp-sla-ok { color: var(--tp-status-success-foreground); }
.tp-sla-ok::before { border-radius: var(--tp-radius-full); }
.tp-sla-warning { color: var(--tp-status-warning-foreground); }
.tp-sla-warning::before { border-radius: var(--tp-radius-xs); }
.tp-sla-breached { color: var(--tp-status-danger-foreground); font-weight: 800; }
.tp-sla-breached::before { border-radius: 0; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.tp-sla-breached::after { content: " \2014 vencido"; font-weight: 700; }
.tp-sla-paused { color: var(--tp-text-secondary); }
.tp-sla-paused::before { border-radius: 0; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%); }

/* --- 9. Cinco estados, cinco aparencias distintas ------------------------ */
.tp-status-badge { border: var(--tp-border-width) solid transparent; }
.tp-status-badge::before { font-size: .75em; line-height: 1; }
.tp-status-badge:has(.tp-status-icon)::before { content: none; }
.tp-status-icon { display: inline-grid; place-items: center; inline-size: .85rem; block-size: .85rem; flex: none; }
.tp-status-icon svg { inline-size: 100%; block-size: 100%; }
.tp-status-open { border-color: var(--tp-status-info-border); }
.tp-status-open::before { content: "\25CF"; }
.tp-status-pending { color: var(--tp-status-warning-foreground); background: var(--tp-status-warning-background); border-color: var(--tp-status-warning-border); border-style: solid; }
.tp-status-pending::before { content: "\25D0"; }
.tp-status-waiting { color: var(--tp-status-warning-foreground); background: transparent; border-color: currentColor; border-style: dashed; }
.tp-status-waiting::before { content: "\25CC"; }
.tp-status-resolved { color: var(--tp-status-success-foreground); background: var(--tp-status-success-background); border-color: var(--tp-status-success-border); }
.tp-status-resolved::before { content: "\2713"; }
.tp-status-closed { color: var(--tp-text-secondary); background: var(--tp-surface-page); border-color: var(--tp-border-strong); }
.tp-status-closed::before { content: "\2715"; }

/* --- 9. Canal de entrada: icone textual + rotulo ------------------------- */
.tp-channel { display: inline-flex; align-items: center; gap: .3rem; color: var(--tp-text-secondary); font-family: var(--tp-type-label-sm-family); font-size: var(--tp-type-caption-size); font-weight: 600; white-space: nowrap; }
.tp-channel::before { font-variant-emoji: text; display: inline-grid; place-items: center; inline-size: 1.1rem; block-size: 1.1rem; flex: none; border-radius: var(--tp-radius-xs); background: var(--tp-soft); color: var(--tp-action); font-size: .7rem; line-height: 1; }
.tp-channel-email::before { content: "\2709\FE0E"; }
.tp-channel-whatsapp::before { content: "\1F4AC\FE0E"; background: color-mix(in srgb, var(--tp-success) 18%, var(--tp-surface)); color: var(--tp-success); }
.tp-channel-form::before { content: "\2630"; background: color-mix(in srgb, var(--tp-warning) 22%, var(--tp-surface)); color: var(--tp-warning); }
.tp-channel-phone::before { content: "\260E\FE0E"; background: color-mix(in srgb, var(--tp-info) 16%, var(--tp-surface)); color: var(--tp-info); }

/* --- 9. Atribuir e transferir atendimento -------------------------------- */
.tp-assign { position: relative; display: inline-flex; align-items: center; gap: var(--tp-space-2); min-inline-size: 0; }
.tp-assign-trigger { display: inline-flex; align-items: center; gap: var(--tp-space-2); max-inline-size: 100%; min-block-size: var(--tp-component-button-height-sm); padding: .3rem .6rem; border: var(--tp-border-width) solid var(--tp-border-default); border-radius: var(--tp-radius-full); background: var(--tp-surface-card); color: var(--tp-text-primary); font-family: var(--tp-type-label-sm-family); font-size: var(--tp-type-label-sm-size); font-weight: 600; cursor: pointer; }
.tp-assign-trigger:hover:not(:disabled) { border-color: var(--tp-action-primary); color: var(--tp-action-primary); background: var(--tp-soft); }
.tp-assign-trigger:disabled { opacity: var(--tp-disabled-opacity); cursor: not-allowed; }
.tp-assign-trigger[aria-expanded="true"] { border-color: var(--tp-action-primary); background: var(--tp-soft); color: var(--tp-action-primary); }
.tp-assign-trigger::after { content: "\25BE"; color: var(--tp-text-secondary); font-size: .7em; }
.tp-assign-trigger .tp-avatar { inline-size: 1.5rem; block-size: 1.5rem; font-size: .6rem; }
.tp-assign-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-assign-unassigned .tp-assign-trigger { border-style: dashed; color: var(--tp-text-secondary); }

/* --- 9. Filtros aplicados como fichas removiveis ------------------------- */
.tp-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-2); min-inline-size: 0; }
.tp-filter-chip { display: inline-flex; align-items: center; gap: var(--tp-space-half); max-inline-size: 100%; padding: .25rem .25rem .25rem .6rem; border: var(--tp-border-width) solid var(--tp-border-default); border-radius: var(--tp-radius-full); background: var(--tp-surface-page); color: var(--tp-text-primary); font-family: var(--tp-type-label-sm-family); font-size: var(--tp-type-label-sm-size); font-weight: 600; }
.tp-filter-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-filter-chip-active, .tp-filter-chip[aria-pressed="true"] { border-color: var(--tp-action-primary); background: var(--tp-soft); color: var(--tp-action-primary); }
.tp-filter-chip-remove { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; flex: none; border: 0; border-radius: var(--tp-radius-full); background: transparent; color: var(--tp-text-secondary); font-size: .75rem; line-height: 1; cursor: pointer; }
.tp-filter-chip-remove::before { content: "\2715"; }
.tp-filter-chip-remove:hover { background: var(--tp-action-primary); color: var(--tp-on-action); }
.tp-filter-chip-remove:disabled { opacity: var(--tp-disabled-opacity); cursor: not-allowed; }

/* --- 9. Anexos: lista, remocao, progresso, imagem e audio ---------------- */
.tp-attachment-list { display: grid; gap: var(--tp-space-2); margin: 0; padding: 0; list-style: none; min-inline-size: 0; }
.tp-attachment-list > li { min-inline-size: 0; }
.tp-attachment-list .tp-attachment { margin-block-start: 0; grid-template-columns: auto minmax(0, 1fr) auto; }
.tp-attachment-remove { display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; flex: none; border: 0; border-radius: var(--tp-radius-md); background: transparent; color: var(--tp-text-secondary); font-size: .85rem; line-height: 1; cursor: pointer; }
.tp-attachment-remove::before { content: "\2715"; }
.tp-attachment-remove:hover { background: var(--tp-status-danger-background); color: var(--tp-status-danger-foreground); }
.tp-attachment-remove:disabled { opacity: var(--tp-disabled-opacity); cursor: not-allowed; }
.tp-attachment-progress { display: block; inline-size: 100%; block-size: .35rem; margin-block-start: var(--tp-space-half); border: 0; border-radius: var(--tp-radius-full); background: var(--tp-soft); accent-color: var(--tp-action); overflow: hidden; }
.tp-attachment-progress::-webkit-progress-bar { background: var(--tp-soft); border-radius: var(--tp-radius-full); }
.tp-attachment-progress::-webkit-progress-value { background: var(--tp-action); border-radius: var(--tp-radius-full); }
.tp-attachment-progress::-moz-progress-bar { background: var(--tp-action); border-radius: var(--tp-radius-full); }
.tp-attachment-image { display: block; inline-size: 100%; max-inline-size: 16rem; block-size: auto; margin-block-start: var(--tp-space-2); border: var(--tp-border-width) solid var(--tp-border-default); border-radius: var(--tp-radius-md); object-fit: cover; background: var(--tp-surface-page); }
.tp-audio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tp-space-3); align-items: center; margin-block-start: var(--tp-space-2); padding: var(--tp-space-2) var(--tp-space-3); border: var(--tp-border-width) solid var(--tp-border-default); border-radius: var(--tp-radius-full); background: var(--tp-surface-page); }
.tp-audio audio { inline-size: 100%; min-inline-size: 0; block-size: 2.25rem; }
.tp-audio-meta { color: var(--tp-text-secondary); font-size: var(--tp-type-caption-size); font-variant-numeric: tabular-nums; }

/* --- 9. Modelos de resposta --------------------------------------------- */
.tp-template-list { display: grid; gap: var(--tp-space-2); max-block-size: 18rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.tp-template-item { display: grid; gap: var(--tp-space-half); inline-size: 100%; padding: var(--tp-space-3); border: var(--tp-border-width) solid var(--tp-border-default); border-radius: var(--tp-radius-md); background: var(--tp-surface-card); color: var(--tp-text-primary); text-align: start; cursor: pointer; }
.tp-template-item strong { color: var(--tp-text-primary); font-family: var(--tp-type-label-md-family); font-size: var(--tp-type-label-md-size); font-weight: var(--tp-type-label-md-weight); }
.tp-template-item span { display: block; overflow: hidden; color: var(--tp-text-secondary); font-size: var(--tp-type-body-sm-size); text-overflow: ellipsis; white-space: nowrap; }
.tp-template-item:hover:not(:disabled), .tp-template-item[aria-selected="true"] { border-color: var(--tp-action-primary); background: var(--tp-soft); }
.tp-template-item[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--tp-action-primary); }
/* Itens de largura total dentro de lista rolavel: o anel externo era cortado
   pelo overflow; desenhado por dentro, aparece nos quatro lados. */
.tp-inbox-item:focus-visible, .tp-template-item:focus-visible { outline-offset: calc(-1 * var(--tp-focus-width)); }
/* RTL: a barra do selecionado acompanha o inicio da linha. */
[dir="rtl"] .tp-inbox-item-selected, [dir="rtl"] .tp-template-item[aria-selected="true"], [dir="rtl"] .tp-menu [role="menuitem"][aria-current="true"] { box-shadow: inset -3px 0 0 var(--tp-action-primary); }
.tp-template-item:disabled { opacity: var(--tp-disabled-opacity); cursor: not-allowed; }

/* --- 9. Separador de data e indicador de digitacao ---------------------- */
.tp-message-date-separator { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--tp-space-3); align-items: center; justify-self: stretch; margin-block: var(--tp-space-2); color: var(--tp-text-secondary); font-family: var(--tp-type-label-sm-family); font-size: var(--tp-type-caption-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tp-message-date-separator::before, .tp-message-date-separator::after { content: ""; block-size: var(--tp-border-width); background: var(--tp-border-default); }
.tp-typing { display: inline-flex; align-items: center; gap: var(--tp-space-2); padding: var(--tp-space-2) var(--tp-space-3); border: var(--tp-border-width) solid var(--tp-border-default); border-radius: var(--tp-radius-full); background: var(--tp-surface-card); color: var(--tp-text-secondary); font-size: var(--tp-type-caption-size); }
.tp-typing-dots { display: inline-flex; gap: 4px; }
.tp-typing-dots > i { inline-size: 6px; block-size: 6px; border-radius: var(--tp-radius-full); background: currentColor; opacity: .3; animation: tp-typing-pulse 1.2s ease-in-out infinite; }
.tp-typing-dots > i:nth-child(2) { animation-delay: .18s; }
.tp-typing-dots > i:nth-child(3) { animation-delay: .36s; }
@keyframes tp-typing-pulse { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .tp-typing-dots > i { animation: none; opacity: .6; } }
/* ===========================================================================
   Item 10: preloader de marca e painel institucional.
   Portados da linha do dashboard revisado (troca-pontos-admin-ui), com os
   tokens reescritos para a camada semantica do Design System. Sem @layer:
   as regras vivem fora das camadas do Tailwind e sobrevivem ao export.
   =========================================================================== */

/* Preloader: ver src/partials/preloader.html. Cobre a pagina desde o primeiro
   paint e sai com uma unica transicao, para que menus e dropdowns nao
   aparecam antes do JavaScript. Logo em 170 px (minimo digital do manual). */
.tp-preloader { position: fixed; inset: 0; z-index: var(--tp-z-preloader); display: flex; align-items: center; justify-content: center; background-color: var(--tp-surface); opacity: 1; transition: opacity 280ms var(--tp-easing-exit), visibility 0s linear 280ms; }
.dark .tp-preloader, [data-theme="dark"] .tp-preloader { background-color: var(--tp-surface); }
.tp-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.tp-preloader__content { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; padding: 1.5rem; }
.tp-preloader__logo { inline-size: var(--tp-logo-width); max-inline-size: none; block-size: auto; }
.tp-preloader__logo--dark, .dark .tp-preloader__logo--light, [data-theme="dark"] .tp-preloader__logo--light { display: none; }
.dark .tp-preloader__logo--dark, [data-theme="dark"] .tp-preloader__logo--dark { display: block; }
.tp-preloader__dots { display: flex; gap: 8px; }
.tp-preloader__dots > i { inline-size: 8px; block-size: 8px; border-radius: var(--tp-radius-full); background-color: var(--color-tp-purple); opacity: .25; animation: tp-dot 1.2s ease-in-out infinite; }
.tp-preloader__dots > i:nth-child(2) { animation-delay: .2s; }
.tp-preloader__dots > i:nth-child(3) { animation-delay: .4s; }
.dark .tp-preloader__dots > i, [data-theme="dark"] .tp-preloader__dots > i { background-color: var(--color-brand-400); }
@keyframes tp-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .tp-preloader { transition: none; } .tp-preloader__dots > i { animation: none; opacity: .6; } }
.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Painel de marca (autenticacao): gradiente institucional do hero. */
.tp-brand-panel { position: relative; isolation: isolate; overflow: hidden; background-image: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-brand-primary) 54%, var(--color-brand-mid) 100%); color: var(--tp-on-dark); }
.dark .tp-brand-panel, [data-theme="dark"] .tp-brand-panel { background-image: linear-gradient(135deg, var(--color-brand-950) 0%, var(--color-brand-dark) 55%, var(--color-brand-primary) 100%); }

/* Grafismos de apoio (guia de estilos, secao 11): arcos de grande raio,
   linhas de acento e pontos modulares. Sempre decorativos e atras do texto. */
.tp-graphics { pointer-events: none; position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.tp-graphics > * { position: absolute; }
.tp-arc-outline { inset-inline-end: -120px; inset-block-end: -330px; inline-size: 620px; block-size: 620px; border-radius: var(--tp-radius-full); border: 2px solid color-mix(in srgb, var(--color-brand-accent) 35%, transparent); }
.tp-orb { inset-inline-start: -130px; inset-block-start: -240px; inline-size: 420px; block-size: 420px; border-radius: var(--tp-radius-full); background-color: color-mix(in srgb, var(--color-brand-accent) 14%, transparent); }
/* Mesma norma de faixa do arco canonico (p.07): 0,189979 do diametro. Estava
   em 36 de 260 = 0,1385. A tinta continua vindo dos modificadores de contexto
   abaixo, que sobrepoem `border-color`. */
.tp-arc { inline-size: 260px; block-size: 260px; border-radius: var(--tp-radius-full); border: calc(260px * var(--tp-graphic-arc-ratio)) solid var(--color-brand-dark); }
.tp-accent-line { block-size: 3px; inline-size: 120px; border-radius: var(--tp-radius-full); background-color: var(--color-tp-phlox); transform: rotate(-18deg); }
.tp-dots { display: grid; grid-template-columns: repeat(3, 8px); gap: 8px; }
.tp-dots > i { inline-size: 8px; block-size: 8px; border-radius: var(--tp-radius-full); background-color: var(--color-tp-purple); }
.tp-graphics--on-brand .tp-dots > i { background-color: color-mix(in srgb, var(--color-white) 45%, transparent); }
.tp-graphics--page .tp-arc { inset-block-start: -130px; inset-inline-end: -110px; border-color: var(--color-brand-50); }
.tp-graphics--page .tp-arc-outline { inset-inline-start: -260px; inset-inline-end: auto; inset-block-end: -420px; border-color: var(--color-brand-100); }
.tp-graphics--page .tp-dots { inset-inline-start: 48px; inset-block-end: 48px; }
.tp-graphics--page .tp-dots > i { background-color: var(--color-brand-200); }
.tp-graphics--page .tp-accent-line { inset-block-start: 180px; inset-inline-end: 150px; }
.dark .tp-graphics--page .tp-arc, [data-theme="dark"] .tp-graphics--page .tp-arc { border-color: color-mix(in srgb, var(--color-brand-mid) 18%, transparent); }
.dark .tp-graphics--page .tp-arc-outline, [data-theme="dark"] .tp-graphics--page .tp-arc-outline { border-color: color-mix(in srgb, var(--color-brand-accent) 20%, transparent); }
.dark .tp-graphics--page .tp-dots > i, [data-theme="dark"] .tp-graphics--page .tp-dots > i { background-color: color-mix(in srgb, var(--color-brand-300) 35%, transparent); }
@media (max-width: 640px) { .tp-graphics--page .tp-arc { inline-size: 180px; block-size: 180px; border-width: calc(180px * var(--tp-graphic-arc-ratio)); inset-block-start: -90px; inset-inline-end: -80px; } .tp-graphics--page .tp-accent-line { inset-block-start: 110px; inset-inline-end: 60px; inline-size: 80px; } }

/* Quatro grafismos: arco de grande raio, linha de acento, pontos modulares e
   gradiente institucional. Regra editorial do guia: os grafismos nunca
   competem com a informacao. Devem organizar, direcionar o olhar ou reforcar
   a presenca da marca -- nao preencher espaco vazio por decoracao.

   Camada composicional: `.tp-graphic` e o conteiner (cartao, cabecalho de
   pagina, estado vazio, faixa) e os grafismos sao filhos decorativos. Todos
   sao `aria-hidden` no markup e `pointer-events: none` aqui: nunca recebem
   foco, nunca interceptam clique e nunca entram na ordem de leitura.
   O desenho fica em z-index negativo dentro do `isolation: isolate` do
   conteiner, entao pinta acima do fundo da superficie e abaixo do texto.

   ZONA RESERVADA. "Nao competir com a informacao" precisa ser uma garantia do
   CSS, nao uma recomendacao ao autor: medicao em navegador mostrou o arco
   cruzando o texto quando o cartao era menor que o grafismo. Os tres desenhos
   posicionados ancoram no fim do bloco, entao o conteiner calcula, a partir do
   tamanho do proprio grafismo, a faixa inferior que o desenho alcanca
   (`--tp-graphic-reserve`) e `.tp-graphic-content` a devolve como recuo. O
   texto passa a terminar acima do desenho por construcao, em qualquer largura
   e nas duas escalas. `:has()` leva a escala do filho para o conteiner, que e
   quem precisa saber o tamanho para reservar. */
.tp-graphic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* p.07 pinta o anel em Russian violet sobre Pale purple, nao em Purple. */
  --tp-graphic-ink: var(--color-brand-dark);
  --tp-graphic-accent: var(--color-brand-accent);
  --tp-graphic-opacity: 1;
  --tp-graphic-arc-size: 170px;
  /* A faixa e derivada do diametro pela fracao medida na p.07 (ver
     --tp-graphic-arc-ratio no :root), nunca um pixel por escala. */
  --tp-graphic-arc-stroke: calc(var(--tp-graphic-arc-size) * var(--tp-graphic-arc-ratio));
  /* Fio do arco companheiro da p.07: 1 unidade num diametro de 1273,04 un.
     Como 1/1273 de qualquer escala util fica abaixo de meio pixel, o fio e
     declarado em 1px logico, que e o que a prancha desenha. */
  --tp-graphic-arc-wire-weight: 1px;
  --tp-graphic-line-length: 120px;
  --tp-graphic-dots-size: 8px;
  --tp-graphic-dots-columns: 3;
  --tp-graphic-dots-rows: 3;
  --tp-graphic-reserve-arc: 0px;
  --tp-graphic-reserve-line: 0px;
  --tp-graphic-reserve-dots: 0px;
  --tp-graphic-reserve: max(var(--tp-graphic-reserve-arc), var(--tp-graphic-reserve-line), var(--tp-graphic-reserve-dots));
  min-block-size: calc(var(--tp-graphic-reserve, 0px) + var(--tp-space-7));
}
/* A escala declarada no filho precisa ser conhecida pelo conteiner. */
.tp-graphic:has(.tp-graphic-arc-sm) { --tp-graphic-arc-size: 112px; }
.tp-graphic:has(.tp-graphic-arc-lg) { --tp-graphic-arc-size: 260px; }
.tp-graphic:has(.tp-graphic-line-sm) { --tp-graphic-line-length: 72px; }
.tp-graphic:has(.tp-graphic-line-lg) { --tp-graphic-line-length: 200px; }
.tp-graphic:has(.tp-graphic-dots-sm) { --tp-graphic-dots-size: 6px; --tp-graphic-dots-columns: 3; }
.tp-graphic:has(.tp-graphic-dots-lg) { --tp-graphic-dots-size: 10px; --tp-graphic-dots-columns: 4; }
/* Faixa inferior que cada grafismo presente alcanca, medida do fim do bloco.
   Arco: sobra 47% do diametro dentro do conteiner. Linha: afastamento de 40px
   mais a metade da caixa girada em -18 graus. Pontos: afastamento de 24px mais
   a altura da grade. */
.tp-graphic:has(.tp-graphic-arc) { --tp-graphic-reserve-arc: calc(var(--tp-graphic-arc-size) * 0.47 + var(--tp-space-2)); }
.tp-graphic:has(.tp-graphic-line) { --tp-graphic-reserve-line: calc(var(--tp-space-5) + var(--tp-space-4) + var(--tp-graphic-line-length) * 0.16 + var(--tp-space-2)); }
.tp-graphic:has(.tp-graphic-dots) { --tp-graphic-reserve-dots: calc(var(--tp-space-5) + var(--tp-graphic-dots-size) * var(--tp-graphic-dots-rows) + var(--tp-space-2) * (var(--tp-graphic-dots-rows) - 1) + var(--tp-space-2)); }
/* O conteudo devolve a zona reservada e sobe para fora do alcance do desenho. */
.tp-graphic-content { position: relative; z-index: 1; padding-block-end: var(--tp-graphic-reserve, 0px); }
/* Superficie de demonstracao: o conteiner sozinho nao desenha nada. */
.tp-graphic-surface { min-block-size: max(170px, calc(var(--tp-graphic-reserve, 0px) + var(--tp-space-7))); padding: var(--tp-space-4); border: var(--tp-border-width) solid var(--tp-border); border-radius: var(--tp-radius-2xl); background: var(--tp-surface); color: var(--tp-text); }
/* Saida explicita, e unica, para o desenho invadir o texto. Existe para o
   contraexemplo do portal -- a peca que demonstra o erro proibido pelo guia.
   Nao use em producao: fora da demonstracao nao ha caso legitimo. */
.tp-graphic.tp-graphic-overlap { --tp-graphic-reserve: 0px; }

.tp-graphic-arc,
.tp-graphic-line,
.tp-graphic-dots { position: absolute; z-index: -1; pointer-events: none; opacity: var(--tp-graphic-opacity, 1); }

/* 01 · Arco de grande raio — presenca da marca na margem da superficie.
   Sai pelo canto: o raio e sempre maior que a peca que o recebe. */
.tp-graphic-arc {
  inline-size: var(--tp-graphic-arc-size, 170px);
  block-size: var(--tp-graphic-arc-size, 170px);
  border-radius: var(--tp-radius-full);
  --tp-graphic-arc-stroke: calc(var(--tp-graphic-arc-size, 170px) * var(--tp-graphic-arc-ratio));
  border: var(--tp-graphic-arc-stroke) solid var(--tp-graphic-ink, var(--color-brand-dark));
  inset-inline-end: calc(var(--tp-graphic-arc-size, 170px) * -0.41);
  inset-block-end: calc(var(--tp-graphic-arc-size, 170px) * -0.53);
}
.tp-graphic-arc-start { inset-inline-start: calc(var(--tp-graphic-arc-size, 170px) * -0.41); inset-inline-end: auto; }
.tp-graphic-arc-end { inset-inline-end: calc(var(--tp-graphic-arc-size, 170px) * -0.41); inset-inline-start: auto; }
.tp-graphic-arc-sm { --tp-graphic-arc-size: 112px; }
.tp-graphic-arc-lg { --tp-graphic-arc-size: 260px; }
/* Arco companheiro da p.07: mesma geometria, deslocada na diagonal em 17,5% da
   faixa, tracada em fio de 1 un com stroke em gradiente Phlox -> Purple. Um
   `border` nao aceita gradiente, entao o anel e um fundo em gradiente recortado
   por duas mascaras concentricas — o que preserva o fio de 1 px em qualquer
   escala. Decorativo, como todo grafismo deste bloco. */
.tp-graphic-arc-wire {
  border: 0;
  background-image: linear-gradient(135deg, var(--tp-graphic-accent, var(--color-brand-accent)) 0%, var(--tp-graphic-ink, var(--color-brand-dark)) 80%);
  /* `closest-side` faz o raio do gradiente ser exatamente o raio do circulo,
     entao `100% - fio` e a borda interna do anel, em qualquer escala. */
  mask-image: radial-gradient(circle closest-side at center, transparent calc(100% - var(--tp-graphic-arc-wire-weight, 1px)), black calc(100% - var(--tp-graphic-arc-wire-weight, 1px)));
  mask-repeat: no-repeat;
  inset-inline-end: calc(var(--tp-graphic-arc-size, 170px) * -0.41 + var(--tp-graphic-arc-stroke) * 0.175);
  inset-block-end: calc(var(--tp-graphic-arc-size, 170px) * -0.53 + var(--tp-graphic-arc-stroke) * 0.175);
}
.tp-graphic-arc-wire.tp-graphic-arc-start { inset-inline-start: calc(var(--tp-graphic-arc-size, 170px) * -0.41 + var(--tp-graphic-arc-stroke) * 0.175); inset-inline-end: auto; }

/* 02 · Linha de acento — direciona o olhar para a proxima informacao.
   Uma linha por superficie; a inclinacao espelha em RTL. */
.tp-graphic-line {
  block-size: 3px;
  inline-size: var(--tp-graphic-line-length, 120px);
  border-radius: var(--tp-radius-full);
  background-color: var(--tp-graphic-accent, var(--color-brand-accent));
  transform: rotate(-18deg);
  inset-inline-end: var(--tp-space-3);
  inset-block-end: calc(var(--tp-space-5) + var(--tp-space-4));
}
.tp-graphic-line-start { inset-inline-start: var(--tp-space-3); inset-inline-end: auto; }
.tp-graphic-line-end { inset-inline-end: var(--tp-space-3); inset-inline-start: auto; }
.tp-graphic-line-sm { --tp-graphic-line-length: 72px; }
.tp-graphic-line-lg { --tp-graphic-line-length: 200px; }
[dir="rtl"] .tp-graphic-line, [dir="rtl"].tp-graphic-line { transform: rotate(18deg); }

/* 03 · Pontos modulares — organizam, marcam ritmo e ancoram um canto.
   A grade e 3 x 3 por padrao; outra contagem de linhas ajusta
   `--tp-graphic-dots-rows` para que a zona reservada continue certa. */
.tp-graphic-dots {
  display: grid;
  grid-template-columns: repeat(var(--tp-graphic-dots-columns, 3), var(--tp-graphic-dots-size, 8px));
  gap: var(--tp-space-2);
  inset-inline-end: var(--tp-space-5);
  inset-block-end: var(--tp-space-5);
}
.tp-graphic-dots > i { inline-size: var(--tp-graphic-dots-size, 8px); block-size: var(--tp-graphic-dots-size, 8px); border-radius: var(--tp-radius-full); background-color: var(--tp-graphic-ink, var(--color-brand-primary)); }
.tp-graphic-dots-start { inset-inline-start: var(--tp-space-5); inset-inline-end: auto; }
.tp-graphic-dots-end { inset-inline-end: var(--tp-space-5); inset-inline-start: auto; }
.tp-graphic-dots-sm { --tp-graphic-dots-size: 6px; --tp-graphic-dots-columns: 3; }
.tp-graphic-dots-lg { --tp-graphic-dots-size: 10px; --tp-graphic-dots-columns: 4; }

/* 04 · Gradiente institucional — reforca a presenca da marca em uma faixa
   inteira. Tres paradas do manual: Russian Violet, Purple e Mauveine.
   A parada mais clara e Mauveine (#81009B): branco sobre ela resolve em
   8,7:1, acima do minimo AA de 4,5:1 para texto. Phlox fica fora do
   gradiente justamente porque derrubaria o par para 4,0:1. */
.tp-graphic-gradient {
  background-image: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-brand-primary) 54%, var(--color-brand-mid) 100%);
  color: var(--tp-on-dark);
  border-color: transparent;
  --tp-graphic-ink: color-mix(in srgb, var(--color-white) 22%, transparent);
  --tp-graphic-accent: color-mix(in srgb, var(--color-white) 38%, transparent);
}
/* Sobre o gradiente todo texto herda o branco. Sem isto, papeis com cor
   propria -- rotulo, apoio, sobrancelha -- ficam em roxo institucional
   sobre roxo institucional e perdem o contraste que o gradiente garante. */
.tp-graphic-gradient :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, strong, span, small,
  .tp-eyebrow, .tp-help, .tp-label-sm, .tp-label-md, .tp-label-lg) { color: inherit; }

/* Grafismo sobre superficie de marca (gradiente, painel escuro, hero). */
.tp-graphic-on-brand { --tp-graphic-ink: color-mix(in srgb, var(--color-white) 22%, transparent); --tp-graphic-accent: color-mix(in srgb, var(--color-white) 38%, transparent); }

/* Quando o grafismo precisa conviver com texto na mesma faixa vertical.
   Recuar o tom e a unica forma correta de resolver: texto nao muda de cor
   para caber no grafismo, o grafismo e que recua. */
.tp-graphic-soft { --tp-graphic-opacity: 0.35; }

/* Tema escuro: o roxo institucional desaparece sobre a superficie escura.
   O grafismo passa a derivar do token de acao do tema, com transparencia,
   em vez de ganhar uma cor nova fora do sistema. */
.dark :is(.tp-graphic, .tp-graphic-arc, .tp-graphic-line, .tp-graphic-dots),
[data-theme="dark"] :is(.tp-graphic, .tp-graphic-arc, .tp-graphic-line, .tp-graphic-dots) {
  --tp-graphic-ink: color-mix(in srgb, var(--tp-action) 55%, transparent);
  --tp-graphic-accent: color-mix(in srgb, var(--color-brand-accent) 60%, transparent);
}
.dark .tp-graphic-surface, [data-theme="dark"] .tp-graphic-surface { background: var(--tp-surface); border-color: var(--tp-border); }
/* Excecao: sobre superficie de marca o desenho continua branco transparente,
   mesmo no tema escuro -- o fundo ali nao e a superficie do tema. */
.dark .tp-graphic-on-brand, [data-theme="dark"] .tp-graphic-on-brand { --tp-graphic-ink: color-mix(in srgb, var(--color-white) 22%, transparent); --tp-graphic-accent: color-mix(in srgb, var(--color-white) 38%, transparent); }
.dark .tp-graphic-gradient, [data-theme="dark"] .tp-graphic-gradient {
  background-image: linear-gradient(135deg, var(--color-brand-950) 0%, var(--color-brand-dark) 55%, var(--color-brand-primary) 100%);
  color: var(--tp-on-dark);
  --tp-graphic-ink: color-mix(in srgb, var(--color-white) 22%, transparent);
  --tp-graphic-accent: color-mix(in srgb, var(--color-white) 38%, transparent);
}

/* Telas estreitas: o arco e a linha encolhem para nao invadir a coluna de
   texto. A escala muda no conteiner tambem, senao a zona reservada continuaria
   calculada sobre o tamanho de desktop. */
@media (max-width: 620px) {
  .tp-graphic, .tp-graphic-arc { --tp-graphic-arc-size: 120px; }
  .tp-graphic:has(.tp-graphic-arc-lg), .tp-graphic-arc-lg { --tp-graphic-arc-size: 170px; }
  .tp-graphic, .tp-graphic-line { --tp-graphic-line-length: 84px; }
  .tp-graphic:has(.tp-graphic-line-lg), .tp-graphic-line-lg { --tp-graphic-line-length: 120px; }
}
/* Nenhum grafismo anima. Se um projeto animar um destes elementos, a
   animacao precisa ser suprimida aqui tambem. */
@media (prefers-reduced-motion: reduce) {
  .tp-graphic-arc, .tp-graphic-line, .tp-graphic-dots, .tp-graphic-dots > i { animation: none; transition: none; }
}