/* estatico/tema-selink.css
 *
 * 05/11/2026: cores trocadas para as da PILAR (azul da marca #7FA9DC
 * clareado para ler no escuro, cinzas azulados), mantendo o layout escuro
 * da Selink. A versao verde original ficou no rascunho da sessao 4a.
 *
 * Layout do site da Selink (backup de 04/11/2026: selink-site-visual) aplicado
 * ao CRM da PILAR, a pedido do Mateus em 05/11/2026: chao escuro, paineis
 * com fio fino, verde da marca nos botoes e no item ativo, Instrument Sans.
 *
 * Carregado DEPOIS de pilar.css/whatsapp.css. A segunda metade deste arquivo
 * e gerada (gen/gerar.py, no rascunho da sessao 4a): pega cada regra dos CSS
 * do CRM que tinha fundo branco ou texto escuro fixo e devolve a versao
 * escura. Para voltar: no base.html, trocar este <link> por tema-painel.css
 * (visual claro do Painel) ou apagar a linha (visual original).
 */

@font-face {
  font-family: "Instrument Sans";
  src: url("/estatico/fontes/instrument-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root,
[data-bs-theme="light"] {
  color-scheme: dark;

  /* tokens do site da Selink */
  --sl-chao: #0b111a;
  --sl-painel: #111a26;
  --sl-campo: #0e1622;
  --sl-realce: #172436;
  --sl-fio: #2a3a50;
  --sl-fio-forte: #3d5270;
  --sl-tinta: #e8eef6;
  --sl-tinta-2: #a7b4c6;
  --sl-tinta-3: #7d8ba0;
  --sl-verde: #5b9be0;
  --sl-verde-claro: #9cc4f0;
  --sl-verde-escuro: #08131f;
  --sl-perigo: #f06a6e;
  --sl-atencao: #e6b450;
  --sl-fonte: "Instrument Sans", system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;

  /* tokens do CRM apontados para a Selink */
  --navy: var(--sl-tinta);
  --azul: var(--sl-verde);
  --azul-esc: var(--sl-verde-claro);
  --azul-rgb: 91, 155, 224;
  --nevoa: var(--sl-realce);
  --papel: var(--sl-chao);
  --tinta-suave: var(--sl-tinta-2);
  --linha: var(--sl-fio);
  --dourado: var(--sl-verde);
  --dourado-rgb: 91, 155, 224;
  --fonte-corpo: var(--sl-fonte);
  --fonte-titulo: var(--sl-fonte);

  /* Tabler */
  --tblr-primary: var(--sl-verde);
  --tblr-primary-rgb: 91, 155, 224;
  --tblr-primary-darken: #4a88cc;
  --tblr-primary-fg: var(--sl-verde-escuro);
  --tblr-success: #4fbf8b;
  --tblr-success-rgb: 79, 191, 139;
  --tblr-danger: var(--sl-perigo);
  --tblr-danger-rgb: 240, 106, 110;
  --tblr-warning: var(--sl-atencao);
  --tblr-warning-rgb: 230, 180, 80;
  --tblr-link-color: var(--sl-verde-claro);
  --tblr-link-color-rgb: 143, 224, 122;
  --tblr-link-hover-color: #c2dbf6;

  --tblr-body-bg: var(--sl-chao);
  --tblr-body-bg-rgb: 11, 17, 26;
  --tblr-body-color: var(--sl-tinta);
  --tblr-body-color-rgb: 237, 241, 238;
  --tblr-emphasis-color: #ffffff;
  --tblr-secondary-color: var(--sl-tinta-2);
  --tblr-tertiary-color: var(--sl-tinta-3);
  --tblr-secondary: var(--sl-tinta-2);
  --tblr-muted: var(--sl-tinta-3);
  --tblr-heading-color: var(--sl-tinta);
  --tblr-secondary-bg: var(--sl-campo);
  --tblr-tertiary-bg: var(--sl-realce);

  --tblr-bg-surface: var(--sl-painel);
  --tblr-bg-surface-secondary: var(--sl-realce);
  --tblr-bg-surface-tertiary: var(--sl-realce);
  --tblr-bg-forms: var(--sl-campo);
  --tblr-border-color: var(--sl-fio);
  --tblr-border-color-translucent: rgba(255, 255, 255, 0.08);
  --tblr-border-color-dark: var(--sl-fio-forte);

  --tblr-font-sans-serif: var(--sl-fonte);
  --tblr-body-font-family: var(--sl-fonte);

  --tblr-border-radius: 10px;
  --tblr-border-radius-sm: 8px;
  --tblr-border-radius-md: 10px;
  --tblr-border-radius-lg: 14px;
  --tblr-border-radius-xl: 14px;
  --tblr-border-radius-xxl: 14px;

  --tblr-box-shadow: none;
  --tblr-box-shadow-sm: none;
  --tblr-focus-ring-color: rgba(91, 155, 224, 0.3);
}

body {
  background: var(--sl-chao);
  color: var(--sl-tinta);
  font-family: var(--sl-fonte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.pilar-titulo,
.pilar-wordmark,
.page-title,
.card-title {
  font-family: var(--sl-fonte);
  color: var(--sl-tinta);
  letter-spacing: -0.02em;
}
h1.page-title,
.page-header .page-title {
  font-size: 1.75rem;
  font-weight: 600;
}
.text-secondary,
.text-muted,
.form-hint,
small {
  color: var(--sl-tinta-2) !important;
}
a {
  color: var(--sl-verde-claro);
}
hr {
  border-color: var(--sl-fio);
}

/* ---------------------------------------------------------------------
 * Cores claras fixas do CRM, convertidas para o escuro (gerado).
 * --------------------------------------------------------------------- */
/* gerado de: pilar.css whatsapp.css previa.css metas.css — 106 regras */
.pilar-nav-lateral { background: var(--sl-painel); }
.pilar-qr-caixa { background: var(--sl-painel); }
.pilar-mensagem-recebida .pilar-bolha { background: var(--sl-painel); }
.pilar-chat-lista { background: var(--sl-painel); }
.pilar-chat-cabecalho { background: var(--sl-painel); }
.pilar-composer { background: var(--sl-painel); }
.pilar-composer-aviso { color: #e89292; }
.pilar-kanban-coluna[data-coluna] .pilar-kanban-cartao { background: var(--sl-painel); }
.pilar-kanban-cartao { background: var(--sl-painel); }
.pilar-kanban-cartao[data-vez="nossa"] .pilar-cartao-acao { color: #c7af7e; }
.pilar-cartao-setor.sem-setor { color: #c7af7e; }
.pilar-reacao { background: var(--sl-painel); border: 1px solid var(--tblr-border-color, var(--sl-fio)); }
.pilar-aviso-conexao { background: var(--sl-painel); color: #b78681; }
.pilar-aviso-conexao strong { color: #c18a83; }
.pilar-aviso-conexao a { color: #c18a83; }
.pilar-simples-empresa { background: var(--sl-painel); }
.pilar-simples-marca strong { color: #c18a83; }
.pilar-arquivo-arquivado { color: #8cb59b; }
.pilar-arquivo-recusado { color: #d58783; }
.pilar-dialogo-aviso { color: #d58783; }
.pilar-servidor-item { background: var(--sl-painel); }
.pilar-cartao-arquivar { color: #bea472; }
.pilar-caixa-topo { background: var(--sl-painel); }
.pilar-caixa-ao-vivo { color: #83c19d; }
.pilar-caixa-ao-vivo.sem-conexao { color: #d69977; }
.pilar-caixa-filtro { background: var(--sl-painel); }
.pilar-caixa-filtro.ativo { background: var(--sl-painel); color: #78a590; }
.pilar-chat-item.tem-nao-lida .pilar-chat-item-hora { color: #83c19d; }
.pilar-caixa .pilar-chat-item.ativo { background: var(--sl-campo); }
.pilar-caixa-boas-vindas { background: var(--sl-painel); }
.pilar-caixa .pilar-chat-mensagens { background: rgba(239,234,226,.10); }
.pilar-caixa .pilar-mensagem-enviada .pilar-bolha { background: var(--sl-painel); color: var(--sl-tinta); }
.pilar-caixa .pilar-mensagem-recebida .pilar-bolha { background: var(--sl-painel); color: var(--sl-tinta); }
.pilar-rotina-numero { background: var(--sl-painel); }
button.pilar-rotina-numero:hover { background: var(--sl-painel); }
.pilar-rotina-quem { background: var(--sl-painel); }
.pilar-rotina-etapa { background: var(--sl-painel); }
.pilar-rotina-estado { background: var(--sl-painel); }
.pilar-rotina-tabela thead th { background: var(--sl-painel); }
.pilar-avatar { background: rgba(223,230,241,.10); }
.pilar-cartao-responde.decidido strong { color: #84adde; }
.pilar-cartao-responde.sem-setor strong { color: #e89292; }
.pilar-cartao-contabil { background: var(--sl-painel); }
.pilar-previa-whatsapp { background: var(--sl-painel); }
.pilar-chat-conversa.pilar-soltando::after { color: #84adde; }
.pilar-composer-anexo { background: var(--sl-painel); border: 1px solid var(--tblr-border-color, var(--sl-fio)); }
.pilar-composer-anexo-tirar:hover { color: #e89292; }
.pilar-assistente-conversa:hover { background: var(--sl-painel); }
.pilar-assistente-conversa.ativa { background: var(--sl-painel); }
.pilar-assistente-mensagens { background: var(--sl-painel); }
.pilar-assistente-msg { background: var(--sl-painel); }
.pilar-assistente-msg.user { background: var(--sl-painel); }
.pilar-md pre { background: var(--sl-painel); }
.pilar-assistente-principal.pilar-soltando::after { color: #84adde; }
.pilar-assistente-acao { border: 1px solid var(--tblr-border-color, var(--sl-fio)); background: var(--sl-painel); }
.pilar-assistente-acao.proposta { background: var(--sl-painel); }
.pilar-entregas-aviso { color: #bea872; }
.pilar-obrigacao { background: var(--sl-painel); }
.pilar-obrigacao-prazo.vencida { color: #d5867f; }
.pilar-obrigacao-pendencias .rodando { background: var(--sl-painel); color: #bea872; }
.pilar-obrigacao-pendencias .alguem { background: var(--sl-painel); color: #d5867f; }
.pilar-entregas-robo { background: var(--sl-painel); }
.pilar-entregas-rodada { background: var(--sl-painel); }
.pilar-entregas-rodada[data-estado="erro"] .pilar-entregas-rodada-estado { background: var(--sl-painel); color: #d5867f; }
.pilar-entregas-rodada[data-estado="feito"] .pilar-entregas-rodada-estado { background: var(--sl-painel); color: #83b58f; }
.pilar-entregas-rodada[data-estado="rodando"] .pilar-entregas-rodada-estado,
.pilar-entregas-rodada[data-estado="pedido"] .pilar-entregas-rodada-estado { background: var(--sl-painel); color: #bea872; }
.pilar-processo-prazo { color: #bea872; }
.pilar-mensagem-status.lida { color: #89bfe9; }
.pilar-cadastro-chip { background: var(--sl-painel); }
.pilar-cadastro-tabela .badge.grav-3, .pilar-cadastro-item .badge.grav-3 { background: rgba(251,231,231,.10); color: #cb8787; }
.pilar-cadastro-tabela .badge.grav-2, .pilar-cadastro-item .badge.grav-2 { background: var(--sl-painel); color: #bea472; }
.pilar-cadastro-tabela .badge.grav-1, .pilar-cadastro-item .badge.grav-1 { background: var(--sl-painel); color: var(--sl-tinta); }
.pilar-sugestao-falta { color: #d5a077; }
.pilar-sugestao-encaminhar { color: #d88282; }
.pilar-composer-copiloto { color: #8cafed; }
.pilar-tela-chat .pilar-chat-lista { background: var(--sl-painel); }
.pilar-tela-chat .pilar-caixa-topo { background: var(--sl-painel); }
.pilar-tela-chat .pilar-caixa-filtro.ativo { background: var(--sl-painel); }
.pilar-tela-chat .pilar-chat-item { background: var(--sl-painel); }
.pilar-caixa-avatar.pilar-avatar { background: var(--sl-campo); }
.pilar-caixa-avatar .pilar-avatar-iniciais { color: var(--sl-tinta-2); }
.pilar-caixa-avatar.e-grupo { background: var(--sl-campo); }
.pilar-tela-chat .pilar-chat-item.tem-nao-lida .pilar-chat-item-hora { color: #83cfa1; }
.pilar-tela-chat .pilar-dia { color: var(--sl-tinta-2); }
.pilar-tela-chat .pilar-mensagem-autor,
.pilar-tela-chat .pilar-mensagem-quem-nossa { color: #83b5f4; }
.pilar-tela-chat .pilar-reacao { background: var(--sl-painel); }
.pilar-tela-chat .pilar-composer-texto { background: var(--sl-painel); }
.pilar-tela-chat .pilar-composer-botao.btn-outline-secondary { color: var(--sl-tinta-2); }
.pilar-tela-chat .pilar-caixa-boas-vindas { background: var(--sl-painel); }
.pilar-msg-menu { background: var(--sl-painel); }
.pilar-msg-emojis { border-bottom: 1px solid var(--sl-fio); }
.pilar-msg-emojis button:hover { background: var(--sl-painel); }
.pilar-msg-opcao { color: var(--sl-tinta); }
.pilar-msg-opcao:hover { background: var(--sl-painel); }
.pilar-mensagem-recebida .pilar-citacao-autor { color: #83b5f4; }
.pilar-citacao-texto { color: var(--sl-tinta-2); }
.pilar-composer-resposta { background: var(--sl-painel); }
.pilar-composer-resposta-fechar { color: var(--sl-tinta-2); }
.pilar-encaminhar-lista { border: 1px solid var(--sl-fio); }
.pilar-encaminhar-item { border-bottom: 1px solid var(--sl-fio); background: var(--sl-painel); color: var(--sl-tinta); }
.pilar-encaminhar-item:hover { background: var(--sl-painel); }
.pilar-encaminhar-item small { color: var(--sl-tinta-2); }
.pilar-previa-pdf canvas { background: var(--sl-painel); }
.pilar-metas-falta { color: #d5867f; }
.pilar-metas-feito { color: #83b58f; }
.pilar-metas-erro { color: #d5867f; }

/* Foco no verde, com o anel suave do site. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sl-verde) !important;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Topo: barra escura com fio embaixo, como o menu do site.
 * --------------------------------------------------------------------- */
.navbar-pilar {
  background: rgba(11, 17, 26, 0.92);
  border-bottom: 1px solid var(--sl-fio);
  backdrop-filter: blur(8px);
}
.navbar-pilar .navbar-brand,
.navbar-pilar .pilar-wordmark {
  color: var(--sl-tinta);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.navbar-pilar .pilar-wordmark::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  border-radius: 3px;
  background: var(--sl-verde);
  box-shadow: 0 0 12px rgba(91, 155, 224, 0.6);
  vertical-align: 1px;
}
.navbar-pilar .navbar-nav .nav-link,
.navbar-pilar .nome-usuario {
  color: var(--sl-tinta-2);
}
.navbar-pilar .btn-outline-light {
  color: var(--sl-tinta);
  border-color: var(--sl-fio);
  background: transparent;
  border-radius: 999px;
}
.navbar-pilar .btn-outline-light:hover {
  border-color: var(--sl-fio-forte);
  background: var(--sl-realce);
}

/* ---------------------------------------------------------------------
 * Menu lateral: painel escuro, ativo com faixa verde a esquerda.
 * --------------------------------------------------------------------- */
.pilar-nav-lateral {
  background: var(--sl-painel);
  border-right: 1px solid var(--sl-fio);
  padding: 20px 12px;
}
.pilar-nav-lateral .nav-link {
  color: #c6d2e2;
  font-weight: 500;
  border-radius: 8px;
  padding: 9px 12px;
}
.pilar-nav-lateral .nav-link:hover {
  color: #fff;
  background: #14202f;
}
.pilar-nav-lateral .nav-item.active .nav-link {
  color: #fff;
  background: var(--sl-realce);
  box-shadow: inset 3px 0 0 var(--sl-verde);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Paineis (cards), fio fino e cantos de 14px.
 * --------------------------------------------------------------------- */
.card {
  --tblr-card-bg: var(--sl-painel);
  --tblr-card-cap-bg: transparent;
  --tblr-card-border-color: var(--sl-fio);
  background: var(--sl-painel);
  border: 1px solid var(--sl-fio);
  border-radius: 14px;
  box-shadow: none;
  color: var(--sl-tinta);
}
.card-header,
.card-footer {
  background: transparent;
  border-color: var(--sl-fio);
}
.list-group-item {
  background: transparent;
  color: var(--sl-tinta);
  border-color: var(--sl-fio);
}
.dropdown-menu,
.modal-content,
.popover,
.toast {
  background: var(--sl-painel);
  color: var(--sl-tinta);
  border-color: var(--sl-fio);
}
.dropdown-item {
  color: var(--sl-tinta);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--sl-realce);
  color: #fff;
}
.alert {
  background: var(--sl-campo);
  color: var(--sl-tinta);
  border-color: var(--sl-fio);
}
.bg-white,
.bg-light {
  background-color: var(--sl-painel) !important;
}
.text-dark,
.text-body {
  color: var(--sl-tinta) !important;
}

/* ---------------------------------------------------------------------
 * Botoes: verde cheio com texto escuro, como o "Continuar" do site.
 * --------------------------------------------------------------------- */
.btn {
  border-radius: 10px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary,
.btn-success {
  background: var(--sl-verde);
  border-color: var(--sl-verde);
  color: var(--sl-verde-escuro);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  background: #74abe6;
  border-color: #74abe6;
  color: var(--sl-verde-escuro);
}
.btn-outline-secondary,
.btn-secondary,
.btn-light,
.btn-white {
  background: transparent;
  color: var(--sl-tinta);
  border-color: var(--sl-fio);
}
.btn-outline-secondary:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-white:hover {
  background: var(--sl-realce);
  border-color: var(--sl-fio-forte);
  color: #fff;
}
.btn-outline-primary,
.btn-outline-success {
  color: var(--sl-verde-claro);
  border-color: rgba(91, 155, 224, 0.55);
  background: transparent;
}
.btn-outline-primary:hover,
.btn-outline-success:hover {
  background: rgba(91, 155, 224, 0.14);
  color: var(--sl-verde-claro);
  border-color: var(--sl-verde);
}
.btn-outline-danger {
  color: var(--sl-perigo);
  border-color: rgba(240, 106, 110, 0.55);
  background: transparent;
}
.btn-outline-danger:hover,
.btn-danger {
  background: rgba(240, 106, 110, 0.16);
  color: #ffb0b2;
  border-color: var(--sl-perigo);
}

/* ---------------------------------------------------------------------
 * Campos: fundo do campo do site e anel verde no foco.
 * --------------------------------------------------------------------- */
.form-control,
.form-select,
.input-group-text,
textarea,
select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"] {
  background-color: var(--sl-campo);
  color: var(--sl-tinta);
  border: 1px solid var(--sl-fio);
  border-radius: 10px;
}
.form-control::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--sl-tinta-3);
}
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
  background-color: var(--sl-campo);
  color: var(--sl-tinta);
  border-color: var(--sl-verde);
  box-shadow: 0 0 0 3px rgba(91, 155, 224, 0.18);
}
.form-label {
  color: var(--sl-tinta);
  font-weight: 500;
}
.form-check-input {
  background-color: var(--sl-campo);
  border-color: var(--sl-fio-forte);
}
.form-check-input:checked {
  background-color: var(--sl-verde);
  border-color: var(--sl-verde);
}
.form-select {
  --tblr-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a7b4c6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ---------------------------------------------------------------------
 * Tabelas e selos.
 * --------------------------------------------------------------------- */
.table {
  --tblr-table-bg: transparent;
  --tblr-table-color: var(--sl-tinta);
  --tblr-table-border-color: var(--sl-fio);
  --tblr-table-hover-bg: var(--sl-realce);
  --tblr-table-striped-bg: rgba(255, 255, 255, 0.02);
  color: var(--sl-tinta);
}
.table thead th {
  background: transparent;
  color: var(--sl-tinta-3);
  border-bottom-color: var(--sl-fio);
  letter-spacing: 0.06em;
}
.table td,
.table th {
  border-color: var(--sl-fio);
}
.table tbody tr:hover,
.table-vcenter tbody tr:hover {
  background: var(--sl-realce);
}
.badge {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.3em 0.85em;
}
.bg-primary-lt,
.bg-blue-lt,
.bg-azure-lt {
  background: rgba(91, 155, 224, 0.14) !important;
  color: var(--sl-verde-claro) !important;
}
/* verde fica so para "deu certo" */
.bg-success-lt,
.bg-green-lt {
  background: rgba(79, 191, 139, 0.14) !important;
  color: #7fd8ad !important;
}
.bg-warning-lt,
.bg-yellow-lt,
.bg-orange-lt {
  background: rgba(230, 180, 80, 0.14) !important;
  color: var(--sl-atencao) !important;
}
.bg-danger-lt,
.bg-red-lt {
  background: rgba(240, 106, 110, 0.14) !important;
  color: #ff9a9d !important;
}
.bg-secondary-lt,
.bg-info-lt {
  background: rgba(167, 180, 198, 0.12) !important;
  color: var(--sl-tinta-2) !important;
}

/* ---------------------------------------------------------------------
 * Kanban e chat: colunas como paineis, bolha enviada em verde escuro.
 * --------------------------------------------------------------------- */
.pilar-kanban-coluna {
  border-radius: 14px;
  --cor-cartao-fundo: var(--sl-painel);
}
.pilar-kanban-cartao {
  background: var(--sl-painel);
  border-color: var(--sl-fio);
  border-radius: 10px;
  color: var(--sl-tinta);
}
.pilar-mensagem-enviada .pilar-bolha,
.pilar-caixa .pilar-mensagem-enviada .pilar-bolha {
  background: #16304f;
  color: var(--sl-tinta);
}
.pilar-mensagem-recebida .pilar-bolha,
.pilar-caixa .pilar-mensagem-recebida .pilar-bolha {
  background: #1a2433;
  color: var(--sl-tinta);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sl-chao); }
::-webkit-scrollbar-thumb { background: var(--sl-fio); border-radius: 10px; }

/* ---------------------------------------------------------------------
 * Tela de entrada no estilo da Area do Cliente: lado da marca escuro com
 * brilho verde e fio diagonal; lado do formulario no chao.
 * --------------------------------------------------------------------- */
.pilar-entrada {
  background: var(--sl-chao);
}
.pilar-entrada .pilar-painel-marca {
  position: relative;
  background:
    radial-gradient(60% 50% at 40% 55%, rgba(91, 155, 224, 0.16), transparent 70%),
    linear-gradient(180deg, #08101a, #0b111a);
  border-right: 1px solid rgba(91, 155, 224, 0.35);
  color: var(--sl-tinta);
}
.pilar-entrada .pilar-painel-forma {
  background: var(--sl-chao);
}
.pilar-marca-grande {
  color: var(--sl-tinta);
}
.pilar-marca-sub {
  color: var(--sl-tinta-2);
}
.tarja-protocolo {
  color: var(--sl-tinta-3);
  border-color: var(--sl-fio);
}