/* Identidade visual Prever Assistência — base fora do alcance das utilities do Tailwind.
   Tokens e regras de uso: ver brand-tailwind.js (mesma pasta). */

/* Inter: eixos de gráfico e dados de tabela no design system. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
    color-scheme: light;
    --prever-roxo: #592B81;
    --prever-roxo-escuro: #3F2A56;
    --prever-ametista: #714A94;
    --prever-lime: #CEDD00;
    --prever-atoll: #5BA1F2;
    --prever-ouro: #E1B24A;

}

/* Paletas (geradas). "novo" = Figma; "antigo" = brand book até 0.1.34. As utilities do Tailwind
   leem estas variáveis (brand-tailwind.js), então trocar data-palette no <html> recolore tudo. */

:root {
    --c-brand-50: 242 238 245;
    --c-brand-100: 237 234 242;
    --c-brand-200: 217 207 230;
    --c-brand-300: 172 149 192;
    --c-brand-400: 142 107 174;
    --c-brand-500: 113 74 148;
    --c-brand-600: 89 43 129;
    --c-brand-700: 74 36 112;
    --c-brand-800: 63 42 86;
    --c-brand-900: 43 28 59;
    --c-brand-950: 26 16 36;
    --c-lime-50: 251 252 230;
    --c-lime-100: 245 248 194;
    --c-lime-200: 234 238 190;
    --c-lime-300: 218 225 128;
    --c-lime-400: 212 226 31;
    --c-lime-500: 206 221 0;
    --c-lime-600: 186 199 5;
    --c-lime-700: 170 184 35;
    --c-lime-800: 101 112 0;
    --c-lime-900: 69 76 0;
    --c-lime-950: 46 51 0;
    --c-atoll-50: 239 245 251;
    --c-atoll-100: 220 234 251;
    --c-atoll-200: 185 214 248;
    --c-atoll-300: 150 194 245;
    --c-atoll-400: 121 177 244;
    --c-atoll-500: 91 161 242;
    --c-atoll-600: 62 144 240;
    --c-atoll-700: 35 112 201;
    --c-atoll-800: 26 83 150;
    --c-atoll-900: 18 58 105;
    --c-atoll-950: 11 37 67;
    --c-gold-50: 255 248 230;
    --c-gold-100: 250 240 211;
    --c-gold-200: 244 224 166;
    --c-gold-300: 237 207 120;
    --c-gold-400: 231 192 92;
    --c-gold-500: 225 178 74;
    --c-gold-600: 196 149 58;
    --c-gold-700: 161 122 44;
    --c-gold-800: 125 94 34;
    --c-gold-900: 92 69 25;
    --c-gold-950: 61 46 16;
    --c-slate-50: 250 251 252;
    --c-slate-100: 240 241 245;
    --c-slate-200: 235 237 246;
    --c-slate-300: 223 225 230;
    --c-slate-400: 155 162 157;
    --c-slate-500: 108 117 125;
    --c-slate-600: 73 80 87;
    --c-slate-700: 52 58 64;
    --c-slate-800: 33 37 41;
    --c-slate-900: 13 13 18;
    --c-slate-950: 8 8 12;
    --c-red-50: 251 235 236;
    --c-red-100: 247 212 215;
    --c-red-200: 241 192 198;
    --c-red-300: 231 127 137;
    --c-red-400: 224 78 92;
    --c-red-500: 220 53 69;
    --c-red-600: 220 53 69;
    --c-red-700: 176 42 55;
    --c-red-800: 132 32 41;
    --c-red-900: 88 21 28;
    --c-red-950: 59 14 19;
    --c-emerald-50: 227 242 234;
    --c-emerald-100: 200 230 211;
    --c-emerald-200: 163 215 182;
    --c-emerald-300: 108 192 141;
    --c-emerald-400: 52 168 101;
    --c-emerald-500: 22 163 74;
    --c-emerald-600: 22 163 74;
    --c-emerald-700: 18 131 60;
    --c-emerald-800: 14 99 46;
    --c-emerald-900: 9 67 31;
    --c-emerald-950: 5 42 19;
    --c-rose-50: 251 235 236;
    --c-rose-100: 247 212 215;
    --c-rose-200: 241 192 198;
    --c-rose-300: 231 127 137;
    --c-rose-400: 224 78 92;
    --c-rose-500: 220 53 69;
    --c-rose-600: 220 53 69;
    --c-rose-700: 176 42 55;
    --c-rose-800: 132 32 41;
    --c-rose-900: 88 21 28;
    --c-rose-950: 59 14 19;
    --c-green-50: 227 242 234;
    --c-green-100: 200 230 211;
    --c-green-200: 163 215 182;
    --c-green-300: 108 192 141;
    --c-green-400: 52 168 101;
    --c-green-500: 22 163 74;
    --c-green-600: 22 163 74;
    --c-green-700: 18 131 60;
    --c-green-800: 14 99 46;
    --c-green-900: 9 67 31;
    --c-green-950: 5 42 19;
    --c-page: 235 237 246;
    --ds-page: #EBEDF6;
    --ds-surface: #FFFFFF;
    --ds-card: #FAFBFC;
    --ds-line: #EBEDF6;
    --ds-divider: #DFE1E6;
    --ds-chip: #F0F1F5;
    --ds-text: #0D0D12;
    --ds-heading: #343A40;
    --ds-muted: #6C757D;
    --ds-faint: #9BA29D;
    --ds-purple: #592B81;
    --ds-purple-soft: #F2EEF5;
    --ds-purple-tint: #F0EFF5;
    --ds-purple-hover: #E6DEEE;
    --ds-blue: #3E90F0;
    --ds-blue-tint: #EFF5FB;
    --ds-lime: #CEDD00;
    --ds-lime-text: #BAC705;
    --ds-lime-tint: #FBFCE6;
    --ds-ok: #16A34A;
    --ds-ok-tint: #E3F2EA;
    --ds-bad: #DC3545;
    --ds-bad-tint: #FBEBEC;
    --ds-bad-line: #F1C0C6;
    --ds-warn: #C4953A;
    --ds-warn-text: #A17A2C;
    --ds-warn-tint: #FFF8E6;
    --ds-th-bg: #F8F9FB;
    --ds-row-hover: #F8F9FB;
}

:root[data-palette="antigo"] {
    --c-brand-50: 245 241 250;
    --c-brand-100: 235 227 244;
    --c-brand-200: 214 199 233;
    --c-brand-300: 185 158 219;
    --c-brand-400: 144 99 205;
    --c-brand-500: 112 67 168;
    --c-brand-600: 88 44 131;
    --c-brand-700: 74 37 112;
    --c-brand-800: 63 42 86;
    --c-brand-900: 43 28 59;
    --c-brand-950: 26 16 36;
    --c-lime-50: 251 252 230;
    --c-lime-100: 245 248 194;
    --c-lime-200: 237 243 138;
    --c-lime-300: 227 236 77;
    --c-lime-400: 218 229 31;
    --c-lime-500: 208 223 0;
    --c-lime-600: 175 188 0;
    --c-lime-700: 138 148 0;
    --c-lime-800: 101 112 0;
    --c-lime-900: 69 76 0;
    --c-lime-950: 46 51 0;
    --c-atoll-50: 232 249 253;
    --c-atoll-100: 205 242 250;
    --c-atoll-200: 154 228 245;
    --c-atoll-300: 95 211 238;
    --c-atoll-400: 38 195 232;
    --c-atoll-500: 0 181 226;
    --c-atoll-600: 0 148 186;
    --c-atoll-700: 0 115 145;
    --c-atoll-800: 0 84 104;
    --c-atoll-900: 0 55 69;
    --c-atoll-950: 0 34 43;
    --c-gold-50: 253 248 236;
    --c-gold-100: 250 240 211;
    --c-gold-200: 244 224 166;
    --c-gold-300: 237 207 120;
    --c-gold-400: 231 192 92;
    --c-gold-500: 225 178 74;
    --c-gold-600: 196 149 58;
    --c-gold-700: 161 122 44;
    --c-gold-800: 125 94 34;
    --c-gold-900: 92 69 25;
    --c-gold-950: 61 46 16;
    --c-slate-50: 247 245 250;
    --c-slate-100: 239 235 245;
    --c-slate-200: 226 220 235;
    --c-slate-300: 203 194 216;
    --c-slate-400: 156 145 174;
    --c-slate-500: 111 100 130;
    --c-slate-600: 85 74 103;
    --c-slate-700: 64 54 81;
    --c-slate-800: 44 36 57;
    --c-slate-900: 30 24 42;
    --c-slate-950: 19 14 27;
    --c-red-50: 254 242 242;
    --c-red-100: 254 226 226;
    --c-red-200: 254 202 202;
    --c-red-300: 252 165 165;
    --c-red-400: 248 113 113;
    --c-red-500: 239 68 68;
    --c-red-600: 220 38 38;
    --c-red-700: 185 28 28;
    --c-red-800: 153 27 27;
    --c-red-900: 127 29 29;
    --c-red-950: 69 10 10;
    --c-rose-50: 255 241 242;
    --c-rose-100: 255 228 230;
    --c-rose-200: 254 205 211;
    --c-rose-300: 253 164 175;
    --c-rose-400: 251 113 133;
    --c-rose-500: 244 63 94;
    --c-rose-600: 225 29 72;
    --c-rose-700: 190 18 60;
    --c-rose-800: 159 18 57;
    --c-rose-900: 136 19 55;
    --c-rose-950: 76 5 25;
    --c-emerald-50: 236 253 245;
    --c-emerald-100: 209 250 229;
    --c-emerald-200: 167 243 208;
    --c-emerald-300: 110 231 183;
    --c-emerald-400: 52 211 153;
    --c-emerald-500: 16 185 129;
    --c-emerald-600: 5 150 105;
    --c-emerald-700: 4 120 87;
    --c-emerald-800: 6 95 70;
    --c-emerald-900: 6 78 59;
    --c-emerald-950: 2 44 34;
    --c-green-50: 240 253 244;
    --c-green-100: 220 252 231;
    --c-green-200: 187 247 208;
    --c-green-300: 134 239 172;
    --c-green-400: 74 222 128;
    --c-green-500: 34 197 94;
    --c-green-600: 22 163 74;
    --c-green-700: 21 128 61;
    --c-green-800: 22 101 52;
    --c-green-900: 20 83 45;
    --c-green-950: 5 46 22;
    --c-page: 247 245 250;
    --ds-page: #F7F5FA;
    --ds-surface: #FFFFFF;
    --ds-card: #F7F5FA;
    --ds-line: #E2DCEB;
    --ds-divider: #E2DCEB;
    --ds-chip: #EFEBF5;
    --ds-text: #1E182A;
    --ds-heading: #403651;
    --ds-muted: #6F6482;
    --ds-faint: #9C91AE;
    --ds-purple: #582C83;
    --ds-purple-soft: #F5F1FA;
    --ds-purple-tint: #EBE3F4;
    --ds-purple-hover: #EBE3F4;
    --ds-blue: #0094BA;
    --ds-blue-tint: #E8F9FD;
    --ds-lime: #D0DF00;
    --ds-lime-text: #8A9400;
    --ds-lime-tint: #FBFCE6;
    --ds-ok: #047857;
    --ds-ok-tint: #ECFDF5;
    --ds-bad: #B91C1C;
    --ds-bad-tint: #FEF2F2;
    --ds-bad-line: #FECACA;
    --ds-warn: #C4953A;
    --ds-warn-text: #A17A2C;
    --ds-warn-tint: #FDF8EC;
    --ds-th-bg: #F7F5FA;
    --ds-row-hover: #F7F5FA;
}

/* Paleta "ds" ("Prever Design System.html", o padrão): parte da paleta nova e troca só o que o
   guia redefine — roxo #592C82 com hover/pressed, borda forte #CBCFCD, texto forte #343A40 e as
   cores de texto de feedback que passam AA (success/danger/warning/info). */
:root[data-palette="ds"] {
    --prever-roxo: #592C82;
    --prever-roxo-escuro: #3D1D5C;
    --prever-ametista: #8E55EA;
    --c-brand-50: 243 239 248;
    --c-brand-100: 230 224 239;
    --c-brand-200: 217 204 232;
    --c-brand-600: 89 44 130;
    --c-brand-700: 74 36 112;
    --c-brand-800: 61 29 92;
    --c-slate-300: 203 207 205;
    --c-slate-800: 52 58 64;
    --c-slate-900: 52 58 64;
    --c-atoll-50: 234 243 254;
    --c-atoll-700: 31 111 209;
    --c-gold-500: 230 168 23;
    --c-gold-800: 138 90 0;
    --c-red-50: 253 236 238;
    --c-red-700: 180 35 50;
    --c-rose-50: 253 236 238;
    --c-rose-700: 180 35 50;
    --c-emerald-50: 234 247 239;
    --c-emerald-700: 21 128 61;
    --c-green-50: 234 247 239;
    --c-green-700: 21 128 61;
    --ds-line: #EBEDF6;
    --ds-divider: #EBEDF6;
    --ds-text: #343A40;
    --ds-body: #495057;
    --ds-heading: #343A40;
    --ds-purple: #592C82;
    --ds-purple-soft: #F3EFF8;
    --ds-purple-tint: #F3EFF8;
    --ds-purple-hover: #E6E0EF;
    --ds-purple-pressed: #D9CCE8;
    --ds-blue-tint: #EAF3FE;
    --ds-info-text: #1F6FD1;
    --ds-ok: #15803D;
    --ds-ok-tint: #EAF7EF;
    --ds-bad: #B42332;
    --ds-bad-tint: #FDECEE;
    --ds-warn: #E6A817;
    --ds-warn-text: #8A5A00;
    --ds-th-bg: #FAFBFC;
    --ds-row-hover: #F3EFF8;
    --ds-border-strong: #CBCFCD;
    --ds-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #3E90F0;
}

html {
    font-family: "Intelo", "Rubik", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Títulos: Intelo Bold/ExtraBold no brand book -> pesos 700/800, tracking levemente fechado. */
h1, h2, h3 {
    letter-spacing: -0.01em;
}

[v-cloak] {
    display: none !important;
}

::selection {
    background: var(--prever-lime);
    color: #1A1024;
}

/* Foco visível na cor secundária (Amethyst): contrasta em fundos claros e escuros. */
:focus-visible {
    outline: 2px solid var(--prever-ametista);
    outline-offset: 2px;
}

/* Barras de rolagem discretas, na temperatura da marca. */
* {
    scrollbar-width: thin;
    scrollbar-color: #CACFCC transparent;
}

/* Logo: nunca distorcer (brand book p.7). */
.brand-logo {
    height: 2.75rem;
    width: auto;
    display: block;
}

/* Respostas do agente em Markdown (chat e análises). O preflight do Tailwind zera listas,
   títulos e tabelas — aqui devolvemos a tipografia mínima, na temperatura da marca. */
.md-body > * + * {
    margin-top: 0.6em;
}

.md-body h1, .md-body h2, .md-body h3, .md-body h4 {
    font-weight: 700;
    color: #1A1024;
    line-height: 1.3;
}

.md-body h1 { font-size: 1.15em; }
.md-body h2 { font-size: 1.08em; }
.md-body h3, .md-body h4 { font-size: 1em; }

/* Preview compacto (cards de análises salvas): títulos no tamanho do texto. */
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4 { font-size: 1em; }
/* Card de altura fixa: o fim do conteúdo cortado esmaece em vez de terminar seco. */
.md-preview-fade {
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.md-body strong {
    font-weight: 600;
}

.md-body a {
    color: var(--prever-roxo);
    text-decoration: underline;
}

.md-body ul, .md-body ol {
    padding-left: 1.4em;
}

.md-body ul { list-style: disc; }
.md-body ol { list-style: decimal; }

.md-body li + li {
    margin-top: 0.25em;
}

.md-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--ds-purple-soft);
    color: var(--prever-roxo-escuro);
    padding: 0.1em 0.35em;
    border-radius: 0.3em;
}

.md-body pre {
    background: #1A1024;
    color: #E9E2F2;
    padding: 0.75em 1em;
    border-radius: 0.6em;
    overflow-x: auto;
    white-space: pre;
}

.md-body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 0.85em;
}

.md-body blockquote {
    border-left: 3px solid var(--prever-ametista);
    padding-left: 0.8em;
    color: #4B5563;
}

.md-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    display: block;
    overflow-x: auto;
}

.md-body th, .md-body td {
    border: 1px solid var(--ds-divider);
    padding: 0.35em 0.6em;
    text-align: left;
    vertical-align: top;
}

.md-body th {
    background: var(--ds-purple-tint);
    font-weight: 600;
}

.md-body hr {
    border: 0;
    border-top: 1px solid var(--ds-divider);
}


/* ==========================================================================
   Componentes do design system. Classes ds-* usadas pelo shell e pelas páginas;
   combinam com utilities do Tailwind (espaçamento, grid) sem conflitar.
   ========================================================================== */

body { background: var(--ds-page); color: var(--ds-text); }

/* Superfícies: seção (contêiner branco grande) e card interno. */
.ds-section {
    background: var(--ds-surface);
    border-radius: 24px;
    padding: 24px;
}
@media (min-width: 1024px) { .ds-section { padding: 28px 32px; } }
.ds-card {
    background: var(--ds-card);
    border: 1px solid var(--ds-line);
    border-radius: 16px;
    padding: 20px;
}
.ds-card--bad { border-color: var(--ds-bad-line); }

/* Tipografia de página e de seção. */
.ds-page-title {
    color: var(--ds-purple);
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.ds-section-head { display: flex; align-items: flex-start; gap: 10px; }
.ds-section-head > i { color: var(--ds-purple); margin-top: 0.3rem; width: 1.1rem; text-align: center; }
.ds-section-title { color: var(--ds-heading); font-size: 1.25rem; line-height: 1.3; font-weight: 500; }
.ds-section-subtitle { color: var(--ds-muted); font-size: 0.95rem; margin-top: 2px; }
.ds-card-title { color: var(--ds-heading); font-size: 0.95rem; font-weight: 500; }

/* Formulários: label em caixa alta e campo branco de borda clara. */
.ds-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-muted);
    margin-bottom: 6px;
}
.ds-input {
    width: 100%;
    min-height: 44px;
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: 10px;
    padding: 0 14px;
    color: var(--ds-text);
    font-size: 0.9rem;
}
textarea.ds-input { padding: 10px 14px; }
.ds-input:focus { outline: none; border-color: var(--ds-purple); box-shadow: 0 0 0 3px var(--ds-purple-soft); }
select.ds-input {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23343A40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* Chips, badges e pílulas. */
.ds-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ds-chip); color: var(--ds-muted);
    border-radius: 999px; padding: 4px 12px; font-size: 0.8rem;
}
.ds-chip-action {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ds-purple-soft); color: var(--ds-purple);
    border-radius: 6px; padding: 5px 12px; font-size: 0.8rem; font-weight: 500;
    transition: background-color .15s;
}
.ds-chip-action:hover { background: var(--ds-purple-hover); }
.ds-badge-warn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ds-warn-tint); color: var(--ds-muted);
    border-radius: 999px; padding: 6px 14px; font-size: 0.8rem;
}
.ds-badge-warn > i { color: var(--ds-warn); }
.ds-pill-ok, .ds-pill-bad, .ds-pill-warn, .ds-pill-neutral, .ds-pill-info {
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; font-weight: 500; white-space: nowrap;
}
.ds-pill-ok { background: var(--ds-ok-tint); color: var(--ds-ok); }
.ds-pill-bad { background: var(--ds-bad-tint); color: var(--ds-bad); }
.ds-pill-warn { background: var(--ds-warn-tint); color: var(--ds-warn-text); }
.ds-pill-neutral { background: var(--ds-chip); color: var(--ds-muted); }
.ds-pill-info { background: var(--ds-blue-tint); color: var(--ds-blue); }

/* KPI: rótulo, valor grande, ícone em quadrado e rodapé com divisor. */
.ds-kpi { position: relative; display: flex; flex-direction: column; }
.ds-kpi__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ds-kpi__label { color: var(--ds-muted); font-size: 0.9rem; }
.ds-kpi__value { color: var(--ds-heading); font-size: 1.9rem; line-height: 1.15; font-weight: 500; margin-top: 4px; }
.ds-kpi__value--ok { color: var(--ds-lime-text); }
.ds-kpi__value--bad { color: var(--ds-bad); }
.ds-kpi__value--purple { color: var(--ds-purple); }
.ds-kpi__value--blue { color: var(--ds-blue); }
.ds-kpi__icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ds-chip); color: var(--ds-muted);
}
.ds-kpi__foot {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ds-divider);
    display: flex; justify-content: space-between; gap: 8px;
    color: var(--ds-muted); font-size: 0.82rem;
}
.ds-kpi__foot strong { color: var(--ds-heading); font-weight: 600; }
.ds-kpi--accent-lime { border-left: 3px solid var(--ds-lime); }
.ds-kpi--accent-blue { border-left: 3px solid var(--ds-blue); }
.ds-kpi--accent-purple { border-left: 3px solid var(--ds-purple); }
.ds-kpi--accent-red { border-left: 3px solid var(--ds-bad); }

/* Tabela: cabeçalho neutro, grupos tingidos (roxo/azul), linhas com divisor, total tingido. */
.ds-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; color: var(--ds-text); }
.ds-table thead th {
    background: var(--ds-th-bg); color: var(--ds-muted);
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
    text-align: left; padding: 12px; border-bottom: 1px solid var(--ds-divider); white-space: nowrap;
}
.ds-table thead th.ds-th-purple { background: var(--ds-purple-tint); color: var(--ds-purple); border-bottom-color: var(--ds-purple); }
.ds-table thead th.ds-th-blue { background: var(--ds-blue-tint); color: var(--ds-blue); border-bottom-color: var(--ds-blue); }
.ds-table tbody td { padding: 14px 12px; border-bottom: 1px solid var(--ds-divider); vertical-align: middle; }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover td { background: var(--ds-row-hover); }
.ds-table tfoot td {
    background: var(--ds-purple-tint); color: var(--ds-purple);
    padding: 12px 14px; font-weight: 500; border-top: 1px solid var(--ds-purple);
}
.ds-table-wrap { overflow-x: auto; border-radius: 12px; }

/* Menu do layout novo: ícone colorido por item; na paleta antiga, todos em Amethyst. */
:root[data-palette="antigo"] .ds-nav-icon { color: #9063CD !important; }

/* ==========================================================================
   Layout "antigo" (seletor de design): as mesmas classes ds-* voltam à aparência de até 0.1.34
   — cards brancos com borda, labels sem caixa alta, campos compactos, tabela sem fundo no
   cabeçalho, pílulas com borda, KPIs sem cor. O shell antigo (menu escuro + top bar) fica no
   app-shell.js.
   ========================================================================== */
:root[data-layout="antigo"] .ds-section {
    border: 1px solid var(--ds-line);
    border-radius: 16px;
    padding: 20px;
}
:root[data-layout="antigo"] .ds-card {
    background: #FFFFFF;
    border: 1px solid var(--ds-line);
    border-radius: 12px;
    padding: 16px;
}
:root[data-layout="antigo"] .ds-kpi--accent-lime,
:root[data-layout="antigo"] .ds-kpi--accent-blue,
:root[data-layout="antigo"] .ds-kpi--accent-purple,
:root[data-layout="antigo"] .ds-kpi--accent-red { border-left-width: 1px; border-left-color: var(--ds-line); }
:root[data-layout="antigo"] .ds-card--bad { border-color: var(--ds-line); }
:root[data-layout="antigo"] .ds-section-head > i,
:root[data-layout="antigo"] .ds-kpi__icon { display: none; }
:root[data-layout="antigo"] .ds-section-title { font-size: 0.875rem; font-weight: 600; color: var(--ds-heading); }
:root[data-layout="antigo"] .ds-section-subtitle { font-size: 0.8rem; }
:root[data-layout="antigo"] .ds-label {
    text-transform: none; letter-spacing: 0; font-size: 0.75rem; margin-bottom: 4px;
}
:root[data-layout="antigo"] .ds-input {
    min-height: 0; border-color: #CBC2D8; border-radius: 8px; padding: 8px 12px; font-size: 0.875rem;
}
:root[data-layout="antigo"] select.ds-input { appearance: auto; background-image: none; padding-right: 12px; }
:root[data-layout="antigo"] .ds-input:focus { border-color: #CBC2D8; box-shadow: 0 0 0 2px #7043A8; }
:root[data-layout="antigo"] .min-h-\[44px\] { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
:root[data-layout="antigo"] .rounded-\[10px\] { border-radius: 8px; }
:root[data-layout="antigo"] .ds-chip-action {
    background: #FFFFFF; color: #554A67; border: 1px solid var(--ds-line); border-radius: 8px; padding: 6px 12px;
}
:root[data-layout="antigo"] .ds-chip-action:hover { background: var(--ds-page); }
:root[data-layout="antigo"] .ds-badge-warn {
    background: #FAF0D3; color: #A17A2C; border: 1px solid #F4E0A6; padding: 4px 8px; font-size: 0.75rem;
}
:root[data-layout="antigo"] .ds-pill-ok,
:root[data-layout="antigo"] .ds-pill-bad,
:root[data-layout="antigo"] .ds-pill-warn,
:root[data-layout="antigo"] .ds-pill-neutral,
:root[data-layout="antigo"] .ds-pill-info { border: 1px solid; font-size: 0.75rem; }
:root[data-layout="antigo"] .ds-pill-ok { border-color: #A7F3D0; }
:root[data-layout="antigo"] .ds-pill-bad { border-color: #FECACA; }
:root[data-layout="antigo"] .ds-pill-warn { border-color: #F4E0A6; }
:root[data-layout="antigo"] .ds-pill-neutral { border-color: var(--ds-line); }
:root[data-layout="antigo"] .ds-pill-info { border-color: #9AE4F5; }
:root[data-layout="antigo"] .ds-kpi__value { font-size: 1.5rem; font-weight: 700; color: var(--ds-text); }
:root[data-layout="antigo"] .ds-kpi__foot { border-top-color: var(--ds-line); }
:root[data-layout="antigo"] .ds-table thead th {
    background: transparent; color: #9C91AE; font-weight: 600; padding: 12px 16px;
    border-bottom-color: #EFEBF5;
}
:root[data-layout="antigo"] .ds-table thead th.ds-th-purple,
:root[data-layout="antigo"] .ds-table thead th.ds-th-blue { background: transparent; color: #9C91AE; border-bottom-color: #EFEBF5; }
:root[data-layout="antigo"] .ds-table tbody td { padding: 12px 16px; border-bottom-color: #F7F5FA; }
:root[data-layout="antigo"] .ds-table tfoot td { background: #F7F5FA; color: var(--ds-text); border-top-color: var(--ds-line); }
/* Filtros que no layout novo sobem para o cabeçalho: no antigo ficam num card próprio. */
:root[data-layout="antigo"] .ds-header-slot > * { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }

/* ==========================================================================
   Layout "ds" ("Prever Design System.html", o padrão): mesma estrutura do layout novo, com a
   tipografia, campos, botões, tabelas e selos do guia. Só sobrescreve o que o guia muda.
   ========================================================================== */
:root[data-layout="ds"] {
    font-family: "Neulis Sans", "Rubik", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}
:root[data-layout="ds"] body { color: var(--ds-text); }
:root[data-layout="ds"] h1,
:root[data-layout="ds"] h2,
:root[data-layout="ds"] h3 { letter-spacing: -0.02em; }
:root[data-layout="ds"] :focus-visible { outline: none; box-shadow: var(--ds-focus-ring, 0 0 0 2px #FFFFFF, 0 0 0 4px #3E90F0); }

/* Tipografia: Display 32/700, seções 24/600, títulos de card 16/600. */
:root[data-layout="ds"] .ds-page-title { font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
:root[data-layout="ds"] .ds-section-title { font-size: 1.5rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
:root[data-layout="ds"] .ds-section-subtitle { color: var(--ds-muted); font-size: 0.875rem; }
:root[data-layout="ds"] .ds-card-title { font-size: 1rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
:root[data-layout="ds"] .ds-card { border-radius: 16px; }

/* Formulários: rótulo 12/600 acima do campo; campo 40px em fundo de controle, foco branco com
   borda roxa e anel azul. */
:root[data-layout="ds"] .ds-label {
    text-transform: none; letter-spacing: 0; font-size: 0.75rem; font-weight: 600; color: var(--ds-body);
}
:root[data-layout="ds"] .ds-input {
    min-height: 40px; background-color: #F0F1F5; border-color: transparent; border-radius: 8px;
    padding: 0 12px; font-size: 0.875rem; color: var(--ds-text);
}
:root[data-layout="ds"] textarea.ds-input { padding: 10px 12px; }
:root[data-layout="ds"] .ds-input:hover { border-color: var(--ds-border-strong); }
:root[data-layout="ds"] .ds-input:focus {
    background-color: #FFFFFF; border-color: var(--ds-purple); box-shadow: 0 0 0 3px rgba(62, 144, 240, 0.45);
}
:root[data-layout="ds"] .ds-input:disabled { color: var(--ds-faint); border-color: transparent; }
:root[data-layout="ds"] select.ds-input {
    padding-right: 36px; background-position: right 12px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23592C82' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Botões: 40px, raio 8, semibold; primário escurece no hover (#4A2470) e no clique (#3D1D5C). */
:root[data-layout="ds"] .min-h-\[44px\] { min-height: 40px; }
:root[data-layout="ds"] button.rounded-\[10px\],
:root[data-layout="ds"] .min-h-\[44px\].rounded-\[10px\],
:root[data-layout="ds"] .min-h-\[36px\].rounded-\[10px\] { border-radius: 8px; }
:root[data-layout="ds"] .bg-brand-600.hover\:bg-brand-500:hover { background-color: rgb(var(--c-brand-700)); }
:root[data-layout="ds"] .bg-brand-600.hover\:bg-brand-500:active { background-color: rgb(var(--c-brand-800)); }

/* Chips e selos: ação secundária em fundo de controle; pílulas 12/600 com texto AA. */
:root[data-layout="ds"] .ds-chip { color: var(--ds-body); }
:root[data-layout="ds"] .ds-chip-action {
    background: #F0F1F5; color: var(--ds-purple); border-radius: 8px; font-weight: 600;
}
:root[data-layout="ds"] .ds-chip-action:hover { background: var(--ds-purple-hover); }
:root[data-layout="ds"] .ds-chip-action:active { background: var(--ds-purple-pressed); }
:root[data-layout="ds"] .ds-badge-warn { color: var(--ds-warn-text); }
:root[data-layout="ds"] .ds-pill-ok,
:root[data-layout="ds"] .ds-pill-bad,
:root[data-layout="ds"] .ds-pill-warn,
:root[data-layout="ds"] .ds-pill-neutral,
:root[data-layout="ds"] .ds-pill-info { font-size: 0.75rem; font-weight: 600; }
:root[data-layout="ds"] .ds-pill-neutral { color: var(--ds-body); }
:root[data-layout="ds"] .ds-pill-info { color: var(--ds-info-text); }

/* KPI: rótulo 13px, valor 32/700; o lima nunca vai em texto (valor "ok" em success-text). */
:root[data-layout="ds"] .ds-kpi__label { font-size: 0.8125rem; }
:root[data-layout="ds"] .ds-kpi__value { font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
:root[data-layout="ds"] .ds-kpi__value--ok { color: var(--ds-ok); }
:root[data-layout="ds"] .ds-kpi__value--blue { color: var(--ds-info-text); }
:root[data-layout="ds"] .ds-kpi__icon { background: var(--ds-purple-soft); color: var(--ds-purple); }
:root[data-layout="ds"] .ds-kpi__foot { font-size: 0.75rem; }

/* Tabela: Inter 12,5px; cabeçalho 10,5px em caixa alta; linhas zebradas; total tingido em negrito. */
:root[data-layout="ds"] .ds-table { font-family: Inter, sans-serif; font-size: 12.5px; line-height: 18.75px; letter-spacing: -0.04px; }
:root[data-layout="ds"] .ds-table thead th {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; padding: 10px 14px; border-bottom-color: var(--ds-line);
}
:root[data-layout="ds"] .ds-table tbody td { padding: 10px 14px; border-bottom-color: #F0F1F5; }
:root[data-layout="ds"] .ds-table tbody tr:nth-child(even) td { background: #FAFBFC; }
:root[data-layout="ds"] .ds-table tbody tr:hover td { background: var(--ds-row-hover); }
:root[data-layout="ds"] .ds-table tfoot td {
    background: var(--ds-purple-soft); color: var(--ds-text); font-weight: 700; border-top-color: var(--ds-line);
}
:root[data-layout="ds"] .ds-table-wrap { border-radius: 14px; }