/* Links do sistema (painel, area do cliente e loja): sem sublinhado e com realce suave ao passar o mouse.
   Carregado por ultimo nos cabecalhos para valer por cima do Bootstrap, que sublinha todo link. */
a, a:hover, a:focus, a:active, a:visited { text-decoration: none !important; }
a { transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease; }

/* links de texto (tabelas, listas, paragrafos, paineis): fundo azul claro arredondado + cor mais forte no hover.
   :where() deixa a regra com peso minimo, entao botoes, menus, abas, paginacao e temas que ja tem hover proprio continuam como estao. */
:where(td, dd, p, li, small, .pb, .tabela, .ph, h6, h5, .card-body, .list-group-item, .vp-l) a:where(:not(.btn, [class*="btn-"], .nav-link, .dropdown-item, .page-link, .badge, .tile, .tab, .navbar-brand, .list-group-item-action, .wh-ac, .wh-ico)):hover,
:where(td, dd, p, li, small, .pb, .tabela, .ph, h6, h5, .card-body, .list-group-item, .vp-l) a:where(:not(.btn, [class*="btn-"], .nav-link, .dropdown-item, .page-link, .badge, .tile, .tab, .navbar-brand, .list-group-item-action, .wh-ac, .wh-ico)):focus-visible {
    color: #1d4ed8;
    background-color: rgba(37, 99, 235, .09);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
    border-radius: 4px;
}
html[data-modo="escuro"] :where(td, dd, p, li, small, .pb, .tabela, .ph, h6, h5, .card-body, .list-group-item, .vp-l) a:where(:not(.btn, [class*="btn-"], .nav-link, .dropdown-item, .page-link, .badge, .tile, .tab, .navbar-brand, .list-group-item-action, .wh-ac, .wh-ico)):hover,
html[data-modo="escuro"] :where(td, dd, p, li, small, .pb, .tabela, .ph, h6, h5, .card-body, .list-group-item, .vp-l) a:where(:not(.btn, [class*="btn-"], .nav-link, .dropdown-item, .page-link, .badge, .tile, .tab, .navbar-brand, .list-group-item-action, .wh-ac, .wh-ico)):focus-visible {
    color: #93c5fd;
    background-color: rgba(96, 165, 250, .16);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .16);
}

/* quadros de numero da area do cliente (Servicos, Dominios, Tickets, Faturas): sobem um pouco e ganham sombra */
a.tile:hover, a.tile:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .35); }
html[data-modo="escuro"] a.tile:hover, html[data-modo="escuro"] a.tile:focus-visible { box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .7); border-color: rgba(96, 165, 250, .45); }

/* quem navega por teclado continua vendo onde esta o foco */
a:focus-visible { outline: 2px solid rgba(37, 99, 235, .55); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { a, a.tile:hover { transition: none; transform: none; } }
@media print { a { color: inherit !important; } }

/* quadros de numero da area do cliente: cada um com a sua cor (azul, verde, laranja, vermelho), no tema claro, escuro e nos temas visuais */
a.tile.t1 { --tile-cor: #3b82f6; } a.tile.t2 { --tile-cor: #22c55e; } a.tile.t3 { --tile-cor: #f59e0b; } a.tile.t4 { --tile-cor: #ef4444; }
html[data-modo="escuro"] a.tile.t1 { --tile-cor: #4d9bff; } html[data-modo="escuro"] a.tile.t2 { --tile-cor: #34d399; } html[data-modo="escuro"] a.tile.t3 { --tile-cor: #fbbf24; } html[data-modo="escuro"] a.tile.t4 { --tile-cor: #f87171; }
html a.tile.t1, html a.tile.t2, html a.tile.t3, html a.tile.t4 { border-top-color: var(--tile-cor) !important; }
html body[data-visual] a.tile.t1:before, html body[data-visual] a.tile.t2:before, html body[data-visual] a.tile.t3:before, html body[data-visual] a.tile.t4:before { background: var(--tile-cor) !important; }
a.tile.t1 .n, a.tile.t2 .n, a.tile.t3 .n, a.tile.t4 .n { color: var(--tile-cor); font-weight: 400; }
a.tile.t1:hover, a.tile.t2:hover, a.tile.t3:hover, a.tile.t4:hover { border-color: var(--tile-cor) !important; }