/*
* Padrão visual "premium" (cabeçalho com gradiente + card com hover) já usado
* ad-hoc em alguns templates novos (comunicados, chamados), agora como
* classes reutilizáveis pra aplicar em telas mais antigas sem duplicar CSS
* inline em cada arquivo.
*
* Uso:
*
* ...conteúdo/formulário...
*/
.premium-header {
background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
border-radius: 12px;
padding: 24px 28px;
margin-bottom: 24px;
color: #fff;
}
.premium-header-title {
color: #fff;
margin: 0;
font-weight: 700;
}
.premium-header-subtitle {
color: rgba(255, 255, 255, 0.85);
margin: 4px 0 0;
font-size: 0.9rem;
}
.premium-card {
border: none;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
transition: transform 0.15s ease, box-shadow 0.15s ease;
background: #fff;
padding: 1.5rem;
}
.premium-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
:root[data-theme="dark"] .premium-card {
background: var(--dt-card);
color: var(--dt-ink-soft);
}
/*
* Mensagens de erro/sucesso/aviso didáticas — retângulo com fundo claro
* e texto na cor correspondente, usado no include
* portal/templates/portal/includes/mensagens.html (inserido uma vez no
* base.html, aparece em toda página automaticamente). Overrides de tema
* escuro ficam em dark-theme.css, mesmo padrão do .alert-danger etc.
*/
.alerta-sistema {
border-radius: 10px;
padding: 0.9rem 1.2rem;
border: 1px solid transparent;
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.alerta-sistema-error {
background: #FDECEA;
border-color: #F5C6CB;
color: #DC3545;
}
.alerta-sistema-success {
background: #E6F6EC;
border-color: #BEE6CB;
color: #1E7E34;
}
.alerta-sistema-warning {
background: #FFF6E0;
border-color: #FCE2A8;
color: #92600A;
}
.alerta-sistema-info,
.alerta-sistema-debug {
background: #E8F1FD;
border-color: #BBD6F7;
color: #1D4E89;
}
.alerta-sistema .btn-close {
margin-left: auto;
}
/*
* Toast de boas-vindas pós-login (portal/includes/welcome_toast.html) —
* separado do .alerta-sistema de propósito: é um componente próprio,
* pontual (some sozinho), não um alerta do sistema de mensagens genérico.
*
* .toast-stack é o container fixo compartilhado (definido em base.html)
* que empilha o welcome-toast + os alerta-toast (mensagens.html) um
* embaixo do outro, sem sobrepor.
*/
.toast-stack {
position: fixed;
top: 84px;
right: 24px;
z-index: 1080;
width: 340px;
max-width: calc(100vw - 32px);
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: none;
}
.toast-stack > * {
pointer-events: auto;
}
.welcome-toast {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 40px 16px 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
box-shadow: 0 12px 32px rgba(20, 30, 60, 0.18), 0 2px 8px rgba(20, 30, 60, 0.08);
border: 1px solid rgba(255, 255, 255, 0.6);
overflow: hidden;
animation: welcome-toast-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.welcome-toast-out {
animation: welcome-toast-out 0.3s ease forwards;
}
@keyframes welcome-toast-in {
from { opacity: 0; transform: translateX(24px) scale(0.96); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes welcome-toast-out {
to { opacity: 0; transform: translateX(24px) scale(0.96); }
}
.welcome-toast-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
flex: 0 0 auto;
position: relative;
}
.welcome-toast-avatar::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: linear-gradient(135deg, #4e73df, #224abe);
}
.welcome-toast-avatar img,
.welcome-toast-avatar span {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
object-fit: cover;
font-weight: 700;
font-size: 1rem;
color: #224abe;
border: 2px solid #fff;
}
.welcome-toast-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.welcome-toast-body strong {
font-size: 0.92rem;
color: #1a1f36;
line-height: 1.3;
}
.welcome-toast-body span {
font-size: 0.8rem;
color: #6b7280;
}
.welcome-toast-close {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
border: none;
background: transparent;
color: #9ca3af;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.72rem;
transition: background 0.15s, color 0.15s;
}
.welcome-toast-close:hover {
background: rgba(0, 0, 0, 0.06);
color: #4b5563;
}
.welcome-toast-close:focus-visible {
outline: 2px solid #4e73df;
outline-offset: 2px;
}
.welcome-toast-bar {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, #4e73df, #224abe);
transform-origin: left;
animation: welcome-toast-drain 6s linear forwards;
}
@keyframes welcome-toast-drain {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
:root[data-theme="dark"] .welcome-toast {
background: rgba(19, 21, 25, 0.88);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .welcome-toast-body strong {
color: var(--dt-ink);
}
:root[data-theme="dark"] .welcome-toast-body span {
color: var(--dt-ink-soft);
}
:root[data-theme="dark"] .welcome-toast-avatar::before {
background: linear-gradient(135deg, var(--dt-accent), var(--dt-accent-dark));
}
:root[data-theme="dark"] .welcome-toast-avatar img,
:root[data-theme="dark"] .welcome-toast-avatar span {
background: var(--dt-card);
border-color: var(--dt-card);
color: var(--dt-accent);
}
:root[data-theme="dark"] .welcome-toast-close {
color: var(--dt-muted);
}
:root[data-theme="dark"] .welcome-toast-close:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--dt-ink);
}
:root[data-theme="dark"] .welcome-toast-bar {
background: linear-gradient(90deg, var(--dt-accent), var(--dt-accent-dark));
}
@media (max-width: 576px) {
.toast-stack {
left: 16px;
right: 16px;
width: auto;
top: 76px;
}
}
@media (prefers-reduced-motion: reduce) {
.welcome-toast,
.welcome-toast-out,
.alerta-toast,
.alerta-toast-out {
animation: none;
}
.welcome-toast-bar,
.alerta-toast-bar {
animation: none;
width: 0;
}
}
/*
* Alerta-toast (portal/includes/mensagens.html) — mensagens do sistema
* (sucesso/erro/aviso/info) no mesmo estilo visual do welcome-toast, mas
* com cor por tipo. Sucesso/info somem sozinhos (.alerta-toast-auto);
* erro/aviso ficam fixos até fechar manualmente — quem erra ou precisa
* agir merece tempo pra ler, quem só recebeu uma confirmação não.
*/
.alerta-toast {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 40px 12px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
box-shadow: 0 10px 28px rgba(20, 30, 60, 0.16), 0 2px 6px rgba(20, 30, 60, 0.07);
border: 1px solid rgba(255, 255, 255, 0.6);
border-left: 4px solid var(--alerta-accent, #6b7280);
overflow: hidden;
animation: welcome-toast-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.alerta-toast-out {
animation: welcome-toast-out 0.3s ease forwards;
}
.alerta-toast-error { --alerta-accent: #dc3545; }
.alerta-toast-warning { --alerta-accent: #d97706; }
.alerta-toast-success { --alerta-accent: #1e7e34; }
.alerta-toast-info { --alerta-accent: #1d4e89; }
.alerta-toast-icon {
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--alerta-accent, #6b7280) 14%, transparent);
color: var(--alerta-accent, #6b7280);
font-size: 0.85rem;
}
.alerta-toast-body {
min-width: 0;
font-size: 0.86rem;
color: #1a1f36;
line-height: 1.4;
}
.alerta-toast-close {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
border: none;
background: transparent;
color: #9ca3af;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.72rem;
transition: background 0.15s, color 0.15s;
}
.alerta-toast-close:hover {
background: rgba(0, 0, 0, 0.06);
color: #4b5563;
}
.alerta-toast-close:focus-visible {
outline: 2px solid var(--alerta-accent, #4e73df);
outline-offset: 2px;
}
.alerta-toast {
position: relative;
}
.alerta-toast-bar {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: var(--alerta-accent, #6b7280);
transform-origin: left;
animation: welcome-toast-drain 6s linear forwards;
}
:root[data-theme="dark"] .alerta-toast {
background: rgba(19, 21, 25, 0.92);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .alerta-toast-body {
color: var(--dt-ink);
}
:root[data-theme="dark"] .alerta-toast-close {
color: var(--dt-muted);
}
:root[data-theme="dark"] .alerta-toast-close:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--dt-ink);
}