/* =====================================================================================
   SIN Sales - Identidade Visual
   -------------------------------------------------------------------------------------
   Camada de tema aplicada DEPOIS de bootstrap.min.css, Radzen default.css e app.css.
   Nao altera arquivos .razor: tudo e resolvido por tokens e sobrescrita de seletores.

   Ordem obrigatoria no index.html:
       bootstrap.min.css -> Radzen default.css -> app.css -> sin-tema.css

   Estrutura:
       1.  Primitivas de marca
       2.  Tokens semanticos - tema claro
       3.  Tokens semanticos - tema escuro
       4.  Ponte para os tokens legados do app.css
       5.  Ponte para o Bootstrap 5.1
       6.  Botoes - padronizacao
       7.  Formularios e foco
       8.  Navegacao
       9.  Tabelas e listagens
       10. Cards, modais, accordion, list-group
       11. Badges, alerts, progress, spinners
       12. Radzen
       13. Links, scrollbar, selecao
       14. Utilitarios de marca
   ===================================================================================== */


/* =====================================================================================
   1. PRIMITIVAS DE MARCA
   Cores extraidas de wwwroot/imagens/geral/logo-sin-padrao.svg.
   Nao usar estes valores direto em componentes: usar os tokens semanticos da secao 2/3.
   ===================================================================================== */

:root {
    /* Azul institucional - #003C6A e a cor da marca */
    --sin-azul-50: #EDF4FA;
    --sin-azul-100: #D3E5F3;
    --sin-azul-200: #9CC6E6;
    --sin-azul-300: #5FA3D4;
    --sin-azul-400: #2E86C1;
    --sin-azul-500: #0761A3;
    --sin-azul-600: #024E86;
    --sin-azul-700: #003C6A; /* base da marca */
    --sin-azul-800: #002E52;
    --sin-azul-900: #00243F;

    /* Laranja da marca - #F18800 / #E1580A */
    --sin-laranja-50: #FFF7EC;
    --sin-laranja-100: #FFEDD6;
    --sin-laranja-200: #FFD9A5;
    --sin-laranja-300: #FFBB63;
    --sin-laranja-400: #FF9F26;
    --sin-laranja-500: #F18800; /* base da marca */
    --sin-laranja-600: #E1580A; /* laranja escuro da marca */
    --sin-laranja-700: #B8480A;
    --sin-laranja-800: #8A3607;

    /* Magenta / vinho da marca - #CC093B / #870B28.
       É a TERCEIRA COR DO TEMA, ao lado do azul e do laranja. Não é a cor de erro:
       erro tem escala própria (--sin-vermelho-*) logo abaixo. Misturar as duas
       esconderia um terço da identidade atrás de mensagens de falha. */
    --sin-magenta-50: #FEF0F3;
    --sin-magenta-100: #FDDCE4;
    --sin-magenta-200: #F9AEBF;
    --sin-magenta-300: #F2708C;
    --sin-magenta-400: #E5325C;
    --sin-magenta-500: #CC093B; /* base da marca */
    --sin-magenta-600: #A8072F;
    --sin-magenta-700: #870B28; /* vinho da marca */

    /* Vermelho de alarme - só para erro, falha e ação destrutiva.
       Matiz por volta de 0° para ler como alerta, distinto do magenta da marca
       (~343°), de modo que ninguém confunda identidade com problema. */
    --sin-vermelho-50: #FDECEA;
    --sin-vermelho-100: #FBD5D0;
    --sin-vermelho-200: #F5AFA7;
    --sin-vermelho-300: #EF8A8A;
    --sin-vermelho-400: #D93A3A;
    --sin-vermelho-500: #C62828;
    --sin-vermelho-600: #B71C1C;
    --sin-vermelho-700: #8E1616;

    /* Verde de apoio - harmonizado com o azul institucional (nao e cor de marca) */
    --sin-verde-50: #EAF7F1;
    --sin-verde-100: #CDEDDF;
    --sin-verde-200: #8FD6BA;
    --sin-verde-300: #34C38F;
    --sin-verde-500: #0E7C5A;
    --sin-verde-600: #0A6247;
    --sin-verde-700: #084E39;

    /* Ambar de atencao */
    --sin-ambar-50: #FFF8E6;
    --sin-ambar-100: #FFEFC2;
    --sin-ambar-300: #FFD24D;
    --sin-ambar-500: #E0A800;
    --sin-ambar-700: #7A5F0F;

    /* Neutros */
    --sin-neutro-0: #FFFFFF;
    --sin-neutro-25: #FAFBFC;
    --sin-neutro-50: #F4F6F8;
    --sin-neutro-100: #E9EDF1;
    --sin-neutro-200: #D7DDE4;
    --sin-neutro-300: #BFC8D2;
    --sin-neutro-400: #94A1AE;
    --sin-neutro-500: #6B7885;
    --sin-neutro-600: #4E5A66;
    --sin-neutro-700: #35404A;
    --sin-neutro-800: #242A30;
    --sin-neutro-900: #1A1F24;
    --sin-neutro-950: #12161A;

    /* Geometria e elevacao - valores unicos para todo o sistema */
    --sin-raio-xs: 3px;
    --sin-raio-sm: 4px;
    --sin-raio-md: 6px;
    --sin-raio-lg: 10px;
    --sin-raio-pill: 999px;

    --sin-transicao: 140ms ease-in-out;
    --sin-largura-foco: 0.2rem;

    --sin-icone-fechar: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}


/* =====================================================================================
   2. TOKENS SEMANTICOS - TEMA CLARO
   ===================================================================================== */

:root {
    /* Acao primaria - azul institucional */
    --sin-primaria: var(--sin-azul-700);
    --sin-primaria-hover: var(--sin-azul-800);
    --sin-primaria-ativa: var(--sin-azul-900);
    --sin-primaria-suave: var(--sin-azul-50);
    --sin-primaria-suave-borda: var(--sin-azul-200);
    --sin-primaria-texto: #FFFFFF;
    --sin-primaria-sobre-fundo: var(--sin-azul-700); /* cor de texto/icone em fundo neutro */
    --sin-primaria-rgb: 0, 60, 106;

    /* Destaque - laranja da marca. Texto ESCURO: branco sobre #F18800 da 2.5:1 e reprova WCAG */
    --sin-destaque: var(--sin-laranja-500);
    --sin-destaque-hover: var(--sin-laranja-600);
    --sin-destaque-ativa: var(--sin-laranja-700);
    --sin-destaque-suave: var(--sin-laranja-50);
    --sin-destaque-suave-borda: var(--sin-laranja-200);
    /* Sobre fundo claro o #F18800 fica em 2.5:1 contra o branco e o botao "some".
       A borda usa o laranja escuro da marca (3.7:1) para delimitar a area clicavel. */
    --sin-destaque-borda: var(--sin-laranja-600);
    --sin-destaque-texto: #2B1A00;
    --sin-destaque-sobre-fundo: var(--sin-laranja-700);
    --sin-destaque-rgb: 241, 136, 0;

    /* Perigo - vermelho de alarme, NAO o magenta da marca */
    --sin-perigo: var(--sin-vermelho-500);
    --sin-perigo-hover: var(--sin-vermelho-600);
    --sin-perigo-ativa: var(--sin-vermelho-700);
    --sin-perigo-suave: var(--sin-vermelho-50);
    --sin-perigo-suave-borda: var(--sin-vermelho-200);
    --sin-perigo-texto: #FFFFFF;
    --sin-perigo-sobre-fundo: var(--sin-vermelho-600);
    --sin-perigo-rgb: 198, 40, 40;

    /* Sucesso */
    --sin-sucesso: var(--sin-verde-500);
    --sin-sucesso-hover: var(--sin-verde-600);
    --sin-sucesso-ativa: var(--sin-verde-700);
    --sin-sucesso-suave: var(--sin-verde-50);
    --sin-sucesso-suave-borda: var(--sin-verde-200);
    --sin-sucesso-texto: #FFFFFF;
    --sin-sucesso-sobre-fundo: var(--sin-verde-600);
    --sin-sucesso-rgb: 14, 124, 90;

    /* Atencao */
    --sin-atencao: var(--sin-ambar-500);
    --sin-atencao-hover: #C99700;
    --sin-atencao-ativa: #A87F00;
    --sin-atencao-suave: var(--sin-ambar-50);
    --sin-atencao-suave-borda: var(--sin-ambar-100);
    --sin-atencao-texto: #2B2000;
    --sin-atencao-sobre-fundo: var(--sin-ambar-700);
    --sin-atencao-rgb: 224, 168, 0;

    /* Informacao */
    --sin-info: var(--sin-azul-500);
    --sin-info-hover: var(--sin-azul-600);
    --sin-info-suave: var(--sin-azul-50);
    --sin-info-suave-borda: var(--sin-azul-200);
    --sin-info-texto: #FFFFFF;
    --sin-info-sobre-fundo: var(--sin-azul-600);
    --sin-info-rgb: 7, 97, 163;

    /* Categorica - distingue status/etapa (Kanban de Leads), nao estado.
       Validada com scripts/validate_palette.js do skill dataviz contra esta
       superficie (#FFFFFF): CVD adjacente 9.1, normal-vision adjacente 19.6.
       Deliberadamente fora das familias vermelho/verde/ambar usadas acima,
       que ja carregam significado de perigo/sucesso/atencao. */
    --sin-categorica-1: #2A78D6;
    --sin-categorica-2: #EB6834;
    --sin-categorica-3: #1BAF7A;
    --sin-categorica-4: #EDA100;
    --sin-categorica-5: #E87BA4;
    --sin-categorica-6: #008300;
    --sin-categorica-7: #4A3AA7;
    --sin-categorica-8: #E34948;

    /* Neutra - acoes secundarias sem peso de marca */
    --sin-neutra: var(--sin-neutro-100);
    --sin-neutra-hover: var(--sin-neutro-200);
    --sin-neutra-ativa: var(--sin-neutro-300);
    --sin-neutra-borda: var(--sin-neutro-300);
    --sin-neutra-texto: var(--sin-neutro-700);

    /* Superficies */
    --sin-fundo-app: var(--sin-neutro-50);
    --sin-fundo-superficie: var(--sin-neutro-0);
    --sin-fundo-elevado: var(--sin-neutro-0);
    --sin-fundo-sutil: var(--sin-neutro-25);
    --sin-fundo-cabecalho: var(--sin-neutro-100);

    /* Bordas */
    --sin-borda: var(--sin-neutro-200);
    /* WCAG 1.4.11 exige 3:1 para borda de campo. #BFC8D2 dava 1.7:1 contra o branco. */
    --sin-borda-forte: #848F9B;
    --sin-borda-sutil: var(--sin-neutro-100);

    /* Texto */
    --sin-texto: var(--sin-neutro-800);
    --sin-texto-suave: var(--sin-neutro-500);
    --sin-texto-invertido: #FFFFFF;

    /* --- Terceira cor do tema ---
       O logotipo tem três cores: azul, laranja e magenta. As três compõem a identidade.
       O magenta NÃO é cor de erro — erro usa a escala --sin-vermelho-*, com matiz de
       alarme e propósito próprio. Foi assim justamente para o magenta poder aparecer
       livremente na interface, sem que ninguém leia identidade como problema. */
    --sin-marca-terceira: var(--sin-magenta-500);

    /* Véu atrás de modais e overlays */
    --sin-scrim: rgba(0, 36, 63, 0.42);

    /* Sombras */
    --sin-sombra-1: 0 1px 2px rgba(0, 36, 63, 0.08);
    --sin-sombra-2: 0 2px 8px rgba(0, 36, 63, 0.10);
    --sin-sombra-3: 0 8px 24px rgba(0, 36, 63, 0.14);

    /* Anel de foco unico para todo o sistema */
    --sin-anel-foco: 0 0 0 var(--sin-largura-foco) rgba(0, 60, 106, 0.30);
    --sin-anel-foco-perigo: 0 0 0 var(--sin-largura-foco) rgba(198, 40, 40, 0.30);
    --sin-anel-foco-destaque: 0 0 0 var(--sin-largura-foco) rgba(241, 136, 0, 0.40);
}


/* =====================================================================================
   3. TOKENS SEMANTICOS - TEMA ESCURO
   Sobre fundo escuro o azul #003C6A fica abaixo de 3:1 contra a superficie.
   A primaria clareia para #2E86C1 (4.0:1 contra a superficie, 3.9:1 contra texto branco).
   ===================================================================================== */

[data-theme="dark"] {
    --sin-primaria: var(--sin-azul-400);
    --sin-primaria-hover: var(--sin-azul-300);
    --sin-primaria-ativa: var(--sin-azul-200);
    --sin-primaria-suave: rgba(46, 134, 193, 0.16);
    --sin-primaria-suave-borda: rgba(46, 134, 193, 0.45);
    --sin-primaria-texto: #04121C;
    /* azul-200: azul-300 caia para 4.4:1 sobre o fundo tingido de .alert-primary */
    --sin-primaria-sobre-fundo: var(--sin-azul-200);
    --sin-primaria-rgb: 156, 198, 230;

    --sin-destaque: var(--sin-laranja-500);
    --sin-destaque-hover: var(--sin-laranja-400);
    --sin-destaque-ativa: var(--sin-laranja-300);
    --sin-destaque-suave: rgba(241, 136, 0, 0.16);
    --sin-destaque-suave-borda: rgba(241, 136, 0, 0.45);
    --sin-destaque-borda: var(--sin-laranja-500); /* ja da 5.7:1 contra a superficie escura */
    --sin-destaque-texto: #21160A;
    --sin-destaque-sobre-fundo: var(--sin-laranja-400);
    --sin-destaque-rgb: 255, 159, 38;

    /* Faixa estreita: precisa de >=4.5:1 contra o texto branco e >=3:1 contra a
       superficie escura. O tom 400 (#D93A3A) da 4.5 / 3.2. */
    --sin-perigo: var(--sin-vermelho-400);
    --sin-perigo-hover: var(--sin-vermelho-300);
    --sin-perigo-ativa: var(--sin-vermelho-200);
    --sin-perigo-suave: rgba(217, 58, 58, 0.16);
    --sin-perigo-suave-borda: rgba(217, 58, 58, 0.45);
    --sin-perigo-texto: #FFFFFF;
    --sin-perigo-sobre-fundo: var(--sin-vermelho-300);
    --sin-perigo-rgb: 239, 138, 138;

    --sin-sucesso: var(--sin-verde-300);
    --sin-sucesso-hover: #5BD4A9;
    --sin-sucesso-ativa: #7FE0BE;
    --sin-sucesso-suave: rgba(52, 195, 143, 0.16);
    --sin-sucesso-suave-borda: rgba(52, 195, 143, 0.45);
    --sin-sucesso-texto: #04231A;
    --sin-sucesso-sobre-fundo: var(--sin-verde-200);
    --sin-sucesso-rgb: 52, 195, 143;

    --sin-atencao: var(--sin-ambar-300);
    --sin-atencao-hover: #FFDE7A;
    --sin-atencao-ativa: #FFE9A6;
    --sin-atencao-suave: rgba(255, 210, 77, 0.16);
    --sin-atencao-suave-borda: rgba(255, 210, 77, 0.45);
    --sin-atencao-texto: #241B00;
    --sin-atencao-sobre-fundo: var(--sin-ambar-300);
    --sin-atencao-rgb: 255, 210, 77;

    --sin-info: var(--sin-azul-300);
    --sin-info-hover: var(--sin-azul-200);
    --sin-info-suave: rgba(95, 163, 212, 0.16);
    --sin-info-suave-borda: rgba(95, 163, 212, 0.45);
    --sin-info-texto: #04121C;
    --sin-info-sobre-fundo: var(--sin-azul-200);
    --sin-info-rgb: 156, 198, 230;

    /* Categorica - mesmo criterio do tema claro, validada contra #242A30:
       CVD adjacente 8.4, normal-vision adjacente 19.3. */
    --sin-categorica-1: #3987E5;
    --sin-categorica-2: #D95926;
    --sin-categorica-3: #199E70;
    --sin-categorica-4: #C98500;
    --sin-categorica-5: #D55181;
    --sin-categorica-6: #008300;
    --sin-categorica-7: #9085E9;
    --sin-categorica-8: #E66767;

    --sin-neutra: var(--sin-neutro-700);
    --sin-neutra-hover: var(--sin-neutro-600);
    --sin-neutra-ativa: var(--sin-neutro-500);
    --sin-neutra-borda: var(--sin-neutro-600);
    --sin-neutra-texto: #D8DEE4;

    --sin-fundo-app: var(--sin-neutro-900);
    --sin-fundo-superficie: var(--sin-neutro-800);
    --sin-fundo-elevado: #2A3138;
    --sin-fundo-sutil: var(--sin-neutro-950);
    --sin-fundo-cabecalho: #2E363D;

    --sin-borda: #3B454F;
    /* 3.2:1 contra a superficie escura, atendendo WCAG 1.4.11 */
    --sin-borda-forte: var(--sin-neutro-500);
    --sin-borda-sutil: #2E363D;

    --sin-texto: #DDE3E9;
    --sin-texto-suave: #A3AEB9;
    --sin-texto-invertido: #12161A;

    /* No escuro o magenta base fica pesado; o tom 400 mantem a cor reconhecivel.
       Continua sendo cor de tema, nunca de erro. */
    --sin-marca-terceira: var(--sin-magenta-400);

    --sin-scrim: rgba(0, 0, 0, 0.62);

    --sin-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.45);
    --sin-sombra-2: 0 2px 8px rgba(0, 0, 0, 0.50);
    --sin-sombra-3: 0 8px 24px rgba(0, 0, 0, 0.60);

    --sin-anel-foco: 0 0 0 var(--sin-largura-foco) rgba(95, 163, 212, 0.40);
    --sin-anel-foco-perigo: 0 0 0 var(--sin-largura-foco) rgba(217, 58, 58, 0.40);
    --sin-anel-foco-destaque: 0 0 0 var(--sin-largura-foco) rgba(255, 159, 38, 0.40);
}


/* =====================================================================================
   4. PONTE PARA OS TOKENS LEGADOS DO app.css
   O app.css ja tem ~110 variaveis consumidas por todo o sistema. Reapontando elas
   aqui, a identidade se propaga sem tocar em nenhum .razor.
   ===================================================================================== */

:root {
    --btn-primary-background: var(--sin-primaria);
    --btn-primary-cor: var(--sin-primaria-texto);
    --btn-secondary-background: var(--sin-neutro-600);
    --btn-secondary-cor: #FFFFFF;
    --btn-out-borda: var(--sin-primaria);
    --btn-out-color: var(--sin-primaria);

    --background-link-atual: var(--sin-primaria);
    --link-pagina-atual: #FFFFFF;
    --color-link: var(--sin-neutro-600);
    --color-link-focus: var(--sin-primaria);
    --link-active: var(--sin-primaria);
    --link-hover: var(--sin-primaria-suave);

    --bg-card: var(--sin-fundo-superficie);
    --card-background-impar: var(--sin-fundo-superficie);
    --card-background-par: var(--sin-fundo-sutil);
    --card-header-background: var(--sin-fundo-cabecalho);
    --card-header-background-selecionado: var(--sin-primaria-suave);
    --card-header-background-drag-over: var(--sin-sucesso-suave);
    --vis-card-borda: var(--sin-borda);

    --color-borda: var(--sin-borda-forte);
    --color-borda-suave: var(--sin-borda-sutil);
    --borda-externa: rgba(0, 36, 63, 0.18);

    --color-texto: var(--sin-texto);
    --color-texto-selecionado: var(--sin-neutro-900);
    --text-muted: var(--sin-texto-suave);

    --form-control-background: var(--sin-fundo-superficie);
    --form-control-background-focus: var(--sin-fundo-superficie);
    --form-control-border: var(--sin-borda-forte);
    --form-control-color: var(--sin-texto);
    --form-control-color-selecionado: var(--sin-neutro-900);

    --cor-borda-invalida: var(--sin-perigo);
    --cor-texto-invalido: var(--sin-perigo-sobre-fundo);
    --cor-texto-invalido-selecionado: var(--sin-perigo-sobre-fundo);
    --cor-texto-invalido-selecionado-sombra: var(--sin-perigo-ativa);

    --background-combobox-item: var(--sin-fundo-superficie);
    --background-combobox-item-focus: var(--sin-primaria-suave);
    --cor-fonte-destaque-combobox: var(--sin-primaria-sobre-fundo);

    /* Opaco de proposito: o hover cobre linhas de fundos diferentes - a base e a
       zebrada - e cor translucida se dilui sobre a mais escura das duas. */
    --linha-hover-background: var(--sin-azul-100);
    --linha-hover-background-botao-inicio: var(--sin-azul-50);
    --linha-hover-background-botao-final: var(--sin-azul-200);

    --modal-background: var(--sin-fundo-elevado);
    --modal-borda: var(--sin-borda);

    --tab-selecao-background: var(--sin-fundo-superficie);
    --tab-selecao-border: var(--sin-borda) var(--sin-borda) var(--sin-fundo-superficie);
    --tab-selecao-color: var(--sin-primaria-sobre-fundo);
    --tab-selecao-shadow: none;

    --tabela-fixa-bg: var(--sin-fundo-superficie);
    --excel-cab-background: var(--sin-fundo-cabecalho);
    --excel-cab-borda: var(--sin-borda);
    --excel-cab-color: var(--sin-texto);
    --excel-cab-higlight: rgba(0, 60, 106, 0.10);
    --excel-cel-borda: var(--sin-borda);
    --excel-cel-background: var(--sin-fundo-superficie);
    --excel-cel-color: var(--sin-texto);
    --excel-cel-popup-background: var(--sin-fundo-elevado);
    --excel-sep-colunas-background: var(--sin-fundo-cabecalho);
    --excel-sep-colunas-cor: var(--sin-borda-forte);

    --rz-dp-background: var(--sin-fundo-superficie);
    --rz-dp-background-header: var(--sin-primaria);
    --rz-dp-borda: var(--sin-borda);
    --rz-dp-lista-suspensa: var(--sin-fundo-elevado);
    --rz-dp-shadow: var(--sin-sombra-3);
    --rz-dp-text-color-mes: var(--sin-texto);
    --rz-dp-text-color-mes-hover: var(--sin-primaria-sobre-fundo);

    --td-calendario: var(--sin-fundo-superficie);
    --td-calendario-mes-auxiliar: var(--sin-fundo-sutil);

    --toast-body-background: var(--sin-fundo-elevado);
    --toast-body-color: var(--sin-texto);
    --toast-header-background: var(--sin-fundo-cabecalho);
    --toast-header-color: var(--sin-texto);
    --toast-header-botao-color: var(--sin-texto-suave);
    --toast-header-botao-color-hover: var(--sin-primaria-sobre-fundo);
    --toast-header-text-shadow: none;

    --scrollbar-thumb: var(--sin-neutro-300);
    --close-hover: var(--sin-perigo);
    --cor-loading-inicial: var(--sin-primaria);
    --texto-alerta-login: #FFFFFF;
    --texto-bloqueado: var(--sin-texto-suave);
    --fundo-bloqueado: rgba(0, 36, 63, 0.10);
    --link-disabled: var(--sin-neutro-300);
    --texto-enum-selecionado: var(--sin-destaque-suave);

    --item-warning-background: var(--sin-atencao-suave);
    --item-warning-color: var(--sin-atencao-sobre-fundo);

    --header-pedido: var(--sin-fundo-cabecalho);
    --cor-rastreio-efetuado: var(--sin-primaria-sobre-fundo);
    --cor-rastreio-pendente: var(--sin-neutro-400);

    --bs-color-comentario: var(--sin-sucesso-sobre-fundo);
    --bs-color-danger: var(--sin-perigo-ativa);
    --bs-color-success: var(--sin-sucesso-ativa);
    --bs-danger: var(--sin-perigo-suave);
    --bs-success: var(--sin-sucesso-suave);

    --nav-link-background-solido: var(--sin-fundo-superficie);
    --accent: var(--sin-primaria);
    --muted: var(--sin-texto-suave);

    /* O app.css so define esta variavel dentro de [data-theme="dark"]. No tema claro
       ela ficava sem valor, e a barra fixa .rodape-suspenso saia transparente com o
       conteudo passando por tras dos botoes. */
    --vis-card-background-par: var(--sin-fundo-superficie);
}

[data-theme="dark"] {
    --btn-primary-background: var(--sin-primaria);
    --btn-primary-cor: var(--sin-primaria-texto);
    --btn-secondary-background: var(--sin-neutro-700);
    --btn-secondary-cor: #FFFFFF;
    --btn-out-borda: var(--sin-primaria);
    --btn-out-color: var(--sin-primaria);
    --btn-info-background: var(--sin-info);

    --background-link-atual: var(--sin-primaria);
    --link-pagina-atual: var(--sin-primaria-texto);
    --color-link: #B7C1CB;
    --color-link-focus: var(--sin-primaria-sobre-fundo);
    --link-active: var(--sin-primaria-sobre-fundo);
    --link-hover: var(--sin-primaria-suave);

    --bg-card: var(--sin-fundo-superficie);
    --card-background-impar: var(--sin-fundo-superficie);
    --card-background-par: var(--sin-fundo-sutil);
    --card-header-background: var(--sin-fundo-cabecalho);
    --card-header-background-selecionado: var(--sin-primaria-suave);
    --card-header-background-drag-over: var(--sin-sucesso-suave);
    --vis-card-borda: var(--sin-borda);

    --color-borda: var(--sin-borda-forte);
    --color-borda-suave: var(--sin-borda-sutil);
    --borda-externa: rgba(255, 255, 255, 0.20);

    --color-texto: var(--sin-texto);
    --color-texto-selecionado: #FFFFFF;
    --text-muted: var(--sin-texto-suave);

    --form-control-background: var(--sin-neutro-900);
    --form-control-background-focus: var(--sin-neutro-900);
    --form-control-border: var(--sin-borda-forte);
    --form-control-color: var(--sin-texto);
    --form-control-color-selecionado: #FFFFFF;

    --background-combobox-item: var(--sin-fundo-elevado);
    --background-combobox-item-focus: var(--sin-primaria-suave);
    --cor-fonte-destaque-combobox: var(--sin-primaria-sobre-fundo);

    /* Opaco de proposito. A zebrada usa --sin-fundo-sutil, que no escuro e o neutro-950,
       mais escuro que a superficie. O azul translucido a 16% se dilui sobre ele e o hover
       sumia justamente nas linhas alternadas. */
    --linha-hover-background: #2B3A47;
    --linha-hover-background-botao-inicio: rgba(46, 134, 193, 0.10);
    --linha-hover-background-botao-final: rgba(46, 134, 193, 0.40);

    --modal-background: var(--sin-fundo-elevado);
    --modal-borda: var(--sin-borda);

    --tab-selecao-background: var(--sin-fundo-elevado);
    --tab-selecao-border: var(--sin-borda) var(--sin-borda) var(--sin-fundo-elevado);
    --tab-selecao-color: var(--sin-primaria-sobre-fundo);
    --tab-selecao-shadow: none;

    --tabela-fixa-bg: var(--sin-fundo-superficie);
    --excel-cab-background: var(--sin-fundo-cabecalho);
    --excel-cab-borda: var(--sin-borda);
    --excel-cab-color: var(--sin-texto);
    --excel-cab-higlight: rgba(255, 255, 255, 0.10);
    --excel-cel-borda: var(--sin-borda);
    --excel-cel-background: var(--sin-fundo-superficie);
    --excel-cel-color: var(--sin-texto);
    --excel-cel-popup-background: var(--sin-fundo-elevado);
    --excel-sep-colunas-background: var(--sin-fundo-cabecalho);
    --excel-sep-colunas-cor: var(--sin-borda-forte);

    --rz-dp-background: var(--sin-fundo-elevado);
    --rz-dp-background-header: var(--sin-primaria);
    --rz-dp-borda: var(--sin-borda);
    --rz-dp-lista-suspensa: var(--sin-fundo-elevado);
    --rz-dp-shadow: var(--sin-sombra-3);
    --rz-dp-text-color-mes: var(--sin-texto);
    --rz-dp-text-color-mes-hover: var(--sin-primaria-sobre-fundo);

    --td-calendario: var(--sin-fundo-elevado);
    --td-calendario-mes-auxiliar: var(--sin-fundo-sutil);

    --toast-body-background: var(--sin-fundo-elevado);
    --toast-body-color: var(--sin-texto);
    --toast-header-background: var(--sin-fundo-cabecalho);
    --toast-header-color: var(--sin-texto);
    --toast-header-botao-color: var(--sin-texto-suave);
    --toast-header-botao-color-hover: var(--sin-primaria-sobre-fundo);

    --scrollbar-thumb: var(--sin-neutro-600);
    --close-hover: var(--sin-perigo);
    --cor-loading-inicial: var(--sin-primaria);
    --texto-bloqueado: var(--sin-texto-suave);
    --fundo-bloqueado: rgba(0, 0, 0, 0.45);
    --link-disabled: var(--sin-neutro-600);
    --texto-enum-selecionado: var(--sin-destaque-sobre-fundo);

    --item-warning-background: var(--sin-atencao-suave);
    --item-warning-color: var(--sin-atencao-sobre-fundo);

    --header-pedido: var(--sin-fundo-cabecalho);
    --cor-rastreio-efetuado: var(--sin-primaria-sobre-fundo);
    --cor-rastreio-pendente: var(--sin-neutro-500);

    --bs-color-comentario: var(--sin-sucesso-sobre-fundo);
    --bs-color-danger: var(--sin-perigo-sobre-fundo);
    --bs-color-success: var(--sin-sucesso-sobre-fundo);
    --bs-danger: var(--sin-perigo-suave);
    --bs-success: var(--sin-sucesso-suave);

    --nav-link-background-solido: var(--sin-fundo-elevado);
    --accent: var(--sin-primaria);
    --muted: var(--sin-texto-suave);

    --bg-chat-header-footer: var(--sin-fundo-cabecalho);
    --bg-chat-header-body: var(--sin-fundo-superficie);
    --bg-chat-borda: var(--sin-borda);
    --me-bg: rgba(46, 134, 193, 0.28);
    --other-bg: var(--sin-fundo-elevado);
    --avatar-chat: var(--sin-neutro-600);
}

/* Chat - tema claro alinhado a marca (o verde do WhatsApp nao pertence a paleta) */
:root {
    --bg-chat-header-footer: var(--sin-fundo-cabecalho);
    --bg-chat-header-body: var(--sin-fundo-superficie);
    --bg-chat-borda: var(--sin-borda);
    --me-bg: var(--sin-azul-100);
    --other-bg: var(--sin-neutro-100);
    --avatar-chat: var(--sin-neutro-200);
}


/* =====================================================================================
   5. PONTE PARA O BOOTSTRAP 5.1
   .text-primary (1118 usos) e .bg-primary resolvem por --bs-primary-rgb, entao o token
   cobre tudo de uma vez. As demais regras do Bootstrap 5.1 tem hex fixo e precisam
   de sobrescrita explicita.
   ===================================================================================== */

:root {
    --bs-primary: var(--sin-primaria-sobre-fundo);
    --bs-primary-rgb: var(--sin-primaria-rgb);
    --bs-secondary: var(--sin-neutro-600);
    --bs-secondary-rgb: 78, 90, 102;
    --bs-success: var(--sin-sucesso-sobre-fundo);
    --bs-success-rgb: var(--sin-sucesso-rgb);
    --bs-danger: var(--sin-perigo-sobre-fundo);
    --bs-danger-rgb: var(--sin-perigo-rgb);
    --bs-warning: var(--sin-atencao-sobre-fundo);
    --bs-warning-rgb: var(--sin-atencao-rgb);
    --bs-info: var(--sin-info-sobre-fundo);
    --bs-info-rgb: var(--sin-info-rgb);
    --bs-blue: var(--sin-azul-700);
    --bs-orange: var(--sin-laranja-500);
    --bs-red: var(--sin-vermelho-500);
    --bs-green: var(--sin-verde-500);
    --bs-link-color: var(--sin-primaria-sobre-fundo);
    --bs-link-hover-color: var(--sin-primaria-hover);
    --bs-body-color: var(--sin-texto);
    --bs-body-bg: var(--sin-fundo-app);
    --bs-border-color: var(--sin-borda);
}

[data-theme="dark"] {
    --bs-primary: var(--sin-primaria-sobre-fundo);
    --bs-primary-rgb: var(--sin-primaria-rgb);
    --bs-secondary: var(--sin-neutro-400);
    --bs-secondary-rgb: 148, 161, 174;
    --bs-success: var(--sin-sucesso-sobre-fundo);
    --bs-success-rgb: var(--sin-sucesso-rgb);
    --bs-danger: var(--sin-perigo-sobre-fundo);
    --bs-danger-rgb: var(--sin-perigo-rgb);
    --bs-warning: var(--sin-atencao-sobre-fundo);
    --bs-warning-rgb: var(--sin-atencao-rgb);
    --bs-info: var(--sin-info-sobre-fundo);
    --bs-info-rgb: var(--sin-info-rgb);
    --bs-blue: var(--sin-azul-400);
    --bs-orange: var(--sin-laranja-400);
    --bs-red: var(--sin-vermelho-400);
    --bs-green: var(--sin-verde-300);
    --bs-link-color: var(--sin-primaria-sobre-fundo);
    --bs-link-hover-color: var(--sin-primaria-ativa);
    --bs-body-color: var(--sin-texto);
    --bs-body-bg: var(--sin-fundo-app);
    --bs-border-color: var(--sin-borda);
    /* mantido pelo app.css: .bg-white e usado no navbar e vira superficie escura */
    --bs-white: var(--sin-fundo-superficie);
}

/* Utilitarios de cor que o Bootstrap 5.1 fixou em hex */
.link-primary { color: var(--sin-primaria-sobre-fundo) !important; }
.link-primary:focus,
.link-primary:hover { color: var(--sin-primaria-hover) !important; }
.link-danger { color: var(--sin-perigo-sobre-fundo) !important; }
.link-success { color: var(--sin-sucesso-sobre-fundo) !important; }
.link-warning { color: var(--sin-atencao-sobre-fundo) !important; }
.link-info { color: var(--sin-info-sobre-fundo) !important; }

.border-primary { border-color: var(--sin-primaria) !important; }
.border-danger { border-color: var(--sin-perigo) !important; }
.border-success { border-color: var(--sin-sucesso) !important; }
.border-warning { border-color: var(--sin-atencao) !important; }
.border-info { border-color: var(--sin-info) !important; }


/* =====================================================================================
   6. BOTOES - PADRONIZACAO
   Base unica: mesma geometria, peso, transicao, alinhamento icone/texto e anel de foco.
   A densidade continua vindo do app.css (body.pequeno) - aqui nao se mexe em padding.
   ===================================================================================== */

.btn {
    --sin-btn-fundo: transparent;
    --sin-btn-fundo-hover: transparent;
    --sin-btn-fundo-ativo: transparent;
    --sin-btn-borda: transparent;
    --sin-btn-borda-hover: transparent;
    --sin-btn-borda-ativa: transparent;
    --sin-btn-texto: var(--sin-texto);
    --sin-btn-texto-hover: var(--sin-texto);
    --sin-btn-anel: var(--sin-anel-foco);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-weight: 500;
    border-radius: var(--sin-raio-md);
    border-width: 1px;
    transition: background-color var(--sin-transicao),
                border-color var(--sin-transicao),
                color var(--sin-transicao),
                box-shadow var(--sin-transicao);
    background-color: var(--sin-btn-fundo);
    border-color: var(--sin-btn-borda);
    color: var(--sin-btn-texto);
}

/* Icone de botao nunca deve encolher nem herdar sublinhado */
.btn > i,
.btn > svg {
    flex: 0 0 auto;
    line-height: 1;
}

.btn:hover {
    background-color: var(--sin-btn-fundo-hover);
    border-color: var(--sin-btn-borda-hover);
    color: var(--sin-btn-texto-hover);
}

.btn:focus,
.btn:focus-visible {
    outline: 0;
    box-shadow: var(--sin-btn-anel);
    background-color: var(--sin-btn-fundo-hover);
    border-color: var(--sin-btn-borda-hover);
    color: var(--sin-btn-texto-hover);
}

.btn:active,
.btn.active,
.btn-check:checked + .btn,
.btn-check:active + .btn,
.show > .btn.dropdown-toggle {
    background-color: var(--sin-btn-fundo-ativo);
    border-color: var(--sin-btn-borda-ativa);
    color: var(--sin-btn-texto-hover);
}

/* O Bootstrap 5.1 declara .btn-primary:disabled etc. com especificidade 0,2,0 e
   venceria a regra .btn (0,1,0) — o botao desabilitado voltava ao #0d6efd original,
   deixando dois azuis diferentes na mesma barra. Aqui a cor e reancorada no token. */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn,
.btn-primary:disabled, .btn-primary.disabled,
.btn-secondary:disabled, .btn-secondary.disabled,
.btn-success:disabled, .btn-success.disabled,
.btn-danger:disabled, .btn-danger.disabled,
.btn-warning:disabled, .btn-warning.disabled,
.btn-info:disabled, .btn-info.disabled,
.btn-light:disabled, .btn-light.disabled,
.btn-dark:disabled, .btn-dark.disabled {
    background-color: var(--sin-btn-fundo);
    border-color: var(--sin-btn-borda);
    color: var(--sin-btn-texto);
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: auto; /* mantem o title/tooltip acessivel em botao desabilitado */
}

/* Outline desabilitado nao pode ganhar fundo solido */
.btn-outline-primary:disabled, .btn-outline-primary.disabled,
.btn-outline-sin:disabled, .btn-outline-sin.disabled,
.btn-outline-danger:disabled, .btn-outline-danger.disabled,
.btn-outline-success:disabled, .btn-outline-success.disabled,
.btn-outline-warning:disabled, .btn-outline-warning.disabled,
.btn-outline-info:disabled, .btn-outline-info.disabled,
.btn-outline-light:disabled, .btn-outline-light.disabled,
.btn-outline-dark:disabled, .btn-outline-dark.disabled {
    background-color: transparent;
}

/* Raios coerentes por tamanho */
.btn-lg { border-radius: var(--sin-raio-lg); }
.btn-sm { border-radius: var(--sin-raio-sm); }
.btn-xs, .btn-group-xs > .btn { border-radius: var(--sin-raio-xs); }

/* --- Primaria: azul institucional ------------------------------------------------- */
.btn-primary {
    --sin-btn-fundo: var(--sin-primaria);
    --sin-btn-fundo-hover: var(--sin-primaria-hover);
    --sin-btn-fundo-ativo: var(--sin-primaria-ativa);
    --sin-btn-borda: var(--sin-primaria);
    --sin-btn-borda-hover: var(--sin-primaria-hover);
    --sin-btn-borda-ativa: var(--sin-primaria-ativa);
    --sin-btn-texto: var(--sin-primaria-texto);
    --sin-btn-texto-hover: var(--sin-primaria-texto);
}

/* --- Secundaria: neutra, sem competir com a primaria ------------------------------ */
.btn-secondary {
    --sin-btn-fundo: var(--sin-neutra);
    --sin-btn-fundo-hover: var(--sin-neutra-hover);
    --sin-btn-fundo-ativo: var(--sin-neutra-ativa);
    --sin-btn-borda: var(--sin-neutra-borda);
    --sin-btn-borda-hover: var(--sin-neutra-borda);
    --sin-btn-borda-ativa: var(--sin-neutra-borda);
    --sin-btn-texto: var(--sin-neutra-texto);
    --sin-btn-texto-hover: var(--sin-texto);
    --sin-btn-anel: 0 0 0 var(--sin-largura-foco) rgba(107, 120, 133, 0.30);
}

/* Grupos de enum usam .btn-secondary como toggle: o estado ativo recebe a marca */
div.container-enum > .btn-secondary.active,
div.container-enum > .btn-check:checked + .btn-secondary,
.btn-check:checked + .btn-secondary,
.btn-secondary.active {
    background-color: var(--sin-primaria) !important;
    border-color: var(--sin-primaria) !important;
    color: var(--sin-primaria-texto) !important;
}

div.container-enum > .btn-secondary:hover {
    color: var(--sin-texto);
}

/* --- Destaque da marca: laranja --------------------------------------------------- */
.btn-sin,
.btn-destaque {
    --sin-btn-fundo: var(--sin-destaque);
    --sin-btn-fundo-hover: var(--sin-destaque-hover);
    --sin-btn-fundo-ativo: var(--sin-destaque-ativa);
    --sin-btn-borda: var(--sin-destaque-borda);
    --sin-btn-borda-hover: var(--sin-destaque-hover);
    --sin-btn-borda-ativa: var(--sin-destaque-ativa);
    /* Texto escuro: branco sobre #F18800 fica em 2.5:1 e reprova WCAG AA */
    --sin-btn-texto: var(--sin-destaque-texto);
    --sin-btn-texto-hover: #FFFFFF;
    --sin-btn-anel: var(--sin-anel-foco-destaque);
    color: var(--sin-destaque-texto);
    background-color: var(--sin-destaque);
    border-color: var(--sin-destaque-borda);
}

.btn-sin:hover,
.btn-sin:focus,
.btn-sin.focus,
.btn-sin:active,
.btn-sin.active {
    color: #FFFFFF;
    background-color: var(--sin-destaque-hover);
    border-color: var(--sin-destaque-hover);
}

.btn-sin:focus,
.btn-sin.focus {
    box-shadow: var(--sin-anel-foco-destaque);
}

.btn-sin:disabled,
.btn-sin.disabled {
    color: var(--sin-destaque-texto);
    background-color: var(--sin-destaque);
    border-color: var(--sin-destaque);
    opacity: 0.55;
}

/* --- Semanticos ------------------------------------------------------------------- */
.btn-danger {
    --sin-btn-fundo: var(--sin-perigo);
    --sin-btn-fundo-hover: var(--sin-perigo-hover);
    --sin-btn-fundo-ativo: var(--sin-perigo-ativa);
    --sin-btn-borda: var(--sin-perigo);
    --sin-btn-borda-hover: var(--sin-perigo-hover);
    --sin-btn-borda-ativa: var(--sin-perigo-ativa);
    --sin-btn-texto: var(--sin-perigo-texto);
    --sin-btn-texto-hover: var(--sin-perigo-texto);
    --sin-btn-anel: var(--sin-anel-foco-perigo);
}

.btn-success {
    --sin-btn-fundo: var(--sin-sucesso);
    --sin-btn-fundo-hover: var(--sin-sucesso-hover);
    --sin-btn-fundo-ativo: var(--sin-sucesso-ativa);
    --sin-btn-borda: var(--sin-sucesso);
    --sin-btn-borda-hover: var(--sin-sucesso-hover);
    --sin-btn-borda-ativa: var(--sin-sucesso-ativa);
    --sin-btn-texto: var(--sin-sucesso-texto);
    --sin-btn-texto-hover: var(--sin-sucesso-texto);
    --sin-btn-anel: 0 0 0 var(--sin-largura-foco) rgba(14, 124, 90, 0.30);
}

.btn-warning {
    --sin-btn-fundo: var(--sin-atencao);
    --sin-btn-fundo-hover: var(--sin-atencao-hover);
    --sin-btn-fundo-ativo: var(--sin-atencao-ativa);
    --sin-btn-borda: var(--sin-atencao);
    --sin-btn-borda-hover: var(--sin-atencao-hover);
    --sin-btn-borda-ativa: var(--sin-atencao-ativa);
    --sin-btn-texto: var(--sin-atencao-texto);
    --sin-btn-texto-hover: var(--sin-atencao-texto);
    --sin-btn-anel: 0 0 0 var(--sin-largura-foco) rgba(224, 168, 0, 0.35);
}

.btn-info {
    --sin-btn-fundo: var(--sin-info);
    --sin-btn-fundo-hover: var(--sin-info-hover);
    --sin-btn-fundo-ativo: var(--sin-info-hover);
    --sin-btn-borda: var(--sin-info);
    --sin-btn-borda-hover: var(--sin-info-hover);
    --sin-btn-borda-ativa: var(--sin-info-hover);
    --sin-btn-texto: var(--sin-info-texto);
    --sin-btn-texto-hover: var(--sin-info-texto);
}

.btn-light {
    --sin-btn-fundo: var(--sin-fundo-sutil);
    --sin-btn-fundo-hover: var(--sin-neutra);
    --sin-btn-fundo-ativo: var(--sin-neutra-hover);
    --sin-btn-borda: var(--sin-borda);
    --sin-btn-borda-hover: var(--sin-borda-forte);
    --sin-btn-borda-ativa: var(--sin-borda-forte);
    --sin-btn-texto: var(--sin-texto);
    --sin-btn-texto-hover: var(--sin-texto);
}

.btn-dark {
    --sin-btn-fundo: var(--sin-neutro-800);
    --sin-btn-fundo-hover: var(--sin-neutro-900);
    --sin-btn-fundo-ativo: var(--sin-neutro-950);
    --sin-btn-borda: var(--sin-neutro-800);
    --sin-btn-borda-hover: var(--sin-neutro-900);
    --sin-btn-borda-ativa: var(--sin-neutro-950);
    --sin-btn-texto: #FFFFFF;
    --sin-btn-texto-hover: #FFFFFF;
}

/* --- Outline: mesma familia, peso visual menor ------------------------------------ */
.btn-outline-primary,
.btn-outline-sin,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
    --sin-btn-fundo: transparent;
    background-color: transparent;
}

.btn-outline-primary {
    --sin-btn-fundo-hover: var(--sin-primaria);
    --sin-btn-fundo-ativo: var(--sin-primaria-hover);
    --sin-btn-borda: var(--sin-primaria);
    --sin-btn-borda-hover: var(--sin-primaria);
    --sin-btn-borda-ativa: var(--sin-primaria-hover);
    --sin-btn-texto: var(--sin-primaria-sobre-fundo);
    --sin-btn-texto-hover: var(--sin-primaria-texto);
}

.btn-outline-sin {
    --sin-btn-fundo-hover: var(--sin-destaque);
    --sin-btn-fundo-ativo: var(--sin-destaque-hover);
    --sin-btn-borda: var(--sin-destaque-borda);
    --sin-btn-borda-hover: var(--sin-destaque-borda);
    --sin-btn-borda-ativa: var(--sin-destaque-hover);
    --sin-btn-texto: var(--sin-destaque-sobre-fundo);
    --sin-btn-texto-hover: var(--sin-destaque-texto);
    --sin-btn-anel: var(--sin-anel-foco-destaque);
    color: var(--sin-destaque-sobre-fundo);
    border-color: var(--sin-destaque-borda);
}

.btn-outline-sin:hover,
.btn-outline-sin:active,
.btn-outline-sin.active {
    color: var(--sin-destaque-texto);
    background-color: var(--sin-destaque);
    border-color: var(--sin-destaque-borda);
}

.btn-outline-sin:focus,
.btn-outline-sin.focus {
    box-shadow: var(--sin-anel-foco-destaque);
}

.btn-outline-sin:disabled,
.btn-outline-sin.disabled {
    color: var(--sin-destaque-sobre-fundo);
    background-color: transparent;
    opacity: 0.55;
}

/* .btn-outline-secondary e o botao de acao mais usado nas listagens (562 usos).
   Fica neutro em repouso e assume a marca no hover/ativo. */
.btn-outline-secondary {
    --sin-btn-fundo-hover: var(--sin-primaria);
    --sin-btn-fundo-ativo: var(--sin-primaria-hover);
    --sin-btn-borda: var(--sin-borda-forte);
    --sin-btn-borda-hover: var(--sin-primaria);
    --sin-btn-borda-ativa: var(--sin-primaria-hover);
    --sin-btn-texto: var(--sin-texto-suave);
    --sin-btn-texto-hover: var(--sin-primaria-texto);
    color: var(--sin-texto-suave);
    border-color: var(--sin-borda-forte);
}

.btn-check:active + .btn-outline-secondary,
.btn-check:checked + .btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary:hover,
.btn-outline-secondary.dropdown-toggle.show,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: var(--sin-primaria-texto) !important;
    background-color: var(--sin-primaria) !important;
    border-color: var(--sin-primaria) !important;
}

.btn-outline-secondary.active:disabled,
.btn-outline-secondary:active:disabled {
    color: var(--sin-primaria-texto) !important;
    background-color: var(--sin-primaria) !important;
    border-color: var(--sin-primaria) !important;
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    color: var(--sin-texto-suave) !important;
    background-color: transparent !important;
    border-color: var(--sin-borda) !important;
}

/* Acao destrutiva sinalizada dentro de um outline neutro */
.btn-outline-secondary.text-danger {
    --sin-btn-fundo-hover: var(--sin-perigo);
    --sin-btn-fundo-ativo: var(--sin-perigo-hover);
    --sin-btn-borda: var(--sin-perigo-suave-borda);
    --sin-btn-borda-hover: var(--sin-perigo);
    --sin-btn-anel: var(--sin-anel-foco-perigo);
    border-color: var(--sin-perigo-suave-borda);
}

.btn-outline-secondary.text-danger:hover,
.btn-outline-secondary.text-danger:focus,
.btn-outline-secondary.text-danger:active,
.btn-outline-secondary.text-danger.active {
    color: var(--sin-perigo-texto) !important;
    background-color: var(--sin-perigo) !important;
    border-color: var(--sin-perigo) !important;
}

.btn-outline-danger {
    --sin-btn-fundo-hover: var(--sin-perigo);
    --sin-btn-fundo-ativo: var(--sin-perigo-hover);
    --sin-btn-borda: var(--sin-perigo);
    --sin-btn-borda-hover: var(--sin-perigo);
    --sin-btn-borda-ativa: var(--sin-perigo-hover);
    --sin-btn-texto: var(--sin-perigo-sobre-fundo);
    --sin-btn-texto-hover: var(--sin-perigo-texto);
    --sin-btn-anel: var(--sin-anel-foco-perigo);
    color: var(--sin-perigo-sobre-fundo);
    border-color: var(--sin-perigo);
}

.btn-outline-success {
    --sin-btn-fundo-hover: var(--sin-sucesso);
    --sin-btn-fundo-ativo: var(--sin-sucesso-hover);
    --sin-btn-borda: var(--sin-sucesso);
    --sin-btn-borda-hover: var(--sin-sucesso);
    --sin-btn-borda-ativa: var(--sin-sucesso-hover);
    --sin-btn-texto: var(--sin-sucesso-sobre-fundo);
    --sin-btn-texto-hover: var(--sin-sucesso-texto);
    color: var(--sin-sucesso-sobre-fundo);
    border-color: var(--sin-sucesso);
}

.btn-outline-warning {
    --sin-btn-fundo-hover: var(--sin-atencao);
    --sin-btn-fundo-ativo: var(--sin-atencao-hover);
    --sin-btn-borda: var(--sin-atencao);
    --sin-btn-borda-hover: var(--sin-atencao);
    --sin-btn-borda-ativa: var(--sin-atencao-hover);
    --sin-btn-texto: var(--sin-atencao-sobre-fundo);
    --sin-btn-texto-hover: var(--sin-atencao-texto);
    color: var(--sin-atencao-sobre-fundo);
    border-color: var(--sin-atencao);
}

.btn-outline-info {
    --sin-btn-fundo-hover: var(--sin-info);
    --sin-btn-fundo-ativo: var(--sin-info-hover);
    --sin-btn-borda: var(--sin-info);
    --sin-btn-borda-hover: var(--sin-info);
    --sin-btn-borda-ativa: var(--sin-info-hover);
    --sin-btn-texto: var(--sin-info-sobre-fundo);
    --sin-btn-texto-hover: var(--sin-info-texto);
    color: var(--sin-info-sobre-fundo);
    border-color: var(--sin-info);
}

/* --- Botao textual ---------------------------------------------------------------- */
.btn-link {
    --sin-btn-texto: var(--sin-primaria-sobre-fundo);
    --sin-btn-texto-hover: var(--sin-primaria-hover);
    text-decoration: none;
}

.btn-link:hover { text-decoration: underline; }

/* --- Variantes proprias do sistema ------------------------------------------------ */
.btn-floating {
    background-color: var(--sin-primaria);
    border-color: var(--sin-primaria);
    color: var(--sin-primaria-texto);
    box-shadow: var(--sin-sombra-3);
}

.btn-floating:hover,
.btn-floating:focus {
    background-color: var(--sin-primaria-hover);
    border-color: var(--sin-primaria-hover);
    color: var(--sin-primaria-texto);
}

.btn.btn-circular {
    border-radius: var(--sin-raio-pill);
}

.btn-transparente,
button.btn-transparent,
button.btn-limpo {
    color: var(--sin-texto-suave);
    background-color: transparent;
    border-color: transparent;
    border-radius: var(--sin-raio-md);
    transition: background-color var(--sin-transicao), color var(--sin-transicao);
}

.btn-transparente:hover,
button.btn-transparent:hover,
button.btn-limpo:hover {
    color: var(--sin-primaria-sobre-fundo);
    background-color: var(--sin-primaria-suave);
}

.btn-transparente:focus-visible,
button.btn-transparent:focus-visible,
button.btn-limpo:focus-visible {
    outline: 0;
    box-shadow: var(--sin-anel-foco);
}

button.btn-notificacao {
    color: var(--sin-texto-suave);
    border-radius: var(--sin-raio-md);
}

button.btn-notificacao:hover,
button.btn-notificacao:hover > i {
    color: var(--sin-destaque-sobre-fundo);
}

button.btn-input-group-append,
button.btn-datepicker,
button.btn-add-dropdown {
    border-color: var(--sin-borda-forte);
    color: var(--sin-texto-suave);
}

button.btn-input-group-append:hover,
button.btn-datepicker:hover,
button.btn-add-dropdown:hover {
    color: var(--sin-primaria-sobre-fundo);
    border-color: var(--sin-primaria);
    background-color: var(--sin-primaria-suave);
}

button.btn-add-dropdown.btn-outline-danger,
button.btn-datepicker.btn-outline-danger {
    color: var(--sin-perigo-sobre-fundo);
    border-color: var(--sin-perigo);
}

button.borda-padrao {
    border-color: var(--sin-borda-forte);
}

/* Matriz de permissoes: permitir/negar precisam ser lidos sem depender so de cor */
.btn-permissao-acesso.permitir {
    background-color: var(--sin-sucesso-suave);
    border-color: var(--sin-sucesso-suave-borda);
    color: var(--sin-sucesso-sobre-fundo);
}

.btn-permissao-acesso.permitir:hover {
    background-color: var(--sin-sucesso);
    border-color: var(--sin-sucesso);
    color: var(--sin-sucesso-texto);
}

.btn-permissao-acesso.negar {
    background-color: var(--sin-perigo-suave);
    border-color: var(--sin-perigo-suave-borda);
    color: var(--sin-perigo-sobre-fundo);
}

.btn-permissao-acesso.negar:hover {
    background-color: var(--sin-perigo);
    border-color: var(--sin-perigo);
    color: var(--sin-perigo-texto);
}

/* Botao de fechar */
.btn-close {
    color: var(--sin-texto);
    opacity: 0.75;
    border-radius: var(--sin-raio-sm);
    transition: color var(--sin-transicao), opacity var(--sin-transicao), box-shadow var(--sin-transicao);
}

.btn-close:hover {
    color: var(--sin-perigo-sobre-fundo);
    opacity: 1;
}

.btn-close:focus,
.btn-close:focus-visible {
    outline: 0;
    box-shadow: var(--sin-anel-foco);
    opacity: 1;
}

.btn-close:empty::before {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--sin-icone-fechar) center / 1em auto no-repeat;
    mask: var(--sin-icone-fechar) center / 1em auto no-repeat;
}


/* =====================================================================================
   7. FORMULARIOS E FOCO
   ===================================================================================== */

.form-control,
.form-select,
.input-group-text {
    border-radius: var(--sin-raio-md);
    border-color: var(--sin-borda-forte);
    transition: border-color var(--sin-transicao), box-shadow var(--sin-transicao);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sin-primaria);
    outline: 0;
    box-shadow: var(--sin-anel-foco);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--sin-perigo);
    box-shadow: var(--sin-anel-foco-perigo);
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--sin-perigo);
}

.invalid-feedback,
.validation-message {
    color: var(--sin-perigo-sobre-fundo);
}

.form-check-input {
    border-color: var(--sin-borda-forte);
    transition: background-color var(--sin-transicao), border-color var(--sin-transicao), box-shadow var(--sin-transicao);
}

.form-check-input:checked {
    background-color: var(--sin-primaria);
    border-color: var(--sin-primaria);
}

.form-check-input:focus {
    border-color: var(--sin-primaria);
    outline: 0;
    box-shadow: var(--sin-anel-foco);
}

.form-switch .form-check-input:focus {
    box-shadow: var(--sin-anel-foco);
}

.form-range::-webkit-slider-thumb { background-color: var(--sin-primaria); }
.form-range::-moz-range-thumb { background-color: var(--sin-primaria); }
.form-range:focus::-webkit-slider-thumb { box-shadow: var(--sin-anel-foco); }

.input-group-text {
    background-color: var(--sin-fundo-sutil);
    color: var(--sin-texto-suave);
    border-color: var(--sin-borda-forte);
}

/* Foco visivel consistente em qualquer elemento interativo que nao seja botao/campo */
a:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--sin-primaria);
    outline-offset: 2px;
    border-radius: var(--sin-raio-sm);
}


/* =====================================================================================
   8. NAVEGACAO
   ===================================================================================== */

/* Barra superior: superficie neutra com faixa da marca embaixo */
.navbar.bg-white {
    background-color: var(--sin-fundo-superficie) !important;
    border-bottom: 0;
    box-shadow: var(--sin-sombra-1);
    position: relative;
}

/* Faixa da marca sob a barra: as tres cores do logotipo em 2px.
   E ornamento fixo, nunca muda com o estado da tela. */
.navbar.bg-white::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--sin-primaria) 0 62%,
        var(--sin-destaque) 62% 84%,
        var(--sin-marca-terceira) 84% 100%);
}

/* O .row do Bootstrap tem margem negativa pelo gutter. Combinado com .w-100 dentro
   do navbar-collapse, isso vira 100% + gutter e estoura a horizontal em 576px e 768px
   (medido: 305px e 113px de vazamento). Zerar o gutter resolve sem mexer no markup. */
.navbar .row.w-100 {
    --bs-gutter-x: 0;
    margin-inline: 0;
    max-width: 100%;
}

.navbar .navbar-collapse,
.navbar .row.w-100 > [class^="col"],
.navbar .row.w-100 > [class*=" col"] {
    min-width: 0;
}

/* Os itens do topo precisam poder quebrar em vez de empurrar a pagina.
   Sem limite de largura de proposito: media query com teto deixava justamente 992px
   descoberto (medido: 157px de vazamento do menu do usuario). flex-wrap so age quando
   falta espaco, entao no monitor largo nada muda. */
.navbar .navbar-collapse .d-sm-flex,
.navbar .navbar-nav {
    flex-wrap: wrap;
    row-gap: 0.35rem;
}

/* O menu do usuario a direita pode encolher em vez de transbordar */
.navbar .navbar-nav.ms-auto {
    min-width: 0;
    flex-shrink: 1;
}

.navbar .navbar-nav.ms-auto .nav-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar .nav-link {
    color: var(--sin-texto-suave);
    border-radius: var(--sin-raio-md);
    transition: color var(--sin-transicao), background-color var(--sin-transicao);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--sin-primaria-sobre-fundo);
    background-color: var(--sin-primaria-suave);
}

.navbar .nav-link.active,
.nav-item.active > .nav-link {
    color: var(--sin-primaria-sobre-fundo);
    font-weight: 600;
}

.navbar-toggler {
    border-color: var(--sin-borda-forte);
    color: var(--sin-primaria-sobre-fundo);
    border-radius: var(--sin-raio-md);
}

.navbar-toggler:focus {
    outline: 0;
    box-shadow: var(--sin-anel-foco);
}

/* Abas */
.nav-tabs {
    border-bottom-color: var(--sin-borda);
}

.nav-tabs .nav-link {
    color: var(--sin-texto-suave);
    border: 1px solid transparent;
    border-top-left-radius: var(--sin-raio-md);
    border-top-right-radius: var(--sin-raio-md);
    transition: color var(--sin-transicao), background-color var(--sin-transicao), border-color var(--sin-transicao);
}

.nav-tabs .nav-link:hover {
    color: var(--sin-primaria-sobre-fundo);
    background-color: var(--sin-primaria-suave);
    border-color: transparent;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--sin-primaria-sobre-fundo);
    background-color: var(--sin-fundo-superficie);
    border-color: var(--sin-borda) var(--sin-borda) var(--sin-fundo-superficie);
    font-weight: 600;
    box-shadow: inset 0 3px 0 0 var(--sin-destaque);
}

.nav-tabs .nav-link.disabled {
    color: var(--sin-texto-suave);
    opacity: 0.5;
}

/* TabControl com ColorTabClass: chip com faixa de acento, nao bloco solido */
.nav-item.btn-primary {
    background-color: var(--sin-azul-100) !important;
    border-color: var(--sin-primaria) !important;
    box-shadow: inset 0 -3px 0 0 var(--sin-primaria);
}

    .nav-item.btn-primary .nav-link {
        color: var(--sin-primaria-sobre-fundo) !important;
        font-weight: 700 !important;
    }

[data-theme="dark"] .nav-item.btn-primary {
    background-color: rgba(95, 163, 212, 0.28) !important;
}

.nav-item.btn-secondary {
    background-color: var(--sin-fundo-cabecalho) !important;
    border-color: var(--sin-borda) !important;
}

    .nav-item.btn-secondary .nav-link {
        color: var(--sin-texto) !important;
    }

/* Cabecalho de secao (Cliente, Lead): antes usava .bg-secondary cru do Bootstrap */
.bg-secondary.rounded-top.border-start.border-4.border-primary {
    background-color: var(--sin-fundo-cabecalho) !important;
    color: var(--sin-texto) !important;
}

/* Pills */
.nav-pills .nav-link {
    color: var(--sin-texto-suave);
    border-radius: var(--sin-raio-md);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--sin-primaria);
    color: var(--sin-primaria-texto);
}

/* Dropdown */
.dropdown-menu {
    border-color: var(--sin-borda);
    border-radius: var(--sin-raio-md);
    box-shadow: var(--sin-sombra-3);
    background-color: var(--sin-fundo-elevado);
    color: var(--sin-texto);
}

.dropdown-item {
    color: var(--sin-texto);
    border-radius: var(--sin-raio-sm);
    transition: background-color var(--sin-transicao), color var(--sin-transicao);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--sin-primaria-suave);
    color: var(--sin-primaria-sobre-fundo);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--sin-primaria);
    color: var(--sin-primaria-texto);
}

.dropdown-divider { border-top-color: var(--sin-borda); }

/* Paginacao */
.page-link {
    color: var(--sin-primaria-sobre-fundo);
    background-color: var(--sin-fundo-superficie);
    border-color: var(--sin-borda);
    transition: background-color var(--sin-transicao), color var(--sin-transicao);
}

.page-link:hover {
    color: var(--sin-primaria-hover);
    background-color: var(--sin-primaria-suave);
    border-color: var(--sin-borda);
}

.page-link:focus {
    outline: 0;
    box-shadow: var(--sin-anel-foco);
    color: var(--sin-primaria-hover);
    background-color: var(--sin-primaria-suave);
}

.page-item.active .page-link {
    background-color: var(--sin-primaria);
    border-color: var(--sin-primaria);
    color: var(--sin-primaria-texto);
}

.page-item.disabled .page-link {
    color: var(--sin-texto-suave);
    background-color: var(--sin-fundo-sutil);
    border-color: var(--sin-borda);
}

/* Breadcrumb */
.breadcrumb-item a { color: var(--sin-primaria-sobre-fundo); }
.breadcrumb-item.active { color: var(--sin-texto-suave); }


/* =====================================================================================
   9. TABELAS E LISTAGENS
   ===================================================================================== */

.table {
    --bs-table-hover-bg: var(--sin-primaria-suave);
    --bs-table-hover-color: var(--sin-texto);
    --bs-table-striped-bg: var(--sin-fundo-sutil);
    --bs-table-striped-color: var(--sin-texto);
    --bs-table-active-bg: var(--sin-primaria-suave);
    border-color: var(--sin-borda);
    color: var(--sin-texto);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--sin-borda-sutil);
}

.table > thead {
    background-color: var(--sin-fundo-cabecalho);
    color: var(--sin-texto);
}

.table > thead th {
    font-weight: 600;
    border-bottom: 2px solid var(--sin-primaria);
    color: var(--sin-texto);
}

.table-primary {
    --bs-table-bg: var(--sin-primaria-suave);
    --bs-table-color: var(--sin-texto);
    color: var(--sin-texto);
}

.table-success {
    --bs-table-bg: var(--sin-sucesso-suave);
    --bs-table-color: var(--sin-texto);
    color: var(--sin-texto);
}

.table-danger {
    --bs-table-bg: var(--sin-perigo-suave);
    --bs-table-color: var(--sin-texto);
    color: var(--sin-texto);
}

.table-warning {
    --bs-table-bg: var(--sin-atencao-suave);
    --bs-table-color: var(--sin-texto);
    color: var(--sin-texto);
}

.table-info {
    --bs-table-bg: var(--sin-info-suave);
    --bs-table-color: var(--sin-texto);
    color: var(--sin-texto);
}

/* Acoes de linha: os icones vem da configuracao de cada tela e variavam de tamanho.
   Aqui todos passam a ocupar a mesma caixa, com o icone centrado e a mesma area de
   clique — a coluna de acoes fica alinhada de uma listagem para outra. */
/* Sem min-width aqui: o grupo tem max-width (117px, ou 80px no body.pequeno) e um
   botao de 2rem faria 4 acoes somarem 128px dentro dessa caixa — o lapis vazava para
   fora da coluna e so aparecia rolando a tabela para a direita.
   A uniformidade da coluna vem do icone de largura fixa, logo abaixo. */
.btn-group-animada > .btn {
    padding-inline: 0.35rem;
    /* Em repouso as acoes ficam discretas; ganham peso quando a linha e percorrida,
       para nao competir com o dado. */
    opacity: 0.75;
    transition: opacity var(--sin-transicao), background-color var(--sin-transicao),
                border-color var(--sin-transicao), color var(--sin-transicao);
}

/* O grupo colapsado precisa caber as acoes comuns sem rolagem. O app.css limita a
   117px (80px no compacto), medida de quando os botoes eram menores. Aqui a caixa
   passa a acomodar quatro acoes, que e o caso da maioria das listagens.
   O overflow:hidden completa a intencao original: com transition de max-width e um
   botao de expandir, o grupo deveria RECORTAR o excedente, nao derramar na coluna
   vizinha. Quem tem mais acoes continua usando o botao de expandir. */
.btn-group.btn-group-animada {
    overflow: hidden;
}

/* Medida conferida em tela: com o padding atual cada acao ocupa 36px, entao quatro
   somam 144px. 10rem (160px) acomoda as quatro com folga; quem tem cinco ou mais
   continua colapsando e usando o botao de expandir. */
.btn-group.btn-group-animada:has(i.fa-angle-double-left) {
    max-width: 10.5rem;
}

body.pequeno .btn-group.btn-group-animada:has(i.fa-angle-double-left),
.pequeno .btn-group.btn-group-animada:has(i.fa-angle-double-left) {
    max-width: 10rem;
}

/* Expandido continua mostrando tudo */
.btn-group.btn-group-animada:has(i.fa-angle-double-right) {
    max-width: 100%;
    overflow: visible;
}

.btn-group-animada > .btn > i {
    font-size: 0.95em;
    width: 1em;
    text-align: center;
}

tr:hover .btn-group-animada > .btn,
li:hover .btn-group-animada > .btn,
.btn-group-animada:hover > .btn,
.btn-group-animada > .btn:focus-visible {
    opacity: 1;
}

/* Alvo de toque.
   O body.pequeno deixa os botoes de acao em ~21px, o que e otimo para densidade no
   monitor e pequeno demais para o dedo (WCAG 2.5.8 pede 24x24). A regra vale so para
   tela estreita OU ponteiro grosso (toque), entao a densidade do desktop nao muda. */
@media (max-width: 767.98px), (pointer: coarse) {
    body.pequeno .btn-group-animada > .btn,
    body.pequeno .btn-group-animada > .btn.btn-sm,
    body.pequeno .btn-group-xs > .btn {
        min-height: 32px;
        min-width: 32px;
        padding-inline: 0.5rem;
    }

    body.pequeno .btn-group-animada > .btn > i {
        font-size: 1em;
    }

    /* Botoes soltos de acao tambem precisam alcançar o minimo */
    body.pequeno .btn:not(.btn-link):not(.btn-transparente) {
        min-height: 32px;
    }

    /* Campo tocavel: 16px evita o zoom automatico do iOS ao focar o input */
    body.pequeno .form-control,
    body.pequeno .form-select {
        font-size: 16px;
        min-height: 34px;
    }
}

/* Modo card: o grupo de acoes e desenhado como
       <div class="col-12 mt-3"><div class="btn-group btn-group-sm w-100">
   O .w-100 faz os botoes dividirem a largura inteira do cartao — quatro caixas
   enormes com um icone minusculo no meio. Aqui volta a largura natural, alinhado
   a direita. Precisa de !important porque .w-100 do Bootstrap ja usa um.

   ATENCAO ao escopo: nao usar ".card .btn-group..." — as paginas de listagem sao
   embrulhadas em <div class="card card-body">, entao esse seletor tambem pegaria
   os grupos dentro de <td> e desligaria o colapso do modo tabela. */
.card-body > .row > .col-12 > .btn-group.w-100 {
    width: auto !important;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.card-body > .row > .col-12 > .btn-group.w-100 > .btn {
    flex: 0 0 auto;
    min-width: 2.25rem;
}

/* Coluna de acoes ancorada a direita.
   Em tabela larga (Clientes tem 40 colunas) a coluna de acoes ficava alem da borda
   da janela e era preciso rolar a tabela para achar o lapis. Ancorada, ela acompanha
   a rolagem e as acoes ficam sempre alcancaveis.
   O container .div-cont-tbl-* ja tem overflow-x: auto, que e o que sticky exige.

   Alinhado com o cabecalho de proposito: o th usa :last-child, entao o td tem que usar
   o mesmo criterio. Prender so o cabecalho deixava o conteudo do corpo passar por tras
   dele, que era pior do que nao ancorar nada. Nem toda listagem chama a celula de acoes
   de .celula-centro - a de Clientes usa .text-center - e depender da classe fazia a regra
   valer em umas telas e nao em outras. */
/* Escopado ao container da ListagemDinamica (id="div-cont-tbl-{Identificador}").
   Sem esse escopo, a regra pegava o :last-child de QUALQUER <table class="table">
   do sistema — inclusive tabelas com layout completamente diferente, como a de
   Permissoes de Grupo, onde o ultimo td nao e uma coluna de acoes estreita, e sim
   o bloco inteiro de botoes de permissao. Ancorado com right:0 sem o overflow-x
   correto por perto, ele desenhava por cima da coluna de nome da URL e escondia
   o texto (bug relatado: nomes em branco na modal de Permissoes do grupo Administrador). */
/* O :has garante que so ancoramos quando a listagem realmente tem coluna de acoes.
   A ListagemDinamica so emite td.celula-centro quando existe evento de linha; nas
   listagens sem acoes o ultimo td e uma coluna de dados, e ancorar (ou estreitar)
   uma coluna de dados nao faz sentido. */
[id^="div-cont-tbl-"] .table:has(> tbody > tr > td.celula-centro) > tbody > tr > td:last-child,
[id^="div-cont-tbl-"] .table:has(> tbody > tr > td.celula-centro) > thead > tr > th:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    background-color: var(--sin-fundo-superficie);
    /* Encolhe ate o conteudo. Sem isto a celula de acoes herda a sobra de largura da
       tabela e fica larguissima nas listagens com poucas colunas; como os botoes sao
       alinhados a direita, a borda esquerda dela parava no meio da tela, longe deles,
       parecendo um risco solto (relatado em Grupo e em Chave e Valor). */
    width: 1%;
    white-space: nowrap;
}

[id^="div-cont-tbl-"] .table:has(> tbody > tr > td.celula-centro) > thead > tr > th:last-child {
    background-color: var(--sin-fundo-cabecalho);
}

/* Fio a esquerda separa a coluna ancorada do conteudo que passa por baixo.
   Como border-left, e nao ::before absoluto: a borda acompanha a celula, e com a
   celula encolhida ela encosta nos botoes em vez de flutuar. */
[id^="div-cont-tbl-"] .table:has(> tbody > tr > td.celula-centro) > tbody > tr > td:last-child,
[id^="div-cont-tbl-"] .table:has(> tbody > tr > td.celula-centro) > thead > tr > th:last-child {
    border-left: 1px solid var(--sin-borda);
}

/* A celula ancorada tem fundo proprio, entao precisa repetir o zebrado e o hover */
[id^="div-cont-tbl-"] .table-striped:has(> tbody > tr > td.celula-centro) > tbody > tr:nth-of-type(odd) > td:last-child {
    background-color: var(--sin-fundo-sutil);
}

/* O Bootstrap 5.1.3 pinta zebrado e hover com background-image - um gradiente solido
   sobre --bs-table-accent-bg - e nao com background-color. Cor definida so em
   background-color fica ATRAS desse gradiente: na linha zebrada o hover era coberto
   pela propria faixa e nao aparecia. Pintar o accent resolve nos dois casos, porque e
   a mesma camada que o zebrado usa.
   Medido no navegador: sem isto a linha zebrada tinha diferenca de cor 0 ao passar o
   mouse; com isto, 44 em distancia RGB. */
[id^="div-cont-tbl-"] .table > tbody > tr:hover > td,
tr.tr-listagem-dinamica:hover > td {
    --bs-table-accent-bg: var(--linha-hover-background);
    background-color: var(--linha-hover-background);
}

[id^="div-cont-tbl-"] .table > tbody > tr.selecionado > td:last-child {
    background-color: var(--sin-magenta-50);
}

[data-theme="dark"] [id^="div-cont-tbl-"] .table > tbody > tr.selecionado > td:last-child {
    background-color: #2C222A;
}

/* Linha selecionada precisa ser evidente sem depender de hover */
/* Selecao e estado de INTERFACE, nao situacao do registro — por isso pode usar a
   terceira cor da marca sem competir com as pills de status. E ainda separa bem do
   azul do hover: "onde o mouse esta" x "o que eu marquei". */
tr.selecionado,
tr.tr-listagem-dinamica.selecionado,
li.list-group-item.selecionado {
    background-color: var(--sin-magenta-50) !important;
    box-shadow: inset 3px 0 0 0 var(--sin-marca-terceira);
}

[data-theme="dark"] tr.selecionado,
[data-theme="dark"] tr.tr-listagem-dinamica.selecionado,
[data-theme="dark"] li.list-group-item.selecionado {
    background-color: rgba(229, 50, 92, 0.14) !important;
}


/* =====================================================================================
   10. CARDS, MODAIS, ACCORDION, LIST-GROUP
   ===================================================================================== */

.card {
    border-color: var(--sin-borda);
    border-radius: var(--sin-raio-lg);
    background-color: var(--sin-fundo-superficie);
}

.card-header {
    background-color: var(--sin-fundo-cabecalho);
    border-bottom-color: var(--sin-borda);
    color: var(--sin-texto);
    font-weight: 600;
    border-top-left-radius: calc(var(--sin-raio-lg) - 1px);
    border-top-right-radius: calc(var(--sin-raio-lg) - 1px);
}

.card-footer {
    background-color: var(--sin-fundo-sutil);
    border-top-color: var(--sin-borda);
}

.modal-content {
    border-color: var(--sin-borda);
    border-radius: var(--sin-raio-lg);
    box-shadow: var(--sin-sombra-3);
    background-color: var(--sin-fundo-elevado);
}

.modal-header {
    border-bottom: 1px solid var(--sin-borda);
    /* Faixa da marca no topo do modal, igual a da barra superior e a do titulo:
       a mesma assinatura em todo lugar onde algo "abre". */
    border-top: 0;
    background-image: linear-gradient(90deg,
        var(--sin-primaria) 0 58%,
        var(--sin-destaque) 58% 82%,
        var(--sin-marca-terceira) 82% 100%);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: top left;
    border-top-left-radius: calc(var(--sin-raio-lg) - 1px);
    border-top-right-radius: calc(var(--sin-raio-lg) - 1px);
    background-color: var(--sin-fundo-cabecalho);
}

.modal-title {
    color: var(--sin-texto);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.modal-title > i {
    flex: 0 0 auto;
    font-size: 0.85em;
    color: var(--sin-primaria-sobre-fundo);
}

.modal-title > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-footer {
    border-top-color: var(--sin-borda);
    background-color: var(--sin-fundo-sutil);
    border-bottom-left-radius: calc(var(--sin-raio-lg) - 1px);
    border-bottom-right-radius: calc(var(--sin-raio-lg) - 1px);
}

.accordion-item {
    border-color: var(--sin-borda);
    background-color: var(--sin-fundo-superficie);
    color: var(--sin-texto);
}

.accordion-button {
    background-color: var(--sin-fundo-superficie);
    color: var(--sin-texto);
}

.accordion-button:not(.collapsed) {
    color: var(--sin-primaria-sobre-fundo);
    background-color: var(--sin-primaria-suave);
    box-shadow: inset 0 -1px 0 var(--sin-borda);
}

.accordion-button:focus {
    border-color: var(--sin-primaria);
    outline: 0;
    box-shadow: var(--sin-anel-foco);
}

/* Seta do accordion: o Bootstrap embute um SVG azul #0c63e4 em data URI */
.accordion-button::after {
    filter: grayscale(100%) brightness(0.6);
}

.accordion-button:not(.collapsed)::after {
    filter: none;
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(1.6);
}

.list-group-item {
    background-color: var(--sin-fundo-superficie);
    border-color: var(--sin-borda);
    color: var(--sin-texto);
}

.list-group-item.active {
    background-color: var(--sin-primaria);
    border-color: var(--sin-primaria);
    color: var(--sin-primaria-texto);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--sin-primaria-suave);
    color: var(--sin-texto);
}


/* =====================================================================================
   11. BADGES, ALERTS, PROGRESS, SPINNERS, TOOLTIP
   ===================================================================================== */

.badge {
    border-radius: var(--sin-raio-pill);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge.bg-primary { background-color: var(--sin-primaria) !important; color: var(--sin-primaria-texto) !important; }
.badge.bg-secondary { background-color: var(--sin-neutro-600) !important; color: #FFFFFF !important; }
.badge.bg-success { background-color: var(--sin-sucesso) !important; color: var(--sin-sucesso-texto) !important; }
.badge.bg-danger { background-color: var(--sin-perigo) !important; color: var(--sin-perigo-texto) !important; }
.badge.bg-warning { background-color: var(--sin-atencao) !important; color: var(--sin-atencao-texto) !important; }
.badge.bg-info { background-color: var(--sin-info) !important; color: var(--sin-info-texto) !important; }
.badge.bg-light { background-color: var(--sin-neutra) !important; color: var(--sin-texto) !important; }
.badge.bg-dark { background-color: var(--sin-neutro-800) !important; color: #FFFFFF !important; }
.badge.bg-sin { background-color: var(--sin-destaque) !important; color: var(--sin-destaque-texto) !important; }

.badge-politica {
    border-color: var(--sin-borda);
    border-radius: var(--sin-raio-md);
}

/* Alerts: fundo suave + barra lateral da cor semantica */
.alert {
    border-radius: var(--sin-raio-md);
    border-width: 1px;
    border-left-width: 4px;
}

.alert-primary {
    color: var(--sin-primaria-sobre-fundo);
    background-color: var(--sin-primaria-suave);
    border-color: var(--sin-primaria-suave-borda);
    border-left-color: var(--sin-primaria);
}

.alert-secondary {
    color: var(--sin-texto);
    background-color: var(--sin-fundo-sutil);
    border-color: var(--sin-borda);
    border-left-color: var(--sin-neutro-500);
}

.alert-success {
    color: var(--sin-sucesso-sobre-fundo);
    background-color: var(--sin-sucesso-suave);
    border-color: var(--sin-sucesso-suave-borda);
    border-left-color: var(--sin-sucesso);
}

.alert-danger {
    color: var(--sin-perigo-sobre-fundo);
    background-color: var(--sin-perigo-suave);
    border-color: var(--sin-perigo-suave-borda);
    border-left-color: var(--sin-perigo);
}

.alert-warning {
    color: var(--sin-atencao-sobre-fundo);
    background-color: var(--sin-atencao-suave);
    border-color: var(--sin-atencao-suave-borda);
    border-left-color: var(--sin-atencao);
}

.alert-info {
    color: var(--sin-info-sobre-fundo);
    background-color: var(--sin-info-suave);
    border-color: var(--sin-info-suave-borda);
    border-left-color: var(--sin-info);
}

.alert-light {
    color: var(--sin-texto);
    background-color: var(--sin-fundo-sutil);
    border-color: var(--sin-borda);
    border-left-color: var(--sin-borda-forte);
}

.alert-dark {
    color: var(--sin-texto);
    background-color: var(--sin-fundo-cabecalho);
    border-color: var(--sin-borda);
    border-left-color: var(--sin-neutro-700);
}

.alert .alert-link { color: inherit; text-decoration: underline; font-weight: 600; }

/* Progresso */
.progress {
    background-color: var(--sin-neutra);
    border-radius: var(--sin-raio-pill);
}

.progress-bar {
    background-color: var(--sin-primaria);
    color: var(--sin-primaria-texto);
}

.progress-bar.bg-success { background-color: var(--sin-sucesso) !important; }
.progress-bar.bg-danger { background-color: var(--sin-perigo) !important; }
.progress-bar.bg-warning { background-color: var(--sin-atencao) !important; }
.progress-bar.bg-info { background-color: var(--sin-info) !important; }

/* Spinners */
.spinner-border,
.spinner-grow {
    color: var(--sin-primaria-sobre-fundo);
}

/* Tooltip e popover */
.tooltip-inner {
    background-color: var(--sin-neutro-900);
    color: #FFFFFF;
    border-radius: var(--sin-raio-md);
    box-shadow: var(--sin-sombra-2);
}

.tooltip .tooltip-arrow::before { border-top-color: var(--sin-neutro-900); }

.popover {
    border-color: var(--sin-borda);
    border-radius: var(--sin-raio-md);
    background-color: var(--sin-fundo-elevado);
    box-shadow: var(--sin-sombra-3);
}

.popover-header {
    background-color: var(--sin-fundo-cabecalho);
    border-bottom-color: var(--sin-borda);
    color: var(--sin-texto);
}

.popover-body { color: var(--sin-texto); }

/* Erro global do Blazor */
#blazor-error-ui {
    background-color: var(--sin-atencao-suave);
    color: var(--sin-atencao-sobre-fundo);
    border-top: 3px solid var(--sin-atencao);
    box-shadow: var(--sin-sombra-3);
}

/* Tela de carregamento inicial */
.loading-progress circle:last-child { stroke: var(--sin-primaria); }
/* O anel de tras usa o magenta da marca: a abertura do sistema mostra as tres cores */
.loading-progress circle:first-child { stroke: var(--sin-marca-terceira); opacity: 0.25; }
.loading-title { color: var(--sin-primaria-sobre-fundo); }


/* =====================================================================================
   12. RADZEN
   O tema default do Radzen usa um coral #ff6d41 que nao pertence a marca.
   Aqui os tokens sao reapontados para a paleta SIN (dialogos, notificacoes,
   tooltips e DataGrid sao globais via MainLayout).
   ===================================================================================== */

:root,
body {
    --rz-primary: var(--sin-primaria);
    --rz-primary-light: var(--sin-primaria-hover);
    --rz-primary-lighter: var(--sin-primaria-suave);
    --rz-primary-dark: var(--sin-primaria-hover);
    --rz-primary-darker: var(--sin-primaria-ativa);

    --rz-secondary: var(--sin-destaque);
    --rz-secondary-light: var(--sin-destaque-hover);
    --rz-secondary-lighter: var(--sin-destaque-suave);
    --rz-secondary-dark: var(--sin-destaque-hover);
    --rz-secondary-darker: var(--sin-destaque-ativa);

    --rz-success: var(--sin-sucesso);
    --rz-success-light: var(--sin-sucesso-hover);
    --rz-success-lighter: var(--sin-sucesso-suave);
    --rz-success-dark: var(--sin-sucesso-hover);
    --rz-success-darker: var(--sin-sucesso-ativa);

    --rz-danger: var(--sin-perigo);
    --rz-danger-light: var(--sin-perigo-hover);
    --rz-danger-lighter: var(--sin-perigo-suave);
    --rz-danger-dark: var(--sin-perigo-hover);
    --rz-danger-darker: var(--sin-perigo-ativa);

    --rz-warning: var(--sin-atencao);
    --rz-warning-light: var(--sin-atencao-hover);
    --rz-warning-lighter: var(--sin-atencao-suave);
    --rz-warning-dark: var(--sin-atencao-hover);
    --rz-warning-darker: var(--sin-atencao-ativa);

    --rz-info: var(--sin-info);
    --rz-info-light: var(--sin-info-hover);
    --rz-info-lighter: var(--sin-info-suave);
    --rz-info-dark: var(--sin-info-hover);
    --rz-info-darker: var(--sin-info-hover);

    --rz-text-color: var(--sin-texto);
    --rz-text-title-color: var(--sin-texto);
    --rz-text-secondary-color: var(--sin-texto-suave);
    --rz-text-disabled-color: var(--sin-texto-suave);
    --rz-body-background-color: var(--sin-fundo-app);
    --rz-base-background-color: var(--sin-fundo-superficie);
    --rz-border-radius: var(--sin-raio-md);

    --rz-input-background-color: var(--sin-fundo-superficie);
    --rz-input-color: var(--sin-texto);
    --rz-input-border: 1px solid var(--sin-borda-forte);
    --rz-input-focus-border: 1px solid var(--sin-primaria);
    --rz-input-focus-shadow: var(--sin-anel-foco);
    --rz-input-placeholder-color: var(--sin-texto-suave);
}

[data-theme="dark"] {
    --rz-base-50: var(--sin-fundo-superficie);
    --rz-base-100: var(--sin-fundo-sutil);
    --rz-base-200: var(--sin-fundo-cabecalho);
    --rz-base-300: var(--sin-borda);
    --rz-base-400: var(--sin-borda-forte);
    --rz-base-500: var(--sin-neutro-500);
    --rz-base-600: var(--sin-neutro-400);
    --rz-base-700: var(--sin-texto-suave);
    --rz-base-800: var(--sin-texto);
    --rz-base-900: #FFFFFF;
    --rz-base: var(--sin-borda);
    --rz-base-light: var(--sin-fundo-cabecalho);
    --rz-base-lighter: var(--sin-fundo-sutil);
    --rz-base-dark: var(--sin-neutro-400);
    --rz-base-darker: var(--sin-texto);
    --rz-white: var(--sin-fundo-superficie);
    --rz-input-background-color: var(--sin-neutro-900);
}

.rz-dialog,
.rz-dialog-content,
.rz-notification-item-wrapper,
.rz-popup {
    background-color: var(--sin-fundo-elevado);
    color: var(--sin-texto);
    border-radius: var(--sin-raio-lg);
    box-shadow: var(--sin-sombra-3);
}

.rz-dialog-titlebar {
    background-color: var(--sin-fundo-cabecalho);
    color: var(--sin-texto);
    border-top: 3px solid var(--sin-primaria);
}

.rz-tooltip-content {
    background-color: var(--sin-neutro-900);
    color: #FFFFFF;
    border-radius: var(--sin-raio-md);
}


/* =====================================================================================
   13. LINKS, SCROLLBAR, SELECAO
   ===================================================================================== */

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: var(--sin-primaria-sobre-fundo);
    text-decoration-color: var(--sin-primaria-suave-borda);
    transition: color var(--sin-transicao);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: var(--sin-primaria-hover);
}

::selection {
    background-color: var(--sin-primaria);
    color: var(--sin-primaria-texto);
}

* {
    scrollbar-color: var(--sin-neutro-300) transparent;
}

[data-theme="dark"] * {
    scrollbar-color: var(--sin-neutro-600) transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: var(--sin-raio-pill);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--sin-marca-terceira);
}

hr { border-top-color: var(--sin-borda); opacity: 1; }

/* Separador com a assinatura da marca, para fechar bloco de destaque */
hr.divisor-marca {
    border: 0;
    height: 3px;
    border-radius: 2px;
    opacity: 1;
    background: linear-gradient(90deg,
        var(--sin-primaria) 0 58%,
        var(--sin-destaque) 58% 82%,
        var(--sin-marca-terceira) 82% 100%);
}


/* =====================================================================================
   14. PILLS DE ESTADO
   Status em listagem. Preenchimento SUAVE de proposito: numa grade com 30 linhas,
   pills solidas viram um mosaico e cansam mais do que informam. O texto colorido
   sobre fundo tenue mantem a linha legivel e ainda deixa o estado saltar na varredura
   vertical da coluna.
   A classe vem de Utils/EstadoSemantico.cs, derivada do nome do membro do enum.
   ===================================================================================== */

.pill {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: var(--sin-raio-pill);
    border: 1px solid transparent;
    font-size: 0.92em;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: baseline;
}

/* Em coluna estreita o texto precisa poder quebrar em vez de sumir */
td .pill {
    white-space: normal;
}

.pill-sucesso {
    background-color: var(--sin-sucesso-suave);
    border-color: var(--sin-sucesso-suave-borda);
    color: var(--sin-sucesso-sobre-fundo);
}

.pill-atencao {
    background-color: var(--sin-atencao-suave);
    border-color: var(--sin-atencao-suave-borda);
    color: var(--sin-atencao-sobre-fundo);
}

.pill-perigo {
    background-color: var(--sin-perigo-suave);
    border-color: var(--sin-perigo-suave-borda);
    color: var(--sin-perigo-sobre-fundo);
}

.pill-info {
    background-color: var(--sin-primaria-suave);
    border-color: var(--sin-primaria-suave-borda);
    color: var(--sin-primaria-sobre-fundo);
}

.pill-neutro {
    background-color: transparent;
    border-color: var(--sin-borda-forte);
    color: var(--sin-texto-suave);
}

/* Marcador de 6px a esquerda: quem nao distingue as matizes ainda separa os estados
   pela posicao do ponto, e a coluna ganha um ritmo vertical na varredura. */
.pill::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 0.45em;
    vertical-align: 0.08em;
    background-color: currentColor;
}

.pill-neutro::before {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px currentColor;
}


/* =====================================================================================
   15. ESTADO VAZIO
   ===================================================================================== */

.estado-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--sin-texto-suave);
}

.estado-vazio-icone {
    font-size: 2.1rem;
    line-height: 1;
    margin-bottom: 0.35rem;
    color: var(--sin-marca-terceira);
    opacity: 0.45;
}

.estado-vazio-titulo {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--sin-texto);
}

.estado-vazio-dica {
    margin: 0;
    font-size: 0.85rem;
    max-width: 46ch;
    color: var(--sin-texto-suave);
}

.estado-vazio-acao {
    margin-top: 0.6rem;
}

/* Dentro de tabela e list-group o padding externo ja existe */
td > .estado-vazio,
.list-group-item > .estado-vazio {
    padding: 1.75rem 1rem;
}


/* =====================================================================================
   16. RITMO TIPOGRAFICO
   O sistema comprime tudo em 0.8rem pelo body.pequeno e rotulo, valor e titulo saem
   com o mesmo peso — por isso a tela "nao tem hierarquia" mesmo com a cor certa.
   Aqui NAO se mexe em densidade: altura de campo, padding e a escala do body.pequeno
   ficam como estao. So se separa o rotulo do dado que ele nomeia.
   ===================================================================================== */

/* Rotulo de campo em negrito.
   Antes o peso vinha de um .fw-bold no container de cada tela: onde o wrapper existia
   o rotulo saia 700, onde nao existia saia normal — e na mesma tela conviviam os dois.
   Definir aqui, explicitamente, torna igual em todas as telas sem depender do markup.
   Rotulo de caixa de selecao fica de fora: ali o texto e a propria opcao, nao um titulo. */
label.form-control-label,
.form-label,
form label:not(.form-check-label):not(.btn):not(.nao-negrito),
.card-body label:not(.form-check-label):not(.btn):not(.nao-negrito) {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--sin-texto);
    line-height: 1.3;
}

/* Escape para quem precisar do rotulo discreto */
label.nao-negrito {
    font-weight: 500;
    color: var(--sin-texto-suave);
}

/* Titulo de bloco (o "Pesquisa" do Fieldset) ganha peso e uma marca da cor da casa */
.card-header > h5,
.card-header > h4,
.card-header > h3 {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--sin-texto);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-header > h5::before,
.card-header > h4::before,
.card-header > h3::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    align-self: stretch;
    min-height: 0.95em;
    border-radius: 2px;
    background-color: var(--sin-primaria);
}

/* Icone do bloco (Fieldset). O titulo ocupa o meio e a seta vai para a direita. */
.card-header > h5 > i:first-of-type,
.card-header > h4 > i:first-of-type,
.card-header > h3 > i:first-of-type {
    flex: 0 0 auto;
    color: var(--sin-primaria-sobre-fundo);
    font-size: 0.92em;
    width: 1.15em;
    text-align: center;
}

/* Cabecalho colapsavel: a seta indica o estado e ja mostra que da para clicar */
.card-header[data-bs-toggle="collapse"] {
    cursor: pointer;
    user-select: none;
    transition: background-color var(--sin-transicao);
}

.card-header[data-bs-toggle="collapse"]:hover {
    background-color: var(--sin-primaria-suave);
}

.seta-colapso {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.75em;
    color: var(--sin-texto-suave);
    transition: transform var(--sin-transicao);
}

.card-header[aria-expanded="false"] .seta-colapso {
    transform: rotate(-90deg);
}

/* Titulo da pagina */
.view-content > h1,
.view-content > h3,
#container-app > h1,
#container-app > h3 {
    letter-spacing: -0.02em;
    font-weight: 600;
    text-wrap: balance;
}

/* Titulo de modulo: icone + nome, com um fio da marca embaixo que separa o
   cabecalho do conteudo sem gastar uma linha inteira de espaco. */
h2.titulo-pagina {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--sin-texto);
    padding-bottom: 0.5rem;
    position: relative;
    text-wrap: balance;
}

h2.titulo-pagina > i {
    flex: 0 0 auto;
    font-size: 0.85em;
    color: var(--sin-primaria-sobre-fundo);
}

h2.titulo-pagina::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 3px;
    border-radius: 2px;
    /* As tres cores do logotipo, na proporcao em que aparecem nele */
    background: linear-gradient(90deg,
        var(--sin-primaria) 0 55%,
        var(--sin-destaque) 55% 80%,
        var(--sin-marca-terceira) 80% 100%);
}

/* Numero em coluna alinha por digito */
.table td.text-end,
.table td.text-right,
td.valor-numerico,
.pill + .pill {
    font-variant-numeric: tabular-nums;
}

/* "Total de registros" e afins: rotulo discreto, numero em destaque */
.text-muted + .fw-bold {
    color: var(--sin-marca-terceira);
    font-variant-numeric: tabular-nums;
}


/* =====================================================================================
   17. BARRA FIXA DE ACOES
   A .rodape-suspenso flutua sobre o conteudo. Sem uma borda superior ela se funde
   com o card de tras e some da vista — que e a queixa de "cade os botoes".
   ===================================================================================== */

div.rodape-suspenso {
    background-color: var(--sin-fundo-superficie);
    border-top: 2px solid var(--sin-primaria);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] div.rodape-suspenso {
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45);
}

/* O card interno herda o fundo da barra em vez de desenhar outra caixa por cima */
div.rodape-suspenso > .card {
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

/* Espacamento por gap em vez do margin:7px de cada botao, que dava respiro
   diferente conforme a combinacao de botoes visivel na tela.
   Só os contêineres alinhados à direita: as telas que usam .d-flex já têm
   layout próprio (ex.: badge de status à esquerda) e não devem ser mexidas. */
div.rodape-suspenso .text-end,
div.rodape-suspenso .text-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

div.rodape-suspenso .text-end > .btn,
div.rodape-suspenso .text-right > .btn,
div.rodape-suspenso .btn.btn-margin-7px {
    margin: 0;
}

/* Esta e a zona de acao da tela: vale abrir mao da densidade do body.pequeno aqui.
   25px de altura para o botao que conclui um pedido e pouco. */
div.rodape-suspenso .btn {
    min-height: 32px;
    padding-inline: 0.85rem;
    font-size: 0.82rem;
}

/* Hierarquia: as acoes utilitarias da barra (Exportar PDF, Emitir Termo, Fechar)
   sao sempre .btn-secondary. Em contorno, elas param de competir com Salvar e
   Enviar, que sao as decisoes de verdade. */
div.rodape-suspenso .btn-secondary:not(:disabled):not(.disabled) {
    background-color: transparent;
    border-color: var(--sin-borda-forte);
    color: var(--sin-texto);
}

div.rodape-suspenso .btn-secondary:not(:disabled):not(.disabled):hover,
div.rodape-suspenso .btn-secondary:not(:disabled):not(.disabled):focus {
    background-color: var(--sin-neutra);
    border-color: var(--sin-borda-forte);
    color: var(--sin-texto);
}

/* Salvar e Enviar continuam solidos e sao os unicos com peso cheio */
div.rodape-suspenso .btn-primary,
div.rodape-suspenso .btn-success {
    font-weight: 600;
}

@media (max-width: 768px) {
    div.rodape-suspenso .text-end,
    div.rodape-suspenso .text-right {
        justify-content: stretch;
    }

    div.rodape-suspenso .text-end > .btn,
    div.rodape-suspenso .text-right > .btn {
        flex: 1 1 auto;
    }
}


/* =====================================================================================
   18. HOME
   ===================================================================================== */

/* Saudacao a esquerda, data a direita — como era antes. Em telas estreitas o
   space-between empilha e a data volta para baixo, alinhada a esquerda. */
.home-saudacao {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.2rem 1rem;
    margin: 0.25rem 0 1.4rem;
    padding-bottom: 0.7rem;
    border-bottom: 0;
    background-image: linear-gradient(90deg,
        var(--sin-primaria) 0 58%,
        var(--sin-destaque) 58% 82%,
        var(--sin-marca-terceira) 82% 100%);
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: bottom left;
}

/* Sem caixa alta e sem tamanho de manchete: e uma saudacao, nao um titulo. */
.home-ola {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--sin-texto);
}

.home-data {
    margin: 0;
    font-size: 0.82rem;
    color: var(--sin-texto-suave);
    /* Sem text-transform: em ingles e alemao os nomes de mes e dia sao maiusculos
       por regra do idioma. Forcar minuscula quebraria a grafia correta. */
    white-space: nowrap;
}

.home-bloco { margin-bottom: 1.75rem; }

.home-bloco-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.7rem;
}

.home-bloco-titulo {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sin-texto);
}



/* --- Acesso rapido ---
   auto-fill com minmax deixa o Bootstrap de lado para o grid e se adapta sozinho:
   1 coluna no celular, 2 no tablet, ate 6 no monitor largo. */
.home-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.6rem;
}

.home-cartao {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
    will-change: transform;
    border: 1px solid var(--sin-borda);
    border-left: 3px solid var(--sin-primaria);
    border-radius: var(--sin-raio-md);
    background-color: var(--sin-fundo-superficie);
    transition: border-color var(--sin-transicao), box-shadow var(--sin-transicao);
}

.home-cartao:hover,
.home-cartao:focus-within {
    border-color: var(--sin-primaria);
    box-shadow: var(--sin-sombra-2);
    transform: translateY(-1px);
}

.home-cartao:hover .home-cartao-icone {
    background-color: var(--sin-primaria);
    color: var(--sin-primaria-texto);
}

.home-cartao.fixado { border-left-color: var(--sin-destaque); }

.home-cartao-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.8rem 0.15rem 0.8rem 0.85rem;
    color: var(--sin-texto) !important;
    text-decoration: none !important;
    border-radius: inherit;
}

.home-cartao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--sin-raio-md);
    background-color: var(--sin-primaria-suave);
    color: var(--sin-primaria-sobre-fundo);
    font-size: 0.85rem;
    transition: background-color var(--sin-transicao), color var(--sin-transicao);
}

.home-cartao.fixado .home-cartao-icone {
    background-color: var(--sin-destaque-suave);
    color: var(--sin-destaque-sobre-fundo);
}

.home-cartao-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-cartao-titulo {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-cartao-meta {
    font-size: 0.7rem;
    color: var(--sin-texto-suave);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Duas acoes por cartao: fixar (estrela) e remover (x). Empilhadas na vertical
   para nao roubar largura do titulo, que e o que a pessoa le. */
.home-cartao-acoes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    flex: 0 0 auto;
    padding-right: 0.15rem;
}

.home-cartao-fixar,
.home-cartao-remover {
    flex: 0 0 auto;
    padding: 0.22rem 0.45rem;
    border: 0;
    background: transparent;
    color: var(--sin-borda-forte);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--sin-raio-sm);
    transition: color var(--sin-transicao), background-color var(--sin-transicao), opacity var(--sin-transicao);
}

/* Remover e destrutivo: usa o vermelho de alarme, nunca o magenta da marca */
.home-cartao-remover:hover,
.home-cartao-remover:focus-visible {
    color: var(--sin-perigo-sobre-fundo);
    background-color: var(--sin-perigo-suave);
}

.home-cartao-remover:focus-visible {
    outline: 0;
    box-shadow: var(--sin-anel-foco-perigo);
}

.home-cartao-fixar:hover,
.home-cartao-fixar:focus-visible,
.home-cartao.fixado .home-cartao-fixar { color: var(--sin-destaque-sobre-fundo); }

.home-cartao-fixar:hover { background-color: var(--sin-destaque-suave); }

.home-cartao-fixar:focus-visible { outline: 0; box-shadow: var(--sin-anel-foco-destaque); }

/* A estrela fica SEMPRE visivel. Escondida no hover, ela era invisivel no primeiro
   olhar — e a instrucao "clique na estrela" apontava para algo que nao estava la. */
.home-cartao-fixar, .home-cartao-remover { opacity: 1; }

/* Celular: alvo de toque maior e cartao em coluna unica */
@media (max-width: 575.98px) {
    .home-cartoes { grid-template-columns: 1fr; }
    .home-cartao-link { padding-block: 0.75rem; }
    .home-cartao-fixar,
    .home-cartao-remover { padding: 0.5rem 0.7rem; font-size: 0.85rem; }
    .home-data { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .home-cartao, .home-cartao-fixar, .home-cartao-icone { transition: none; }
    .home-cartao:hover { transform: none; }
}

/* Primeiro acesso: sem histórico ainda, explica de onde a lista vai sair */
.home-primeiro-acesso {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px dashed var(--sin-borda-forte);
    border-radius: var(--sin-raio-md);
    background-color: var(--sin-fundo-sutil);
    color: var(--sin-texto-suave);
    font-size: 0.86rem;
}

.home-primeiro-acesso > i {
    flex: 0 0 auto;
    font-size: 1.2rem;
    color: var(--sin-primaria-sobre-fundo);
}


/* =====================================================================================
   18. UTILITARIOS DE MARCA
   ===================================================================================== */

.text-sin { color: var(--sin-destaque-sobre-fundo) !important; }
.bg-sin { background-color: var(--sin-destaque) !important; color: var(--sin-destaque-texto) !important; }
.border-sin { border-color: var(--sin-destaque) !important; }

.text-sin-magenta { color: var(--sin-marca-terceira) !important; }
.bg-sin-magenta { background-color: var(--sin-marca-terceira) !important; color: #FFFFFF !important; }
.border-sin-magenta { border-color: var(--sin-marca-terceira) !important; }
.badge.bg-sin-magenta { background-color: var(--sin-marca-terceira) !important; color: #FFFFFF !important; }

/* Faixa da marca: separador de secao e destaque de cabecalho */
.faixa-marca {
    height: 3px;
    border: 0;
    border-radius: 2px;
    opacity: 1;
    background: linear-gradient(90deg,
        var(--sin-primaria) 0 58%,
        var(--sin-destaque) 58% 82%,
        var(--sin-marca-terceira) 82% 100%);
}

.text-sin-azul { color: var(--sin-primaria-sobre-fundo) !important; }
.bg-sin-azul { background-color: var(--sin-primaria) !important; color: var(--sin-primaria-texto) !important; }
.border-sin-azul { border-color: var(--sin-primaria) !important; }

.bg-sin-suave { background-color: var(--sin-primaria-suave) !important; }
.bg-sin-destaque-suave { background-color: var(--sin-destaque-suave) !important; }

/* =====================================================================================
   15. RESPEITO A PREFERENCIA DE MOVIMENTO
   ===================================================================================== */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .form-control,
    .form-select,
    .nav-link,
    .dropdown-item,
    .page-link,
    .btn-transparente {
        transition: none;
    }
}

/* ==========================================================================
   Painel de pedidos da tela inicial
   Numero grande, rotulo e valor. A cor entra pela borda esquerda e pelo
   numero — nunca por preenchimento solido, que numa grade de quatro vira
   mosaico e cansa antes de informar.
   ========================================================================== */
.home-bloco-cabecalho {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}

.home-bloco-periodo {
    margin-left: auto;
    font-size: .8125rem;
    color: var(--sin-texto-suave);
}

.home-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.25rem, 1fr));
    gap: .625rem;
    margin-top: .75rem;
}

.home-indicador {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .75rem .875rem;
    border: 1px solid var(--sin-borda);
    border-left: 3px solid var(--sin-primaria);
    border-radius: var(--sin-raio-md);
    background: var(--sin-fundo-superficie);
    /* Obrigatorio, e nao herdado: o indicador e um <button>, e botao nao herda color do
       documento - usa o padrao do navegador, que e preto. Sem isto o numero fica preto
       sobre fundo escuro no tema escuro. */
    color: var(--sin-texto);
}

.home-indicador-numero {
    color: inherit;
    font-size: 1.625rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.home-indicador-rotulo {
    font-size: .75rem;
    color: var(--sin-texto-suave);
}

.home-indicador-valor {
    font-size: .8125rem;
    color: var(--sin-texto-suave);
    font-variant-numeric: tabular-nums;
}

.home-indicador-atencao { border-left-color: var(--sin-atencao); }
.home-indicador-atencao .home-indicador-numero { color: var(--sin-atencao-sobre-fundo); }

.home-indicador-perigo { border-left-color: var(--sin-perigo); }
.home-indicador-perigo .home-indicador-numero { color: var(--sin-perigo-sobre-fundo); }

.home-indicador-sucesso { border-left-color: var(--sin-sucesso); }
.home-indicador-sucesso .home-indicador-numero { color: var(--sin-sucesso-sobre-fundo); }

.home-painel-carregando {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem 0;
    color: var(--sin-texto-suave);
    font-size: .875rem;
}

.home-painel-rodape {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    margin: .75rem 0 0;
    font-size: .75rem;
    color: var(--sin-texto-suave);
}

/* Indicador clicavel: o numero responde "quanto", o clique responde "quais". */
button.home-indicador {
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
    padding-right: 1.875rem;
    transition: border-color var(--sin-transicao), box-shadow var(--sin-transicao);
}

button.home-indicador::after {
    content: "\203A";
    position: absolute;
    right: .6875rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--sin-texto-suave);
}

button.home-indicador:hover,
button.home-indicador:focus-visible {
    border-color: var(--sin-primaria);
    box-shadow: 0 0 0 .125rem var(--sin-primaria-suave);
}

/* Linha da modal: numero, cliente, data e valor. */
.home-linha-pedido {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .5625rem .625rem;
    margin-bottom: .375rem;
    border: 1px solid var(--sin-borda);
    border-radius: var(--sin-raio-md);
    background: var(--sin-fundo-superficie);
    color: var(--sin-texto);
    font-size: .8125rem;
    text-align: left;
}

.home-linha-numero { font-weight: 650; font-variant-numeric: tabular-nums; }

.home-linha-cliente {
    color: var(--sin-texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.home-linha-data { color: var(--sin-texto-suave); font-variant-numeric: tabular-nums; }

.home-linha-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tabela por consultor, do bloco do gestor. */
.home-subtitulo {
    margin: 1.25rem 0 .5rem;
    font-size: .875rem;
    font-weight: 650;
    color: var(--sin-texto);
}

.home-tabela-rolagem { overflow-x: auto; }

.home-tabela-consultores {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
    min-width: 26rem;
}

.home-tabela-consultores th {
    text-align: left;
    padding: .4375rem .5625rem;
    font-size: .7188rem;
    font-weight: 600;
    background: var(--sin-fundo-cabecalho);
    color: var(--sin-texto);
    border-bottom: 2px solid var(--sin-primaria);
    white-space: nowrap;
}

.home-tabela-consultores td {
    padding: .4375rem .5625rem;
    border-bottom: 1px solid var(--sin-borda);
}

.home-tabela-consultores .numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.home-lista-pedidos { display: flex; flex-direction: column; }

/* ==========================================================================
   Combobox Ajax: o painel flutuante nunca teve fundo proprio.
   Sobre a pagina ele fica transparente e o conteudo de tras aparece no meio
   das opcoes - dificil de ler e facil de clicar errado.

   As regras de app.css usam "div.popup-combobox-ajax", e a versao de multipla
   selecao renderiza um <ul>, entao nao eram aplicadas a ela. Aqui vale para as
   duas: e o mesmo componente para quem usa.
   ========================================================================== */
.popup-combobox-ajax {
    background-color: var(--sin-fundo-superficie);
    border: 1px solid var(--sin-borda-forte);
    border-radius: var(--sin-raio-md);
    box-shadow: var(--sin-sombra-suspensa, 0 .5rem 1.5rem rgba(0, 36, 63, .18));
    /* Acima do resto do formulario, como qualquer camada suspensa. */
    overflow: hidden;
}

/* Os itens precisam ser opacos: translucido sobre translucido deixava o texto
   competindo com o que estivesse por baixo. */
.popup-combobox-ajax > li,
.popup-combobox-ajax li.list-group-item {
    background-color: var(--sin-fundo-superficie);
    border-color: var(--sin-borda-sutil);
    color: var(--sin-texto);
}

.popup-combobox-ajax > li:not(.nao-selecionavel):hover,
.popup-combobox-ajax li.list-group-item:not(.nao-selecionavel):hover {
    background-color: var(--sin-primaria-suave);
}

.popup-combobox-ajax li.nao-selecionavel {
    color: var(--sin-texto-suave);
}