/* Cores da Ascon sobre o design system "Bitrix24 Air" (tailwind.css).
   Carregado logo depois do tailwind.css: só redefine as variáveis da marca,
   que lá vêm no vinho do produto (#b21e4b).
   Azul #14094D = cor principal (botões, links, item ativo, gráficos).
   Laranja #F58220 = destaque pontual (marca no menu, indicador do item ativo). */
:root, .light {
  --ascon-azul: #14094D;
  --ascon-laranja: #F58220;

  --ui-color-accent-main-primary: #14094D;
  --ui-color-accent-main-primary-alt: #2b1f73;       /* hover */
  --ui-color-accent-main-primary-alt-2: #6b62a8;
  --ui-color-accent-main-link: #14094D;
  --ui-color-accent-main-link-underline: #14094D4d;
  --ui-color-accent-soft-blue-1: #dcd9ec;
  --ui-color-accent-soft-blue-2: #edecf6;
  --ui-color-accent-soft-blue-3: #f6f5fb;
  --ui-color-accent-soft-border-blue: #b9b4d8;
  --ui-color-accent-soft-element-blue: #14094D;
  --ui-color-design-filled-content-icon-secondary: #dcd9ec;
  --ui-color-design-tinted-content-icon-secondary: #14094D80;
  --ui-color-design-tinted-content-divider: #dcd9ec;
  --ui-color-design-outline-a1-content-divider: #dcd9ec;
  --ui-color-design-outline-a2-content-divider: #dcd9ec;
  --ui-color-design-plain-a-content-divider: #dcd9ec;

  --bs-primary: #14094D;
  --bs-primary-rgb: 20, 9, 77;
}

.app-brand-mark { background: var(--ascon-laranja); }
.app-nav-item.is-active { box-shadow: inset 3px 0 0 var(--ascon-laranja); }

/* Página inicial: cartões compactos, com o ícone ao lado do texto.
   Grade própria (auto-fill) porque o tailwind.css compilado só tem as classes
   de colunas que os templates do repositório usam. */
.home-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.home-tile { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.home-tile .ui-tile-icon { width: 34px; height: 34px; }
.home-tile .ui-tile-icon .ui-icon { width: 18px; height: 18px; }
.home-tile-title { display: block; font-size: 15px; font-weight: 600; color: var(--ui-color-base-1); }
.home-tile-desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ui-color-base-3); }

/* Logo no lugar da letra: o "A" da Ascon em SVG, que já traz as próprias cores.
   Sem fundo e sem recorte — o desenho inteiro precisa caber, por isso `contain`
   (o `cover` do JPG anterior cortava as pontas do A). */
.app-brand-mark-img { background: none; border-radius: 0; }
.app-brand-mark-img img { width: 100%; height: 100%; object-fit: contain; display: block; }