/* =====================================================
IMPORTS - Inter + Rajdhani
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&family=Rajdhani:wght@600;700&display=swap');
/* =====================================================
VARIÁVEIS - tema militar azul naval
===================================================== */
:root {
/* Paleta azul naval */
--green: #1676ca;
--green-light: #4aaee8;
--green-dark: #00539c;
--green-bg: rgba(22, 118, 202, .10);
--green-glow: rgba(22, 118, 202, .18);
--accent: #e07c10;
--accent-dark: #9c4900;
--accent-bg: rgba(224, 124, 16, .12);
--red: #f87171;
--red-bg: rgba(248, 113, 113, .12);
--orange: #fb923c;
--orange-bg: rgba(251, 146, 60, .12);
--yellow: #fbbf24;
--blue: #60a5fa;
--blue-bg: rgba(96, 165, 250, .12);
/* Superfícies */
--gray-bg: #040810;
--card-bg: #071525;
--card-bg2: #0b1c32;
--overlay-bg: #0c1a2e;
--overlay-bg2: #0d1e36;
--sidebar-bg: #050c1a;
--text: #cde0f5;
--text-muted: #4a6f96;
--border: rgba(22, 118, 202, .12);
--border-strong: rgba(22, 118, 202, .22);
/* Sombras */
--shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .6);
--shadow-md: 0 8px 28px rgba(0, 0, 0, .7);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, .8);
/* Layout */
--sidebar-w: 0px;
--topbar-h: 62px;
--radius: 12px;
--radius-sm: 8px;
--transition: .15s ease;
}
/* Modo claro - versão clara do tema azul */
[data-theme="light"] {
--red: #dc2626;
--orange: #c2410c;
--yellow: #9b6b00;
--blue: #2563eb;
--gray-bg: #edf3fb;
--card-bg: #ffffff;
--card-bg2: #f0f5fd;
--overlay-bg: #ffffff;
--overlay-bg2: #f8fbff;
--sidebar-bg: #0c1a2e;
--text: #0d1c36;
--text-muted: #315b82;
--border: rgba(0, 83, 156, .18);
--border-strong: rgba(0, 83, 156, .32);
--shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .10);
--shadow-md: 0 8px 28px rgba(0, 0, 0, .12);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, .15);
--green-bg: rgba(0, 83, 156, .10);
--red-bg: rgba(239, 68, 68, .08);
--orange-bg: rgba(234, 88, 12, .08);
--blue-bg: rgba(37, 99, 235, .08);
}
/* =====================================================
RESET
===================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
font-size: 14px;
color: var(--text);
background: var(--gray-bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
}
button {
font-family: inherit;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(22, 118, 202, .2);
border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(22, 118, 202, .35);
}
/* =====================================================
LOGIN
===================================================== */
.login-body {
--green: #2f7fe8;
--green-light: #75baff;
--green-dark: #155ab6;
--green-bg: rgba(47, 127, 232, .12);
background: #020510;
min-height: 100vh;
}
.login-wrapper {
display: flex;
min-height: 100vh;
}
.login-left {
width: 55%;
background:
radial-gradient(ellipse at 20% 80%, rgba(22, 118, 202, .25) 0%, transparent 55%),
radial-gradient(ellipse at 80% 20%, rgba(0, 83, 156, .15) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(4, 14, 28, .9) 0%, transparent 70%),
linear-gradient(160deg, #020612 0%, #050e1a 40%, #071820 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.login-left::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(22, 118, 202, .04) 1px, transparent 1px),
linear-gradient(90deg, rgba(22, 118, 202, .04) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.login-left::after {
content: '';
position: absolute;
bottom: -80px;
left: -80px;
width: 340px;
height: 340px;
border-radius: 50%;
background: radial-gradient(circle, rgba(22, 118, 202, .12) 0%, transparent 70%);
pointer-events: none;
}
.login-hero {
position: relative;
z-index: 1;
text-align: center;
padding: 40px;
max-width: 480px;
}
/* Hero badge (emblema) */
.login-hero-badge {
margin-bottom: 24px;
}
.login-hero-badge img {
width: 90px;
height: 90px;
object-fit: contain;
filter: drop-shadow(0 0 28px rgba(22, 118, 202, .45));
}
/* Pequeno texto acima do título */
.login-hero-kicker {
font-size: .7rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 12px;
}
/* Título principal */
.login-hero-headline {
font-family: 'Rajdhani', sans-serif;
font-size: 2.8rem;
font-weight: 700;
color: #fff;
letter-spacing: -.02em;
line-height: 1.1;
margin-bottom: 16px;
}
/* Linha divisória sob o título */
.login-hero-divider {
width: 48px;
height: 2px;
background: var(--green);
margin: 0 auto 18px;
border-radius: 1px;
}
/* Parágrafo de descrição */
.login-hero-sub {
font-size: .88rem;
color: rgba(255, 255, 255, .52);
line-height: 1.65;
max-width: 360px;
margin: 0 auto;
}
/* Tags de funcionalidades */
.login-right {
width: 45%;
background: #060e1a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
border-left: 1px solid var(--border);
}
.login-form-box {
width: 100%;
max-width: 380px;
}
.login-form-box h1,
.login-form-box h2 {
font-size: 1.45rem;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}
/* Subtítulo abaixo do h1 */
.login-subtitle {
font-size: .83rem;
color: var(--text-muted);
margin-bottom: 28px;
line-height: 1.5;
}
/* Linha "lembrar" + "esqueci" */
.login-options {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 14px 0;
font-size: .82rem;
}
/* Toggle label (checkbox + switch) */
.toggle-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--text-muted);
user-select: none;
font-size: .82rem;
}
.toggle-label input[type="checkbox"] {
display: none;
}
.toggle-label input[type="checkbox"]:checked+.toggle-switch {
background: var(--green);
border-color: var(--green-dark);
}
.toggle-label input[type="checkbox"]:checked+.toggle-switch::after {
left: 21px;
background: #fff;
}
/* Rodapé da página de login */
.login-footer {
text-align: center;
font-size: .75rem;
color: var(--text-muted);
margin-top: 28px;
padding-top: 16px;
border-top: 1px solid var(--border);
width: 100%;
max-width: 380px;
}
/* PIN inline (dentro do form de login) */
.pin-panel {
background: rgba(47, 127, 232, .04);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
margin-bottom: 16px;
}
.pin-field-panel {
padding: 14px;
}
.pin-field-panel .pin-label-row {
margin-bottom: 10px;
}
.login-email-code-panel {
background: rgba(47, 127, 232, .05);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px;
margin-bottom: 16px;
}
.login-email-code-panel small {
display: block;
color: var(--text-muted);
font-size: .76rem;
margin-top: 8px;
}
.pin-label-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.pin-label-row label {
font-size: .8rem;
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: 0;
margin-bottom: 0;
}
.pin-label-hint {
font-size: .72rem;
color: var(--text-muted);
font-style: italic;
}
.pin-btn-back {
color: var(--text-muted);
font-size: .78rem;
}
.pin-btn-back:hover {
color: var(--red);
border-color: rgba(248, 113, 113, .3);
background: var(--red-bg);
}
.pin-spacer {
display: block;
visibility: hidden;
height: 1px;
}
/* Texto em cor de destaque (dourado/âmbar) */
.accent {
color: var(--accent);
}
/* PIN Modal de login */
.pin-overlay.open {
display: flex;
}
.pin-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
.pin-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--border-strong);
transition: background .15s;
}
.pin-dot.filled {
background: var(--green);
box-shadow: 0 0 8px rgba(22, 118, 202, .4);
}
.pin-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.pin-btn {
height: 52px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: #0b1c32;
color: var(--text);
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
}
.pin-btn:hover {
background: var(--green-bg);
border-color: var(--green);
color: var(--green-light);
}
.pin-btn.del {
font-size: .85rem;
color: var(--text-muted);
}
/* =====================================================
LAYOUT PRINCIPAL - TOPNAV
===================================================== */
.app-body {
display: block;
min-height: 100vh;
background: var(--gray-bg);
}
/* ── Sidebar → Topnav horizontal ── */
#app-sidebar-shell {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--topbar-h);
}
.sidebar {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: var(--topbar-h);
background: var(--sidebar-bg);
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: row;
align-items: center;
padding: 0 0 0 16px;
gap: 0;
overflow: visible;
z-index: 100;
flex-shrink: 0;
/* right padding reservado para acções da topbar */
padding-right: clamp(300px, 32vw, 460px);
}
[data-theme="light"] .sidebar {
background: var(--sidebar-bg);
border-bottom-color: rgba(22, 118, 202, .2);
}
/* ── Logo ── */
.sidebar-logo {
display: flex;
align-items: center;
gap: 10px;
padding: 0 20px 0 4px;
min-height: unset;
border-bottom: none;
border-right: 1px solid var(--border);
margin-right: 8px;
flex-shrink: 0;
height: 100%;
}
.sidebar-logo img {
width: 32px;
height: 32px;
object-fit: contain;
flex-shrink: 0;
filter: drop-shadow(0 0 6px rgba(22, 118, 202, .3));
}
.sidebar-logo-copy {
display: flex;
flex-direction: column;
}
.sidebar-logo-title {
font-size: .82rem;
font-weight: 700;
color: #fff;
line-height: 1.2;
letter-spacing: -.01em;
white-space: nowrap;
}
.sidebar-logo-sub {
font-size: .68rem;
font-weight: 500;
color: rgba(255, 255, 255, .45);
line-height: 1.2;
white-space: nowrap;
}
/* ── Nav principal horizontal ── */
.sidebar-nav {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
padding: 0;
overflow: visible;
min-width: 0;
height: 100%;
}
/* Ocultar secções no topnav horizontal */
.sidebar-conquistas {
display: none;
}
.sidebar-copyright {
display: none;
}
/* ── Items de nav ── */
.nav-item {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 11px;
margin: 0 1px;
color: rgba(255, 255, 255, .55);
font-size: .82rem;
font-weight: 500;
border-radius: var(--radius-sm);
transition: background var(--transition), color var(--transition);
white-space: nowrap;
height: 36px;
flex-shrink: 0;
}
.nav-item:hover {
background: rgba(22, 118, 202, .08);
color: rgba(255, 255, 255, .9);
}
.nav-item.active {
background: rgba(22, 118, 202, .14);
color: var(--green-light);
font-weight: 600;
}
/* Ícones dos nav-items - quadrado arredondado */
.nav-item>svg:first-child,
.nav-item-summary>svg:first-child {
flex: 0 0 18px;
width: 18px !important;
height: 18px !important;
padding: 0;
background: none;
color: inherit;
border-radius: 0;
box-sizing: border-box;
opacity: .8;
}
.nav-item:hover>svg:first-child,
.nav-item-summary:hover>svg:first-child {
opacity: 1;
}
.nav-item.active>svg:first-child {
opacity: 1;
color: var(--green-light);
}
/* ── Grupos (dropdowns) ── */
.nav-group {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
margin: 0 1px;
}
.nav-item-summary {
list-style: none;
cursor: pointer;
justify-content: flex-start;
gap: 7px;
height: 36px;
padding: 7px 11px;
color: rgba(255, 255, 255, .55);
font-size: .82rem;
font-weight: 500;
border-radius: var(--radius-sm);
transition: background var(--transition), color var(--transition);
display: flex;
align-items: center;
white-space: nowrap;
}
.nav-item-summary::-webkit-details-marker {
display: none;
}
.nav-item-summary>span {
flex: unset;
}
.nav-item-summary:hover,
.nav-group[open]>.nav-item-summary {
background: rgba(22, 118, 202, .08);
color: rgba(255, 255, 255, .9);
}
.nav-group-arrow {
color: inherit;
opacity: .6;
transition: transform .15s ease;
flex-shrink: 0;
margin-left: 2px;
}
.nav-group[open] .nav-group-arrow {
transform: rotate(90deg);
opacity: 1;
}
/* Submenu dropdown */
.nav-submenu {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 210px;
background: var(--overlay-bg);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
padding: 6px;
box-shadow: var(--shadow-md);
z-index: 200;
gap: 2px;
}
.nav-group[open]>.nav-submenu {
display: flex;
flex-direction: column;
animation: dropdownIn .15s ease;
}
.nav-subitem {
display: block;
padding: 8px 12px;
border-radius: var(--radius-sm);
color: rgba(255, 255, 255, .55);
font-size: .82rem;
font-weight: 500;
transition: background var(--transition), color var(--transition);
white-space: nowrap;
margin: 0;
}
.nav-subitem:hover {
background: rgba(22, 118, 202, .10);
color: rgba(255, 255, 255, .9);
}
.nav-subitem.active {
background: rgba(22, 118, 202, .16);
color: var(--green-light);
font-weight: 600;
}
.nav-subitem.child {
padding-left: 24px;
font-size: .78rem;
color: rgba(255, 255, 255, .4);
}
/* Flat submenu (Documentação sem details) */
.nav-submenu-flat {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 220px;
background: var(--overlay-bg);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
padding: 6px;
box-shadow: var(--shadow-md);
z-index: 200;
flex-direction: column;
gap: 2px;
}
.nav-submenu-flat.open {
display: flex;
animation: dropdownIn .15s ease;
}
.nav-subitem-flat {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 12px;
border-radius: var(--radius-sm);
color: rgba(255, 255, 255, .55);
font-size: .82rem;
font-weight: 500;
transition: background var(--transition), color var(--transition);
white-space: nowrap;
}
.nav-subitem-flat:hover {
background: rgba(22, 118, 202, .10);
color: rgba(255, 255, 255, .9);
}
.nav-subitem-flat.active {
background: rgba(22, 118, 202, .16);
color: var(--green-light);
font-weight: 600;
}
/* Icon pill */
.nav-subitem-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex: 0 0 22px;
border-radius: 5px;
color: rgba(255, 255, 255, .5);
background: rgba(255, 255, 255, .06);
}
.nav-icon-amber {
background: rgba(217, 119, 6, .15);
color: #fbbf24;
}
.nav-icon-orange {
background: rgba(234, 88, 12, .15);
color: #fb923c;
}
.nav-subitem-label {
flex: 1;
min-width: 0;
}
/* Wrapper para nav-group de Documentação (sem details nativo) */
.nav-group-docs {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
margin: 0 1px;
}
.nav-group-docs-btn {
display: flex;
align-items: center;
gap: 7px;
height: 36px;
padding: 7px 11px;
color: rgba(255, 255, 255, .55);
font-size: .82rem;
font-weight: 500;
border-radius: var(--radius-sm);
background: transparent;
border: none;
cursor: pointer;
transition: background var(--transition), color var(--transition);
white-space: nowrap;
font-family: inherit;
}
.nav-group-docs-btn:hover,
.nav-group-docs.open>.nav-group-docs-btn {
background: rgba(22, 118, 202, .08);
color: rgba(255, 255, 255, .9);
}
.nav-group-docs.open>.nav-submenu-flat {
display: flex;
}
/* ── Submenu largo (Listagens / Requerimentos) ── */
.nav-submenu-wide {
min-width: 260px;
max-height: 480px;
overflow-y: auto;
}
/* Cabeçalho de secção dentro do submenu */
.nav-submenu-section {
padding: 8px 12px 4px;
font-size: .65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--text-muted);
pointer-events: none;
}
/* Divisor horizontal dentro do submenu */
/* ── Botão de voltar (páginas específicas) ── */
.btn-voltar {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
background: rgba(22, 118, 202, .12);
color: var(--green-light);
border-radius: 999px;
font-weight: 600;
font-size: .82rem;
transition: background var(--transition);
white-space: nowrap;
}
.btn-voltar:hover {
background: rgba(22, 118, 202, .2);
}
/* =====================================================
TOPBAR - Acções (fixo no topo direito)
===================================================== */
#app-topbar-shell {
position: fixed;
top: 0;
right: 0;
z-index: 110;
height: var(--topbar-h);
}
.topbar {
height: var(--topbar-h);
min-height: var(--topbar-h);
background: transparent;
border: none;
box-shadow: none;
display: flex;
align-items: center;
padding: 0 16px;
gap: 6px;
}
/* Ocultar a barra de pesquisa fake (usa ícone no topbar-actions) */
.topbar-actions {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.topbar-action-shell {
display: flex;
align-items: center;
gap: 1px;
background: rgba(22, 118, 202, .08);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 2px;
}
.icon-btn {
position: relative;
width: 34px;
height: 34px;
border: none;
background: transparent;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(255, 255, 255, .5);
transition: background var(--transition), color var(--transition);
}
.icon-btn:hover {
background: rgba(22, 118, 202, .12);
color: rgba(255, 255, 255, .9);
}
.icon-btn svg,
.icon-btn i {
width: 18px;
height: 18px;
font-size: 18px;
pointer-events: none;
}
/* Tema botões */
.theme-btn {
border-radius: 6px;
}
.theme-btn.active {
background: rgba(22, 118, 202, .2);
color: var(--green-light);
}
/* Badge de notificações */
.badge {
position: absolute;
top: 2px;
right: 2px;
background: #e53e3e;
color: #fff;
border-radius: 99px;
font-size: .58rem;
font-weight: 700;
padding: 1px 5px;
min-width: 15px;
text-align: center;
line-height: 1.4;
box-shadow: 0 0 0 2px var(--sidebar-bg);
}
/* Notificações dropdown */
.notif-wrap {
position: relative;
}
.notif-dropdown {
position: fixed;
top: var(--topbar-h);
right: 16px;
width: 320px;
background: var(--overlay-bg);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
z-index: 200;
display: none;
overflow: hidden;
animation: dropdownIn .15s ease;
}
.notif-dropdown.open {
display: block;
}
.notif-header {
padding: 12px 16px;
font-weight: 700;
border-bottom: 1px solid var(--border);
font-size: .88rem;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text);
}
.notif-header-btn {
border: none;
background: transparent;
color: var(--green);
font-size: .76rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.notif-item {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
transition: background .15s;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.notif-item:hover {
background: rgba(22, 118, 202, .06);
}
.notif-item.unread {
background: rgba(22, 118, 202, .08);
border-left: 2px solid var(--green);
}
.notif-body {
flex: 1;
min-width: 0;
}
.notif-title {
font-size: .8rem;
font-weight: 700;
margin-bottom: 2px;
color: var(--text);
}
.notif-msg {
font-size: .82rem;
color: var(--text-muted);
}
.notif-time {
font-size: .72rem;
color: var(--text-muted);
margin-top: 2px;
}
.notif-delete {
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
width: 24px;
height: 24px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--transition), color var(--transition);
}
.notif-delete:hover {
background: rgba(248, 113, 113, .15);
color: var(--red);
}
.notif-empty {
padding: 20px 16px;
text-align: center;
color: var(--text-muted);
font-size: .85rem;
}
/* User dropdown */
.user-wrap {
position: relative;
}
.user-avatar-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid var(--border-strong);
overflow: hidden;
cursor: pointer;
background: var(--green-bg);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: border-color var(--transition), box-shadow var(--transition);
}
.user-avatar-btn:hover {
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(22, 118, 202, .2);
}
.user-avatar-btn img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-dropdown {
position: fixed;
top: var(--topbar-h);
right: 16px;
width: 220px;
background: var(--overlay-bg);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
z-index: 200;
display: none;
overflow: hidden;
animation: dropdownIn .15s ease;
}
.user-dropdown.open {
display: block;
}
.user-dropdown-header {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.user-dropdown-header strong {
display: block;
font-size: .92rem;
color: var(--text);
}
.user-dropdown-header span {
font-size: .76rem;
color: var(--text-muted);
}
.user-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
color: var(--text);
font-size: .84rem;
transition: background .15s;
}
.user-dropdown-item:hover {
background: rgba(22, 118, 202, .08);
}
.user-dropdown-item svg,
.user-dropdown-item i {
color: var(--text-muted);
flex-shrink: 0;
width: 16px;
height: 16px;
font-size: 14px;
}
.user-dropdown-sair {
color: var(--red);
}
.user-dropdown-sair:hover {
background: var(--red-bg);
}
.user-dropdown-sair svg,
.user-dropdown-sair i {
color: var(--red);
}
.user-dropdown-divider {
border-top: 1px solid var(--border);
}
/* =====================================================
MAIN LAYOUT + CONTENT AREA
===================================================== */
.main-layout {
margin-left: 0;
padding-top: var(--topbar-h);
min-height: 100vh;
display: flex;
flex-direction: column;
}
#page-content {
flex: 1;
}
.content-area {
--content-inline-pad: 24px;
--content-top-pad: 20px;
display: flex;
gap: 20px;
padding: var(--content-top-pad) var(--content-inline-pad) 24px;
flex: 1;
}
.content-full {
display: block;
}
.content-left {
flex: 1;
min-width: 0;
}
.content-right {
width: 300px;
flex-shrink: 0;
}
.content-area-hero,
.content-area-after-hero {
--content-top-pad: 0px;
}
.hero-full-bleed {
margin: 0 calc(var(--content-inline-pad) * -1) 24px;
border-left: none !important;
border-right: none !important;
border-radius: 0 0 0 0 !important;
box-shadow: none !important;
}
.page-back-link-wrap {
padding: 0 24px 4px;
}
/* =====================================================
ANIMAÇÕES
===================================================== */
@keyframes dropdownIn {
from {
opacity: 0;
transform: translateY(-6px) scale(.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fadeScale {
from {
opacity: 0;
transform: scale(.97);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes pulseGlow {
0%,
100% {
box-shadow: 0 0 0 0 rgba(22, 118, 202, .4);
}
50% {
box-shadow: 0 0 0 6px rgba(22, 118, 202, 0);
}
}
/* =====================================================
CARDS GENÉRICOS
===================================================== */
.card {
background: var(--card-bg);
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow);
overflow: hidden;
transition: box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
border-color: var(--border-strong);
}
.card-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 60px;
padding: 16px 20px 14px;
position: relative;
}
.card-header-row::after {
content: '';
position: absolute;
left: 20px;
right: 20px;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, var(--border), transparent);
}
.card-header-row>div:first-child {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.card-header-row h3,
.right-card-title {
margin: 0;
display: flex;
align-items: center;
gap: 9px;
font-size: .88rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--text);
}
/* Ícone dourado antes dos títulos */
.card-header-row h3::before,
.right-card-title::before {
content: '\2605';
width: 20px;
height: 20px;
border-radius: 6px;
flex-shrink: 0;
display: inline-grid;
place-items: center;
font-size: .72rem;
line-height: 1;
font-family: Arial, sans-serif;
text-align: center;
background: linear-gradient(180deg, #ffd75e 0%, #ffb000 55%, #c27a00 100%);
color: #000;
box-shadow: 0 4px 12px rgba(255, 176, 0, .2);
}
.card-header-row .tabs {
margin-left: auto;
}
.card-subtitle {
color: var(--text-muted);
font-size: .76rem;
margin-top: 0;
padding-left: 30px;
}
/* =====================================================
TABS
===================================================== */
.tabs {
display: flex;
gap: 3px;
}
.tab {
padding: 5px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: transparent;
font-size: .80rem;
font-weight: 500;
cursor: pointer;
color: var(--text-muted);
font-family: inherit;
transition: all var(--transition);
text-decoration: none;
display: inline-block;
}
.tab:hover {
background: var(--green-bg);
color: var(--green-light);
border-color: var(--border-strong);
}
.tab.active {
background: var(--green-bg);
color: var(--green-light);
border-color: var(--green);
font-weight: 700;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* =====================================================
TABELA
===================================================== */
.table {
width: 100%;
border-collapse: collapse;
}
.table th {
padding: 9px 16px;
text-align: left;
font-size: .68rem;
font-weight: 700;
color: var(--text-muted);
background: rgba(22, 118, 202, .04);
border-bottom: 1px solid var(--border);
text-transform: uppercase;
letter-spacing: .08em;
white-space: nowrap;
}
.table td {
padding: 11px 16px;
border-bottom: 1px solid var(--border);
font-size: .84rem;
vertical-align: middle;
color: var(--text);
}
.table tr:last-child td {
border-bottom: none;
}
.table tbody tr {
transition: background var(--transition);
}
.table tbody tr:hover td {
background: rgba(22, 118, 202, .04);
}
.militar-cell {
display: flex;
align-items: center;
gap: 12px;
}
.militar-name {
font-weight: 600;
font-size: .87rem;
color: var(--text);
}
.militar-meta {
font-size: .74rem;
color: var(--text-muted);
margin-top: 2px;
}
.obs-cell {
color: var(--text-muted);
font-size: .82rem;
}
.empty-row {
text-align: center;
color: var(--text-muted);
padding: 32px 16px !important;
}
.text-muted {
color: var(--text-muted);
}
/* =====================================================
AVATARES
===================================================== */
.avatar-sm-img {
width: 56px;
height: 56px;
object-fit: contain;
object-position: center top;
border-radius: 10px;
background: rgba(22, 118, 202, .06);
border: 1px solid var(--border);
padding: 3px;
flex-shrink: 0;
}
/* =====================================================
BADGES / STATUS
===================================================== */
.badge-status {
padding: 3px 10px;
border-radius: 99px;
font-size: .73rem;
font-weight: 700;
display: inline-block;
letter-spacing: .02em;
}
.badge-green {
background: rgba(22, 118, 202, .15);
color: #4aaee8;
border: 1px solid rgba(22, 118, 202, .25);
}
.badge-red {
background: rgba(248, 113, 113, .15);
color: #fca5a5;
border: 1px solid rgba(248, 113, 113, .25);
}
.badge-orange {
background: rgba(251, 146, 60, .15);
color: #fdba74;
border: 1px solid rgba(251, 146, 60, .25);
}
.badge-blue {
background: rgba(96, 165, 250, .15);
color: #93c5fd;
border: 1px solid rgba(96, 165, 250, .25);
}
.cod-badge {
display: inline-block;
padding: 3px 9px;
border-radius: var(--radius-sm);
background: rgba(22, 118, 202, .08);
border: 1px solid var(--border);
font-size: .76rem;
font-weight: 600;
color: var(--text-muted);
}
.badge-tipo {
display: inline-block;
padding: 4px 11px;
border-radius: 99px;
font-size: .76rem;
font-weight: 700;
letter-spacing: .02em;
}
.tipo-promoção {
background: rgba(22, 118, 202, .15);
color: #4aaee8;
}
.tipo-rebaixamento {
background: rgba(248, 113, 113, .15);
color: #fca5a5;
}
.tipo-advertência,
.tipo-advertência-escrita {
background: rgba(251, 146, 60, .15);
color: #fdba74;
}
.tipo-elogio {
background: rgba(96, 165, 250, .15);
color: #93c5fd;
}
.tipo-expulsão {
background: rgba(248, 113, 113, .20);
color: #f87171;
}
/* =====================================================
COLUNA DIREITA
===================================================== */
.right-card {
padding: 0;
}
.right-card>div:first-child:not(.right-tabs) {
position: relative;
padding: 16px 18px 14px !important;
}
.right-card>div:first-child:not(.right-tabs)::after {
content: '';
position: absolute;
left: 18px;
right: 18px;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, var(--border), transparent);
}
.right-card-title {
font-size: .88rem;
font-weight: 800;
}
.right-tabs {
display: flex;
border-bottom: 1px solid var(--border);
padding: 0 14px;
}
.right-tab {
padding: 10px 12px 8px;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
font-size: .8rem;
font-weight: 500;
cursor: pointer;
color: var(--text-muted);
font-family: inherit;
transition: color var(--transition), border-color var(--transition);
}
.right-tab:hover {
color: var(--text);
}
.right-tab.active {
color: var(--green-light);
border-bottom-color: var(--green);
font-weight: 600;
}
.rt-content {
display: none;
padding: 14px;
}
.rt-content.active {
display: block;
}
.hist-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
}
.hist-item {
display: flex;
align-items: flex-start;
gap: 10px;
}
.hist-tipo {
font-size: .80rem;
font-weight: 600;
}
.hist-verde {
color: var(--green);
}
.hist-vermelho {
color: var(--red);
}
.hist-desc {
font-size: .77rem;
color: var(--text-muted);
}
.hist-meta {
font-size: .71rem;
color: var(--text-muted);
margin-top: 2px;
}
.dashboard-avisos-card {
margin-top: 16px;
}
.dashboard-social-card {
margin-top: 16px;
overflow: hidden;
}
.social-live-pill {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 30px;
padding: 0 11px;
border-radius: 999px;
border: 1px solid var(--border-strong);
background: var(--green-bg);
color: var(--green-light);
font-size: .76rem;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .04em;
}
.social-live-pill i {
color: var(--red);
font-size: .55rem;
filter: drop-shadow(0 0 6px rgba(248, 113, 113, .75));
}
.social-post-form {
border-top: 1px solid var(--border);
background: linear-gradient(135deg, rgba(96, 165, 250, .08), rgba(224, 124, 16, .07));
}
.social-composer {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 12px;
padding: 16px 18px;
}
.social-composer>img,
.social-post-head>img,
.social-comment>img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
background: var(--card-bg2);
border: 1px solid var(--border-strong);
}
.social-composer-main {
min-width: 0;
}
.social-composer textarea {
min-height: 86px;
resize: vertical;
}
.social-composer-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
margin-top: 10px;
align-items: center;
}
.social-composer-row-media {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.social-media-picker {
min-height: 42px;
padding: 0 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--card-bg);
color: var(--green-light);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: .82rem;
font-weight: 900;
cursor: pointer;
white-space: nowrap;
transition: var(--transition);
}
.social-media-picker:hover {
border-color: var(--green-light);
background: var(--green-bg);
}
.social-media-picker input {
display: none;
}
.social-composer-row .btn-primary {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.social-feed-status {
padding: 12px 18px 0;
color: var(--text-muted);
font-size: .79rem;
font-weight: 750;
}
.social-feed-list {
display: grid;
gap: 12px;
padding: 12px 18px;
}
.social-feed-footer {
padding: 0 18px 18px;
}
.social-feed-full-link {
min-height: 42px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
background: var(--green-bg);
color: var(--green-light);
font-size: .86rem;
font-weight: 900;
transition: var(--transition);
}
.social-feed-full-link:hover {
border-color: var(--green-light);
background: var(--blue-bg);
transform: translateY(-1px);
}
.social-network-page .content-left {
width: min(100%, 940px);
max-width: 940px;
margin: 0 auto;
}
.social-network-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.social-network-heading span {
display: block;
color: var(--green-light);
font-size: .78rem;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.social-network-heading h1 {
margin: 2px 0 2px;
color: var(--text);
font-size: 2rem;
line-height: 1;
}
.social-network-heading p {
margin: 0;
color: var(--text-muted);
}
.social-network-card {
margin-top: 0;
}
.social-stories-card {
margin-bottom: 16px;
overflow: hidden;
}
.social-stories-row {
display: flex;
gap: 12px;
overflow-x: auto;
padding: 14px 18px 16px;
border-top: 1px solid var(--border);
scrollbar-width: thin;
}
.social-story-loading,
.social-story-empty {
min-height: 84px;
display: grid;
place-items: center;
width: 100%;
border: 1px dashed var(--border-strong);
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: .83rem;
font-weight: 800;
text-align: center;
padding: 14px;
}
.social-story-tile {
width: 82px;
flex: 0 0 82px;
border: 0;
background: transparent;
color: var(--text);
padding: 0;
cursor: pointer;
text-align: center;
}
.social-story-avatar {
width: 68px;
height: 68px;
margin: 0 auto 7px;
padding: 3px;
border-radius: 22px;
background: linear-gradient(135deg, var(--border-strong), var(--border));
position: relative;
}
.social-story-tile.is-unseen .social-story-avatar,
.social-story-tile.is-create .social-story-avatar {
background: conic-gradient(from 180deg, #f8c400, #3bb273, #49a2ff, #8b5cf6, #f8c400);
}
.social-story-avatar img,
.social-story-avatar span {
width: 100%;
height: 100%;
border-radius: 17px;
display: grid;
place-items: center;
object-fit: cover;
background: var(--card-bg2);
border: 2px solid var(--card-bg);
}
.social-story-avatar span {
color: var(--green-light);
font-size: 1.1rem;
}
.social-story-name {
display: block;
color: var(--text);
font-size: .75rem;
font-weight: 900;
line-height: 1.15;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.social-story-meta {
display: block;
margin-top: 2px;
color: var(--text-muted);
font-size: .68rem;
font-weight: 750;
}
.social-empty {
min-height: 78px;
display: grid;
place-items: center;
border: 1px dashed var(--border-strong);
border-radius: var(--radius-sm);
color: var(--text-muted);
text-align: center;
padding: 18px;
}
.social-post {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--card-bg2);
padding: 13px;
box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}
.social-post-head {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.social-author-link {
display: block;
color: var(--text);
font-weight: 900;
line-height: 1.15;
}
.social-author-link:hover,
.social-mention-link:hover {
color: var(--green-light);
text-decoration: underline;
text-underline-offset: 2px;
}
.social-mention-link {
color: var(--green-light);
font-weight: 850;
}
.social-post-head span,
.social-comment-head span {
display: block;
margin-top: 2px;
color: var(--text-muted);
font-size: .75rem;
}
.social-icon-action,
.social-comment-head button,
.social-comment-form button {
width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--card-bg);
color: var(--text-muted);
cursor: pointer;
transition: var(--transition);
}
.social-icon-action:hover,
.social-comment-head button:hover,
.social-comment-form button:hover {
color: var(--red);
border-color: rgba(248, 113, 113, .35);
background: var(--red-bg);
}
.social-post-text {
margin: 12px 0 0;
color: var(--text);
line-height: 1.58;
word-break: break-word;
}
.social-post-image,
.social-post-media {
display: block;
width: min(100%, 620px);
margin: 12px auto 0;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--border);
background: #101820;
}
.social-post-image img,
.social-post-media img,
.social-post-media video {
display: block;
width: 100%;
max-height: 320px;
object-fit: contain;
background: #101820;
}
.social-post-media video {
height: auto;
}
.social-actions {
display: flex;
align-items: center;
gap: 9px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.social-action-btn,
.social-action-count {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 34px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--card-bg);
color: var(--text-muted);
font-size: .82rem;
font-weight: 850;
}
.social-action-btn {
cursor: pointer;
transition: var(--transition);
}
.social-action-btn:hover,
.social-action-btn.is-liked {
border-color: rgba(248, 113, 113, .45);
background: var(--red-bg);
color: var(--red);
}
.social-comments {
display: grid;
gap: 9px;
margin-top: 12px;
}
.social-comment.is-hidden {
display: none;
}
.social-comment {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 9px;
}
.social-comment>img {
width: 34px;
height: 34px;
}
.social-comment-body {
min-width: 0;
padding: 9px 10px;
border-radius: var(--radius-sm);
background: var(--card-bg);
border: 1px solid var(--border);
}
.social-comment-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 8px;
align-items: center;
}
.social-comment-head span {
margin-top: 0;
white-space: nowrap;
}
.social-comment-head button {
width: 26px;
height: 26px;
font-size: .75rem;
}
.social-comment-body p {
margin-top: 5px;
color: var(--text);
font-size: .86rem;
line-height: 1.45;
word-break: break-word;
}
.social-comments-more {
justify-self: start;
min-height: 30px;
padding: 0 11px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--card-bg);
color: var(--green-light);
font-size: .78rem;
font-weight: 850;
cursor: pointer;
transition: var(--transition);
}
.social-comments-more:hover {
border-color: var(--green-light);
background: var(--green-bg);
}
.social-comment-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
gap: 8px;
margin-top: 12px;
}
.social-comment-form input {
min-width: 0;
height: 34px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--card-bg);
color: var(--text);
padding: 0 11px;
outline: none;
}
.social-comment-form input:focus {
border-color: var(--green-light);
box-shadow: 0 0 0 3px var(--green-bg);
}
.social-mention-menu {
position: fixed;
z-index: 9999;
display: grid;
gap: 4px;
padding: 6px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--overlay-bg);
box-shadow: var(--shadow-lg);
}
.social-mention-menu[hidden] {
display: none;
}
.social-mention-menu button {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 8px;
align-items: center;
width: 100%;
min-height: 42px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--text);
text-align: left;
padding: 5px 7px;
cursor: pointer;
}
.social-mention-menu button:hover,
.social-mention-menu button.is-active {
background: var(--green-bg);
}
.social-mention-menu img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--border);
}
.social-mention-menu strong,
.social-mention-menu em {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.social-mention-menu strong {
font-size: .86rem;
}
.social-mention-menu em {
margin-top: 1px;
color: var(--text-muted);
font-size: .72rem;
font-style: normal;
}
.social-pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
padding: 0 18px 18px;
}
.social-pagination button,
.social-pagination span {
min-width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--card-bg2);
color: var(--text-muted);
font-size: .82rem;
font-weight: 850;
}
.social-pagination button {
cursor: pointer;
transition: var(--transition);
}
.social-pagination button:hover,
.social-pagination button.is-active {
border-color: var(--green-light);
background: var(--green-bg);
color: var(--green-light);
}
.social-pagination button:disabled {
opacity: .45;
cursor: not-allowed;
}
.social-story-viewer {
position: fixed;
inset: 0;
z-index: 9996;
display: none;
align-items: center;
justify-content: center;
padding: 18px;
background: rgba(0, 0, 0, .78);
backdrop-filter: blur(8px);
}
.social-story-viewer.is-open {
display: flex;
}
.social-story-frame {
width: min(420px, calc(100vw - 28px));
height: min(760px, calc(100dvh - 28px));
border-radius: 18px;
overflow: hidden;
background: #071222;
border: 1px solid rgba(255, 255, 255, .14);
box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
}
.social-story-progress {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 4px;
padding: 10px 10px 0;
position: relative;
z-index: 3;
}
.social-story-progress span {
height: 3px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, .28);
}
.social-story-progress i {
display: block;
height: 100%;
width: 0%;
background: #fff;
}
.social-story-progress span.is-done i {
width: 100%;
}
.social-story-top {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto auto;
gap: 9px;
align-items: center;
padding: 10px 12px;
color: #fff;
}
.social-story-top img {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, .35);
}
.social-story-top a,
.social-story-top strong {
display: block;
color: #fff;
font-size: .88rem;
font-weight: 900;
line-height: 1.15;
}
.social-story-top small {
display: block;
color: rgba(255, 255, 255, .68);
font-size: .72rem;
margin-top: 2px;
}
.social-story-control {
width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(0, 0, 0, .34);
color: #fff;
cursor: pointer;
}
.social-story-media {
min-height: 0;
display: grid;
place-items: center;
background: #020812;
}
.social-story-media img,
.social-story-media video {
width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
}
.social-story-caption {
min-height: 58px;
padding: 12px 14px 16px;
color: #fff;
font-size: .9rem;
line-height: 1.45;
background: linear-gradient(180deg, rgba(2, 8, 18, .58), rgba(2, 8, 18, .94));
}
.social-story-nav {
position: absolute;
inset: 64px 0 62px;
display: grid;
grid-template-columns: 1fr 1fr;
z-index: 2;
pointer-events: none;
}
.social-story-nav button {
border: 0;
background: transparent;
cursor: pointer;
pointer-events: auto;
}
@media (max-width: 720px) {
.social-composer {
grid-template-columns: 40px minmax(0, 1fr);
padding: 14px;
}
.social-composer>img,
.social-post-head>img {
width: 40px;
height: 40px;
}
.social-composer-row {
grid-template-columns: 1fr;
}
.social-composer-row-media {
grid-template-columns: 1fr;
}
.social-post-head {
grid-template-columns: 40px minmax(0, 1fr) auto;
}
.social-feed-list {
padding: 12px 14px;
}
.social-feed-footer,
.social-pagination {
padding-left: 14px;
padding-right: 14px;
}
.social-network-heading {
align-items: flex-start;
flex-direction: column;
}
.social-post-image {
width: 100%;
}
.social-post-image img {
max-height: 260px;
}
}
.avisos-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
padding: 18px;
}
.avisos-carousel {
overflow: hidden;
padding: 18px 18px 12px;
}
.avisos-carousel-track {
display: flex;
gap: 16px;
transition: transform .45s ease;
will-change: transform;
}
.avisos-carousel .aviso-card {
flex: 0 0 calc((100% - 16px) / 2);
}
.avisos-carousel-dots {
display: flex;
justify-content: center;
gap: 7px;
padding: 12px 0 2px;
}
.avisos-carousel-dot {
display: inline-block;
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(79, 151, 214, .35);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
transition: width .2s ease, background .2s ease;
cursor: pointer;
}
.avisos-carousel-dot.active {
width: 22px;
background: #2588df;
}
.avisos-carousel-dot:focus-visible {
outline: 2px solid #2588df;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.avisos-carousel-track,
.avisos-carousel-dot {
transition: none;
}
}
.aviso-card {
min-width: 0;
overflow: hidden;
border-radius: 8px;
background: var(--card-bg2);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.aviso-banner {
height: 74px;
overflow: hidden;
background: linear-gradient(90deg, rgba(0, 0, 0, .6), color-mix(in srgb, var(--dept-color) 55%, #000));
}
.aviso-banner img {
width: 100%;
height: 100%;
object-fit: cover;
image-rendering: pixelated;
opacity: .42;
mix-blend-mode: luminosity;
}
.aviso-body {
position: relative;
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 78px;
gap: 10px;
min-height: 138px;
padding: 0 14px 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
}
.aviso-icon {
width: 48px;
height: 48px;
margin-top: -24px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--dept-color) 20%, var(--card-bg));
border: 2px solid color-mix(in srgb, var(--dept-color) 80%, #fff);
color: #eaf5ff;
box-shadow: 0 10px 20px rgba(0, 0, 0, .22);
}
.aviso-icon img {
width: 34px;
height: 34px;
object-fit: contain;
image-rendering: pixelated;
}
.aviso-copy {
min-width: 0;
padding-top: 14px;
}
.aviso-dept {
font-size: .68rem;
font-weight: 800;
color: color-mix(in srgb, var(--dept-color) 70%, #d8eaff);
text-transform: uppercase;
margin-bottom: 6px;
}
.aviso-copy h4 {
margin: 0;
color: var(--text);
font-size: .92rem;
font-weight: 800;
line-height: 1.25;
overflow-wrap: anywhere;
}
.aviso-copy p {
margin: 7px 0 0;
color: var(--text-muted);
font-size: .81rem;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aviso-author {
align-self: end;
justify-self: center;
width: 86px;
height: 110px;
object-fit: contain;
object-position: center bottom;
image-rendering: pixelated;
margin-top: -12px;
}
.aviso-footer {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px 12px;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-size: .76rem;
}
.aviso-footer span {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.aviso-links {
margin-left: auto;
display: flex;
justify-content: flex-end;
gap: 6px;
flex-wrap: wrap;
}
.aviso-links a {
padding: 5px 9px;
border-radius: 7px;
background: color-mix(in srgb, var(--dept-color) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--dept-color) 42%, var(--border));
color: var(--text);
font-size: .72rem;
font-weight: 800;
}
.aviso-links a:hover {
border-color: color-mix(in srgb, var(--dept-color) 70%, #fff);
}
/* =====================================================
DIARIO OFICIAL
===================================================== */
.dashboard-diario-card {
margin-top: 16px;
}
.diario-dashboard-list,
.diario-list {
display: grid;
gap: 12px;
padding: 18px;
}
.diario-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 18px 18px;
}
.diario-pagination a {
display: inline-grid;
place-items: center;
min-width: 32px;
height: 32px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--gray-bg);
color: var(--text-muted);
font-size: .82rem;
font-weight: 800;
text-decoration: none;
}
.diario-pagination a:hover,
.diario-pagination a.active {
border-color: color-mix(in srgb, var(--diario-color, #0b4a7a) 68%, var(--border-strong));
background: color-mix(in srgb, var(--diario-color, #0b4a7a) 16%, var(--card-bg));
color: var(--text);
}
.diario-dashboard-item,
.diario-feed-item {
position: relative;
display: grid;
grid-template-columns: 54px minmax(0, 1fr) 84px 22px;
gap: 14px;
align-items: center;
min-height: 116px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--card-bg2);
color: var(--text);
text-decoration: none;
overflow: hidden;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.diario-dashboard-item:hover,
.diario-feed-item:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--diario-color, #0b4a7a) 55%, var(--border-strong));
box-shadow: var(--shadow-md);
}
.diario-dashboard-badge,
.diario-feed-badge {
width: 48px;
height: 48px;
object-fit: contain;
image-rendering: pixelated;
border-radius: 7px;
background: color-mix(in srgb, var(--diario-color, #0b4a7a) 16%, var(--card-bg));
border: 2px solid color-mix(in srgb, var(--diario-color, #0b4a7a) 80%, #fff);
padding: 4px;
}
.diario-dashboard-copy,
.diario-feed-copy {
min-width: 0;
}
.diario-dashboard-tags,
.diario-feed-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 7px;
}
.diario-dashboard-tags span,
.diario-feed-tags span {
max-width: 100%;
padding: 4px 10px;
border-radius: 999px;
background: var(--gray-bg);
color: var(--text);
font-size: .71rem;
font-weight: 800;
line-height: 1.15;
overflow-wrap: anywhere;
}
.diario-dashboard-tags span:last-child,
.diario-feed-tags span:last-child {
color: color-mix(in srgb, var(--diario-color, #0b4a7a) 65%, var(--text));
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.diario-dashboard-item h4,
.diario-feed-item h4 {
margin: 0;
color: var(--text);
font-size: .98rem;
font-weight: 900;
line-height: 1.25;
overflow-wrap: anywhere;
}
.diario-dashboard-item p,
.diario-feed-item p {
margin: 5px 0 0;
color: var(--text-muted);
font-size: .84rem;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.diario-dashboard-meta,
.diario-feed-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
color: var(--text-muted);
font-size: .75rem;
}
.diario-dashboard-meta span,
.diario-feed-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.diario-user-imager {
position: relative;
align-self: center;
justify-self: center;
width: 45px;
height: 45px;
flex-shrink: 0;
border-radius: 999px;
overflow: visible;
background: var(--gray-bg);
outline: 2px solid var(--gray-bg);
}
.diario-user-imager>span {
position: absolute;
width: 45px;
height: 110px;
top: -65px;
left: 0;
overflow: hidden;
-webkit-mask-image: radial-gradient(circle 22.5px at 22.5px 87.5px, #000 99%, transparent 100%), linear-gradient(#000 0 0);
-webkit-mask-size: 45px 110px, 45px 87.5px;
-webkit-mask-position: 0 0, 0 0;
-webkit-mask-repeat: no-repeat;
mask-image: radial-gradient(circle 22.5px at 22.5px 87.5px, #000 99%, transparent 100%), linear-gradient(#000 0 0);
mask-size: 45px 110px, 45px 87.5px;
mask-position: 0 0, 0 0;
mask-repeat: no-repeat;
}
.diario-user-imager img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: calc(30% + 0px);
object-fit: none;
image-rendering: pixelated;
transition: transform .3s;
transform: translateY(0);
}
.diario-user-imager-lg {
width: 128px;
height: 128px;
margin: -62px auto 0;
outline-color: rgba(255, 255, 255, .16);
background: #06345c;
}
.diario-user-imager-lg>span {
width: 128px;
height: 250px;
top: -122px;
-webkit-mask-image: radial-gradient(circle 64px at 64px 186px, #000 99%, transparent 100%), linear-gradient(#000 0 0);
-webkit-mask-size: 128px 250px, 128px 186px;
mask-image: radial-gradient(circle 64px at 64px 186px, #000 99%, transparent 100%), linear-gradient(#000 0 0);
mask-size: 128px 250px, 128px 186px;
}
.diario-user-head {
overflow: hidden;
}
.diario-user-head>span {
inset: 0;
width: 100%;
height: 100%;
top: 0;
overflow: hidden;
-webkit-mask-image: none;
mask-image: none;
}
.diario-user-head img {
width: 62px;
height: 62px;
left: 50%;
top: 52%;
object-fit: cover;
transform: translate(-50%, -50%);
}
.diario-dashboard-arrow,
.diario-feed-arrow {
color: var(--text-muted);
font-size: 1.15rem;
}
.diario-page .content-left {
max-width: 1180px;
margin: 0 auto;
width: 100%;
}
.diario-heading {
margin-bottom: 18px;
padding: 22px 4px 6px;
}
.diario-heading span {
display: block;
color: var(--green-light);
font-size: .78rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.diario-heading h1 {
margin: 4px 0;
color: var(--text);
font-size: 2.05rem;
font-weight: 950;
line-height: 1;
}
.diario-heading p {
margin: 0;
color: var(--text-muted);
font-size: .95rem;
}
.diario-sections {
display: grid;
gap: 18px;
}
.diario-category-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 14px 18px 0;
}
.diario-category-row span,
.diario-category-row button {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--gray-bg);
color: var(--text-muted);
font-size: .76rem;
font-weight: 700;
}
.diario-category-row button {
cursor: pointer;
color: var(--text);
}
.diario-category-row button:hover {
border-color: color-mix(in srgb, var(--diario-color, #0b4a7a) 60%, var(--border-strong));
}
.diario-detail {
max-width: 1180px;
margin: 0 auto;
padding: 16px 14px 32px;
}
.diario-detail-hero {
position: relative;
display: grid;
grid-template-columns: 54px minmax(0, 1fr) 42px;
gap: 18px;
align-items: center;
min-height: 96px;
padding: 22px 24px;
border: 1px solid color-mix(in srgb, var(--diario-color, #d5a716) 34%, var(--border));
border-top: 1px solid #d5a716;
border-radius: 8px;
background: linear-gradient(90deg, rgba(13, 27, 48, .96), rgba(7, 29, 25, .92));
color: #f7fbff;
box-shadow: var(--shadow);
}
.diario-detail-badge {
width: 48px;
height: 48px;
object-fit: contain;
image-rendering: pixelated;
}
.diario-detail-copy {
min-width: 0;
}
.diario-detail-copy h1 {
margin: 0 0 8px;
color: #fff;
font-size: clamp(1.65rem, 3vw, 2.15rem);
font-weight: 950;
letter-spacing: .06em;
line-height: 1;
text-transform: uppercase;
overflow-wrap: anywhere;
}
.diario-detail-meta,
.diario-detail-edited {
display: flex;
flex-wrap: wrap;
gap: 14px;
color: #6f8bb1;
font-size: .76rem;
font-weight: 700;
}
.diario-detail-meta span,
.diario-detail-edited {
display: inline-flex;
align-items: center;
gap: 6px;
}
.diario-detail-edited {
margin-top: 14px;
}
.diario-icon-action {
width: 36px;
height: 36px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 7px;
background: rgba(255, 255, 255, .06);
color: #6f8bb1;
cursor: pointer;
}
.diario-ementa {
margin-top: 12px;
padding: 18px 22px;
border-radius: 8px;
background: #101d31;
border: 1px solid rgba(83, 130, 181, .2);
}
.diario-ementa strong {
display: block;
color: #426187;
font-size: .68rem;
font-weight: 950;
letter-spacing: .18em;
text-transform: uppercase;
}
.diario-ementa p {
margin: 10px 0 0;
color: #6f8bb1;
font-size: .86rem;
line-height: 1.55;
}
.diario-reader-grid {
display: grid;
grid-template-columns: 206px minmax(0, 1fr);
gap: 12px;
margin-top: 12px;
align-items: start;
}
.diario-author-card {
overflow: hidden;
min-height: 0;
border: 1px solid rgba(83, 130, 181, .25);
border-radius: 8px;
background: #101d31;
color: #fff;
text-align: center;
}
.diario-author-cover {
display: grid;
place-items: end center;
height: 120px;
background: #0f1b2e;
border-bottom: 1px solid rgba(83, 130, 181, .14);
}
.diario-author-card .diario-user-imager-lg {
display: block;
width: 92px;
height: 92px;
margin: 0 0 -1px;
overflow: hidden;
outline-color: rgba(83, 130, 181, .16);
background: #0b1c32;
}
.diario-author-card .diario-user-imager-lg>span {
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-mask-image: none;
mask-image: none;
}
.diario-author-card .diario-user-imager-lg img {
width: auto;
height: 126px;
left: 50%;
top: auto;
bottom: -13px;
object-fit: contain;
transform: translateX(-50%);
}
.diario-author-card h3 {
margin: 14px 14px 4px;
color: #fff;
font-size: .95rem;
font-weight: 950;
overflow-wrap: anywhere;
}
.diario-author-rank {
display: inline-flex;
margin: 0 auto 18px;
padding: 3px 12px;
border: 1px solid rgba(213, 167, 22, .42);
border-radius: 999px;
background: rgba(213, 167, 22, .1);
color: #d5a716;
font-size: .64rem;
font-weight: 900;
line-height: 1.2;
}
.diario-author-facts {
display: grid;
gap: 13px;
margin: 0;
padding: 14px 16px 16px;
border-top: 1px solid rgba(83, 130, 181, .14);
text-align: left;
}
.diario-author-facts div {
display: flex;
justify-content: space-between;
gap: 12px;
}
.diario-author-facts dt {
color: #426187;
font-size: .72rem;
}
.diario-author-facts dd {
margin: 0;
color: #fff;
font-size: .72rem;
font-weight: 900;
text-align: right;
}
.diario-document-paper {
min-height: 520px;
padding: 0;
border: 1px solid rgba(83, 130, 181, .25);
border-radius: 8px;
background: #101d31;
color: #6f8bb1;
text-align: left;
overflow: hidden;
box-shadow: var(--shadow);
}
.diario-document-paper>img {
display: block;
width: 44px;
height: 44px;
margin: 24px auto 12px;
object-fit: contain;
image-rendering: pixelated;
}
.diario-document-paper h2 {
margin: 0;
color: #fff;
font-size: 1.28rem;
font-weight: 950;
letter-spacing: .24em;
text-align: center;
text-transform: uppercase;
}
.diario-document-subtitle {
margin: 10px 0 28px;
color: #426187;
font-size: .72rem;
font-weight: 900;
letter-spacing: .24em;
text-align: center;
text-transform: uppercase;
}
.diario-document-number {
display: inline-flex;
margin: 22px 26px 22px;
padding: 6px 12px;
border: 1px solid rgba(213, 167, 22, .45);
border-radius: 6px;
background: rgba(213, 167, 22, .08);
color: #d5a716;
font-size: .78rem;
font-weight: 950;
text-align: left;
}
.diario-document-subject {
margin: 0 26px 18px;
padding-top: 18px;
border-top: 1px solid rgba(83, 130, 181, .18);
}
.diario-document-subject span {
display: block;
margin-bottom: 8px;
color: #426187;
font-size: .68rem;
font-weight: 950;
letter-spacing: .18em;
text-transform: uppercase;
}
.diario-document-subject p {
margin: 0;
padding-left: 12px;
border-left: 2px solid rgba(83, 130, 181, .35);
color: #6f8bb1;
font-size: .86rem;
line-height: 1.55;
}
.feb-document-body {
color: #6f8bb1;
font-size: .86rem;
line-height: 1.9;
text-align: left;
white-space: normal;
}
.diario-document-body {
margin: 22px 26px 30px;
padding-top: 0;
}
@media (max-width: 900px) {
.diario-dashboard-item,
.diario-feed-item {
grid-template-columns: 46px minmax(0, 1fr) 22px;
}
.diario-user-imager:not(.diario-user-imager-lg) {
display: none;
}
.diario-reader-grid {
grid-template-columns: 1fr;
}
.diario-author-card {
min-height: 0;
}
.diario-detail {
padding: 12px;
}
.diario-detail-hero {
grid-template-columns: 50px minmax(0, 1fr);
padding: 18px;
border-radius: 8px;
}
.diario-detail-badge {
width: 46px;
height: 46px;
}
.diario-icon-action {
position: absolute;
top: 16px;
right: 16px;
}
.diario-document-paper {
min-height: 0;
}
}
/* Private messages */
html[data-theme] .private-messages-modal {
width: min(920px, 100vw);
max-width: 100vw;
overflow: hidden;
}
html[data-theme] .pm-modal-header {
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
html[data-theme] .pm-layout {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
min-height: calc(100vh - 98px);
}
html[data-theme] .pm-sidebar {
display: flex;
flex-direction: column;
min-width: 0;
border-right: 1px solid var(--border);
background: color-mix(in srgb, var(--card-bg2) 84%, transparent);
}
html[data-theme] .pm-search {
position: relative;
padding: 14px;
border-bottom: 1px solid var(--border);
}
html[data-theme] .pm-search-results {
display: grid;
gap: 6px;
margin-top: 8px;
}
html[data-theme] .pm-search-results button,
html[data-theme] .pm-conversation {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
width: 100%;
border: 0;
color: var(--text);
background: transparent;
text-align: left;
cursor: pointer;
}
html[data-theme] .pm-search-results button {
grid-template-columns: 34px minmax(0, 1fr);
padding: 8px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--input-bg);
}
html[data-theme] .pm-search-results img,
html[data-theme] .pm-conversation img,
html[data-theme] .pm-chat-peer img {
width: 40px;
height: 40px;
border: 1px solid var(--border);
border-radius: 50%;
background: var(--input-bg);
object-fit: cover;
}
html[data-theme] .pm-search-results img {
width: 34px;
height: 34px;
}
html[data-theme] .pm-search-results strong,
html[data-theme] .pm-conversation strong,
html[data-theme] .pm-chat-peer strong {
display: block;
overflow: hidden;
color: var(--text);
font-size: .86rem;
font-weight: 850;
text-overflow: ellipsis;
white-space: nowrap;
}
html[data-theme] .pm-search-results em,
html[data-theme] .pm-conversation em,
html[data-theme] .pm-chat-peer span {
display: block;
overflow: hidden;
color: var(--text-muted);
font-size: .76rem;
font-style: normal;
text-overflow: ellipsis;
white-space: nowrap;
}
html[data-theme] .pm-conversation-list {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 8px;
}
html[data-theme] .pm-conversation {
padding: 10px;
border-radius: 8px;
}
html[data-theme] .pm-conversation:hover,
html[data-theme] .pm-conversation.active {
background: var(--green-bg);
}
html[data-theme] .pm-conversation.unread strong {
color: var(--green-light);
}
html[data-theme] .pm-conversation small {
display: grid;
justify-items: end;
gap: 4px;
color: var(--text-muted);
font-size: .68rem;
}
html[data-theme] .pm-conversation small b {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
color: #fff;
background: var(--red);
font-size: .7rem;
}
html[data-theme] .pm-chat {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
min-width: 0;
min-height: 0;
}
html[data-theme] .pm-chat-header {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
html[data-theme] .pm-chat-peer {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
html[data-theme] .pm-chat-avatar {
width: 40px;
height: 40px;
border: 1px dashed var(--border-strong);
border-radius: 50%;
background: var(--input-bg);
}
html[data-theme] .pm-messages {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
overflow-y: auto;
padding: 16px;
}
html[data-theme] .pm-message {
display: flex;
justify-content: flex-start;
}
html[data-theme] .pm-message.mine {
justify-content: flex-end;
}
html[data-theme] .pm-bubble {
max-width: min(72%, 520px);
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--input-bg);
}
html[data-theme] .pm-message.mine .pm-bubble {
color: #fff;
background: linear-gradient(135deg, var(--green), var(--blue));
border-color: transparent;
}
html[data-theme] .pm-bubble p {
margin: 0;
color: inherit;
line-height: 1.45;
overflow-wrap: anywhere;
}
html[data-theme] .pm-message-content {
color: inherit;
line-height: 1.45;
overflow-wrap: anywhere;
}
html[data-theme] .pm-message-content :is(p, ul, ol, blockquote, pre) {
margin: 0 0 8px;
}
html[data-theme] .pm-message-content :is(p, ul, ol, blockquote, pre):last-child {
margin-bottom: 0;
}
html[data-theme] .pm-message-content a {
color: inherit;
font-weight: 800;
text-decoration: underline;
}
html[data-theme] .pm-message-content img,
html[data-theme] .pm-message-content video,
html[data-theme] .pm-message-content iframe {
max-width: 100%;
border-radius: 8px;
}
html[data-theme] .pm-message-content pre {
white-space: pre-wrap;
padding: 8px;
border-radius: 7px;
background: color-mix(in srgb, #000 16%, transparent);
}
html[data-theme] .pm-bubble > span {
display: block;
margin-top: 6px;
color: color-mix(in srgb, currentColor 68%, transparent);
font-size: .68rem;
}
html[data-theme] .pm-receipt {
font-weight: 800;
}
html[data-theme] .pm-receipt.is-delivered {
color: #dbeafe;
}
html[data-theme] .pm-receipt.is-read {
color: #bbf7d0;
}
html[data-theme] .pm-composer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
padding: 14px 16px;
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--card-bg) 92%, transparent);
}
html[data-theme] .pm-composer textarea {
resize: none;
}
html[data-theme] .pm-composer > button {
width: 44px;
min-width: 44px;
padding: 0;
}
html[data-theme] .pm-composer .rich-editor {
min-width: 0;
}
html[data-theme] .pm-composer .rich-editor-toolbar {
max-height: 74px;
overflow-y: auto;
padding: 5px;
}
html[data-theme] .pm-composer .rich-editor-btn {
min-width: 24px;
height: 24px;
padding: 0 5px;
}
html[data-theme] .pm-composer .rich-editor textarea.form-control {
min-height: 58px;
max-height: 120px;
}
html[data-theme] .pm-empty,
html[data-theme] .pm-search-empty {
padding: 14px;
color: var(--text-muted);
font-size: .82rem;
text-align: center;
}
@media (max-width: 760px) {
html[data-theme] .private-messages-modal {
width: min(100%, calc(100vw - 20px));
max-height: calc(100dvh - 20px);
}
html[data-theme] .pm-layout {
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
min-height: 0;
}
html[data-theme] .pm-sidebar {
max-height: 260px;
border-right: 0;
border-bottom: 1px solid var(--border);
}
html[data-theme] .pm-bubble {
max-width: 86%;
}
}
@media (max-width: 560px) {
.diario-dashboard-item,
.diario-feed-item {
grid-template-columns: 1fr;
}
.diario-dashboard-badge,
.diario-feed-badge {
display: none;
}
.diario-dashboard-arrow,
.diario-feed-arrow {
display: none;
}
.diario-detail-meta,
.diario-detail-edited {
gap: 9px;
font-size: .82rem;
}
.diario-ementa {
padding: 20px 18px;
}
}
.weekly-highlight-card {
border-color: rgba(202, 155, 22, .32);
}
.weekly-highlight-card .right-tabs {
justify-content: center;
}
.weekly-highlight-card .right-tab.active {
color: #ffc400;
border-bottom-color: #ffc400;
}
.weekly-highlight-panel {
padding: 0;
}
/* =====================================================
FORMULÁRIOS + INPUTS
===================================================== */
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: .78rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: .05em;
}
.form-control {
width: 100%;
padding: 9px 13px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
background: rgba(22, 118, 202, .04);
color: var(--text);
font-size: .88rem;
font-family: inherit;
outline: none;
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
-webkit-appearance: none;
}
.form-control:focus {
border-color: var(--green);
background: rgba(22, 118, 202, .07);
box-shadow: 0 0 0 3px rgba(22, 118, 202, .12);
}
.form-control:disabled,
.form-control[readonly] {
opacity: .55;
cursor: not-allowed;
background: rgba(22, 118, 202, .03);
}
.form-control::placeholder {
color: var(--text-muted);
}
select.form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a8a5a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
cursor: pointer;
}
select.form-control option {
background: var(--card-bg2);
color: var(--text);
}
select.form-control option:checked,
select.form-control option:hover {
background: var(--green);
color: #fff;
}
textarea.form-control {
resize: vertical;
min-height: 90px;
}
.rich-editor {
display: grid;
gap: 0;
}
.rich-editor-toolbar {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 6px;
border: 1px solid var(--border);
border-bottom: 0;
border-radius: 8px 8px 0 0;
background: var(--overlay-bg2);
}
.rich-editor-group {
display: inline-flex;
flex-wrap: nowrap;
gap: 2px;
padding: 2px;
border: 1px solid var(--border);
border-radius: 6px;
background: color-mix(in srgb, var(--card-bg) 78%, transparent);
}
.rich-editor-btn {
display: inline-grid;
place-items: center;
min-width: 27px;
height: 26px;
padding: 0 6px;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--text);
cursor: pointer;
font-size: .78rem;
font-weight: 800;
}
.rich-editor-btn:hover,
.rich-editor-btn:focus-visible {
background: var(--green-bg);
color: var(--green);
}
.rich-editor-btn.is-youtube {
color: #e62117;
}
.rich-editor-btn sub,
.rich-editor-btn sup {
font-size: .62em;
}
.rich-editor textarea.form-control {
border-top-left-radius: 0;
border-top-right-radius: 0;
font-family: inherit;
font-size: .9rem;
line-height: 1.55;
}
.input-icon-right {
position: relative;
}
.input-icon-right .form-control {
padding-right: 44px;
}
.input-icon-right.has-badge .form-control {
padding-right: 110px;
}
.verified-badge {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 4px;
font-size: .75rem;
font-weight: 600;
color: var(--green);
}
.field-hint {
font-size: .74rem;
color: var(--text-muted);
margin-top: 5px;
}
/* Toggle switch */
.toggle-switch {
width: 40px;
height: 22px;
background: rgba(22, 118, 202, .15);
border: 1px solid var(--border);
border-radius: 99px;
position: relative;
flex-shrink: 0;
transition: background .2s;
cursor: pointer;
}
.toggle-switch::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--text-muted);
transition: left .2s, background .2s;
}
input[type=checkbox]:checked+.toggle-switch {
background: var(--green);
border-color: var(--green-dark);
}
input[type=checkbox]:checked+.toggle-switch::after {
left: 21px;
background: #fff;
}
.toggle-switch-wrap {
display: flex;
align-items: center;
cursor: pointer;
}
.toggle-switch-wrap input {
display: none;
}
/* Password eye */
.btn-eye {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
padding: 4px;
display: flex;
align-items: center;
transition: color var(--transition);
}
.btn-eye:hover {
color: var(--text);
}
.btn-eye svg,
.btn-eye i {
width: 18px;
height: 18px;
font-size: 18px;
}
/* =====================================================
BOTÕES
===================================================== */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 20px;
background: var(--green);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: .875rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
letter-spacing: .01em;
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
text-decoration: none;
box-shadow: 0 2px 8px rgba(22, 118, 202, .25);
}
.btn-primary:hover:not(:disabled) {
background: var(--green-dark);
box-shadow: 0 4px 16px rgba(22, 118, 202, .35);
transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
transform: translateY(0);
}
.btn-primary:disabled {
opacity: .45;
cursor: not-allowed;
}
.btn-primary i,
.btn-primary svg {
width: 16px;
height: 16px;
font-size: 16px;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 20px;
background: rgba(22, 118, 202, .07);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: .875rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background var(--transition), border-color var(--transition);
text-decoration: none;
}
.btn-secondary:hover {
background: rgba(22, 118, 202, .12);
border-color: var(--border-strong);
}
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 20px;
background: transparent;
color: var(--green);
border: 1.5px solid var(--green);
border-radius: var(--radius-sm);
font-size: .875rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background var(--transition), box-shadow var(--transition);
text-decoration: none;
}
.btn-outline:hover {
background: var(--green-bg);
box-shadow: 0 0 0 3px rgba(22, 118, 202, .1);
}
.btn-outline-sm {
padding: 5px 12px;
background: transparent;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: .8rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all var(--transition);
}
.btn-outline-sm:hover {
border-color: var(--green);
color: var(--green);
background: var(--green-bg);
}
.btn-sm {
padding: 5px 12px;
font-size: .8rem;
background: rgba(22, 118, 202, .07);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text);
text-decoration: none;
transition: all .15s;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 5px;
}
.btn-sm:hover {
background: var(--green-bg);
color: var(--green);
border-color: var(--green);
}
.btn-block {
width: 100%;
}
.link-green {
color: var(--green);
}
.link-green:hover {
text-decoration: underline;
}
/* =====================================================
ALERTAS
===================================================== */
.alert {
padding: 12px 16px;
border-radius: var(--radius-sm);
margin-bottom: 16px;
font-size: .88rem;
font-weight: 500;
display: flex;
align-items: flex-start;
gap: 10px;
}
.alert-danger {
background: var(--red-bg);
color: var(--red);
border: 1px solid rgba(248, 113, 113, .25);
}
.alert-success {
background: var(--green-bg);
color: var(--green);
border: 1px solid rgba(22, 118, 202, .25);
}
.alert-warning {
background: var(--orange-bg);
color: var(--orange);
border: 1px solid rgba(251, 146, 60, .25);
}
/* =====================================================
MODAIS
===================================================== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .6);
backdrop-filter: blur(4px);
z-index: 500;
display: none;
align-items: flex-start;
justify-content: flex-end;
padding: 0;
}
.modal-overlay.open {
display: flex;
}
.modal {
width: 540px;
max-width: 100%;
background: var(--overlay-bg);
height: 100vh;
overflow-y: auto;
box-shadow: -8px 0 40px rgba(0, 0, 0, .6);
display: flex;
flex-direction: column;
animation: slideIn .2s cubic-bezier(.4, 0, .2, 1);
border-left: 1px solid var(--border-strong);
}
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 24px 24px 0;
}
.modal-header h2 {
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
}
.modal-header p {
color: var(--text-muted);
font-size: .82rem;
margin-top: 3px;
}
.modal-close {
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: var(--text-muted);
padding: 4px 8px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition), color var(--transition);
}
.modal-close:hover {
color: var(--text);
background: rgba(22, 118, 202, .08);
}
.modal-tabs {
display: flex;
gap: 0;
padding: 16px 24px 0;
border-bottom: 1px solid var(--border);
}
.modal-tab {
padding: 8px 14px;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
font-size: .83rem;
font-weight: 500;
cursor: pointer;
font-family: inherit;
color: var(--text-muted);
transition: color var(--transition), border-color var(--transition);
}
.modal-tab.active {
color: var(--green-light);
font-weight: 600;
border-bottom-color: var(--green);
}
.modal-tab:not(.active):hover {
color: var(--text);
}
.modal-tab-content {
display: none;
padding: 20px 24px;
}
.modal-tab-content.active {
display: block;
}
.modal-divider {
border: none;
border-top: 1px solid var(--border);
margin: 20px 0;
}
.modal-footer {
display: flex;
justify-content: flex-end;
padding-top: 16px;
}
/* Perfil dentro do modal */
.perfil-section h4 {
font-size: .92rem;
font-weight: 700;
margin-bottom: 2px;
color: var(--text);
}
.config-section h4 {
font-size: .92rem;
font-weight: 700;
margin-bottom: 2px;
color: var(--text);
}
.perfil-avatar-row {
display: flex;
gap: 20px;
margin-top: 16px;
align-items: flex-start;
}
.perfil-avatar-wrap {
position: relative;
flex-shrink: 0;
}
.perfil-avatar-wrap img {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border-strong);
}
.avatar-edit-btn {
position: absolute;
bottom: 0;
right: 0;
width: 24px;
height: 24px;
background: var(--green);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 2px solid #0a1525;
font-size: .7rem;
}
.perfil-fields {
flex: 1;
}
.fields-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.config-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--border);
gap: 16px;
}
.config-toggle-row:last-child {
border-bottom: none;
}
.config-toggle-row span {
font-size: .88rem;
color: var(--text);
}
.verify-email-box {
display: flex;
gap: 12px;
background: rgba(22, 118, 202, .06);
padding: 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-top: 12px;
}
.verify-email-box svg,
.verify-email-box i {
flex-shrink: 0;
color: var(--green);
margin-top: 2px;
width: 20px;
height: 20px;
font-size: 20px;
}
.verify-email-box strong {
font-size: .86rem;
display: block;
margin-bottom: 4px;
color: var(--text);
}
.verify-email-box p {
font-size: .79rem;
color: var(--text-muted);
}
/* Tooltip */
/* Honrarias */
/* Emblemas */
.emblemas-grid {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 14px;
}
.emblema-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: rgba(22, 118, 202, .04);
}
.emblema-item strong {
font-size: .86rem;
display: block;
color: var(--text);
}
.emblema-item p {
font-size: .78rem;
color: var(--text-muted);
margin-top: 2px;
}
/* =====================================================
MODAL DE BUSCA
===================================================== */
.search-overlay {
align-items: flex-start;
justify-content: center;
padding-top: 80px;
}
.search-modal {
width: 640px;
max-width: 95%;
background: var(--overlay-bg);
border-radius: var(--radius);
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-lg);
overflow: hidden;
animation: fadeScale .18s ease;
}
.search-input-wrap {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.search-input-wrap svg,
.search-input-wrap i {
color: var(--text-muted);
flex-shrink: 0;
width: 20px;
height: 20px;
font-size: 20px;
}
.search-input-wrap input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: .96rem;
font-family: inherit;
color: var(--text);
}
.search-input-wrap input::placeholder {
color: var(--text-muted);
}
.search-results {
max-height: 460px;
overflow-y: auto;
}
.search-section-title {
padding: 10px 20px 5px;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-muted);
}
.search-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
cursor: pointer;
transition: background .15s;
text-decoration: none;
color: var(--text);
}
.search-item:hover {
background: rgba(22, 118, 202, .06);
}
.search-item svg,
.search-item i {
color: var(--text-muted);
flex-shrink: 0;
width: 18px;
height: 18px;
font-size: 18px;
}
.search-item-name {
font-size: .88rem;
font-weight: 500;
}
.search-item-meta {
font-size: .73rem;
color: var(--text-muted);
margin-top: 1px;
}
.search-empty {
padding: 32px 20px;
text-align: center;
color: var(--text-muted);
font-size: .9rem;
}
/* =====================================================
CABEÇALHO DE PÁGINA
===================================================== */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
gap: 16px;
}
.page-header:not(.corregedoria-header) {
position: relative;
overflow: hidden;
padding: 24px 26px;
border-radius: 28px;
border: 1px solid rgba(121, 181, 255, .16);
background:
repeating-linear-gradient(45deg, rgba(121, 181, 255, .04) 0px, rgba(121, 181, 255, .04) 1px, transparent 0px, transparent 50%),
radial-gradient(circle at top right, rgba(121, 181, 255, .24), transparent 30%),
radial-gradient(circle at bottom left, rgba(47, 124, 255, .16), transparent 34%),
linear-gradient(135deg, #07111d 0%, #0b2340 34%, #123a6a 72%, #1a4f97 100%);
background-size: 20px 20px, auto, auto, auto;
box-shadow: 0 22px 54px rgba(0, 0, 0, .24);
}
.page-header.hero-full-bleed:not(.corregedoria-header) {
padding: 34px 26px 28px;
}
.page-header:not(.corregedoria-header)>* {
position: relative;
z-index: 1;
}
.page-header:not(.corregedoria-header) h2 {
margin: 0;
font-family: 'Rajdhani', sans-serif;
font-size: clamp(1.9rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.05;
color: #eef5ff;
}
.page-header:not(.corregedoria-header) p {
color: rgba(234, 243, 255, .78) !important;
font-size: .9rem;
line-height: 1.6;
margin-top: 6px;
}
.search-form {
display: flex;
gap: 8px;
align-items: center;
}
/* Blobs decorativos dos stat-cards */
/* Tema botões - aparência no topbar */
.topbar-action-shell .theme-btn.active {
background: rgba(22, 118, 202, .2);
color: var(--green-light);
}
/* =====================================================
PÁGINA DE DEPARTAMENTOS
===================================================== */
.dept-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
margin-top: 16px;
}
.dept-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.dept-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--border-strong);
}
.dept-card-header {
height: 3px;
background: linear-gradient(90deg, var(--green), var(--green-dark));
}
.dept-card-body {
padding: 16px;
}
.dept-card-title {
display: flex;
align-items: center;
gap: 7px;
font-size: .93rem;
font-weight: 700;
margin-bottom: 4px;
color: var(--text);
}
.dept-card-title-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
object-fit: contain;
image-rendering: pixelated;
color: var(--green-light);
font-size: 18px;
}
.dept-card-desc {
font-size: .8rem;
color: var(--text-muted);
}
/* =====================================================
RH / REQUERIMENTOS
===================================================== */
.rh-state-aprovado {
border-left: 3px solid var(--green);
}
.rh-state-reprovado {
border-left: 3px solid var(--red);
}
.rh-state-cancelado {
border-left: 3px solid var(--orange);
}
.rh-state-pendente {
border-left: 3px solid var(--blue);
}
/* =====================================================
PERFIL
===================================================== */
.perfil-hero {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px;
margin-bottom: 16px;
display: flex;
align-items: flex-start;
gap: 24px;
}
.status-ativo {
color: var(--green);
}
.status-licenca {
color: var(--orange);
}
/* Estatísticas do perfil */
/* =====================================================
TIMELINE
===================================================== */
.timeline-dot.active {
background: var(--green);
box-shadow: 0 0 0 3px rgba(22, 118, 202, .2);
}
.timeline-badge.entrada {
background: rgba(22, 118, 202, .15);
color: #4aaee8;
}
.timeline-badge.saida {
background: rgba(248, 113, 113, .15);
color: #fca5a5;
}
.timeline-badge.promocao {
background: rgba(22, 118, 202, .15);
color: #4aaee8;
}
/* Destaque da semana */
/* Contador do card (topo direito) */
/* =====================================================
GRUPOS DE TAREFAS / MISC
===================================================== */
.lotacao-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.lotacao-chip {
display: inline-flex;
align-items: center;
padding: 5px 11px;
border-radius: 999px;
background: rgba(22, 118, 202, .07);
border: 1px solid var(--border);
font-size: .76rem;
color: var(--text);
font-weight: 500;
}
/* =====================================================
TOASTS
===================================================== */
.toast {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: var(--radius-sm);
background: var(--overlay-bg);
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-md);
font-size: .86rem;
color: var(--text);
animation: fadeScale .2s ease;
min-width: 260px;
max-width: 360px;
}
.toast i,
.toast svg {
flex-shrink: 0;
width: 18px;
height: 18px;
font-size: 18px;
}
/* =====================================================
UTILITÁRIOS
===================================================== */
.mt-0 {
margin-top: 0;
}
.mt-4 {
margin-top: 4px;
}
.mt-8 {
margin-top: 8px;
}
.mt-12 {
margin-top: 12px;
}
.mt-16 {
margin-top: 16px;
}
.mt-20 {
margin-top: 20px;
}
.mb-8 {
margin-bottom: 8px;
}
.mb-12 {
margin-bottom: 12px;
}
.mb-16 {
margin-bottom: 16px;
}
.mb-20 {
margin-bottom: 20px;
}
.p-0 {
padding: 0;
}
.p-16 {
padding: 16px;
}
.p-20 {
padding: 20px;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.gap-4 {
gap: 4px;
}
.gap-8 {
gap: 8px;
}
.gap-12 {
gap: 12px;
}
.gap-16 {
gap: 16px;
}
.flex-1 {
flex: 1;
}
.min-w-0 {
min-width: 0;
}
.shrink-0 {
flex-shrink: 0;
}
.text-green {
color: var(--green);
}
.text-light {
color: var(--green-light);
}
.text-red {
color: var(--red);
}
.text-orange {
color: var(--orange);
}
.text-yellow {
color: var(--yellow);
}
.text-blue {
color: var(--blue);
}
.text-white {
color: #fff;
}
.text-sm {
font-size: .82rem;
}
.text-xs {
font-size: .74rem;
}
.font-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.hidden {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* Divider - suporta
e ou
*/
.divider {
display: flex;
align-items: center;
gap: 10px;
margin: 16px 0;
color: var(--text-muted);
font-size: .78rem;
font-weight: 500;
border: none;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* =====================================================
TEMA CLARO - ajustes específicos
===================================================== */
[data-theme="light"] .topbar-action-shell {
background: rgba(0, 83, 156, .08);
border-color: rgba(0, 83, 156, .2);
}
[data-theme="light"] .icon-btn {
color: rgba(255, 255, 255, .7);
}
[data-theme="light"] .icon-btn:hover {
background: rgba(255, 255, 255, .15);
color: #fff;
}
[data-theme="light"] .user-avatar-btn {
border-color: rgba(255, 255, 255, .3);
}
[data-theme="light"] .card {
background: #fff;
border-color: rgba(0, 83, 156, .15);
}
[data-theme="light"] .nav-submenu,
[data-theme="light"] .nav-submenu-flat,
[data-theme="light"] .user-dropdown,
[data-theme="light"] .notif-dropdown,
[data-theme="light"] .modal,
[data-theme="light"] .search-modal,
[data-theme="light"] .toast {
background: var(--overlay-bg);
border-color: var(--border-strong);
box-shadow: var(--shadow-md);
color: var(--text);
}
[data-theme="light"] .nav-subitem,
[data-theme="light"] .nav-subitem-flat {
color: var(--text-muted);
}
[data-theme="light"] .nav-subitem:hover,
[data-theme="light"] .nav-subitem-flat:hover {
background: var(--green-bg);
color: var(--text);
}
[data-theme="light"] .nav-subitem.active,
[data-theme="light"] .nav-subitem-flat.active {
background: rgba(0, 83, 156, .12);
color: var(--green-dark);
}
[data-theme="light"] .nav-subitem.child {
color: color-mix(in srgb, var(--text-muted) 78%, transparent);
}
[data-theme="light"] .nav-subitem-icon {
background: rgba(0, 83, 156, .08);
color: var(--text-muted);
}
[data-theme="light"] .nav-submenu-section {
color: var(--text-muted);
}
[data-theme="light"] .table th {
background: rgba(0, 83, 156, .06);
}
[data-theme="light"] .table tbody tr:hover td {
background: rgba(0, 83, 156, .04);
}
[data-theme="light"] .form-control {
background: rgba(0, 83, 156, .04);
border-color: rgba(0, 83, 156, .2);
color: #0d1c36;
}
[data-theme="light"] .form-control:focus {
background: rgba(0, 83, 156, .07);
border-color: #00539c;
}
[data-theme="light"] select.form-control option {
background: var(--overlay-bg);
color: var(--text);
}
[data-theme="light"] .internal-card {
background: linear-gradient(180deg, #ffffff, #f8fbff);
border-color: var(--border);
box-shadow: 0 8px 22px rgba(13, 28, 54, .08);
}
[data-theme="light"] .internal-card:hover {
border-color: var(--border-strong);
box-shadow: 0 12px 28px rgba(13, 28, 54, .12);
}
[data-theme="light"] .internal-card-actions .btn-sm,
[data-theme="light"] .internal-doc-close {
background: rgba(0, 83, 156, .05);
color: var(--text);
}
[data-theme="light"] .dashboard-search-box {
background: #ffffff;
border-color: rgba(0, 83, 156, .22);
}
[data-theme="light"] .dashboard-search-box input {
color: var(--text);
}
[data-theme="light"] .dashboard-search-box input::placeholder {
color: color-mix(in srgb, var(--text-muted) 72%, transparent);
}
[data-theme="light"] .dashboard-search-card {
background: linear-gradient(135deg, #ffffff, #f4f8ff);
border-color: rgba(0, 83, 156, .22);
border-top-color: rgba(215, 171, 23, .72);
box-shadow: 0 14px 30px rgba(13, 28, 54, .10);
}
[data-theme="light"] .dashboard-search-identity,
[data-theme="light"] .dashboard-search-info div {
border-color: rgba(0, 83, 156, .14);
}
[data-theme="light"] .dashboard-search-copy h4,
[data-theme="light"] .dashboard-search-info div,
[data-theme="light"] .dashboard-search-info strong {
color: var(--text);
}
[data-theme="light"] .dashboard-search-copy>strong,
[data-theme="light"] .dashboard-search-info span,
[data-theme="light"] .dashboard-search-avatar span {
color: #8a6000;
}
[data-theme="light"] .dashboard-search-copy p {
color: var(--text-muted);
}
[data-theme="light"] .dashboard-search-empty {
background: rgba(0, 83, 156, .05);
border-color: var(--border);
color: var(--text-muted);
}
[data-theme="light"] .dashboard-side-search {
background: #ffffff;
border-color: rgba(0, 83, 156, .16);
}
[data-theme="light"] .dashboard-highlight-tile {
background: linear-gradient(180deg, #ffffff, #f4f8ff);
border-color: rgba(0, 83, 156, .18);
box-shadow: 0 10px 24px rgba(13, 28, 54, .08);
}
[data-theme="light"] .dashboard-highlight-tile-head {
border-bottom-color: rgba(0, 83, 156, .12);
color: #1268ad;
}
[data-theme="light"] .dashboard-highlight-oficiais .dashboard-highlight-tile-head {
color: #9b6b00;
}
[data-theme="light"] .dashboard-highlight-empresarios .dashboard-highlight-tile-head {
color: #426487;
}
[data-theme="light"] .dashboard-highlight-avatar {
background: rgba(0, 83, 156, .08);
border-color: rgba(0, 83, 156, .20);
}
[data-theme="light"] .dashboard-highlight-oficiais .dashboard-highlight-avatar {
background: rgba(215, 171, 23, .14);
border-color: rgba(159, 110, 0, .26);
}
[data-theme="light"] .dashboard-highlight-person small {
color: #1268ad;
background: rgba(0, 83, 156, .08);
border-color: rgba(0, 83, 156, .20);
}
[data-theme="light"] .dashboard-highlight-oficiais .dashboard-highlight-person small {
color: #8a6000;
background: rgba(215, 171, 23, .14);
border-color: rgba(159, 110, 0, .28);
}
[data-theme="light"] .aviso-dept {
color: color-mix(in srgb, var(--dept-color) 72%, var(--text));
}
[data-theme="light"] .aviso-links a {
background: color-mix(in srgb, var(--dept-color) 12%, #ffffff);
color: var(--text);
}
[data-theme="light"] .question-wizard-panel {
background: rgba(0, 83, 156, .035);
}
[data-theme="light"] .question-wizard-step-index {
background: rgba(0, 83, 156, .10);
}
[data-theme="light"] .auth-card {
background: var(--overlay-bg);
color: var(--text);
}
[data-theme="light"] .pin-btn {
background: var(--card-bg2);
color: var(--text);
}
/* =====================================================
RESPONSIVO - MOBILE (≤900px)
===================================================== */
@media (max-width: 900px) {
/* Topnav mobile: logo + hambúrguer */
.sidebar {
padding-right: 60px;
}
.sidebar-nav {
display: none;
}
.sidebar-nav.open {
display: flex;
flex-direction: column;
}
body.mobile-menu-open #app-sidebar-shell {
z-index: 130;
}
.mobile-nav-backdrop {
display: none;
position: fixed;
top: var(--topbar-h);
left: 0;
right: 0;
bottom: 0;
border: 0;
background: rgba(2, 8, 18, .76);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 120;
}
.sidebar.menu-open .mobile-nav-backdrop {
display: block;
}
/* Topnav menu aberto: overlay vertical */
.sidebar.menu-open .sidebar-nav {
display: flex;
flex-direction: column;
position: fixed;
top: calc(var(--topbar-h) + 8px);
left: 12px;
bottom: 12px;
width: min(340px, calc(100vw - 24px));
background: #050c1a;
border: 1px solid var(--border-strong);
border-radius: 22px;
overflow-y: auto;
padding: 12px;
z-index: 130;
animation: slideInLeft .2s ease;
box-shadow: var(--shadow-lg);
}
.sidebar.menu-open .sidebar-nav .nav-item,
.sidebar.menu-open .sidebar-nav .nav-item-summary,
.sidebar.menu-open .sidebar-nav .nav-group-docs-btn {
padding: 12px 14px;
height: auto;
width: 100%;
border-radius: 14px;
margin: 0;
border-bottom: none;
}
.sidebar.menu-open .sidebar-nav .nav-group,
.sidebar.menu-open .sidebar-nav .nav-group-docs {
display: block;
width: 100%;
margin: 0;
}
.sidebar.menu-open .sidebar-nav .nav-submenu,
.sidebar.menu-open .sidebar-nav .nav-submenu-wide,
.sidebar.menu-open .sidebar-nav .nav-submenu-flat {
position: static;
min-width: unset;
max-height: none;
overflow-y: visible;
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: none;
padding: 8px;
background: rgba(22, 118, 202, .05);
margin: 6px 0 10px;
}
.sidebar.menu-open .sidebar-nav .nav-group[open]>.nav-submenu,
.sidebar.menu-open .sidebar-nav .nav-group-docs.open>.nav-submenu-flat {
display: flex;
}
.sidebar.menu-open .sidebar-nav .nav-subitem,
.sidebar.menu-open .sidebar-nav .nav-subitem-flat {
white-space: normal;
border-radius: 12px;
}
/* Mostrar hambúrguer em mobile */
.topnav-mobile-toggle {
display: flex;
}
/* Topbar actions simplificadas */
.topbar-action-shell {
display: none;
}
/* Content layout */
.content-area {
--content-inline-pad: 14px;
--content-top-pad: 14px;
flex-direction: column;
padding: var(--content-top-pad) var(--content-inline-pad) 14px;
}
.page-back-link-wrap {
padding-inline: 14px;
}
.content-right {
width: 100%;
}
.fields-row {
grid-template-columns: 1fr;
}
.dept-grid {
grid-template-columns: 1fr;
}
.perfil-hero {
flex-direction: column;
}
.form-wizard-steps,
.form-wizard-grid-2,
.form-wizard-grid-3,
.question-builder-grid {
grid-template-columns: 1fr;
}
.form-wizard-actions {
flex-direction: column;
align-items: stretch;
}
.form-wizard-actions-main {
width: 100%;
justify-content: stretch;
}
.form-wizard-actions-main>* {
flex: 1 1 auto;
}
}
@media (max-width: 600px) {
.avisos-grid {
grid-template-columns: 1fr;
padding: 14px;
}
.avisos-carousel {
padding: 14px 14px 10px;
}
.avisos-carousel .aviso-card {
flex-basis: 100%;
}
.aviso-body {
grid-template-columns: 42px minmax(0, 1fr) 62px;
}
.aviso-author {
width: 72px;
height: 96px;
}
.content-area {
--content-inline-pad: 10px;
--content-top-pad: 10px;
padding: var(--content-top-pad) var(--content-inline-pad) 10px;
}
.page-back-link-wrap {
padding-inline: 10px;
}
.modal {
width: 100%;
}
.search-modal {
width: 100%;
border-radius: 0;
}
.sidebar-logo-copy {
display: none;
}
.question-wizard-step {
min-width: 96px;
}
}
/* Hambúrguer - posicionamento base */
.topnav-mobile-toggle {
display: none;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
background: rgba(22, 118, 202, .08);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(255, 255, 255, .7);
z-index: 115;
font-size: 1rem;
transition: background var(--transition), color var(--transition);
}
.topnav-mobile-toggle:hover {
background: rgba(22, 118, 202, .15);
color: #fff;
}
.mobile-nav-backdrop {
display: none;
}
body.mobile-menu-open {
overflow: hidden;
}
/* =====================================================
FORM WIZARD
===================================================== */
.modal-sm-wizard-box {
max-height: min(88vh, 920px);
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal-sm-wizard-box form {
min-height: 0;
flex: 1;
display: flex;
flex-direction: column;
}
.wizard-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 4px;
}
.question-wizard-steps {
flex: 0 0 auto;
max-height: 132px;
overflow-y: auto;
}
.modal-sm .form-control,
.modal-sm textarea,
.modal-sm select {
max-width: 100%;
}
.form-wizard {
display: flex;
flex-direction: column;
gap: 18px;
}
.form-wizard-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.form-wizard-step {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 16px;
background: rgba(22, 118, 202, .05);
color: var(--text-muted);
text-align: left;
cursor: pointer;
transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}
.form-wizard-step:hover {
border-color: var(--border-strong);
color: var(--text);
}
.form-wizard-step.is-active,
.form-wizard-step.is-done {
border-color: rgba(74, 174, 232, .28);
background: rgba(22, 118, 202, .12);
color: var(--text);
}
.form-wizard-step.is-active {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}
.form-wizard-step-number {
width: 28px;
height: 28px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .06);
border: 1px solid var(--border);
color: var(--text);
font-size: .78rem;
font-weight: 800;
flex-shrink: 0;
}
.form-wizard-step-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.form-wizard-step-copy strong {
font-size: .86rem;
}
.form-wizard-step-copy span {
font-size: .74rem;
color: var(--text-muted);
line-height: 1.35;
}
.form-wizard-panel {
display: none;
}
.form-wizard-panel.is-active {
display: block;
animation: modalSmIn .16s ease;
}
.form-wizard-grid-2,
.form-wizard-grid-3,
.question-builder-grid {
display: grid;
gap: 12px;
}
.form-wizard-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-wizard-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-wizard-note {
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(22, 118, 202, .05);
color: var(--text-muted);
font-size: .8rem;
line-height: 1.45;
}
.question-builder-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.question-builder-card {
border: 1px solid var(--border);
border-radius: 18px;
padding: 14px;
background: rgba(8, 25, 46, .72);
}
.question-builder-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.question-builder-title {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.question-builder-badge {
width: 32px;
height: 32px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(22, 118, 202, .16);
color: var(--green-light);
font-weight: 800;
flex-shrink: 0;
}
.question-builder-title strong {
display: block;
font-size: .9rem;
}
.question-builder-title span {
display: block;
font-size: .74rem;
color: var(--text-muted);
}
.question-builder-grid {
grid-template-columns: minmax(0, 1.8fr) minmax(220px, 1fr);
}
.question-builder-options {
margin-top: 12px;
}
.form-wizard-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.form-wizard-actions-main {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.question-wizard-steps {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 2px;
}
.question-wizard-step {
min-width: 116px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid var(--border);
background: rgba(22, 118, 202, .05);
color: var(--text-muted);
cursor: pointer;
transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.question-wizard-step:hover {
color: var(--text);
}
.question-wizard-step.is-active,
.question-wizard-step.is-done {
border-color: rgba(74, 174, 232, .28);
background: rgba(22, 118, 202, .12);
color: var(--text);
}
.question-wizard-step-index {
width: 24px;
height: 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .08);
font-size: .74rem;
font-weight: 800;
flex-shrink: 0;
}
.question-wizard-step-label {
min-width: 0;
font-size: .76rem;
line-height: 1.35;
white-space: normal;
}
.question-wizard-panel {
display: none;
border: 1px solid var(--border);
border-radius: 18px;
padding: 16px;
background: rgba(8, 25, 46, .62);
}
.question-wizard-panel.is-active {
display: block;
animation: modalSmIn .16s ease;
}
.question-wizard-kicker {
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
}
.question-wizard-title {
font-size: 1rem;
font-weight: 800;
color: var(--text);
margin-bottom: 6px;
}
.question-wizard-help {
font-size: .8rem;
color: var(--text-muted);
margin-bottom: 14px;
}
.wizard-step-counter {
margin: -6px 0 14px;
font-size: .78rem;
color: var(--text-muted);
}
/* =====================================================
REGISTO / ESQUECI
===================================================== */
.register-step.done {
background: var(--green);
}
.register-step.active {
background: var(--green-light);
}
/* =====================================================
DASHBOARD HERO
===================================================== */
.dashboard-hero {
position: relative;
overflow: hidden;
margin: 0;
padding: 36px 32px 32px;
background:
repeating-linear-gradient(45deg, rgba(121, 181, 255, .04) 0px, rgba(121, 181, 255, .04) 1px, transparent 0px, transparent 50%),
radial-gradient(circle at top left, rgba(121, 181, 255, .18), transparent 28%),
radial-gradient(circle at bottom right, rgba(47, 124, 255, .16), transparent 34%),
linear-gradient(135deg, #07111d 0%, #0b2340 34%, #123a6a 72%, #1a4f97 100%);
background-size: 20px 20px, auto, auto, auto;
border-bottom: 1px solid var(--border);
}
/* Grade decorativa */
.dashboard-hero::before {
display: none;
}
/* Glow de canto */
.dashboard-hero::after {
content: '';
position: absolute;
bottom: -60px;
right: -60px;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(22, 118, 202, .10) 0%, transparent 70%);
pointer-events: none;
}
.dashboard-hero-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 24px;
width: 100%;
max-width: none;
}
.dashboard-hero-badge {
flex-shrink: 0;
width: 78px;
height: 78px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 22px;
background: rgba(6, 18, 33, .42);
border: 1px solid rgba(121, 181, 255, .18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 10px rgba(121, 181, 255, .08), 0 0 24px rgba(47, 124, 255, .18);
}
.dashboard-hero-badge img {
width: 46px;
height: 46px;
object-fit: contain;
filter: drop-shadow(0 0 18px rgba(121, 181, 255, .3));
}
.dashboard-hero-copy {
flex: 0 1 560px;
min-width: 0;
}
.dashboard-hero-kicker {
font-size: .65rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.dashboard-hero-kicker::before {
content: '';
display: inline-block;
width: 20px;
height: 2px;
background: var(--green);
border-radius: 1px;
}
.dashboard-hero-title {
font-family: 'Rajdhani', sans-serif;
font-size: clamp(2rem, 3.4vw, 3rem);
font-weight: 700;
color: #eef5ff;
letter-spacing: -.01em;
line-height: 1.1;
margin-bottom: 8px;
}
.dashboard-hero-title span {
color: #8fc9ff;
}
.dashboard-hero-sub {
font-size: .84rem;
color: rgba(234, 243, 255, .78);
line-height: 1.55;
max-width: 520px;
}
.dashboard-hero-meta {
display: flex;
align-items: center;
gap: 20px;
margin-top: 18px;
flex-wrap: wrap;
}
.dashboard-hero-stat {
display: flex;
align-items: center;
gap: 6px;
font-size: .76rem;
color: rgba(234, 243, 255, .72);
}
.dashboard-hero-stat i,
.dashboard-hero-stat svg {
color: #8fc9ff;
width: 14px;
height: 14px;
font-size: 14px;
}
.dashboard-hero-stat strong {
color: #eef5ff;
font-weight: 700;
margin-right: 2px;
}
.dashboard-search-box {
height: 50px;
display: flex;
align-items: center;
gap: 0;
padding: 0 0 0 16px;
border-radius: 10px;
background: #111927;
border: 1px solid rgba(94, 118, 151, .36);
box-shadow: none;
overflow: hidden;
}
.dashboard-search-box input {
min-width: 0;
flex: 1;
border: 0;
outline: 0;
background: transparent;
color: #eef5ff;
font-weight: 800;
font-size: .9rem;
}
.dashboard-search-box input::placeholder {
color: rgba(180, 198, 221, .62);
opacity: 1;
}
.dashboard-search-box button {
width: 54px;
height: 50px;
border: 0;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: #d7ab17;
color: #06101f;
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.dashboard-search-box button svg {
width: 17px;
height: 17px;
display: block;
}
.dashboard-search-results {
position: static;
width: 100%;
max-height: 430px;
overflow-y: auto;
z-index: 20;
margin-top: 0;
scrollbar-width: thin;
}
.dashboard-search-results:empty {
display: none;
}
.dashboard-search-card {
display: grid;
grid-template-columns: 1fr;
gap: 0;
overflow: hidden;
padding: 0;
border-radius: 12px;
background:
linear-gradient(135deg, rgba(17, 37, 68, .96), rgba(8, 17, 32, .98));
border: 1px solid rgba(65, 114, 170, .55);
border-top-color: rgba(215, 171, 23, .85);
box-shadow: 0 18px 38px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .03);
}
.dashboard-search-identity {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 20px 18px;
border-bottom: 1px solid rgba(92, 119, 153, .26);
}
.dashboard-search-copy {
min-width: 0;
}
.dashboard-search-copy h4 {
margin: 8px 0 8px;
color: #f5f7fb;
font-size: clamp(1.15rem, 4.6vw, 1.45rem);
font-weight: 900;
line-height: 1;
overflow-wrap: anywhere;
}
.dashboard-search-copy>strong {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
padding: 5px 9px;
border: 1px solid rgba(215, 171, 23, .54);
border-radius: 7px;
color: #d7ab17;
background: rgba(215, 171, 23, .1);
font-size: .78rem;
line-height: 1.2;
font-weight: 900;
overflow-wrap: anywhere;
}
.dashboard-search-copy p {
margin: 10px 0 0;
color: rgba(139, 158, 188, .82);
font-size: .78rem;
font-weight: 800;
}
.dashboard-search-info {
display: grid;
gap: 0;
padding: 10px 18px 0;
}
.dashboard-search-info div {
display: grid;
grid-template-columns: minmax(92px, 1fr) minmax(0, auto);
align-items: center;
gap: 10px;
min-height: 42px;
border-bottom: 1px solid rgba(92, 119, 153, .2);
color: rgba(147, 169, 199, .9);
font-size: .8rem;
font-weight: 800;
}
.dashboard-search-info strong {
display: inline-flex;
align-items: center;
min-width: 0;
color: rgba(134, 158, 190, .88);
font-weight: 800;
line-height: 1.2;
}
.dashboard-search-info span {
display: inline-flex;
align-items: center;
justify-self: end;
padding: 0;
border-radius: 0;
background: transparent;
color: #f1c318;
font-family: inherit;
max-width: 100%;
font-size: .8rem;
font-weight: 900;
line-height: 1.2;
text-align: right;
}
.dashboard-search-info span.is-active {
color: #53df61;
background: rgba(34, 120, 69, .36);
border: 1px solid rgba(83, 223, 97, .22);
}
.dashboard-search-info span.is-inactive {
color: #ff8d8d;
background: rgba(139, 41, 41, .36);
border: 1px solid rgba(255, 141, 141, .2);
}
.dashboard-search-avatar {
width: 86px;
height: 86px;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
border: 2px solid rgba(215, 171, 23, .34);
border-radius: 12px;
background: rgba(215, 171, 23, .1);
}
.dashboard-search-avatar img {
width: 70px;
height: 70px;
object-fit: contain;
object-position: center;
image-rendering: pixelated;
}
.dashboard-search-avatar span {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
color: #d7ab17;
font-size: .56rem;
font-weight: 900;
letter-spacing: .08em;
text-align: center;
text-transform: uppercase;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard-search-empty {
padding: 10px 14px;
border-radius: 8px;
background: rgba(3, 8, 15, .78);
border: 1px solid rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .72);
font-size: .82rem;
}
.dashboard-ad-board {
position: relative;
margin-bottom: 0;
border: 0;
border-radius: 8px;
background: #070d17;
box-shadow: var(--shadow);
overflow: hidden;
}
html[data-theme] .dashboard-hero-inner {
flex-wrap: nowrap;
}
.dashboard-hero .dashboard-ad-board {
flex: 1 1 540px;
width: min(100%, 660px);
height: clamp(184px, 17vw, 236px);
min-height: 0;
max-height: none;
margin: 0 0 0 auto;
align-self: center;
background: rgba(4, 8, 14, .88);
}
.dashboard-ad-slides,
.dashboard-ad-slide,
.dashboard-ad-banner,
.dashboard-ad-empty {
width: 100%;
height: 100%;
}
.dashboard-ad-slides {
position: relative;
}
.dashboard-ad-slide {
position: absolute;
inset: 0;
display: block;
color: #fff;
text-decoration: none;
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
}
.dashboard-ad-slide.is-active {
opacity: 1;
pointer-events: auto;
}
.dashboard-ad-banner {
display: block;
object-fit: cover;
}
.dashboard-ad-fallback {
width: 100%;
height: 100%;
display: grid;
place-content: center;
gap: 10px;
padding: 28px;
text-align: center;
background:
linear-gradient(180deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, .62)),
linear-gradient(135deg, #1f3f6a, #0d1626);
}
.dashboard-ad-fallback strong {
color: #fff;
font-size: clamp(1.4rem, 3.4vw, 2.4rem);
font-weight: 950;
line-height: 1;
text-transform: uppercase;
}
.dashboard-ad-fallback span {
color: rgba(255, 255, 255, .88);
font-size: .95rem;
font-weight: 800;
}
.dashboard-ad-dots {
position: absolute;
left: 22px;
right: 22px;
bottom: 16px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
pointer-events: none;
}
.dashboard-ad-dots button {
width: 30px;
height: 4px;
border: 0;
border-radius: 99px;
background: rgba(255, 255, 255, .50);
box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
cursor: pointer;
pointer-events: auto;
}
.dashboard-ad-dots button.is-active {
background: #fff;
}
.dashboard-ad-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.dashboard-ad-head span,
.dashboard-ad-modal-head span {
display: block;
margin-bottom: 3px;
color: var(--green-light);
font-size: .68rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
.dashboard-ad-head h3 {
margin: 0;
color: var(--text);
font-size: .92rem;
font-weight: 900;
}
.dashboard-ad-manage {
flex: 0 0 auto;
white-space: nowrap;
}
.dashboard-ad-list {
display: grid;
gap: 10px;
padding: 12px;
}
.dashboard-hero .dashboard-ad-list {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
}
.dashboard-ad-card {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
column-gap: 12px;
min-height: 112px;
padding: 12px;
border: 1px solid rgba(69, 176, 255, .18);
border-radius: 8px;
background: linear-gradient(135deg, rgba(18, 34, 58, .94), rgba(5, 11, 22, .96));
color: var(--text);
text-decoration: none;
overflow: hidden;
}
.dashboard-hero .dashboard-ad-card {
min-height: 126px;
}
.dashboard-ad-card.is-clickable:hover {
transform: translateY(-1px);
border-color: rgba(81, 191, 113, .36);
box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}
.dashboard-ad-image {
grid-row: 1 / span 4;
width: 58px;
height: 82px;
border-radius: 7px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .06);
}
.dashboard-ad-image-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--green-light);
font-size: 1.15rem;
}
.dashboard-ad-label {
align-self: start;
width: fit-content;
margin-bottom: 3px;
padding: 3px 7px;
border-radius: 999px;
background: rgba(81, 191, 113, .12);
color: var(--green-light);
font-size: .62rem;
font-weight: 900;
text-transform: uppercase;
}
.dashboard-ad-card strong {
min-width: 0;
color: var(--text);
font-size: .94rem;
line-height: 1.2;
}
.dashboard-ad-card p {
margin: 5px 0 8px;
color: var(--text-muted);
font-size: .76rem;
line-height: 1.35;
}
.dashboard-ad-card small {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, .54);
font-size: .68rem;
font-weight: 800;
}
.dashboard-ad-empty {
display: grid;
justify-items: center;
gap: 6px;
padding: 22px 16px;
text-align: center;
color: var(--text-muted);
}
.dashboard-ad-empty i {
color: var(--green-light);
font-size: 1.35rem;
}
.dashboard-ad-empty strong {
color: var(--text);
font-size: .86rem;
}
.dashboard-ad-empty span {
font-size: .75rem;
line-height: 1.35;
}
.dashboard-hero .dashboard-ad-empty {
flex: 1;
min-height: 142px;
}
.dashboard-ad-modal {
max-height: min(88vh, 900px);
overflow-y: auto;
}
.dashboard-ad-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.dashboard-ad-modal-head .modal-sm-title {
margin: 0;
}
.dashboard-ad-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.dashboard-ad-toggles {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 14px;
}
.dashboard-ad-admin {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.dashboard-ad-admin-title {
margin-bottom: 10px;
color: var(--text);
font-size: .78rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .08em;
}
.dashboard-ad-admin-list {
display: grid;
gap: 8px;
}
.dashboard-ad-admin-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: stretch;
}
.dashboard-ad-admin-item>button {
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--overlay-bg2);
color: var(--text);
text-align: left;
cursor: pointer;
}
.dashboard-ad-admin-item>button:hover {
border-color: rgba(81, 191, 113, .38);
}
.dashboard-ad-admin-item strong,
.dashboard-ad-admin-item span {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-ad-admin-item span {
margin-top: 3px;
color: var(--text-muted);
font-size: .72rem;
font-weight: 800;
}
.dashboard-ad-admin-item form {
display: flex;
align-items: stretch;
}
@media (max-width: 1180px) {
html[data-theme] .dashboard-hero-inner {
flex-wrap: wrap;
}
.dashboard-hero .dashboard-ad-board {
flex-basis: 100%;
width: 100%;
max-width: none;
margin-left: 0;
}
}
@media (max-width: 720px) {
.dashboard-hero .dashboard-ad-board {
flex-basis: 100%;
width: 100%;
max-height: none;
margin-left: 0;
}
.dashboard-ad-form-grid,
.dashboard-ad-admin-item {
grid-template-columns: 1fr;
}
.dashboard-ad-admin-item form .btn-danger-soft {
width: 100%;
justify-content: center;
}
}
.dashboard-side-search {
padding: 18px;
border: 1px solid var(--border);
border-radius: 3px;
background: #050b16;
box-shadow: var(--shadow);
overflow: hidden;
}
.dashboard-side-search-title {
margin: 0;
padding: 20px 18px;
border-bottom: 1px solid var(--border);
color: var(--text);
font-size: .84rem;
font-weight: 900;
text-align: center;
text-transform: uppercase;
letter-spacing: .28em;
}
.dashboard-side-search .dashboard-search-box {
width: auto;
margin: 0;
}
.dashboard-side-search .dashboard-search-results {
margin-top: 30px;
max-height: none;
}
.dashboard-side-search .dashboard-search-card {
grid-template-columns: 1fr;
}
.dashboard-side-stats {
margin-top: 18px;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: var(--card-bg);
box-shadow: var(--shadow);
}
.dashboard-side-stats-title {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
color: var(--text);
font-size: .82rem;
font-weight: 900;
text-align: center;
text-transform: uppercase;
letter-spacing: .08em;
}
.dashboard-side-stat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid rgba(255, 255, 255, .05);
color: var(--text);
}
.dashboard-side-stat:last-child {
border-bottom: 0;
}
.dashboard-side-stat:hover {
background: rgba(22, 118, 202, .07);
}
.dashboard-side-stat span {
color: var(--text-muted);
font-size: .75rem;
font-weight: 800;
text-transform: uppercase;
}
.dashboard-side-stat strong {
color: var(--green-light);
font-size: 1.05rem;
}
.dashboard-weekly-highlights-bottom {
padding: 0 var(--content-inline-pad, 24px) 28px;
}
.dashboard-weekly-highlights-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
.dashboard-weekly-highlights-head h3 {
margin: 0;
color: var(--text);
font-size: 1rem;
font-weight: 900;
}
.dashboard-weekly-highlights-head p {
margin: 0;
color: var(--text-muted);
font-size: .74rem;
font-weight: 800;
}
.dashboard-weekly-highlights-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.dashboard-highlight-tile {
min-height: 148px;
overflow: hidden;
border: 1px solid rgba(65, 114, 170, .5);
border-radius: 10px;
background: rgba(7, 15, 29, .86);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.dashboard-highlight-tile.is-empty {
opacity: .62;
}
.dashboard-highlight-tile-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 45px;
padding: 0 16px;
border-bottom: 1px solid rgba(92, 119, 153, .16);
color: rgba(83, 169, 236, .94);
font-size: .68rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
.dashboard-highlight-tile-head span::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 12px currentColor;
}
.dashboard-highlight-tile-head em {
padding: 4px 9px;
border: 1px solid rgba(83, 169, 236, .24);
border-radius: 999px;
background: rgba(83, 169, 236, .08);
color: inherit;
font-size: .58rem;
font-style: normal;
line-height: 1;
}
.dashboard-highlight-oficiais .dashboard-highlight-tile-head {
color: #d7ab17;
}
.dashboard-highlight-oficiais .dashboard-highlight-tile-head em {
border-color: rgba(215, 171, 23, .34);
background: rgba(215, 171, 23, .1);
}
.dashboard-highlight-empresarios .dashboard-highlight-tile-head {
color: rgba(107, 133, 163, .7);
}
.dashboard-highlight-empresarios .dashboard-highlight-tile-head em {
border-color: rgba(107, 133, 163, .18);
background: rgba(107, 133, 163, .06);
}
.dashboard-highlight-person {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 18px 16px;
}
.dashboard-highlight-avatar {
width: 66px;
height: 66px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid rgba(83, 169, 236, .28);
border-radius: 9px;
background: rgba(83, 169, 236, .14);
}
.dashboard-highlight-oficiais .dashboard-highlight-avatar {
border-color: rgba(215, 171, 23, .36);
background: rgba(215, 171, 23, .14);
}
.dashboard-highlight-avatar img {
width: 58px;
height: 58px;
object-fit: contain;
object-position: center;
image-rendering: pixelated;
}
.dashboard-highlight-person strong {
display: block;
color: var(--text);
font-size: .84rem;
font-weight: 900;
line-height: 1.15;
overflow-wrap: anywhere;
}
.dashboard-highlight-person span {
display: block;
margin-top: 3px;
color: var(--text-muted);
font-size: .72rem;
line-height: 1.25;
}
.dashboard-highlight-person small {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 8px;
padding: 4px 9px;
border: 1px solid rgba(83, 169, 236, .28);
border-radius: 999px;
color: #60b5f4;
background: rgba(83, 169, 236, .08);
font-size: .62rem;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
}
.dashboard-highlight-oficiais .dashboard-highlight-person small {
border-color: rgba(215, 171, 23, .36);
color: #d7ab17;
background: rgba(215, 171, 23, .1);
}
.dashboard-highlight-tile>p {
margin: 0;
padding: 34px 16px 0;
color: var(--text-muted);
font-size: .78rem;
font-style: italic;
}
.app-footer {
border-top: 1px solid rgba(64, 141, 206, .42);
background: #0d1b30;
}
.app-footer-cta {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
padding: 26px 28px;
background: linear-gradient(90deg, #0c1d33, #071b20);
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.app-footer-badge {
width: 50px;
height: 50px;
border-radius: 8px;
display: grid;
place-items: center;
background: rgba(212, 167, 18, .08);
border: 1px solid rgba(212, 167, 18, .42);
}
.app-footer-badge img {
width: 32px;
height: 32px;
object-fit: contain;
}
.app-footer-cta strong {
display: block;
color: #f5f7fb;
font-size: .95rem;
font-weight: 900;
}
.app-footer-cta span {
display: block;
margin-top: 4px;
color: #d5a716;
font-size: .72rem;
}
.app-footer-socials {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.app-footer-socials a {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(213, 167, 22, .34);
border-radius: 8px;
background: rgba(213, 167, 22, .12);
color: #f1c318;
font-size: 1rem;
transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.app-footer-socials svg {
width: 18px;
height: 18px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.app-footer-socials a[aria-label="Twitter"] svg,
.app-footer-socials a[aria-label="Discord"] svg {
fill: currentColor;
stroke: none;
}
.app-footer-socials a:hover {
border-color: rgba(241, 195, 24, .72);
background: rgba(241, 195, 24, .2);
color: #fff3b0;
transform: translateY(-1px);
}
.social-fan {
position: relative;
width: 58px;
height: 58px;
justify-content: center;
overflow: visible;
isolation: isolate;
justify-self: end;
margin-right: 24px;
}
.social-fan::after {
content: '';
position: absolute;
left: -118px;
top: -24px;
width: 186px;
height: 128px;
background: transparent;
pointer-events: auto;
z-index: 0;
}
.social-fan-trigger {
position: relative;
z-index: 3;
width: 45px;
height: 45px;
display: inline-grid;
place-items: center;
border: 1px solid rgba(213, 167, 22, .42);
border-radius: 14px;
background: rgba(213, 167, 22, .12);
box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
cursor: pointer;
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.social-fan-trigger img {
width: 32px;
height: 32px;
object-fit: contain;
image-rendering: pixelated;
}
.social-fan-trigger:hover,
.social-fan:focus-within .social-fan-trigger {
border-color: rgba(241, 195, 24, .76);
background: rgba(241, 195, 24, .18);
transform: translateY(-1px);
}
.social-fan-link {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
margin: -19px 0 0 -19px;
opacity: 0;
pointer-events: none;
transform: translate(0, 0) scale(.72);
transition: opacity .18s ease, transform .22s ease, background .16s ease, border-color .16s ease;
}
.social-fan-link::before {
content: '';
position: absolute;
left: var(--line-left, 100%);
top: var(--line-top, 50%);
width: var(--line-w, 52px);
height: 2px;
background: rgba(213, 167, 22, .45);
transform-origin: left center;
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, height .22s ease;
}
.social-fan-link::before {
z-index: -1;
transform: translate(var(--line-tx, -2px), var(--line-ty, -50%)) rotate(var(--line-a, 0deg));
}
.social-fan:hover .social-fan-link,
.social-fan:focus-within .social-fan-link {
opacity: 1;
pointer-events: auto;
transform: translate(var(--x), var(--y)) scale(1);
}
.social-fan:hover .social-fan-link::before,
.social-fan:focus-within .social-fan-link::before {
opacity: 1;
}
.social-fan-instagram {
color: #fff;
background: linear-gradient(135deg, #7c3aed, #ec4899, #f59e0b);
border-color: rgba(255, 255, 255, .22);
}
.social-fan-tiktok {
color: #fff;
background: #05070b;
border-color: rgba(255, 255, 255, .20);
}
.social-fan-telegram {
color: #fff;
background: #2aa6df;
border-color: rgba(255, 255, 255, .22);
}
.social-fan-discord {
color: #fff;
background: #5865f2;
border-color: rgba(255, 255, 255, .22);
}
.social-fan-tiktok svg,
.social-fan-telegram svg,
.social-fan-discord svg {
fill: currentColor;
stroke: none;
}
.social-fan-link:hover {
border-color: rgba(255, 255, 255, .42);
filter: brightness(1.08);
transform: translate(var(--x), var(--y)) scale(1.08);
}
.app-footer-links {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 26px;
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding: 28px;
text-align: center;
}
.app-footer-links h4 {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
margin: 0 0 16px;
padding-left: 0;
color: #d5a716;
font-size: .68rem;
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
}
.app-footer-links h4::before {
content: '';
position: static;
width: 3px;
height: 10px;
border-radius: 999px;
background: #d5a716;
}
.app-footer-links a {
display: block;
color: #6f82a0;
font-size: .78rem;
margin-top: 13px;
}
.app-footer-links a:hover {
color: #d8e7ff;
}
@media (max-width: 600px) {
.dashboard-hero {
padding: 24px 16px 20px;
}
.dashboard-hero-inner {
gap: 14px;
flex-wrap: wrap;
}
.dashboard-hero-badge {
width: 58px;
height: 58px;
border-radius: 18px;
}
.dashboard-hero-badge img {
width: 36px;
height: 36px;
}
.dashboard-hero-title {
font-size: 1.7rem;
}
.dashboard-hero-meta {
gap: 12px;
}
.dashboard-side-search {
padding: 18px;
}
.dashboard-search-card {
grid-template-columns: 1fr;
}
.dashboard-search-identity {
grid-template-columns: 1fr;
gap: 14px;
padding: 22px 18px;
}
.dashboard-search-avatar {
margin: 0 auto;
}
.dashboard-search-copy {
text-align: center;
}
.dashboard-search-info {
padding: 10px 18px 0;
}
.dashboard-search-info div {
grid-template-columns: 1fr;
gap: 4px;
padding: 10px 0;
}
.dashboard-search-info span {
justify-self: start;
text-align: left;
}
.dashboard-weekly-highlights-bottom {
padding-inline: 14px;
}
.dashboard-weekly-highlights-grid {
grid-template-columns: 1fr;
}
.app-footer-cta {
grid-template-columns: auto 1fr;
padding: 20px 16px;
}
.app-footer-socials {
grid-column: 1 / -1;
justify-content: flex-start;
justify-self: start;
}
.app-footer-links {
grid-template-columns: 1fr 1fr;
padding: 22px 16px;
}
}
/* =====================================================
LOGIN RESPONSIVO
===================================================== */
@media (max-width: 900px) {
.login-wrapper {
flex-direction: column;
}
.login-left {
width: 100%;
min-height: 260px;
padding: 28px 16px;
}
.login-right {
width: 100%;
padding: 28px 20px 40px;
border-left: none;
border-top: 1px solid var(--border);
}
.login-hero {
padding: 0;
max-width: 100%;
}
.login-hero-headline {
font-size: 2rem;
}
.login-form-box {
max-width: 100%;
}
}
@media (max-width: 480px) {
.login-left {
min-height: 200px;
}
.login-hero-headline {
font-size: 1.6rem;
}
}
/* =====================================================
LOGIN - Logo simples (registro.php)
===================================================== */
.login-logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 40px;
position: relative;
z-index: 1;
text-align: center;
}
.login-logo img {
width: 80px;
height: 80px;
object-fit: contain;
filter: drop-shadow(0 0 24px rgba(22, 118, 202, .45));
}
.login-logo span {
font-family: 'Rajdhani', sans-serif;
font-size: 1.4rem;
font-weight: 700;
color: #fff;
letter-spacing: .04em;
}
/* =====================================================
AUTH PAGE (esqueci.php / recuperar senha)
===================================================== */
.auth-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
background:
radial-gradient(ellipse at 20% 80%, rgba(22, 118, 202, .18) 0%, transparent 55%),
radial-gradient(ellipse at 80% 20%, rgba(0, 83, 156, .12) 0%, transparent 50%),
linear-gradient(160deg, #020612 0%, #050e1a 40%, #071820 100%);
}
.auth-card {
background: #060e1a;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
padding: 36px 32px;
width: 100%;
max-width: 420px;
box-shadow: var(--shadow-lg);
}
.auth-card h2 {
font-size: 1.35rem;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
}
.auth-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--green-bg);
border: 2px solid var(--border-strong);
font-size: 1.6rem;
margin: 0 auto 16px;
}
@media (max-width: 600px) {
.auth-card {
padding: 24px 18px;
}
}
/* =====================================================
MODAL-SM (overlay leve p/ formulários rápidos)
Usado por: academia, departamentos, loja, corregedoria
===================================================== */
.modal-sm {
display: none;
position: fixed;
inset: 0;
z-index: 9990;
background: rgba(0, 0, 0, .60);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
align-items: flex-start;
justify-content: center;
padding: 24px 16px;
overflow-y: auto;
overscroll-behavior: contain;
}
.modal-sm.open {
display: flex;
}
.modal-sm-box {
background: var(--card-bg);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
padding: 24px 22px;
width: min(100%, var(--modal-width, 480px));
max-width: calc(100vw - 32px);
max-height: calc(100dvh - 48px);
overflow-y: auto;
box-shadow: var(--shadow-lg);
position: relative;
animation: modalSmIn .18s ease;
margin: auto 0;
min-height: 0;
}
@keyframes modalSmIn {
from {
opacity: 0;
transform: translateY(12px) scale(.98);
}
to {
opacity: 1;
transform: none;
}
}
.modal-sm-title {
font-size: 1rem;
font-weight: 800;
color: var(--text);
margin: 0 0 18px;
letter-spacing: -.01em;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.modal-sm-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
/* =====================================================
ACADEMIA / DEPARTAMENTOS - hero banner
===================================================== */
.academy-hero {
padding: 0;
overflow: hidden;
position: relative;
border: 1px solid rgba(121, 181, 255, .16);
border-radius: 28px;
background:
repeating-linear-gradient(45deg, rgba(121, 181, 255, .04) 0px, rgba(121, 181, 255, .04) 1px, transparent 0px, transparent 50%),
radial-gradient(circle at top right, rgba(121, 181, 255, .24), transparent 30%),
radial-gradient(circle at bottom left, rgba(47, 124, 255, .16), transparent 34%),
linear-gradient(135deg, #07111d 0%, #0b2340 34%, #123a6a 72%, #1a4f97 100%);
background-size: 20px 20px, auto, auto, auto;
box-shadow: 0 22px 54px rgba(0, 0, 0, .24);
}
.academy-hero.academy-hero-full {
margin-bottom: 24px;
}
.content-area-after-hero .content-left>.academy-hero.card:first-child {
display: none;
}
.academy-hero-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 24px 26px;
}
.academy-hero-head>div {
flex: 1;
min-width: 0;
}
.academy-hero-head h1 {
margin: 10px 0 8px;
font-family: 'Rajdhani', sans-serif;
font-size: clamp(1.9rem, 3vw, 2.5rem);
font-weight: 700;
color: #eef5ff;
letter-spacing: -.03em;
line-height: 1.05;
}
.academy-hero-head p {
margin: 0;
font-size: .92rem;
color: rgba(234, 243, 255, .78);
line-height: 1.6;
max-width: 680px;
}
.academy-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 11px;
border-radius: 999px;
background: rgba(6, 18, 33, .34);
border: 1px solid rgba(121, 181, 255, .18);
color: #dcecff;
font-size: .72rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
margin-bottom: 6px;
}
body[data-current-route="academia"] .academy-hero-full .academy-kicker {
font-size: 0;
letter-spacing: 0;
}
body[data-current-route="academia"] .academy-hero-full .academy-kicker::after {
content: 'Departamento de Formacao';
font-size: .72rem;
letter-spacing: .09em;
}
.academy-badge {
width: 78px;
height: 78px;
flex-shrink: 0;
border-radius: 22px;
background: rgba(6, 18, 33, .42);
border: 1px solid rgba(121, 181, 255, .18);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 10px rgba(121, 181, 255, .08), 0 0 24px rgba(47, 124, 255, .18);
}
.academy-badge img,
.academy-badge-icon {
width: 46px;
height: 46px;
object-fit: contain;
filter: drop-shadow(0 0 18px rgba(121, 181, 255, .28));
}
.academy-badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--academy-color);
font-size: 34px;
}
@media (max-width: 720px) {
.hero-full-bleed {
margin-bottom: 18px;
border-radius: 0 0 0 0 !important;
}
.page-header:not(.corregedoria-header) {
padding: 20px 18px;
border-radius: 24px;
flex-direction: column;
align-items: flex-start;
}
.academy-hero-head {
flex-direction: column-reverse;
align-items: flex-start;
padding: 20px 18px;
}
.academy-badge {
width: 64px;
height: 64px;
border-radius: 18px;
}
.academy-badge img,
.academy-badge-icon {
width: 38px;
height: 38px;
}
.academy-badge-icon {
font-size: 28px;
}
}
/* Resumo no right-card */
.academy-summary {
padding: 8px 0;
}
.academy-summary .config-toggle-row {
padding: 10px 16px;
}
/* Lista de membros no right-card */
.academy-members {
display: flex;
flex-direction: column;
padding: 8px 16px 16px;
}
.destaque-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 6px;
border-bottom: 1px solid var(--border);
transition: background .13s;
border-radius: 0;
}
.destaque-item:last-child {
border-bottom: none;
}
.destaque-item:hover {
background: var(--green-bg);
border-radius: 8px;
padding-left: 10px;
}
.destaque-nome {
font-size: .87rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
display: block;
}
a.destaque-nome:hover {
color: var(--green);
}
/* =====================================================
INTERNAL CONTENT CARDS
===================================================== */
.internal-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
padding: 0 16px 16px;
}
.internal-card {
position: relative;
min-height: 148px;
padding: 24px 20px 18px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: linear-gradient(180deg, rgba(10, 31, 55, .96), rgba(6, 17, 31, .98));
color: var(--text);
box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.internal-doc-card {
cursor: pointer;
}
.internal-form-card {
cursor: default;
}
.internal-card:hover {
transform: translateY(-1px);
border-color: rgba(74, 174, 232, .42);
box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.internal-card-title {
margin: 0 42px 8px 0;
color: var(--text);
font-size: 1rem;
font-weight: 850;
line-height: 1.25;
text-transform: uppercase;
}
.internal-card-description {
margin: 0 0 18px;
color: var(--text-muted);
font-size: .94rem;
line-height: 1.35;
}
.internal-card-eye {
position: absolute;
top: 22px;
right: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.internal-card-eye:hover {
background: rgba(74, 174, 232, .12);
color: var(--blue);
}
.internal-card-footer {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
color: var(--text-muted);
}
.internal-card-avatar {
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: 6px;
object-fit: cover;
}
.internal-card-meta {
display: grid;
gap: 2px;
min-width: 0;
}
.internal-card-meta strong {
color: var(--text);
font-size: .9rem;
line-height: 1.1;
}
.internal-card-meta span {
color: var(--text-muted);
font-size: .86rem;
line-height: 1.25;
}
.internal-card-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.internal-card-actions .btn-sm {
border-color: var(--border);
background: rgba(10, 31, 55, .82);
color: var(--text);
}
.internal-card-actions .btn-sm:hover {
border-color: rgba(74, 174, 232, .42);
background: rgba(22, 118, 202, .18);
}
.academy-script-groups {
display: grid;
gap: 18px;
padding: 14px 16px 18px;
}
.academy-script-group {
display: grid;
gap: 12px;
}
.academy-script-group-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.academy-script-group-head h4 {
margin: 0;
color: var(--text);
font-size: .96rem;
font-weight: 900;
}
.academy-script-group-head p {
margin: 4px 0 0;
color: var(--text-muted);
font-size: .82rem;
}
.academy-script-grid {
padding: 0;
}
.academy-script-card {
min-height: 180px;
}
.academy-script-cargos {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
max-width: 100%;
padding: 4px 8px;
border-radius: 999px;
background: var(--gray-bg);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: .72rem;
font-weight: 700;
line-height: 1.3;
}
.script-cargo-checks,
.cargo-visibility-checks {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 8px;
max-height: 170px;
overflow-y: auto;
padding: 10px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--gray-bg);
}
.script-cargo-checks label,
.cargo-visibility-checks label {
display: flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 6px 8px;
border-radius: 8px;
background: var(--card-bg);
border: 1px solid var(--border);
color: var(--text);
font-size: .8rem;
font-weight: 700;
}
.script-cargo-checks input,
.cargo-visibility-checks input {
width: 14px;
height: 14px;
flex: 0 0 auto;
margin: 0;
accent-color: var(--blue);
}
.script-cargo-checks label span,
.cargo-visibility-checks label span {
min-width: 0;
overflow-wrap: anywhere;
}
.internal-doc-modal {
background: rgba(2, 6, 23, .78);
padding: 22px;
}
.internal-doc-box {
position: relative;
width: min(1080px, calc(100vw - 44px)) !important;
max-width: 1080px !important;
max-height: calc(100vh - 44px);
padding: 0;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--card-bg);
color: var(--text);
overflow: hidden;
box-shadow: 0 22px 60px rgba(2, 6, 23, .36);
}
.internal-doc-reader {
max-height: calc(100vh - 44px);
overflow-y: auto;
overflow-x: hidden;
padding: 30px 30px 42px;
}
.internal-doc-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
width: 34px;
height: 34px;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(10, 31, 55, .92);
color: var(--text-muted);
}
.internal-doc-close:hover {
background: rgba(74, 174, 232, .12);
color: var(--text);
}
.internal-doc-title {
margin: 0 52px 18px 0;
color: var(--text);
font-size: 1.35rem;
font-weight: 900;
line-height: 1.2;
text-transform: uppercase;
}
.internal-doc-meta {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
margin-bottom: 20px;
color: var(--text-muted);
font-size: .98rem;
overflow-wrap: anywhere;
}
.internal-doc-meta img {
width: 32px;
height: 32px;
border-radius: 6px;
object-fit: cover;
}
.internal-doc-meta strong {
color: var(--text);
}
.internal-doc-update {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
margin-bottom: 18px;
padding: 12px 14px;
border-radius: 8px;
background: rgba(255, 255, 255, .04);
color: var(--text-muted);
font-size: .9rem;
overflow-wrap: anywhere;
}
.internal-doc-content {
color: var(--text);
font-size: 1.08rem;
line-height: 1.35;
max-width: 100%;
overflow-x: hidden;
overflow-wrap: anywhere;
word-break: break-word;
}
.internal-doc-content * {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.internal-doc-content :where(h1, h2, h3) {
color: var(--text);
line-height: 1.18;
}
.internal-doc-content :where(p, ul, ol, table) {
color: var(--text);
}
.feb-document-body :where(h1, h2, h3, h4),
.internal-doc-content :where(h1, h2, h3, h4) {
margin: 1.35em 0 .65em;
color: inherit;
font-weight: 950;
letter-spacing: .02em;
line-height: 1.18;
}
.feb-document-body :where(p, blockquote, ul, ol, table, pre),
.internal-doc-content :where(p, blockquote, ul, ol, table, pre) {
margin: 0 0 1em;
}
.feb-document-body :where(ul, ol),
.internal-doc-content :where(ul, ol) {
padding-left: 1.35rem;
}
.feb-document-body blockquote,
.internal-doc-content blockquote {
padding: 12px 14px;
border-left: 3px solid #d5a716;
border-radius: 6px;
background: rgba(213, 167, 22, .08);
}
.feb-document-body .rich-spoiler,
.internal-doc-content .rich-spoiler {
margin: 12px 0;
border: 0;
border-radius: 3px;
background: transparent;
overflow: hidden;
}
.feb-document-body .rich-spoiler>summary,
.internal-doc-content .rich-spoiler>summary {
cursor: pointer;
list-style: none;
padding: 8px 12px;
font-weight: 800;
color: #111;
text-align: center;
background: #cfcfcf;
user-select: none;
}
.feb-document-body .rich-spoiler>summary::-webkit-details-marker,
.internal-doc-content .rich-spoiler>summary::-webkit-details-marker {
display: none;
}
.feb-document-body .rich-spoiler>summary::after,
.internal-doc-content .rich-spoiler>summary::after {
content: "\25B8";
float: right;
}
.feb-document-body .rich-spoiler[open]>summary::after,
.internal-doc-content .rich-spoiler[open]>summary::after {
content: "\25BE";
}
.feb-document-body .rich-spoiler-content,
.internal-doc-content .rich-spoiler-content {
padding: 12px;
border: 1px solid #cfcfcf;
border-top: 0;
}
.feb-document-body a,
.internal-doc-content a {
color: #d5a716;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.feb-document-body img,
.internal-doc-content img {
display: block;
max-width: 100%;
height: auto;
margin: 14px auto;
border-radius: 8px;
}
.feb-document-body iframe,
.internal-doc-content iframe {
display: block;
width: min(100%, 760px);
aspect-ratio: 16 / 9;
height: auto;
margin: 14px auto;
border: 0;
border-radius: 8px;
background: rgba(0, 0, 0, .22);
}
.feb-document-body :where(pre, code),
.internal-doc-content :where(pre, code) {
border-radius: 6px;
background: rgba(0, 0, 0, .22);
font-family: Consolas, "Liberation Mono", monospace;
}
.feb-document-body pre,
.internal-doc-content pre {
overflow-x: hidden;
padding: 12px 14px;
white-space: pre-wrap;
word-break: break-word;
}
.feb-document-body table,
.internal-doc-content table {
width: 100%;
max-width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.feb-document-body :where(th, td),
.internal-doc-content :where(th, td) {
padding: 8px 10px;
border: 1px solid rgba(83, 130, 181, .25);
text-align: left;
}
@media (max-width: 700px) {
.internal-card-grid {
grid-template-columns: 1fr;
padding-inline: 12px;
}
.internal-doc-modal {
padding: 10px;
}
.internal-doc-box {
width: calc(100vw - 20px) !important;
max-height: calc(100vh - 20px);
}
.internal-doc-reader {
max-height: calc(100vh - 20px);
padding: 24px 20px 34px;
}
.internal-doc-title {
font-size: 1.12rem;
}
}
/* =====================================================
DEPARTAMENTOS - extras do dept-card
===================================================== */
.dept-card-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
font-size: .78rem;
color: var(--text-muted);
}
.dept-card-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
/* =====================================================
LOJA
===================================================== */
.saldo-bar {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
border-radius: 999px;
background: var(--green-bg);
border: 1px solid var(--border-strong);
font-size: .92rem;
color: var(--text);
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.saldo-bar strong {
color: var(--accent);
font-weight: 800;
}
.loja-hero-actions,
.loja-tabs,
.loja-table-actions,
.loja-validation-buttons {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.loja-tabs {
margin-bottom: 20px;
}
.loja-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 18px;
margin-bottom: 24px;
}
.produto-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .16s ease, border-color .16s, box-shadow .16s;
}
.produto-card:hover {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: var(--shadow);
}
.produto-img {
height: 140px;
background: var(--gray-bg);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 2.4rem;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.produto-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.produto-img-emblema {
height: 118px;
background: linear-gradient(180deg, rgba(39, 98, 148, .08), rgba(209, 161, 27, .08));
}
.produto-img-emblema img {
width: 56px;
height: 56px;
object-fit: contain;
image-rendering: auto;
}
.produto-body {
padding: 14px;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.produto-nome {
font-size: .95rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
}
.produto-headline,
.produto-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.produto-emblema-nome {
font-size: .76rem;
color: var(--text-muted);
font-weight: 700;
}
.produto-desc {
font-size: .8rem;
color: var(--text-muted);
line-height: 1.45;
flex: 1;
}
.produto-tipo {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 8px;
border-radius: 999px;
background: var(--green-bg);
border: 1px solid var(--border-strong);
color: var(--green);
font-size: .68rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
width: fit-content;
margin-top: 4px;
}
.produto-entrega {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 8px;
border-radius: 999px;
font-size: .68rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
border: 1px solid var(--border);
color: var(--text-muted);
background: var(--gray-bg);
}
.produto-entrega.is-validation {
background: rgba(245, 158, 11, .12);
color: #b7791f;
border-color: rgba(245, 158, 11, .28);
}
.produto-entrega.is-auto {
background: var(--green-bg);
color: var(--green);
border-color: var(--border-strong);
}
.produto-preco {
display: flex;
align-items: center;
gap: 5px;
font-size: .9rem;
font-weight: 800;
color: var(--accent);
margin-top: 6px;
}
.produto-stock {
font-size: .76rem;
color: var(--text-muted);
margin-top: 3px;
}
.produto-buy {
width: 100%;
margin-top: 10px;
}
.produto-buy:disabled {
opacity: .46;
cursor: not-allowed;
}
.loja-thumb {
width: 54px;
height: 54px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--gray-bg);
display: grid;
place-items: center;
color: var(--accent);
flex: 0 0 auto;
overflow: hidden;
}
.loja-thumb-sm {
width: 44px;
height: 44px;
border-radius: 10px;
}
.loja-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.loja-thumb-sm img {
object-fit: contain;
padding: 5px;
}
/* Histórico de compras */
.historico-compras {
display: flex;
flex-direction: column;
}
.loja-history {
padding: 12px 16px;
}
.compra-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.compra-row:last-child {
border-bottom: none;
}
.compra-row-info {
flex: 1;
min-width: 0;
}
.compra-row-name {
font-size: .9rem;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.compra-row-meta {
font-size: .76rem;
color: var(--text-muted);
margin-top: 2px;
}
.loja-validation-list {
display: grid;
gap: 12px;
padding: 14px 16px 18px;
}
.loja-validation-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) minmax(220px, 280px);
gap: 14px;
align-items: flex-start;
padding: 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--card-bg);
}
.loja-validation-title {
font-weight: 800;
color: var(--text);
}
.loja-validation-meta,
.loja-validation-user,
.loja-validation-note,
.loja-extra-link {
font-size: .82rem;
}
.loja-validation-meta {
color: var(--text-muted);
margin-top: 2px;
}
.loja-validation-user {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
}
.loja-validation-user span {
color: var(--text-muted);
}
.loja-validation-note {
margin: 8px 0 0;
color: var(--text);
line-height: 1.45;
}
.loja-extra-link {
display: inline-flex;
margin-top: 8px;
color: var(--accent);
font-weight: 700;
}
.loja-validation-actions {
display: grid;
gap: 8px;
}
.loja-admin-obs {
min-height: 72px;
resize: vertical;
}
.btn-approve {
background: var(--green);
color: #fff;
border-color: var(--green);
}
.btn-reject {
background: rgba(239, 68, 68, .1);
color: var(--red) !important;
border-color: rgba(239, 68, 68, .28);
}
.btn-reject:hover {
background: var(--red);
color: #fff !important;
border-color: var(--red);
}
.loja-admin-produto {
display: flex;
align-items: center;
gap: 10px;
}
.loja-admin-produto img {
width: 38px;
height: 38px;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border);
}
.loja-admin-produto-nome {
font-size: .88rem;
font-weight: 800;
color: var(--text);
}
.loja-admin-produto-desc {
font-size: .74rem;
color: var(--text-muted);
}
.loja-modal-info {
padding: 10px 12px;
margin-bottom: 12px;
border-radius: 10px;
border: 1px solid rgba(245, 158, 11, .25);
background: rgba(245, 158, 11, .1);
color: var(--text);
font-size: .84rem;
line-height: 1.45;
}
/* Loja status badges (extends .badge-status) */
.badge-status.status-pendente,
span.status-pendente {
background: rgba(245, 158, 11, .14);
color: #d97706;
border-color: rgba(245, 158, 11, .3);
}
.badge-status.status-concluido,
span.status-concluido,
.badge-status.status-entregue,
span.status-entregue {
background: var(--green-bg);
color: var(--green);
border-color: var(--border-strong);
}
.badge-status.status-cancelado,
span.status-cancelado {
background: rgba(239, 68, 68, .1);
color: var(--red);
border-color: rgba(239, 68, 68, .22);
}
@media (max-width: 860px) {
.loja-validation-card {
grid-template-columns: auto minmax(0, 1fr);
}
.loja-validation-actions {
grid-column: 1 / -1;
}
}
/* =====================================================
RH REQUERIMENTOS - Estado do requerimento
===================================================== */
.rh-state-card {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 14px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--gray-bg);
}
.rh-state-card--approved {
border-color: rgba(22, 118, 202, .25);
background: rgba(22, 118, 202, .07);
}
.rh-state-card--rejected {
border-color: rgba(239, 68, 68, .22);
background: rgba(239, 68, 68, .07);
}
.rh-state-card--cancelled {
border-color: rgba(249, 115, 22, .22);
background: rgba(249, 115, 22, .07);
}
.rh-state-card--pending {
border-color: rgba(96, 165, 250, .16);
background: rgba(96, 165, 250, .05);
}
.rh-state-card__icon {
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: .85rem;
font-weight: 900;
background: var(--gray-bg);
border: 1px solid var(--border);
color: var(--text-muted);
}
.rh-state-card--approved .rh-state-card__icon {
background: rgba(22, 118, 202, .14);
border-color: rgba(22, 118, 202, .28);
color: var(--green);
}
.rh-state-card--rejected .rh-state-card__icon {
background: rgba(239, 68, 68, .1);
border-color: rgba(239, 68, 68, .22);
color: var(--red);
}
.rh-state-card--cancelled .rh-state-card__icon {
background: rgba(249, 115, 22, .1);
border-color: rgba(249, 115, 22, .2);
color: #f97316;
}
.rh-state-card__content {
flex: 1;
min-width: 0;
}
.rh-state-card__title {
font-weight: 800;
font-size: .9rem;
color: var(--text);
margin-bottom: 3px;
}
.rh-state-card__meta {
font-size: .76rem;
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
align-items: center;
}
.rh-state-card__body {
margin-top: 8px;
font-size: .82rem;
color: var(--text);
line-height: 1.55;
}
/* =====================================================
RH REQUERIMENTOS - Publicação aninhada / quote
===================================================== */
.rh-publicacao-quote {
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--border);
border-left: 3px solid var(--green-light);
background: var(--gray-bg);
margin-bottom: 10px;
}
.rh-publicacao-quote__header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.rh-publicacao-quote__time {
font-size: .72rem;
color: var(--text-muted);
margin-left: auto;
}
.rh-publicacao-quote__reply {
margin-top: 10px;
padding: 10px 12px;
border-top: 1px solid var(--border);
border-radius: 8px;
background: rgba(0, 0, 0, .12);
}
.rh-publicacao-quote__reply-wrap {
margin-bottom: 12px;
}
/* =====================================================
MISC - btn-danger-soft
===================================================== */
.btn-danger-soft {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--radius-sm);
border: 1px solid rgba(239, 68, 68, .28);
background: rgba(239, 68, 68, .09);
color: var(--red);
font-size: .84rem;
font-weight: 700;
cursor: pointer;
transition: background .14s, border-color .14s;
text-decoration: none;
}
.btn-danger-soft:hover {
background: rgba(239, 68, 68, .16);
border-color: rgba(239, 68, 68, .42);
color: var(--red);
}
/* Administração de militares */
.admin-militares-grid {
display: grid;
gap: 16px;
}
.admin-militar-card {
border: 1px solid var(--border);
border-radius: 12px;
background: var(--overlay-bg);
overflow: hidden;
}
.admin-militar-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.admin-militar-form {
padding: 16px;
}
.admin-form-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.admin-form-grid label {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.admin-form-grid label>span {
color: var(--text-muted);
font-size: .68rem;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.admin-form-grid textarea.form-control {
min-height: 74px;
}
.admin-check {
flex-direction: row !important;
align-items: center;
gap: 9px !important;
justify-content: center;
padding-top: 20px;
}
.admin-check input {
width: 16px;
height: 16px;
}
.admin-lotacoes {
margin-top: 14px;
}
.admin-militar-finance {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.admin-militar-finance span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-muted);
font-size: .76rem;
font-weight: 800;
}
.admin-militar-finance strong {
color: var(--accent);
}
.admin-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.admin-actions form {
margin: 0;
}
.admin-actions-secondary {
padding: 0 16px 16px;
margin-top: 0;
}
.admin-inline-account {
display: grid;
grid-template-columns: minmax(180px, 1fr) 140px auto;
gap: 8px;
align-items: center;
}
@media (max-width: 1100px) {
.admin-form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.admin-militar-head,
.admin-actions,
.admin-actions-secondary {
align-items: stretch;
flex-direction: column;
}
.admin-form-grid,
.admin-inline-account {
grid-template-columns: 1fr;
}
}
/* =====================================================
FEB LIGHT REDESIGN - policia + Habbo
===================================================== */
[data-theme="light"] {
--green: #16824a;
--green-light: #1fa35f;
--green-dark: #0d6136;
--green-bg: rgba(22, 130, 74, .10);
--green-glow: rgba(22, 130, 74, .18);
--accent: #c99a20;
--accent-dark: #8b6313;
--accent-bg: rgba(201, 154, 32, .13);
--red: #b82835;
--red-bg: rgba(184, 40, 53, .10);
--orange: #b86b1f;
--orange-bg: rgba(184, 107, 31, .11);
--yellow: #b98a12;
--blue: #245f96;
--blue-bg: rgba(36, 95, 150, .10);
--gray-bg: #f1f5f9;
--card-bg: #ffffff;
--card-bg2: #f7fafc;
--overlay-bg: #ffffff;
--overlay-bg2: #f8fafc;
--sidebar-bg: #e9eef5;
--text: #172033;
--text-muted: #657184;
--border: rgba(23, 32, 51, .12);
--border-strong: rgba(22, 130, 74, .28);
--shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 26px rgba(23, 32, 51, .08);
--shadow-md: 0 16px 38px rgba(23, 32, 51, .12);
--shadow-lg: 0 26px 70px rgba(23, 32, 51, .16);
--sidebar-w: 272px;
--topbar-h: 72px;
--radius: 8px;
--radius-sm: 7px;
}
[data-theme="light"] body,
[data-theme="light"] body.app-body {
color: var(--text);
background-color: var(--gray-bg);
background-image:
linear-gradient(rgba(36, 95, 150, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(36, 95, 150, .045) 1px, transparent 1px);
background-size: 32px 32px;
}
[data-theme="light"] ::selection {
background: rgba(22, 130, 74, .18);
color: var(--text);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
background: rgba(22, 130, 74, .25);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
background: rgba(22, 130, 74, .38);
}
@media (min-width: 901px) {
[data-theme="light"] #app-sidebar-shell {
top: 0;
right: auto;
bottom: 0;
width: var(--sidebar-w);
height: 100vh;
}
[data-theme="light"] .sidebar {
position: fixed;
inset: 0 auto 0 0;
width: var(--sidebar-w);
height: 100vh;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 22px 20px 18px;
padding-right: 20px;
overflow-y: auto;
background:
linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(233, 238, 245, .96)),
var(--sidebar-bg);
border-right: 1px solid rgba(23, 32, 51, .10);
border-bottom: 0;
box-shadow: 14px 0 36px rgba(23, 32, 51, .07);
}
[data-theme="light"] .sidebar::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background:
linear-gradient(180deg, var(--green) 0 45%, var(--accent) 45% 61%, var(--blue) 61% 100%);
pointer-events: none;
}
[data-theme="light"] .sidebar-logo {
height: auto;
min-height: 60px;
align-items: center;
gap: 12px;
padding: 0 0 18px;
margin: 0 0 16px;
border-right: 0;
border-bottom: 1px solid rgba(23, 32, 51, .10);
}
[data-theme="light"] .sidebar-logo img {
width: 42px;
height: 42px;
padding: 5px;
border-radius: 8px;
background: #fff;
border: 1px solid rgba(22, 130, 74, .18);
box-shadow: 0 8px 18px rgba(23, 32, 51, .10);
filter: none;
}
[data-theme="light"] .sidebar-logo-title {
color: #172033;
font-size: .92rem;
font-weight: 850;
letter-spacing: 0;
}
[data-theme="light"] .sidebar-logo-sub {
color: #16824a;
font-size: .72rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
[data-theme="light"] .sidebar-nav {
flex: 0 0 auto;
height: auto;
min-height: 0;
flex-direction: column;
align-items: stretch;
gap: 4px;
overflow: visible;
}
[data-theme="light"] .nav-group,
[data-theme="light"] .nav-group-docs {
display: block;
width: 100%;
margin: 0;
}
[data-theme="light"] .nav-item,
[data-theme="light"] .nav-item-summary,
[data-theme="light"] .nav-group-docs-btn {
width: 100%;
min-height: 38px;
height: auto;
justify-content: flex-start;
gap: 10px;
padding: 9px 12px;
margin: 0;
color: #3f4a5f;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
font-size: .86rem;
font-weight: 720;
letter-spacing: 0;
white-space: normal;
}
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .nav-item-summary:hover,
[data-theme="light"] .nav-group[open]>.nav-item-summary,
[data-theme="light"] .nav-group-docs-btn:hover,
[data-theme="light"] .nav-group-docs.open>.nav-group-docs-btn {
color: var(--green-dark);
background: rgba(22, 130, 74, .08);
border-color: rgba(22, 130, 74, .13);
}
[data-theme="light"] .nav-item.active,
[data-theme="light"] .nav-group[open]>.nav-item-summary,
[data-theme="light"] .nav-group-docs.open>.nav-group-docs-btn {
color: var(--green-dark);
background: #ffffff;
border-color: rgba(22, 130, 74, .22);
box-shadow: 0 8px 20px rgba(23, 32, 51, .07);
font-weight: 850;
}
[data-theme="light"] .nav-item>svg:first-child,
[data-theme="light"] .nav-item-summary>svg:first-child,
[data-theme="light"] .nav-group-docs-btn>svg:first-child {
color: currentColor;
opacity: .92;
}
[data-theme="light"] .nav-submenu,
[data-theme="light"] .nav-submenu-flat {
position: static;
min-width: 0;
max-height: none;
margin: 5px 0 9px;
padding: 6px;
border-radius: 9px;
border: 1px solid rgba(23, 32, 51, .09);
background: rgba(255, 255, 255, .58);
box-shadow: none;
overflow: visible;
}
[data-theme="light"] .nav-group[open]>.nav-submenu,
[data-theme="light"] .nav-group-docs.open>.nav-submenu-flat {
display: flex;
flex-direction: column;
}
[data-theme="light"] .nav-subitem,
[data-theme="light"] .nav-subitem-flat {
min-height: 32px;
padding: 7px 10px;
color: #5f6a7b;
border-radius: 7px;
font-size: .8rem;
font-weight: 680;
white-space: normal;
}
[data-theme="light"] .nav-subitem:hover,
[data-theme="light"] .nav-subitem-flat:hover {
color: var(--green-dark);
background: rgba(22, 130, 74, .08);
}
[data-theme="light"] .nav-subitem.active,
[data-theme="light"] .nav-subitem-flat.active {
color: var(--green-dark);
background: rgba(22, 130, 74, .12);
font-weight: 850;
}
[data-theme="light"] .nav-subitem-icon {
background: #fff;
color: var(--green-dark);
border: 1px solid rgba(23, 32, 51, .08);
}
[data-theme="light"] .nav-submenu-section {
color: #7a8494;
letter-spacing: .08em;
}
[data-theme="light"] .sidebar-conquistas {
display: block;
margin-top: auto;
padding: 15px;
border: 1px solid rgba(22, 130, 74, .16);
border-radius: 10px;
background:
repeating-linear-gradient(90deg, rgba(22, 130, 74, .06) 0 8px, transparent 8px 16px),
#ffffff;
box-shadow: 0 10px 24px rgba(23, 32, 51, .07);
}
[data-theme="light"] .sidebar-kicker {
color: var(--green-dark);
font-size: .66rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
[data-theme="light"] .conquistas-header {
color: var(--text);
font-weight: 850;
}
[data-theme="light"] .xp-bar-outer {
background: rgba(23, 32, 51, .10);
border-radius: 999px;
overflow: hidden;
}
[data-theme="light"] .xp-bar-inner {
background: linear-gradient(90deg, var(--green), var(--accent));
}
[data-theme="light"] .xp-label {
color: var(--text-muted);
font-size: .72rem;
}
[data-theme="light"] .sidebar-copyright {
display: block;
margin-top: 14px;
color: #8a93a3;
font-size: .68rem;
text-align: center;
}
[data-theme="light"] .topnav-mobile-toggle,
[data-theme="light"] .mobile-nav-backdrop {
display: none;
}
[data-theme="light"] #app-topbar-shell {
left: var(--sidebar-w);
right: 0;
height: var(--topbar-h);
pointer-events: none;
}
[data-theme="light"] .topbar {
height: var(--topbar-h);
justify-content: flex-end;
padding: 16px 28px 0;
pointer-events: none;
}
[data-theme="light"] .topbar-actions {
gap: 8px;
pointer-events: auto;
}
[data-theme="light"] .main-layout {
margin-left: var(--sidebar-w);
padding-top: var(--topbar-h);
}
[data-theme="light"] .content-area {
--content-inline-pad: 28px;
--content-top-pad: 20px;
gap: 22px;
}
[data-theme="light"] .content-right {
width: 328px;
}
}
[data-theme="light"] .topbar-action-shell {
gap: 3px;
padding: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, .86);
border: 1px solid rgba(23, 32, 51, .10);
box-shadow: 0 8px 24px rgba(23, 32, 51, .08);
}
[data-theme="light"] .icon-btn {
width: 38px;
height: 38px;
color: #3c4658;
background: rgba(255, 255, 255, .86);
border: 1px solid rgba(23, 32, 51, .10);
border-radius: 999px;
box-shadow: 0 8px 24px rgba(23, 32, 51, .08);
}
[data-theme="light"] .topbar-action-shell .icon-btn {
width: 34px;
height: 34px;
border: 0;
box-shadow: none;
background: transparent;
}
[data-theme="light"] .icon-btn:hover,
[data-theme="light"] .theme-btn.active {
color: var(--green-dark);
background: var(--green-bg);
}
[data-theme="light"] .badge {
background: var(--red);
box-shadow: 0 0 0 3px #fff;
}
[data-theme="light"] .user-avatar-btn {
width: 44px;
height: 44px;
border-radius: 14px;
border: 1px solid rgba(23, 32, 51, .10);
background: #fff;
box-shadow: 0 8px 24px rgba(23, 32, 51, .10);
}
[data-theme="light"] .user-avatar-btn:hover {
border-color: rgba(22, 130, 74, .32);
box-shadow: 0 10px 26px rgba(22, 130, 74, .13);
}
[data-theme="light"] .user-avatar-btn img,
[data-theme="light"] .avatar-sm-img,
[data-theme="light"] .dashboard-highlight-avatar img,
[data-theme="light"] .dashboard-search-avatar img,
[data-theme="light"] .aviso-author {
image-rendering: pixelated;
}
[data-theme="light"] .notif-dropdown,
[data-theme="light"] .user-dropdown,
[data-theme="light"] .modal,
[data-theme="light"] .search-modal,
[data-theme="light"] .modal-sm-box,
[data-theme="light"] .toast {
background: #fff;
border-color: rgba(23, 32, 51, .12);
box-shadow: var(--shadow-md);
color: var(--text);
}
[data-theme="light"] .user-dropdown,
[data-theme="light"] .notif-dropdown {
top: calc(var(--topbar-h) - 2px);
right: 28px;
border-radius: 12px;
}
[data-theme="light"] .user-dropdown-item:hover,
[data-theme="light"] .notif-item:hover {
background: rgba(22, 130, 74, .07);
}
[data-theme="light"] .notif-item.unread {
background: rgba(22, 130, 74, .08);
border-left-color: var(--green);
}
[data-theme="light"] .dashboard-hero {
margin: 0 28px;
padding: 30px 30px 28px;
border: 1px solid rgba(23, 32, 51, .10);
border-radius: 10px;
background:
linear-gradient(90deg, rgba(22, 130, 74, .12), transparent 34%),
repeating-linear-gradient(90deg, rgba(23, 32, 51, .035) 0 1px, transparent 1px 22px),
linear-gradient(135deg, #ffffff 0%, #eef4f8 100%);
box-shadow: var(--shadow);
}
[data-theme="light"] .dashboard-hero::before {
display: block;
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 5px;
background: linear-gradient(90deg, var(--green) 0 46%, var(--accent) 46% 61%, var(--blue) 61% 100%);
}
[data-theme="light"] .dashboard-hero::after {
content: '';
position: absolute;
right: 24px;
bottom: 18px;
width: 92px;
height: 32px;
border-radius: 0;
background:
linear-gradient(90deg, rgba(22, 130, 74, .16) 50%, transparent 50%),
linear-gradient(rgba(22, 130, 74, .16) 50%, transparent 50%);
background-size: 8px 8px;
opacity: .55;
pointer-events: none;
}
[data-theme="light"] .dashboard-hero-badge {
width: 78px;
height: 78px;
border-radius: 12px;
background: #fff;
border: 1px solid rgba(22, 130, 74, .18);
box-shadow: 0 12px 28px rgba(23, 32, 51, .10), inset 0 -4px 0 rgba(22, 130, 74, .08);
}
[data-theme="light"] .dashboard-hero-badge img {
width: 50px;
height: 50px;
filter: none;
}
[data-theme="light"] .dashboard-hero-title {
color: var(--text);
font-size: 2.45rem;
letter-spacing: 0;
}
[data-theme="light"] .dashboard-hero-title span {
color: var(--green-dark);
}
[data-theme="light"] .dashboard-hero-sub,
[data-theme="light"] .dashboard-hero-stat {
color: var(--text-muted);
}
[data-theme="light"] .dashboard-hero-stat strong,
[data-theme="light"] .dashboard-hero-stat i,
[data-theme="light"] .dashboard-hero-stat svg {
color: var(--green-dark);
}
[data-theme="light"] .card,
[data-theme="light"] .right-card,
[data-theme="light"] .produto-card,
[data-theme="light"] .internal-card,
[data-theme="light"] .dashboard-side-stats,
[data-theme="light"] .dashboard-side-search,
[data-theme="light"] .dashboard-highlight-tile,
[data-theme="light"] .rh-state-card {
border-color: rgba(23, 32, 51, .11);
border-radius: 10px;
background: #fff;
box-shadow: var(--shadow);
}
[data-theme="light"] .card:hover,
[data-theme="light"] .internal-card:hover,
[data-theme="light"] .dashboard-highlight-tile:hover {
border-color: rgba(22, 130, 74, .28);
box-shadow: var(--shadow-md);
}
[data-theme="light"] .card-header-row,
[data-theme="light"] .right-card>div:first-child:not(.right-tabs) {
min-height: 64px;
padding: 17px 20px 15px;
}
[data-theme="light"] .card-header-row::after,
[data-theme="light"] .right-card>div:first-child:not(.right-tabs)::after {
background: linear-gradient(90deg, rgba(22, 130, 74, .28), rgba(23, 32, 51, .07), transparent);
}
[data-theme="light"] .card-header-row h3,
[data-theme="light"] .right-card-title,
[data-theme="light"] .dashboard-weekly-highlights-head h3 {
color: var(--text);
letter-spacing: 0;
}
[data-theme="light"] .card-header-row h3::before,
[data-theme="light"] .right-card-title::before {
content: '';
width: 18px;
height: 18px;
border-radius: 4px;
background:
linear-gradient(90deg, var(--green) 50%, transparent 50%),
linear-gradient(var(--accent) 50%, transparent 50%),
#fff;
background-size: 9px 9px;
border: 1px solid rgba(23, 32, 51, .12);
box-shadow: none;
}
[data-theme="light"] .card-subtitle,
[data-theme="light"] .dashboard-weekly-highlights-head p {
color: var(--text-muted);
}
[data-theme="light"] .btn-primary {
background: var(--green);
color: #fff;
border: 1px solid rgba(8, 71, 38, .16);
border-radius: 9px;
box-shadow: 0 8px 18px rgba(22, 130, 74, .20);
font-weight: 800;
letter-spacing: 0;
}
[data-theme="light"] .btn-primary:hover:not(:disabled) {
background: var(--green-dark);
box-shadow: 0 12px 24px rgba(22, 130, 74, .24);
}
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-sm,
[data-theme="light"] .btn-outline-sm,
[data-theme="light"] .btn-outline,
[data-theme="light"] .tab {
border-color: rgba(23, 32, 51, .12);
background: #fff;
color: #3f4a5f;
border-radius: 8px;
font-weight: 760;
}
[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-sm:hover,
[data-theme="light"] .btn-outline-sm:hover,
[data-theme="light"] .btn-outline:hover,
[data-theme="light"] .tab:hover,
[data-theme="light"] .tab.active {
color: var(--green-dark);
border-color: rgba(22, 130, 74, .28);
background: rgba(22, 130, 74, .08);
}
[data-theme="light"] .table th {
background: #f5f8fb;
color: #667386;
letter-spacing: .06em;
}
[data-theme="light"] .table td {
color: var(--text);
border-bottom-color: rgba(23, 32, 51, .08);
}
[data-theme="light"] .table tbody tr:hover td {
background: rgba(22, 130, 74, .045);
}
[data-theme="light"] .badge-status,
[data-theme="light"] .cod-badge,
[data-theme="light"] .badge-tipo {
border-radius: 7px;
font-weight: 850;
}
[data-theme="light"] .badge-green,
[data-theme="light"] .tipo-promocao,
[data-theme="light"] .tipo-promoção {
color: var(--green-dark);
background: rgba(22, 130, 74, .12);
border-color: rgba(22, 130, 74, .22);
}
[data-theme="light"] .badge-red {
color: var(--red);
background: var(--red-bg);
border-color: rgba(184, 40, 53, .20);
}
[data-theme="light"] .badge-orange {
color: #9a5b14;
background: rgba(184, 107, 31, .12);
border-color: rgba(184, 107, 31, .20);
}
[data-theme="light"] .badge-blue {
color: #245f96;
background: rgba(36, 95, 150, .12);
border-color: rgba(36, 95, 150, .20);
}
[data-theme="light"] .form-control {
background: #fff;
border-color: rgba(23, 32, 51, .13);
border-radius: 8px;
color: var(--text);
box-shadow: inset 0 1px 0 rgba(23, 32, 51, .03);
}
[data-theme="light"] .form-control:focus {
background: #fff;
border-color: rgba(22, 130, 74, .38);
box-shadow: 0 0 0 3px rgba(22, 130, 74, .10);
}
[data-theme="light"] .dashboard-search-box {
background: #fff;
border-color: rgba(23, 32, 51, .12);
border-radius: 10px;
box-shadow: 0 10px 24px rgba(23, 32, 51, .08);
}
[data-theme="light"] .dashboard-search-box button {
background: var(--accent);
color: #1d2737;
}
[data-theme="light"] .dashboard-search-card,
[data-theme="light"] .diario-dashboard-item,
[data-theme="light"] .diario-feed-item,
[data-theme="light"] .aviso-card {
background: #fff;
border-color: rgba(23, 32, 51, .11);
box-shadow: 0 10px 24px rgba(23, 32, 51, .07);
}
[data-theme="light"] .dashboard-search-copy>strong,
[data-theme="light"] .dashboard-search-info span,
[data-theme="light"] .dashboard-search-avatar span {
color: var(--accent-dark);
}
[data-theme="light"] .dashboard-search-copy p,
[data-theme="light"] .dashboard-search-empty {
color: var(--text-muted);
}
[data-theme="light"] .dashboard-search-avatar,
[data-theme="light"] .dashboard-highlight-avatar,
[data-theme="light"] .avatar-sm-img {
background: #f6f9fc;
border-color: rgba(22, 130, 74, .18);
border-radius: 10px;
}
[data-theme="light"] .aviso-banner {
background:
linear-gradient(90deg, color-mix(in srgb, var(--dept-color) 22%, #ffffff), transparent),
repeating-linear-gradient(90deg, rgba(23, 32, 51, .05) 0 1px, transparent 1px 12px);
}
[data-theme="light"] .aviso-dept {
color: color-mix(in srgb, var(--dept-color) 70%, var(--green-dark));
letter-spacing: 0;
}
[data-theme="light"] .diario-dashboard-tags span,
[data-theme="light"] .diario-feed-tags span {
background: rgba(22, 130, 74, .08);
color: var(--green-dark);
border-color: rgba(22, 130, 74, .18);
}
[data-theme="light"] .dashboard-highlight-tile-head {
color: var(--green-dark);
border-bottom-color: rgba(23, 32, 51, .08);
letter-spacing: .08em;
}
[data-theme="light"] .dashboard-highlight-tile-head span::before {
box-shadow: none;
}
[data-theme="light"] .dashboard-highlight-oficiais .dashboard-highlight-tile-head,
[data-theme="light"] .dashboard-highlight-oficiais .dashboard-highlight-person small {
color: var(--accent-dark);
}
[data-theme="light"] .dashboard-highlight-person small {
color: var(--green-dark);
background: rgba(22, 130, 74, .08);
border-color: rgba(22, 130, 74, .18);
border-radius: 7px;
}
[data-theme="light"] .page-header:not(.corregedoria-header),
[data-theme="light"] .academy-hero {
border-color: rgba(23, 32, 51, .10);
background:
linear-gradient(90deg, rgba(22, 130, 74, .11), transparent 36%),
repeating-linear-gradient(90deg, rgba(23, 32, 51, .035) 0 1px, transparent 1px 22px),
linear-gradient(135deg, #ffffff, #eef4f8);
box-shadow: var(--shadow);
}
[data-theme="light"] .page-header:not(.corregedoria-header) h2,
[data-theme="light"] .academy-hero-head h1 {
color: var(--text);
letter-spacing: 0;
}
[data-theme="light"] .page-header:not(.corregedoria-header) p,
[data-theme="light"] .academy-hero-head p {
color: var(--text-muted) !important;
}
[data-theme="light"] .academy-kicker,
[data-theme="light"] .diario-heading span,
[data-theme="light"] .dashboard-hero-kicker {
color: var(--green-dark);
letter-spacing: .10em;
}
[data-theme="light"] .app-footer {
margin-left: 0;
border-top: 1px solid rgba(23, 32, 51, .10);
background: #fff;
}
[data-theme="light"] .app-footer-cta {
background:
linear-gradient(90deg, rgba(22, 130, 74, .10), rgba(201, 154, 32, .08)),
#ffffff;
border-bottom-color: rgba(23, 32, 51, .09);
}
[data-theme="light"] .app-footer-cta strong,
[data-theme="light"] .app-footer-links h4 {
color: var(--text);
}
[data-theme="light"] .app-footer-cta span,
[data-theme="light"] .app-footer-links a {
color: var(--text-muted);
}
@media (max-width: 900px) {
[data-theme="light"] .sidebar {
background: rgba(233, 238, 245, .98);
border-bottom-color: rgba(23, 32, 51, .10);
box-shadow: 0 10px 26px rgba(23, 32, 51, .07);
}
[data-theme="light"] .sidebar-logo-title {
color: var(--text);
}
[data-theme="light"] .sidebar-logo-sub {
color: var(--green-dark);
}
[data-theme="light"] .topnav-mobile-toggle {
color: var(--text);
background: #fff;
border-color: rgba(23, 32, 51, .12);
}
[data-theme="light"] .sidebar.menu-open .sidebar-nav {
background: #ffffff;
border-color: rgba(23, 32, 51, .12);
}
[data-theme="light"] .sidebar.menu-open .sidebar-nav .nav-item,
[data-theme="light"] .sidebar.menu-open .sidebar-nav .nav-item-summary,
[data-theme="light"] .sidebar.menu-open .sidebar-nav .nav-group-docs-btn {
color: var(--text);
}
[data-theme="light"] .dashboard-hero {
margin: 0 14px;
padding: 24px 18px 22px;
}
[data-theme="light"] .dashboard-hero-title {
font-size: 1.85rem;
}
[data-theme="light"] .content-area {
--content-inline-pad: 14px;
}
}
@media (max-width: 600px) {
[data-theme="light"] .dashboard-hero {
margin: 0 10px;
}
[data-theme="light"] .dashboard-hero-badge {
width: 58px;
height: 58px;
}
[data-theme="light"] .dashboard-hero-badge img {
width: 38px;
height: 38px;
}
[data-theme="light"] .user-dropdown,
[data-theme="light"] .notif-dropdown {
right: 10px;
width: min(320px, calc(100vw - 20px));
}
}
/* =====================================================
FEB THEME V2 - full system pass
===================================================== */
html[data-theme="dark"] {
color-scheme: dark;
--green: #1aa35d;
--green-light: #35c878;
--green-dark: #0b6f3d;
--green-bg: rgba(26, 163, 93, .12);
--green-glow: rgba(26, 163, 93, .22);
--accent: #d2a62a;
--accent-dark: #8f6812;
--accent-bg: rgba(210, 166, 42, .13);
--red: #ef4d5d;
--red-bg: rgba(239, 77, 93, .13);
--orange: #d98935;
--orange-bg: rgba(217, 137, 53, .13);
--yellow: #d2a62a;
--blue: #5aa6e8;
--blue-bg: rgba(90, 166, 232, .12);
--gray-bg: #070b12;
--card-bg: #0d1420;
--card-bg2: #111b2a;
--overlay-bg: #101827;
--overlay-bg2: #141f30;
--sidebar-bg: #0a101a;
--text: #eef4f8;
--text-muted: #93a0b1;
--border: rgba(207, 219, 229, .11);
--border-strong: rgba(53, 200, 120, .30);
--shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 34px rgba(0, 0, 0, .30);
--shadow-md: 0 18px 46px rgba(0, 0, 0, .40);
--shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
--sidebar-w: 276px;
--topbar-h: 72px;
--radius: 8px;
--radius-sm: 6px;
}
html[data-theme="light"] {
color-scheme: light;
--green: #16824a;
--green-light: #1f9d5e;
--green-dark: #0d6238;
--green-bg: rgba(22, 130, 74, .10);
--green-glow: rgba(22, 130, 74, .18);
--accent: #c89a21;
--accent-dark: #835f13;
--accent-bg: rgba(200, 154, 33, .14);
--red: #bc2f3d;
--red-bg: rgba(188, 47, 61, .10);
--orange: #b86d25;
--orange-bg: rgba(184, 109, 37, .12);
--yellow: #b98511;
--blue: #276294;
--blue-bg: rgba(39, 98, 148, .10);
--gray-bg: #eef3f7;
--card-bg: #ffffff;
--card-bg2: #f6f9fb;
--overlay-bg: #ffffff;
--overlay-bg2: #f8fafc;
--sidebar-bg: #e8eef4;
--text: #172033;
--text-muted: #667183;
--border: rgba(23, 32, 51, .12);
--border-strong: rgba(22, 130, 74, .30);
--shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 28px rgba(23, 32, 51, .08);
--shadow-md: 0 18px 44px rgba(23, 32, 51, .12);
--shadow-lg: 0 30px 80px rgba(23, 32, 51, .17);
--sidebar-w: 276px;
--topbar-h: 72px;
--radius: 8px;
--radius-sm: 6px;
}
html[data-theme] body {
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
letter-spacing: 0;
}
html[data-theme="dark"] body,
html[data-theme="dark"] body.app-body {
background-color: var(--gray-bg);
background-image:
linear-gradient(rgba(90, 166, 232, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(90, 166, 232, .035) 1px, transparent 1px);
background-size: 34px 34px;
color: var(--text);
}
html[data-theme="light"] body,
html[data-theme="light"] body.app-body {
background-color: var(--gray-bg);
background-image:
linear-gradient(rgba(39, 98, 148, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(39, 98, 148, .035) 1px, transparent 1px);
background-size: 34px 34px;
color: var(--text);
}
html[data-theme] ::selection {
background: var(--green-bg);
color: var(--text);
}
html[data-theme] img[src*="habbo-imaging"],
html[data-theme] .avatar-sm-img,
html[data-theme] .perfil-avatar-wrap img,
html[data-theme] .dashboard-search-avatar img,
html[data-theme] .dashboard-highlight-avatar img,
html[data-theme] .diario-user-imager img,
html[data-theme] .aviso-author {
image-rendering: pixelated;
}
/* Shell */
@media (min-width: 901px) {
html[data-theme] #app-sidebar-shell {
position: fixed;
top: 0;
right: auto;
bottom: 0;
left: 0;
width: var(--sidebar-w);
height: 100vh;
z-index: 130;
}
html[data-theme] .sidebar {
position: fixed;
inset: 0 auto 0 0;
width: var(--sidebar-w);
height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 22px 20px 18px;
padding-right: 20px;
overflow-y: auto;
border-right: 1px solid var(--border);
border-bottom: 0;
box-shadow: var(--shadow);
}
html[data-theme="dark"] .sidebar {
background:
linear-gradient(180deg, rgba(18, 29, 46, .96), rgba(8, 13, 22, .98)),
var(--sidebar-bg);
}
html[data-theme="light"] .sidebar {
background:
linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(232, 238, 244, .98)),
var(--sidebar-bg);
}
html[data-theme] .sidebar::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(180deg, var(--green) 0 44%, var(--accent) 44% 61%, var(--blue) 61% 100%);
pointer-events: none;
}
html[data-theme] .sidebar-logo {
height: auto;
min-height: 62px;
gap: 12px;
padding: 0 0 18px;
margin: 0 0 16px;
border-right: 0;
border-bottom: 1px solid var(--border);
}
html[data-theme] .sidebar-logo img {
width: 42px;
height: 42px;
padding: 5px;
border-radius: 8px;
background: var(--card-bg);
border: 1px solid var(--border);
box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
filter: none;
}
html[data-theme] .sidebar-logo-title {
color: var(--text);
font-size: .92rem;
font-weight: 850;
letter-spacing: 0;
}
html[data-theme] .sidebar-logo-sub {
color: var(--green-light);
font-size: .72rem;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
html[data-theme] .sidebar-nav {
flex: 0 0 auto;
height: auto;
min-height: 0;
flex-direction: column;
align-items: stretch;
gap: 4px;
overflow: visible;
}
html[data-theme] .nav-group,
html[data-theme] .nav-group-docs {
display: block;
width: 100%;
margin: 0;
}
html[data-theme] .nav-item,
html[data-theme] .nav-item-summary,
html[data-theme] .nav-group-docs-btn {
width: 100%;
min-height: 38px;
height: auto;
justify-content: flex-start;
gap: 10px;
padding: 9px 12px;
margin: 0;
color: var(--text-muted);
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
font-size: .86rem;
font-weight: 720;
letter-spacing: 0;
white-space: normal;
}
html[data-theme] .nav-item:hover,
html[data-theme] .nav-item-summary:hover,
html[data-theme] .nav-group[open]>.nav-item-summary,
html[data-theme] .nav-group-docs-btn:hover,
html[data-theme] .nav-group-docs.open>.nav-group-docs-btn {
color: var(--green-light);
background: var(--green-bg);
border-color: color-mix(in srgb, var(--green) 25%, transparent);
}
html[data-theme] .nav-item.active,
html[data-theme] .nav-group[open]>.nav-item-summary,
html[data-theme] .nav-group-docs.open>.nav-group-docs-btn {
color: var(--green-light);
background: var(--card-bg);
border-color: color-mix(in srgb, var(--green) 30%, var(--border));
box-shadow: var(--shadow);
font-weight: 850;
}
html[data-theme] .nav-item>svg:first-child,
html[data-theme] .nav-item-summary>svg:first-child,
html[data-theme] .nav-group-docs-btn>svg:first-child {
color: currentColor;
opacity: .95;
}
html[data-theme] .nav-submenu,
html[data-theme] .nav-submenu-flat {
position: static;
min-width: 0;
max-height: none;
margin: 5px 0 9px;
padding: 6px;
border-radius: 8px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--card-bg) 70%, transparent);
box-shadow: none;
overflow: visible;
}
html[data-theme] .nav-group[open]>.nav-submenu,
html[data-theme] .nav-group-docs.open>.nav-submenu-flat {
display: flex;
flex-direction: column;
}
html[data-theme] .nav-subitem,
html[data-theme] .nav-subitem-flat {
min-height: 32px;
padding: 7px 10px;
color: var(--text-muted);
border-radius: 6px;
font-size: .8rem;
font-weight: 680;
white-space: normal;
}
html[data-theme] .nav-subitem:hover,
html[data-theme] .nav-subitem-flat:hover {
color: var(--green-light);
background: var(--green-bg);
}
html[data-theme] .nav-subitem.active,
html[data-theme] .nav-subitem-flat.active {
color: var(--green-light);
background: var(--green-bg);
font-weight: 850;
}
html[data-theme] .nav-subitem-icon {
background: var(--card-bg);
color: var(--green-light);
border: 1px solid var(--border);
}
html[data-theme] .sidebar-conquistas {
display: block;
margin-top: auto;
padding: 6px 2px 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
html[data-theme] .sidebar-kicker {
color: var(--green-light);
font-size: .66rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
html[data-theme] .conquistas-header {
color: var(--text);
font-weight: 850;
display: flex;
align-items: center;
gap: 8px;
font-size: .82rem;
margin-bottom: 10px;
}
html[data-theme] .conquistas-header i {
color: var(--green-light);
font-size: .86rem;
}
html[data-theme] .xp-bar-outer {
background: color-mix(in srgb, var(--text-muted) 18%, transparent);
border-radius: 999px;
overflow: hidden;
height: 6px;
margin-bottom: 8px;
}
html[data-theme] .xp-bar-inner {
background: linear-gradient(90deg, var(--green), var(--accent));
height: 100%;
border-radius: inherit;
}
html[data-theme] .xp-label,
html[data-theme] .sidebar-copyright {
color: var(--text-muted);
font-size: .72rem;
}
html[data-theme] .sidebar-copyright {
display: block;
margin-top: 14px;
text-align: center;
}
html[data-theme] #app-topbar-shell {
left: var(--sidebar-w);
right: 0;
height: var(--topbar-h);
pointer-events: none;
}
html[data-theme] .topbar {
height: var(--topbar-h);
justify-content: flex-end;
padding: 16px 28px 0;
pointer-events: none;
}
html[data-theme] .topbar-actions {
gap: 8px;
pointer-events: auto;
}
html[data-theme] .main-layout {
margin-left: var(--sidebar-w);
padding-top: var(--topbar-h);
}
html[data-theme] .content-area {
--content-inline-pad: 28px;
--content-top-pad: 20px;
gap: 22px;
}
html[data-theme] .content-right {
width: 332px;
}
}
html[data-theme] .topbar-action-shell {
gap: 3px;
padding: 4px;
border-radius: 999px;
background: var(--card-bg);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
html[data-theme] .icon-btn {
width: 38px;
height: 38px;
color: var(--text-muted);
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 999px;
box-shadow: var(--shadow);
}
html[data-theme] .topbar-action-shell .icon-btn {
width: 34px;
height: 34px;
border: 0;
box-shadow: none;
background: transparent;
}
html[data-theme] .icon-btn:hover,
html[data-theme] .theme-btn.active {
color: var(--green-light);
background: var(--green-bg);
}
html[data-theme] .badge {
background: var(--red);
box-shadow: 0 0 0 3px var(--card-bg);
}
html[data-theme] .user-avatar-btn {
width: 44px;
height: 44px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--card-bg);
box-shadow: var(--shadow);
}
html[data-theme] .user-avatar-btn:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-md);
}
/* Core surfaces */
html[data-theme] .card,
html[data-theme] .right-card,
html[data-theme] .produto-card,
html[data-theme] .internal-card,
html[data-theme] .dashboard-side-stats,
html[data-theme] .dashboard-side-search,
html[data-theme] .dashboard-highlight-tile,
html[data-theme] .rh-feed-card,
html[data-theme] .rh-state-card,
html[data-theme] .dept-card,
html[data-theme] .corregedoria-panel,
html[data-theme] .diario-section {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--card-bg);
box-shadow: var(--shadow);
}
html[data-theme] .card:hover,
html[data-theme] .internal-card:hover,
html[data-theme] .dashboard-highlight-tile:hover,
html[data-theme] .rh-feed-card:hover,
html[data-theme] .dept-card:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-md);
}
html[data-theme] .card-header-row,
html[data-theme] .right-card>div:first-child:not(.right-tabs) {
min-height: 64px;
padding: 17px 20px 15px;
}
html[data-theme] .card-header-row::after,
html[data-theme] .right-card>div:first-child:not(.right-tabs)::after {
background: linear-gradient(90deg, color-mix(in srgb, var(--green) 34%, transparent), var(--border), transparent);
}
html[data-theme] .card-header-row h3,
html[data-theme] .right-card-title,
html[data-theme] .dashboard-weekly-highlights-head h3,
html[data-theme] .modal-sm-title,
html[data-theme] .modal-header h2,
html[data-theme] .perfil-section h4 {
color: var(--text);
letter-spacing: 0;
font-weight: 880;
}
html[data-theme] .card-header-row h3::before,
html[data-theme] .right-card-title::before {
content: '';
width: 18px;
height: 18px;
border-radius: 4px;
background:
linear-gradient(90deg, var(--green) 50%, transparent 50%),
linear-gradient(var(--accent) 50%, transparent 50%),
var(--card-bg2);
background-size: 9px 9px;
border: 1px solid var(--border);
box-shadow: none;
}
html[data-theme] .card-subtitle,
html[data-theme] .dashboard-weekly-highlights-head p,
html[data-theme] .text-muted,
html[data-theme] .empty-row,
html[data-theme] .obs-cell {
color: var(--text-muted);
}
/* Buttons, tabs and controls */
html[data-theme] .btn-primary {
background: var(--green);
color: #fff;
border: 1px solid color-mix(in srgb, var(--green-dark) 60%, transparent);
border-radius: 8px;
box-shadow: 0 8px 18px var(--green-glow);
font-weight: 820;
letter-spacing: 0;
}
html[data-theme] .btn-primary:hover:not(:disabled) {
background: var(--green-dark);
box-shadow: 0 12px 26px var(--green-glow);
}
html[data-theme] .btn-secondary,
html[data-theme] .btn-sm,
html[data-theme] .btn-outline-sm,
html[data-theme] .btn-outline,
html[data-theme] .btn-voltar,
html[data-theme] .tab,
html[data-theme] .right-tab,
html[data-theme] .modal-tab,
html[data-theme] .diario-pagination a,
html[data-theme] .diario-category-row span,
html[data-theme] .diario-category-row button,
html[data-theme] .rh-action-btn {
border-color: var(--border);
background: var(--card-bg2);
color: var(--text-muted);
border-radius: 8px;
font-weight: 760;
}
html[data-theme] .btn-secondary:hover,
html[data-theme] .btn-sm:hover,
html[data-theme] .btn-outline-sm:hover,
html[data-theme] .btn-outline:hover,
html[data-theme] .btn-voltar:hover,
html[data-theme] .tab:hover,
html[data-theme] .tab.active,
html[data-theme] .right-tab:hover,
html[data-theme] .right-tab.active,
html[data-theme] .modal-tab:hover,
html[data-theme] .modal-tab.active,
html[data-theme] .diario-pagination a:hover,
html[data-theme] .diario-pagination a.active,
html[data-theme] .diario-category-row button:hover,
html[data-theme] .rh-action-btn:hover {
color: var(--green-light);
border-color: var(--border-strong);
background: var(--green-bg);
}
html[data-theme] .form-control,
html[data-theme] .pin-btn {
background: var(--overlay-bg2);
border-color: var(--border);
border-radius: 8px;
color: var(--text);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
html[data-theme] .form-control:focus {
background: var(--overlay-bg);
border-color: var(--border-strong);
box-shadow: 0 0 0 3px var(--green-bg);
}
html[data-theme] label,
html[data-theme] .form-label {
color: var(--text);
font-weight: 760;
}
html[data-theme] .field-hint {
color: var(--text-muted);
}
/* Tables and badges */
html[data-theme] .table th {
background: var(--card-bg2);
color: var(--text-muted);
border-bottom-color: var(--border);
letter-spacing: .06em;
}
html[data-theme] .table td {
color: var(--text);
border-bottom-color: var(--border);
}
html[data-theme] .table tbody tr:hover td {
background: var(--green-bg);
}
html[data-theme] .badge-status,
html[data-theme] .cod-badge,
html[data-theme] .badge-tipo,
html[data-theme] .produto-tipo,
html[data-theme] .perfil-hero-tag-pill,
html[data-theme] .diario-dashboard-tags span,
html[data-theme] .diario-feed-tags span {
border-radius: 7px;
font-weight: 850;
border: 1px solid var(--border);
}
html[data-theme] .badge-green,
html[data-theme] .tipo-promocao,
html[data-theme] .tipo-promoção,
html[data-theme] .rh-state-card--approved .rh-state-card__icon {
color: var(--green-light);
background: var(--green-bg);
border-color: color-mix(in srgb, var(--green) 28%, transparent);
}
html[data-theme] .badge-red,
html[data-theme] .tipo-rebaixamento,
html[data-theme] .tipo-expulsão,
html[data-theme] .rh-state-card--rejected .rh-state-card__icon {
color: var(--red);
background: var(--red-bg);
border-color: color-mix(in srgb, var(--red) 28%, transparent);
}
html[data-theme] .badge-orange,
html[data-theme] .tipo-advertência,
html[data-theme] .tipo-advertência-escrita,
html[data-theme] .rh-state-card--cancelled .rh-state-card__icon {
color: var(--orange);
background: var(--orange-bg);
border-color: color-mix(in srgb, var(--orange) 28%, transparent);
}
html[data-theme] .badge-blue,
html[data-theme] .tipo-elogio,
html[data-theme] .rh-state-card--pending .rh-state-card__icon {
color: var(--blue);
background: var(--blue-bg);
border-color: color-mix(in srgb, var(--blue) 28%, transparent);
}
/* Dashboard */
html[data-theme] .dashboard-hero {
position: relative;
margin: 0 28px;
padding: 30px 30px 28px;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow);
}
html[data-theme="dark"] .dashboard-hero {
background:
linear-gradient(90deg, rgba(26, 163, 93, .13), transparent 36%),
repeating-linear-gradient(90deg, rgba(238, 244, 248, .035) 0 1px, transparent 1px 22px),
linear-gradient(135deg, #101827, #0b1220);
}
html[data-theme="light"] .dashboard-hero {
background:
linear-gradient(90deg, rgba(22, 130, 74, .12), transparent 36%),
repeating-linear-gradient(90deg, rgba(23, 32, 51, .035) 0 1px, transparent 1px 22px),
linear-gradient(135deg, #ffffff, #edf3f7);
}
html[data-theme] .dashboard-hero::before {
display: block;
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 5px;
background: linear-gradient(90deg, var(--green) 0 46%, var(--accent) 46% 61%, var(--blue) 61% 100%);
}
html[data-theme] .dashboard-hero::after {
content: '';
position: absolute;
right: 24px;
bottom: 18px;
width: 96px;
height: 32px;
border-radius: 0;
background:
linear-gradient(90deg, color-mix(in srgb, var(--green) 18%, transparent) 50%, transparent 50%),
linear-gradient(color-mix(in srgb, var(--green) 18%, transparent) 50%, transparent 50%);
background-size: 8px 8px;
pointer-events: none;
}
html[data-theme] .dashboard-hero-badge {
width: 78px;
height: 78px;
border-radius: 8px;
background: var(--card-bg);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
html[data-theme] .dashboard-hero-badge img {
width: 50px;
height: 50px;
filter: none;
}
html[data-theme] .dashboard-hero-kicker {
color: var(--green-light);
font-size: .68rem;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
html[data-theme] .dashboard-hero-kicker::before {
background: var(--green);
}
html[data-theme] .dashboard-hero-title {
color: var(--text);
font-size: 2.35rem;
letter-spacing: 0;
}
html[data-theme] .dashboard-hero-title span {
color: var(--green-light);
}
html[data-theme] .dashboard-hero-sub,
html[data-theme] .dashboard-hero-stat {
color: var(--text-muted);
}
html[data-theme] .dashboard-hero-stat {
min-height: 28px;
padding: 5px 9px;
border: 1px solid var(--border);
border-radius: 999px;
background: color-mix(in srgb, var(--card-bg) 76%, transparent);
font-weight: 760;
}
html[data-theme] .dashboard-hero-stat strong,
html[data-theme] .dashboard-hero-stat i,
html[data-theme] .dashboard-hero-stat svg {
color: var(--green-light);
}
html[data-theme] .dashboard-side-search {
padding: 0;
overflow: hidden;
}
html[data-theme] .dashboard-side-search-title,
html[data-theme] .dashboard-side-stats-title {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
color: var(--text);
font-size: .78rem;
font-weight: 900;
letter-spacing: .08em;
text-align: left;
text-transform: uppercase;
}
html[data-theme] .dashboard-side-search .dashboard-search-box {
margin: 16px;
}
html[data-theme] .dashboard-search-box {
background: var(--overlay-bg2);
border-color: var(--border);
border-radius: 8px;
box-shadow: none;
}
html[data-theme] .dashboard-search-box input {
color: var(--text);
}
html[data-theme] .dashboard-search-box button {
background: var(--accent);
color: #172033;
}
html[data-theme] .dashboard-search-results {
padding: 0 16px 16px;
}
html[data-theme] .dashboard-search-card,
html[data-theme] .diario-dashboard-item,
html[data-theme] .diario-feed-item,
html[data-theme] .aviso-card {
background: var(--card-bg);
border-color: var(--border);
box-shadow: var(--shadow);
}
html[data-theme] .dashboard-side-stat {
border-bottom-color: var(--border);
}
html[data-theme] .dashboard-side-stat:hover {
background: var(--green-bg);
}
html[data-theme] .dashboard-side-stat strong {
color: var(--green-light);
}
html[data-theme] .dashboard-highlight-tile-head {
color: var(--green-light);
border-bottom-color: var(--border);
letter-spacing: .08em;
}
html[data-theme] .dashboard-highlight-tile-head span::before {
box-shadow: none;
}
html[data-theme] .dashboard-highlight-oficiais .dashboard-highlight-tile-head,
html[data-theme] .dashboard-highlight-oficiais .dashboard-highlight-person small {
color: var(--accent);
}
html[data-theme] .dashboard-highlight-person small {
color: var(--green-light);
background: var(--green-bg);
border-color: var(--border-strong);
border-radius: 7px;
}
/* Page heroes and feature panels */
html[data-theme] .page-header:not(.corregedoria-header),
html[data-theme] .academy-hero {
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow);
}
html[data-theme="dark"] .page-header:not(.corregedoria-header),
html[data-theme="dark"] .academy-hero {
background:
linear-gradient(90deg, rgba(26, 163, 93, .12), transparent 38%),
repeating-linear-gradient(90deg, rgba(238, 244, 248, .035) 0 1px, transparent 1px 22px),
linear-gradient(135deg, #101827, #0b1220);
}
html[data-theme="light"] .page-header:not(.corregedoria-header),
html[data-theme="light"] .academy-hero {
background:
linear-gradient(90deg, rgba(22, 130, 74, .12), transparent 38%),
repeating-linear-gradient(90deg, rgba(23, 32, 51, .035) 0 1px, transparent 1px 22px),
linear-gradient(135deg, #ffffff, #edf3f7);
}
html[data-theme] .page-header:not(.corregedoria-header)::before,
html[data-theme] .academy-hero::before {
content: '';
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--green) 0 46%, var(--accent) 46% 61%, var(--blue) 61% 100%);
}
html[data-theme] .page-header:not(.corregedoria-header) h2,
html[data-theme] .academy-hero-head h1,
html[data-theme] .diario-heading h1 {
color: var(--text);
font-size: 2rem;
letter-spacing: 0;
}
html[data-theme] .page-header:not(.corregedoria-header) p,
html[data-theme] .academy-hero-head p,
html[data-theme] .diario-heading p {
color: var(--text-muted) !important;
}
html[data-theme] .academy-kicker,
html[data-theme] .diario-heading span,
html[data-theme] .corregedoria-eyebrow,
html[data-theme] .corregedoria-card-kicker,
html[data-theme] .corregedoria-tag {
color: var(--green-light);
letter-spacing: .10em;
}
html[data-theme] .academy-badge,
html[data-theme] .dept-card-title-icon,
html[data-theme] .diario-dashboard-badge,
html[data-theme] .diario-feed-badge {
background: var(--card-bg);
border-color: var(--border);
border-radius: 8px;
box-shadow: var(--shadow);
}
/* Lists and content cards */
html[data-theme] .aviso-banner {
background:
linear-gradient(90deg, color-mix(in srgb, var(--dept-color, var(--green)) 22%, transparent), transparent),
repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 0 1px, transparent 1px 12px);
}
html[data-theme] .aviso-dept {
color: color-mix(in srgb, var(--dept-color, var(--green)) 72%, var(--text));
letter-spacing: 0;
}
html[data-theme] .aviso-links a {
background: color-mix(in srgb, var(--dept-color, var(--green)) 12%, var(--card-bg));
color: var(--text);
border-color: color-mix(in srgb, var(--dept-color, var(--green)) 28%, var(--border));
border-radius: 7px;
}
html[data-theme] .diario-dashboard-tags span,
html[data-theme] .diario-feed-tags span {
background: var(--green-bg);
color: var(--green-light);
border-color: var(--border-strong);
}
html[data-theme] .diario-document-paper {
border-radius: 8px;
box-shadow: var(--shadow);
}
html[data-theme="dark"] .diario-document-paper {
background: #101d31;
border-color: rgba(83, 130, 181, .25);
color: #6f8bb1;
}
html[data-theme="light"] .diario-detail-hero {
background: linear-gradient(90deg, rgba(255, 255, 255, .98), rgba(242, 248, 252, .96));
color: #10233e;
}
html[data-theme="light"] .diario-detail-copy h1,
html[data-theme="light"] .diario-author-card h3,
html[data-theme="light"] .diario-document-paper h2 {
color: #10233e;
}
html[data-theme="light"] .diario-detail-meta,
html[data-theme="light"] .diario-detail-edited,
html[data-theme="light"] .diario-ementa p,
html[data-theme="light"] .diario-document-subject p,
html[data-theme="light"] .feb-document-body {
color: #50698a;
}
html[data-theme="light"] .diario-ementa,
html[data-theme="light"] .diario-author-card,
html[data-theme="light"] .diario-document-paper {
background: #fff;
border-color: rgba(24, 49, 76, .1);
}
html[data-theme="light"] .diario-author-cover {
background: #eef4fa;
border-bottom-color: rgba(24, 49, 76, .08);
}
html[data-theme="light"] .diario-author-card .diario-user-imager-lg {
background: #e9f1f8;
outline-color: rgba(24, 49, 76, .08);
}
html[data-theme="light"] .diario-author-facts {
border-top-color: rgba(24, 49, 76, .08);
}
html[data-theme="light"] .diario-author-facts dd {
color: #10233e;
}
html[data-theme="light"] .diario-document-subject {
border-top-color: rgba(24, 49, 76, .1);
}
html[data-theme] .perfil-hero-nick,
html[data-theme] .rh-state-card__title,
html[data-theme] .produto-nome,
html[data-theme] .militar-name {
color: var(--text);
}
html[data-theme] .rh-state-card__meta,
html[data-theme] .produto-desc,
html[data-theme] .militar-meta {
color: var(--text-muted);
}
html[data-theme] .form-wizard-step {
border-color: var(--border);
background: var(--card-bg2);
border-radius: 8px;
}
html[data-theme] .form-wizard-step.is-active,
html[data-theme] .form-wizard-step.is-done {
border-color: var(--border-strong);
background: var(--green-bg);
}
html[data-theme] .form-wizard-step-number {
background: var(--card-bg);
color: var(--text);
border-color: var(--border);
}
html[data-theme] .form-wizard-step.is-active .form-wizard-step-number,
html[data-theme] .form-wizard-step.is-done .form-wizard-step-number {
background: var(--green);
color: #fff;
}
html[data-theme] .produto-img {
background: var(--card-bg2);
border-bottom-color: var(--border);
}
html[data-theme] .produto-preco {
color: var(--accent);
}
/* Modals, overlays and auth */
html[data-theme] .modal-overlay,
html[data-theme] .modal-sm {
background: rgba(0, 0, 0, .62);
backdrop-filter: blur(5px);
}
html[data-theme] .modal,
html[data-theme] .modal-sm-box,
html[data-theme] .search-modal,
html[data-theme] .notif-dropdown,
html[data-theme] .user-dropdown,
html[data-theme] .auth-card,
html[data-theme] .toast {
background: var(--overlay-bg);
border-color: var(--border);
border-radius: 8px;
box-shadow: var(--shadow-lg);
color: var(--text);
}
html[data-theme] .user-dropdown,
html[data-theme] .notif-dropdown {
top: calc(var(--topbar-h) - 2px);
right: 28px;
}
html[data-theme] .user-dropdown-item:hover,
html[data-theme] .notif-item:hover {
background: var(--green-bg);
}
html[data-theme] .notif-item.unread {
background: var(--green-bg);
border-left-color: var(--green);
}
html[data-theme] .modal-tabs,
html[data-theme] .right-tabs {
border-bottom-color: var(--border);
}
/* Login and public auth */
html[data-theme] .login-body {
background: var(--gray-bg);
}
html[data-theme] .login-left {
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 24px), linear-gradient(135deg, #09091a, #25375e 48%, #0e1022);
}
html[data-theme] .login-left::before,
html[data-theme] .login-left::after {
display: none;
}
html[data-theme] .login-right {
background: var(--gray-bg);
}
html[data-theme] .login-form-box {
max-width: 430px;
}
html[data-theme] .login-hero-badge img {
filter: none;
}
html[data-theme] .login-hero-kicker,
html[data-theme] .login-hero-divider,
html[data-theme] .accent {
color: var(--accent);
}
html[data-theme] .login-hero-divider {
background: var(--accent);
}
html[data-theme] .login-form-box h1,
html[data-theme] .login-form-box h2 {
color: var(--text);
font-size: 1.85rem;
letter-spacing: 0;
}
html[data-theme] .login-subtitle {
color: var(--text-muted);
}
/* Footer */
html[data-theme] .app-footer {
border-top: 1px solid var(--border);
background: var(--card-bg);
}
html[data-theme] .app-footer-cta {
background:
linear-gradient(90deg, var(--green-bg), var(--accent-bg)),
var(--card-bg);
border-bottom-color: var(--border);
}
html[data-theme] .app-footer-badge {
border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
background: var(--accent-bg);
border-radius: 8px;
}
html[data-theme] .app-footer-cta strong,
html[data-theme] .app-footer-links h4 {
color: var(--text);
}
html[data-theme] .app-footer-cta span,
html[data-theme] .app-footer-links a {
color: var(--text-muted);
}
html[data-theme] .app-footer-links h4::before {
background: var(--accent);
}
/* Mobile */
@media (max-width: 900px) {
html[data-theme] .sidebar {
background: var(--sidebar-bg);
border-bottom-color: var(--border);
box-shadow: var(--shadow);
}
html[data-theme] .sidebar-logo-title {
color: var(--text);
}
html[data-theme] .sidebar-logo-sub {
color: var(--green-light);
}
html[data-theme] .topnav-mobile-toggle {
color: var(--text);
background: var(--card-bg);
border-color: var(--border);
}
html[data-theme] .sidebar.menu-open .sidebar-nav {
background: var(--overlay-bg);
border-color: var(--border);
border-radius: 8px;
}
html[data-theme] .sidebar.menu-open .sidebar-nav .nav-item,
html[data-theme] .sidebar.menu-open .sidebar-nav .nav-item-summary,
html[data-theme] .sidebar.menu-open .sidebar-nav .nav-group-docs-btn {
color: var(--text);
}
html[data-theme] .sidebar.menu-open .sidebar-nav .nav-submenu,
html[data-theme] .sidebar.menu-open .sidebar-nav .nav-submenu-wide,
html[data-theme] .sidebar.menu-open .sidebar-nav .nav-submenu-flat {
background: var(--card-bg2);
border-color: var(--border);
border-radius: 8px;
}
html[data-theme] .content-area {
--content-inline-pad: 14px;
--content-top-pad: 14px;
}
html[data-theme] .dashboard-hero {
margin: 0 14px;
padding: 24px 18px 22px;
}
html[data-theme] .dashboard-hero-title {
font-size: 1.85rem;
}
html[data-theme] .dashboard-weekly-highlights-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
html[data-theme] .dashboard-hero {
margin: 0 10px;
}
html[data-theme] .dashboard-hero-badge {
width: 58px;
height: 58px;
}
html[data-theme] .dashboard-hero-badge img {
width: 38px;
height: 38px;
}
html[data-theme] .dashboard-hero-stat {
width: 100%;
justify-content: flex-start;
}
html[data-theme] .user-dropdown,
html[data-theme] .notif-dropdown {
right: 10px;
width: min(320px, calc(100vw - 20px));
}
html[data-theme] .page-header:not(.corregedoria-header) h2,
html[data-theme] .academy-hero-head h1,
html[data-theme] .diario-heading h1 {
font-size: 1.65rem;
}
}
/* =====================================================
FEB THEME V3 - profile, RH, lists and modal usability
===================================================== */
html[data-theme] #app-topbar-shell {
z-index: 420;
}
html[data-theme] #app-topbar-shell .modal-overlay,
html[data-theme] #app-topbar-shell .search-overlay,
html[data-theme] #app-topbar-shell .modal-sm {
pointer-events: auto;
}
html[data-theme] .modal-overlay.open,
html[data-theme] .modal-sm.open,
html[data-theme] .search-overlay.open {
pointer-events: auto;
}
html[data-theme] #app-topbar-shell:has(.modal-overlay.open),
html[data-theme] #app-topbar-shell:has(.search-overlay.open),
html[data-theme] #app-topbar-shell:has(.modal-sm.open) {
z-index: 9990;
pointer-events: auto;
}
html[data-theme] .modal-overlay.open .modal,
html[data-theme] .modal-sm.open .modal-sm-box,
html[data-theme] .search-overlay.open .search-modal {
pointer-events: auto;
}
html[data-theme] .feb-title-hero {
align-items: center;
}
html[data-theme] .feb-title-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
color: var(--green-light);
font-size: .68rem;
font-weight: 900;
letter-spacing: .13em;
text-transform: uppercase;
}
html[data-theme] .feb-title-kicker::before {
content: '';
width: 18px;
height: 18px;
border-radius: 4px;
background:
linear-gradient(90deg, var(--green) 50%, transparent 50%),
linear-gradient(var(--accent) 50%, transparent 50%);
background-size: 9px 9px;
border: 1px solid var(--border);
}
html[data-theme] .feb-title-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
html[data-theme] .feb-title-meta span {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--card-bg) 78%, transparent);
color: var(--text-muted);
font-size: .74rem;
font-weight: 800;
}
/* Perfil */
body[data-current-route="perfil"] .perfil-hero {
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-md);
}
body[data-current-route="perfil"] .perfil-hero::after {
content: '';
position: absolute;
right: 24px;
bottom: 20px;
width: 92px;
height: 36px;
z-index: 3;
background:
linear-gradient(90deg, rgba(255, 255, 255, .16) 50%, transparent 50%),
linear-gradient(rgba(255, 255, 255, .16) 50%, transparent 50%);
background-size: 8px 8px;
pointer-events: none;
}
body[data-current-route="perfil"] .perfil-hero-bg {
background:
linear-gradient(90deg, rgba(26, 163, 93, .20), transparent 42%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 24px),
linear-gradient(135deg, #101827, #0b2118 54%, #1c2a15) !important;
}
html[data-theme="light"] body[data-current-route="perfil"] .perfil-hero-bg {
background:
linear-gradient(90deg, rgba(22, 130, 74, .16), transparent 42%),
repeating-linear-gradient(90deg, rgba(23, 32, 51, .045) 0 1px, transparent 1px 24px),
linear-gradient(135deg, #ffffff, #e9f0f4 54%, #eff4e6) !important;
}
body[data-current-route="perfil"] .perfil-avatar-wrap {
border-radius: 10px;
background: linear-gradient(135deg, var(--green), var(--accent));
box-shadow: 0 18px 38px rgba(0, 0, 0, .22), 0 0 0 8px color-mix(in srgb, var(--green) 12%, transparent);
}
body[data-current-route="perfil"] .perfil-avatar-wrap img {
border-radius: 7px;
}
body[data-current-route="perfil"] .perfil-hero-nick {
letter-spacing: 0;
text-transform: none;
}
body[data-current-route="perfil"] .perfil-hero-tag-pill,
body[data-current-route="perfil"] .psp {
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(8, 13, 22, .48);
backdrop-filter: blur(8px);
}
body[data-current-route="perfil"] .perfil-tricard {
gap: 18px;
}
body[data-current-route="perfil"] .p-card,
body[data-current-route="perfil"] .sidebar-hero-card,
body[data-current-route="perfil"] .sidebar-metric-card,
body[data-current-route="perfil"] .sidebar-detail-card,
body[data-current-route="perfil"] .career-entry-card,
body[data-current-route="perfil"] .lotacoes-summary-item {
border-radius: 8px;
border-color: var(--border);
background: var(--card-bg);
box-shadow: var(--shadow);
}
body[data-current-route="perfil"] .p-card-head {
min-height: 58px;
border-bottom-color: var(--border);
background: linear-gradient(180deg, var(--green-bg), transparent);
letter-spacing: .08em;
}
body[data-current-route="perfil"] .p-card-head-sub {
margin-left: 6px;
color: var(--text-muted);
font-size: .7rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
}
body[data-current-route="perfil"] .p-card-head-icon-badge {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 6px;
color: var(--accent);
background: var(--accent-bg);
border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}
body[data-current-route="perfil"] .p-card--emblemas {
border-radius: 28px;
background: linear-gradient(180deg, var(--card-bg), var(--card-bg2));
border: 1px solid var(--border);
box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .04);
}
body[data-current-route="perfil"] .p-card--emblemas .p-card-body {
padding: 0;
}
body[data-current-route="perfil"] .p-card--emblemas .emblemas-igrid {
grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
gap: 15px 18px;
max-height: 266px;
padding: 28px 30px 28px 24px;
justify-items: center;
background: radial-gradient(circle at 20% 8%, var(--green-bg), transparent 34%), linear-gradient(180deg, var(--card-bg2), var(--card-bg));
border: 0;
border-radius: 0;
}
body[data-current-route="perfil"] .p-card--emblemas .ei-cell {
width: 58px;
height: 58px;
min-height: 0;
display: grid !important;
place-items: center;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
transform: none;
}
body[data-current-route="perfil"] .p-card--emblemas .ei-cell:hover {
transform: translateY(-2px) scale(1.08);
background: transparent !important;
filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .38));
}
body[data-current-route="perfil"] .ei-cell-frame {
display: grid;
place-items: center;
width: 58px;
height: 58px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body[data-current-route="perfil"] .p-card--emblemas .ei-cell img {
width: 40px;
height: 40px;
object-fit: contain;
filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .35));
}
body[data-current-route="perfil"] .ei-cell-name {
display: none;
}
body[data-current-route="perfil"] .honraria-card,
body[data-current-route="perfil"] .honraria-period {
border-radius: 8px;
}
body[data-current-route="perfil"] .honraria-card {
border-color: var(--border);
background: var(--card-bg2);
}
body[data-current-route="perfil"] .honraria-title,
body[data-current-route="perfil"] .honraria-meta strong {
color: var(--text);
}
body[data-current-route="perfil"] .honraria-meta,
body[data-current-route="perfil"] .honraria-period {
color: var(--text-muted);
}
/* RH e requerimentos */
body[data-current-route="rh_requerimentos"] .rh-list-title {
border: 1px solid var(--border);
border-left: 5px solid var(--green);
border-radius: 8px;
background: var(--card-bg);
box-shadow: var(--shadow);
}
html[data-theme] body[data-current-route="rh_requerimentos"] .rh-list-title h3 {
gap: 10px;
}
html[data-theme] body[data-current-route="rh_requerimentos"] .rh-list-title h3::before {
content: none;
display: none;
}
html[data-theme] body[data-current-route="rh_requerimentos"] .rh-list-title .card-subtitle {
padding-left: 0;
}
body[data-current-route="rh_requerimentos"] .rh-feed-card {
border-radius: 8px;
border: 1px solid var(--border);
border-left: 5px solid var(--rh-border, var(--green));
background: var(--card-bg);
box-shadow: var(--shadow);
}
body[data-current-route="rh_requerimentos"] .rh-feed-card__header {
padding: 15px 16px;
border-bottom-color: var(--border);
background: linear-gradient(180deg, var(--green-bg), transparent);
}
body[data-current-route="rh_requerimentos"] .rh-feed-card__avatar {
border-radius: 8px;
border-color: var(--border);
background: var(--card-bg2);
image-rendering: pixelated;
}
body[data-current-route="rh_requerimentos"] .rh-feed-card__author {
color: var(--text);
font-size: .94rem;
}
body[data-current-route="rh_requerimentos"] .rh-output-postagem,
body[data-current-route="rh_requerimentos"] .rh-publicacao-quote {
border-radius: 8px;
border-color: var(--border);
}
body[data-current-route="rh_requerimentos"] .rh-feed-card__grid {
padding: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--card-bg2);
}
body[data-current-route="rh_requerimentos"] .rh-action-btn {
gap: 8px;
min-height: 40px;
padding: 9px 18px;
border-radius: 8px;
color: #fff;
font-weight: 850;
letter-spacing: 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, .16);
transform: translateY(0);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body[data-current-route="rh_requerimentos"] .rh-action-btn::before {
display: inline-grid;
place-items: center;
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
font-size: .78rem;
font-weight: 900;
line-height: 1;
}
body[data-current-route="rh_requerimentos"] .rh-action-btn--approve {
background: var(--green);
border: 1px solid color-mix(in srgb, var(--green-dark) 65%, transparent);
color: #fff;
box-shadow: 0 10px 20px color-mix(in srgb, var(--green) 28%, transparent);
}
body[data-current-route="rh_requerimentos"] .rh-action-btn--approve::before {
content: "\f00c";
}
body[data-current-route="rh_requerimentos"] .rh-action-btn--reject {
background: var(--red);
border: 1px solid color-mix(in srgb, var(--red) 70%, #7f1d1d);
color: #fff;
box-shadow: 0 10px 20px color-mix(in srgb, var(--red) 24%, transparent);
}
body[data-current-route="rh_requerimentos"] .rh-action-btn--reject::before {
content: "\f00d";
}
body[data-current-route="rh_requerimentos"] .rh-action-btn--cancel {
background: var(--accent);
color: #172033;
border: 1px solid color-mix(in srgb, var(--accent) 70%, #7c5b11);
box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 26%, transparent);
}
body[data-current-route="rh_requerimentos"] .rh-action-btn--cancel::before {
content: "\f05e";
}
body[data-current-route="rh_requerimentos"] .rh-action-btn--undo-cancel {
background: var(--blue);
border: 1px solid color-mix(in srgb, var(--blue) 70%, #0b2a52);
color: #fff;
box-shadow: 0 10px 20px color-mix(in srgb, var(--blue) 24%, transparent);
}
body[data-current-route="rh_requerimentos"] .rh-action-btn--undo-cancel::before {
content: "\f2ea";
}
html[data-theme] body[data-current-route="rh_requerimentos"] .rh-action-btn:hover {
color: #fff;
filter: brightness(1.04);
transform: translateY(-1px);
box-shadow: 0 14px 24px rgba(0, 0, 0, .18);
}
html[data-theme] body[data-current-route="rh_requerimentos"] .rh-action-btn--cancel:hover {
color: #172033;
}
/* Listagens */
body[data-current-route="listagens"] .listagens-main {
max-width: 1320px;
}
body[data-current-route="listagens"] .listagens-rank-box,
body[data-current-route="listagens"] .listagem-surface {
border-radius: 8px;
border-color: var(--border);
background: var(--card-bg);
box-shadow: var(--shadow);
overflow: visible;
}
body[data-current-route="listagens"] .listagens-rank-box::before {
width: 8px;
background: linear-gradient(180deg, var(--rank-accent, var(--green)), var(--accent));
border-radius: 8px 0 0 8px;
}
body[data-current-route="listagens"] .listagens-rank-badge,
body[data-current-route="listagens"] .listagem-surface-head,
body[data-current-route="listagens"] .listagens-rank-title {
border-radius: 7px;
background: var(--rank-fill, var(--green));
box-shadow: var(--shadow);
}
body[data-current-route="listagens"] .listagens-rank-badge,
body[data-current-route="listagens"] .listagem-surface-head {
max-width: calc(100% - 28px);
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.2;
}
body[data-current-route="listagens"] .listagens-rank-section {
margin-top: 22px;
}
body[data-current-route="listagens"] .listagens-rank-section:first-child {
margin-top: 12px;
}
body[data-current-route="listagens"] .listagens-rank-box .listagens-simple-list {
padding-left: 34px;
}
body[data-current-route="listagens"] .listagens-rank-box>.listagem-empty {
margin: 28px 16px 16px 34px;
padding: 18px 20px;
border-radius: 7px;
border-color: var(--border);
background: var(--card-bg2);
color: var(--text-muted);
}
body[data-current-route="listagens"] .listagens-simple-item {
color: var(--text);
}
body[data-current-route="listagens"] .listagens-simple-item::marker {
color: var(--green-light);
}
/* Departamentos */
body[data-current-route="departamentos"] .dept-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
body[data-current-route="departamentos"] .dept-card {
position: relative;
overflow: hidden;
border-radius: 8px;
background: var(--card-bg);
box-shadow: var(--shadow);
}
body[data-current-route="departamentos"] .dept-card::after {
content: '';
position: absolute;
right: 16px;
bottom: 14px;
width: 56px;
height: 24px;
background:
linear-gradient(90deg, color-mix(in srgb, var(--green) 14%, transparent) 50%, transparent 50%),
linear-gradient(color-mix(in srgb, var(--green) 14%, transparent) 50%, transparent 50%);
background-size: 7px 7px;
pointer-events: none;
}
body[data-current-route="departamentos"] .dept-card-header {
height: 6px;
}
body[data-current-route="departamentos"] .dept-card-body {
padding: 18px;
}
body[data-current-route="departamentos"] .dept-card-title {
align-items: center;
gap: 10px;
color: var(--text);
font-size: .98rem;
}
body[data-current-route="departamentos"] .dept-card-title-icon {
width: 38px;
height: 38px;
border-radius: 8px;
background: var(--card-bg2);
}
body[data-current-route="departamentos"] .dept-card-desc {
min-height: 42px;
color: var(--text-muted);
line-height: 1.55;
}
body[data-current-route="departamentos"] .dept-card-meta span {
display: inline-flex;
padding: 5px 9px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--card-bg2);
color: var(--text-muted);
font-weight: 800;
}
body[data-current-route="departamentos"] .academy-members .destaque-item,
body[data-current-route="departamentos"] .academy-summary .config-toggle-row {
border-color: var(--border) !important;
}
/* FontAwesome title icons */
html[data-theme] .card-header-row h3,
html[data-theme] .right-card-title,
html[data-theme] .feb-title-kicker {
--title-icon: "\f0ae";
--title-icon-color: var(--green);
}
html[data-theme] .card-header-row h3::before,
html[data-theme] .right-card-title::before,
html[data-theme] .feb-title-kicker::before {
content: var(--title-icon);
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
flex: 0 0 24px;
border-radius: 7px;
border: 1px solid color-mix(in srgb, var(--title-icon-color) 30%, var(--border));
background: color-mix(in srgb, var(--title-icon-color) 13%, var(--card-bg));
color: var(--title-icon-color);
box-shadow: none;
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
font-size: .78rem;
font-weight: 900;
line-height: 1;
text-rendering: auto;
}
html[data-theme] .feb-title-kicker::before {
width: 22px;
height: 22px;
flex-basis: 22px;
border-radius: 6px;
font-size: .72rem;
}
body[data-current-route="dashboard"] .dashboard-avisos-card .card-header-row h3,
body[data-current-route="departamentos"] .card-header-row h3,
body[data-current-route="academia"] .card-header-row h3 {
--title-icon: "\f0a1";
--title-icon-color: var(--accent);
}
body[data-current-route="dashboard"] .dashboard-diario-card .card-header-row h3,
body[data-current-route="diario_oficial"] .card-header-row h3 {
--title-icon: "\f1ea";
--title-icon-color: var(--blue);
}
body[data-current-route="dashboard"] .dashboard-legacy-acontecimentos .card-header-row h3,
body[data-current-route="perfil"] .card-header-row h3 {
--title-icon: "\f1da";
--title-icon-color: var(--green);
}
body[data-current-route="dashboard"] .dashboard-legacy-career .right-card-title {
--title-icon: "\f201";
--title-icon-color: var(--green);
}
body[data-current-route="dashboard"] .dashboard-legacy-destaques .right-card-title {
--title-icon: "\f091";
--title-icon-color: var(--accent);
}
body[data-current-route="departamentos"] .feb-title-kicker,
body[data-current-route="departamentos"] .right-card-title,
body[data-current-route="academia"] .right-card-title {
--title-icon: "\f0e8";
--title-icon-color: var(--blue);
}
body[data-current-route="listagens"] .feb-title-kicker {
--title-icon: "\f03a";
--title-icon-color: var(--green);
}
body[data-current-route="rh_requerimentos"] .feb-title-kicker,
body[data-current-route="rh_requerimentos"] .rh-list-title h3 {
--title-icon: "\f46d";
--title-icon-color: var(--green);
}
html[data-theme] body[data-current-route="rh_requerimentos"] .rh-list-title h3::before {
content: var(--title-icon);
display: inline-grid;
}
body[data-current-route="loja"] .card-header-row h3 {
--title-icon: "\f07a";
--title-icon-color: var(--accent);
}
body[data-current-route="militares"] .card-header-row h3 {
--title-icon: "\f0c0";
--title-icon-color: var(--green);
}
@media (max-width: 700px) {
body[data-current-route="perfil"] .p-card--emblemas .emblemas-igrid {
grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
max-height: 260px;
padding: 22px 22px 22px 18px;
}
html[data-theme] .feb-title-meta span {
width: 100%;
justify-content: flex-start;
}
}
/* Brand primary: blue. Legacy --green vars are kept as aliases for existing components. */
:root,
html[data-theme] {
--green: #276294;
--green-light: #6fa8d3;
--green-dark: #1b496f;
--green-bg: rgba(39, 98, 148, .12);
--green-glow: rgba(39, 98, 148, .22);
--blue: #276294;
--blue-bg: rgba(39, 98, 148, .12);
--border-strong: rgba(39, 98, 148, .30);
}
html[data-theme="light"] {
--green: #276294;
--green-light: #276294;
--green-dark: #1b496f;
--green-bg: rgba(39, 98, 148, .10);
--green-glow: rgba(39, 98, 148, .18);
--blue: #276294;
--blue-bg: rgba(39, 98, 148, .10);
--border-strong: rgba(39, 98, 148, .28);
}
html[data-theme] body[data-current-route="rh_requerimentos"] .rh-action-btn--approve:hover {
background: var(--green-dark);
border-color: var(--green-dark);
color: #fff;
}
html[data-theme] body[data-current-route="rh_requerimentos"] .rh-action-btn--reject:hover {
background: color-mix(in srgb, var(--red) 88%, #111827);
border-color: color-mix(in srgb, var(--red) 75%, #111827);
color: #fff;
}
html[data-theme] body[data-current-route="rh_requerimentos"] .rh-action-btn--cancel:hover {
background: color-mix(in srgb, var(--accent) 90%, #fff);
border-color: color-mix(in srgb, var(--accent) 76%, #7c5b11);
color: #172033;
}
html[data-theme] body[data-current-route="rh_requerimentos"] .rh-action-btn--undo-cancel:hover {
background: var(--green-dark);
border-color: var(--green-dark);
color: #fff;
}
/* Remove checkerboard decorative motifs site-wide */
html[data-theme] .dashboard-hero::after,
body[data-current-route="perfil"] .perfil-hero::after,
body[data-current-route="departamentos"] .dept-card::after {
content: none !important;
display: none !important;
background: none !important;
}
html[data-theme] .card-header-row h3::before,
html[data-theme] .right-card-title::before,
html[data-theme] .feb-title-kicker::before {
background-image: none !important;
background-size: auto !important;
}
html[data-theme] .dashboard-hero,
html[data-theme] .page-header:not(.corregedoria-header),
html[data-theme] .academy-hero {
background:
linear-gradient(90deg, color-mix(in srgb, var(--green) 10%, transparent), transparent 44%),
var(--card-bg) !important;
}
html[data-theme="light"] .dashboard-hero,
html[data-theme="light"] .page-header:not(.corregedoria-header),
html[data-theme="light"] .academy-hero {
background:
linear-gradient(90deg, color-mix(in srgb, var(--green) 9%, transparent), transparent 44%),
#f7fafc !important;
}
body[data-current-route="perfil"] .perfil-hero-bg,
html[data-theme="light"] body[data-current-route="perfil"] .perfil-hero-bg {
background:
linear-gradient(90deg, color-mix(in srgb, var(--green) 14%, transparent), transparent 42%),
var(--card-bg) !important;
}
body[data-current-route="perfil"] .p-card--emblemas .ei-cell {
background: transparent !important;
}
/* Responsive hardening: shell, mobile nav and common content */
@media (max-width: 900px) {
html,
body {
max-width: 100%;
overflow-x: hidden;
}
html[data-theme] #app-sidebar-shell {
position: fixed;
inset: 0 0 auto 0;
width: 100%;
height: var(--topbar-h);
z-index: 560;
pointer-events: none;
}
html[data-theme] .sidebar {
position: fixed;
inset: 0 0 auto 0;
width: 100%;
height: var(--topbar-h);
min-height: var(--topbar-h);
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 0 148px 0 58px;
overflow: visible;
border-right: 0;
border-bottom: 1px solid var(--border);
pointer-events: auto;
}
html[data-theme] .sidebar-logo {
min-width: 0;
height: var(--topbar-h);
min-height: 0;
margin: 0;
padding: 0;
gap: 9px;
border: 0;
}
html[data-theme] .sidebar-logo img {
width: 34px;
height: 34px;
flex: 0 0 34px;
}
html[data-theme] .sidebar-logo-copy {
min-width: 0;
}
html[data-theme] .sidebar-logo-title,
html[data-theme] .sidebar-logo-sub {
max-width: min(34vw, 220px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
html[data-theme] .topnav-mobile-toggle {
display: inline-flex !important;
position: fixed;
top: 12px;
left: 12px;
right: auto;
transform: none;
z-index: 680;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: 9px;
color: var(--text);
background: var(--card-bg);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
html[data-theme] .topnav-mobile-toggle:hover,
html[data-theme] .sidebar.menu-open .topnav-mobile-toggle {
color: var(--green-light);
border-color: var(--border-strong);
background: var(--green-bg);
}
html[data-theme] .mobile-nav-backdrop {
top: var(--topbar-h);
z-index: 610;
}
body.mobile-menu-open #app-sidebar-shell {
z-index: 670;
}
html[data-theme] .sidebar.menu-open .sidebar-nav {
display: flex;
position: fixed;
top: calc(var(--topbar-h) + 10px);
left: 10px;
bottom: 10px;
width: min(360px, calc(100vw - 20px));
max-width: calc(100vw - 20px);
z-index: 640;
padding: 12px;
overflow: auto;
border-radius: 8px;
box-shadow: var(--shadow-lg);
}
html[data-theme] #app-topbar-shell {
position: fixed;
top: 0;
right: 0;
left: auto;
height: var(--topbar-h);
z-index: 600;
pointer-events: none;
}
html[data-theme] .topbar {
height: var(--topbar-h);
min-height: var(--topbar-h);
padding: 0 10px 0 0;
justify-content: flex-end;
pointer-events: none;
}
html[data-theme] .topbar-actions {
gap: 5px;
pointer-events: auto;
}
html[data-theme] .topbar-action-shell {
display: none !important;
}
html[data-theme] .icon-btn,
html[data-theme] .user-avatar-btn {
width: 38px;
height: 38px;
flex: 0 0 38px;
}
html[data-theme] .main-layout {
margin-left: 0 !important;
padding-top: var(--topbar-h);
min-width: 0;
}
html[data-theme] #page-content,
html[data-theme] .content-area,
html[data-theme] .content-left,
html[data-theme] .content-right {
width: 100%;
max-width: 100%;
min-width: 0;
}
html[data-theme] .content-area {
flex-direction: column;
gap: 14px;
padding: 14px;
}
html[data-theme] .content-right {
flex: 0 1 auto;
}
html[data-theme] .card,
html[data-theme] .page-header,
html[data-theme] .academy-hero,
html[data-theme] .feb-title-hero,
html[data-theme] .rh-list-title,
html[data-theme] .rh-feed-card,
html[data-theme] .listagem-surface,
html[data-theme] .perfil-history-card {
max-width: 100%;
min-width: 0;
}
html[data-theme] .card-header-row,
html[data-theme] .rh-feed-card__header {
flex-wrap: wrap;
align-items: flex-start;
gap: 10px;
}
html[data-theme] .card-header-row .tabs,
html[data-theme] .tabs,
html[data-theme] .right-tabs,
html[data-theme] .modal-tabs {
width: 100%;
max-width: 100%;
margin-left: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
html[data-theme] .dashboard-weekly-highlights-grid,
html[data-theme] .perfil-tricard,
html[data-theme] .lotacoes-summary,
html[data-theme] .dept-grid,
html[data-theme] .form-wizard-grid-2,
html[data-theme] .form-wizard-grid-3,
html[data-theme] .question-builder-grid {
grid-template-columns: 1fr !important;
}
html[data-theme] .lotacoes-table-wrap,
html[data-theme] .card:has(.table) {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
html[data-theme] .table {
min-width: 620px;
}
html[data-theme] .rh-feed-card__grid {
grid-template-columns: 1fr !important;
}
html[data-theme] .rh-feed-card__grid dt {
white-space: normal !important;
}
html[data-theme] .rh-feed-card__time {
width: 100%;
margin-left: 46px;
}
html[data-theme] .rh-feed-card__actions,
html[data-theme] .modal-footer,
html[data-theme] .form-wizard-actions,
html[data-theme] .form-wizard-actions-main {
width: 100%;
flex-wrap: wrap;
}
html[data-theme] .rh-action-btn,
html[data-theme] .form-wizard-actions-main>* {
flex: 1 1 150px;
}
html[data-theme] .modal-overlay.open,
html[data-theme] .modal-sm.open,
html[data-theme] .search-overlay.open {
align-items: flex-start;
overflow-y: auto;
padding: 10px;
}
html[data-theme] .modal,
html[data-theme] .modal-sm-box,
html[data-theme] .search-modal {
width: min(100%, calc(100vw - 20px));
max-width: calc(100vw - 20px);
max-height: calc(100dvh - 20px);
overflow-y: auto;
border-radius: 8px;
}
html[data-theme] .app-footer-cta {
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
padding: 20px 14px;
}
html[data-theme] .app-footer-socials {
grid-column: 1 / -1;
justify-content: flex-start;
}
html[data-theme] .app-footer-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
padding: 22px 14px;
}
}
@media (max-width: 600px) {
html[data-theme] .sidebar {
padding-right: 132px;
}
html[data-theme] .sidebar-logo-title,
html[data-theme] .sidebar-logo-sub {
max-width: 34vw;
}
html[data-theme] .content-area {
padding: 10px;
}
html[data-theme] .card-header-row,
html[data-theme] .rh-feed-card__body,
html[data-theme] .modal-tab-content {
padding-left: 14px;
padding-right: 14px;
}
html[data-theme] .modal-tabs {
padding-left: 14px;
padding-right: 14px;
}
html[data-theme] .table {
min-width: 560px;
}
html[data-theme] .rh-action-btn,
html[data-theme] .modal-footer .btn-primary,
html[data-theme] .modal-footer .btn-secondary {
width: 100%;
flex-basis: 100%;
}
html[data-theme] .app-footer-links {
grid-template-columns: 1fr;
}
}
@media (max-width: 420px) {
html[data-theme] .sidebar {
padding-right: 124px;
}
html[data-theme] .sidebar-logo img {
width: 32px;
height: 32px;
}
html[data-theme] .sidebar-logo-title {
max-width: 30vw;
font-size: .78rem;
}
html[data-theme] .sidebar-logo-sub {
display: none;
}
html[data-theme] .topbar-actions {
gap: 3px;
}
html[data-theme] .icon-btn,
html[data-theme] .user-avatar-btn {
width: 36px;
height: 36px;
flex-basis: 36px;
}
}
/* Turnos */
.turnos-page {
max-width: 1120px;
margin: 0 auto;
padding: 8px 20px 34px;
}
.turnos-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 24px;
}
.turnos-head span {
display: block;
color: color-mix(in srgb, var(--blue) 70%, var(--text-muted));
font-size: .72rem;
font-weight: 900;
letter-spacing: .22em;
text-transform: uppercase;
}
.turnos-head h1 {
margin: 5px 0 0;
color: var(--text);
font-size: 1.55rem;
font-weight: 950;
letter-spacing: 0;
}
.turnos-online-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid rgba(55, 210, 100, .24);
border-radius: 999px;
background: rgba(55, 210, 100, .12);
color: #5df078;
font-size: .8rem;
font-weight: 850;
}
.turnos-online-pill i {
font-size: .58rem;
}
.turnos-layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.turnos-side {
display: grid;
gap: 12px;
}
.turno-self-card,
.turnos-actions-card,
.turnos-history,
.turnos-board {
border: 1px solid rgba(83, 130, 181, .26);
border-radius: 10px;
background: #101d31;
box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
overflow: hidden;
}
html[data-theme="light"] .turno-self-card,
html[data-theme="light"] .turnos-actions-card,
html[data-theme="light"] .turnos-history,
html[data-theme="light"] .turnos-board {
background: #fff;
}
.turno-self-card {
position: relative;
min-height: 214px;
display: grid;
place-items: center;
align-content: center;
gap: 8px;
padding-top: 26px;
background:
radial-gradient(circle at 50% 16%, rgba(213, 167, 22, .16), transparent 38%),
linear-gradient(135deg, rgba(78, 29, 130, .38), #101d31 60%);
}
.turno-self-card strong {
color: #f5f8ff;
font-size: 1.18rem;
font-weight: 950;
}
html[data-theme="light"] .turno-self-card strong {
color: var(--text);
}
.turno-self-card small {
color: #6f8bb1;
font-weight: 700;
}
.turno-status-dot {
position: absolute;
top: 14px;
left: 18px;
right: 18px;
color: #6f8bb1;
font-size: .68rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
}
.turno-status-dot.is-online {
color: #55e46b;
}
.turno-avatar-orbit {
position: relative;
width: 92px;
height: 92px;
display: grid;
place-items: center;
border: 2px solid rgba(213, 167, 22, .46);
border-radius: 50%;
background: rgba(7, 12, 24, .52);
}
.turno-avatar-orbit img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 8px;
image-rendering: pixelated;
}
.turno-avatar-orbit span {
position: absolute;
width: 13px;
height: 10px;
border-radius: 4px;
background: #ffd27a;
top: 30px;
}
.turno-avatar-orbit span:first-of-type {
left: 8px;
}
.turno-avatar-orbit span:last-of-type {
right: 8px;
}
.turnos-highlights {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-bottom: 16px;
}
.turno-highlight-card {
border: 1px solid color-mix(in srgb, var(--highlight-color) 28%, rgba(83, 130, 181, .22));
border-radius: 10px;
background:
linear-gradient(135deg, color-mix(in srgb, var(--highlight-color) 12%, transparent), transparent 58%),
#101d31;
box-shadow: 0 18px 46px rgba(0, 0, 0, .18);
overflow: hidden;
}
html[data-theme="light"] .turno-highlight-card {
background:
linear-gradient(135deg, color-mix(in srgb, var(--highlight-color) 10%, transparent), transparent 62%),
#fff;
}
.turno-highlight-card header {
display: grid;
gap: 3px;
padding: 14px 16px 11px;
border-bottom: 1px solid rgba(83, 130, 181, .16);
}
.turno-highlight-card header span {
color: #426187;
font-size: .68rem;
font-weight: 950;
letter-spacing: .16em;
text-transform: uppercase;
}
.turno-highlight-card header strong {
color: var(--text);
font-size: .98rem;
font-weight: 950;
}
.turno-highlight-list {
display: grid;
}
.turno-highlight-row {
display: grid;
grid-template-columns: 28px 34px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid rgba(83, 130, 181, .10);
}
.turno-highlight-row:last-child {
border-bottom: 0;
}
.turno-highlight-rank {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border-radius: 7px;
background: color-mix(in srgb, var(--highlight-color) 18%, transparent);
color: var(--highlight-color);
font-size: .78rem;
font-weight: 950;
}
.turno-highlight-row img {
width: 34px;
height: 34px;
border-radius: 7px;
object-fit: cover;
image-rendering: pixelated;
background: rgba(0, 0, 0, .18);
}
.turno-highlight-row strong {
min-width: 0;
color: var(--text);
font-weight: 900;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.turno-highlight-row small {
color: #426187;
font-weight: 900;
}
.turno-highlight-empty {
padding: 20px 16px;
color: var(--text-muted);
font-weight: 800;
text-align: center;
}
.turno-action {
width: 100%;
min-height: 46px;
display: grid;
grid-template-columns: 22px 1fr 22px;
align-items: center;
gap: 10px;
padding: 0 18px;
border: 0;
border-bottom: 1px solid rgba(83, 130, 181, .18);
background: transparent;
color: #6f8bb1;
font-weight: 800;
text-align: left;
cursor: pointer;
}
.turno-action:hover {
color: #f5f8ff;
background: rgba(83, 130, 181, .08);
}
.turno-action.danger {
color: #ff4f5d;
}
.turno-action.success {
color: #55e46b;
}
html[data-theme="light"] .turno-action:hover {
color: var(--text);
background: rgba(22, 118, 202, .08);
}
html[data-theme="light"] .turno-action.danger:hover {
color: #c91f33;
}
html[data-theme="light"] .turno-action.success:hover {
color: #04733b;
}
html[data-theme="light"] .turno-sector-menu[open]>.turno-action,
html[data-theme="light"] .turno-history-menu[open]>.turno-action {
color: var(--text);
background: rgba(22, 118, 202, .07);
}
.turno-sector-menu summary {
list-style: none;
}
.turno-sector-menu summary::-webkit-details-marker {
display: none;
}
.turno-sector-menu[open] summary .fa-chevron-right,
.turno-history-menu[open] summary .fa-chevron-right {
transform: rotate(90deg);
}
.turno-sector-menu>div,
.turno-inline-sector>div {
display: grid;
gap: 6px;
padding: 10px;
}
.turno-sector-menu button,
.turno-inline-sector button {
width: 100%;
min-height: 36px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(83, 130, 181, .18);
border-radius: 7px;
background: rgba(255, 255, 255, .03);
color: var(--text);
padding: 8px 10px;
cursor: pointer;
font-weight: 800;
justify-content: flex-start;
white-space: nowrap;
}
.turno-sector-menu button span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sector-color);
}
.turno-sector-menu button:hover,
.turno-sector-menu button.active,
.turno-inline-sector button:hover {
border-color: var(--border-strong);
background: var(--green-bg);
}
.turnos-history header,
.turnos-board header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 18px;
border-bottom: 1px solid rgba(83, 130, 181, .2);
color: var(--text);
font-weight: 900;
}
.turnos-board header span {
color: #426187;
font-size: .78rem;
font-weight: 800;
}
.turnos-board,
.turnos-table {
overflow: visible;
}
.turnos-history-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 18px;
border-bottom: 1px solid rgba(83, 130, 181, .12);
}
.turnos-history-row small {
color: #426187;
font-weight: 800;
}
.turno-sector-badge {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
padding: 5px 11px;
border: 1px solid color-mix(in srgb, var(--sector-color) 42%, transparent);
border-radius: 6px;
background: color-mix(in srgb, var(--sector-color) 16%, transparent);
color: var(--sector-color);
font-size: .74rem;
font-weight: 950;
}
.turno-sector-badge i {
font-size: .48rem;
}
.turnos-table {
display: grid;
}
.turnos-row {
display: grid;
grid-template-columns: minmax(180px, 1.35fr) minmax(140px, .75fr) minmax(150px, .85fr) 92px;
align-items: center;
gap: 16px;
padding: 14px 20px;
border-bottom: 1px solid rgba(83, 130, 181, .16);
position: relative;
}
.turnos-row-head {
min-height: 44px;
padding-block: 0;
color: #426187;
font-size: .68rem;
font-weight: 950;
letter-spacing: .22em;
text-transform: uppercase;
}
.turno-agent {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.turno-agent img {
width: 40px;
height: 40px;
border-radius: 8px;
object-fit: cover;
image-rendering: pixelated;
background: rgba(0, 0, 0, .2);
}
.turno-agent strong {
display: flex;
align-items: center;
gap: 7px;
color: var(--text);
font-weight: 950;
}
.turno-agent strong span {
padding: 3px 6px;
border: 1px solid rgba(213, 167, 22, .45);
border-radius: 999px;
color: #f2c241;
font-size: .62rem;
}
.turno-agent small {
display: flex;
align-items: center;
gap: 5px;
color: #55e46b;
font-size: .72rem;
font-weight: 800;
}
.turno-agent small.paused {
color: #ff5c67;
}
.turno-agent small::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
}
.turno-time strong {
color: var(--text);
font-size: .95rem;
}
.turno-time small {
display: block;
margin-top: 3px;
color: #426187;
font-size: .72rem;
}
.turno-row-actions {
display: flex;
align-items: center;
gap: 7px;
}
.turno-row-actions>button,
.turno-row-actions>.turno-inline-sector>summary {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 1px solid rgba(83, 130, 181, .22);
border-radius: 7px;
background: rgba(83, 130, 181, .09);
color: #426187;
cursor: pointer;
}
.turno-row-actions>button:hover,
.turno-row-actions>.turno-inline-sector>summary:hover {
color: var(--text);
border-color: var(--border-strong);
}
.turno-row-actions>button:disabled {
opacity: .45;
cursor: not-allowed;
}
.turno-inline-sector {
position: relative;
}
.turno-inline-sector summary {
list-style: none;
}
.turno-inline-sector summary::-webkit-details-marker {
display: none;
}
.turno-inline-sector>div {
position: absolute;
right: 0;
top: 36px;
z-index: 80;
min-width: 210px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--card-bg);
box-shadow: var(--shadow-md);
}
.turno-history-panel {
border-top: 1px solid rgba(83, 130, 181, .14);
background: rgba(255, 255, 255, .02);
}
.turno-history-panel.is-loading {
opacity: .55;
pointer-events: none;
}
.turnos-history-meta {
padding: 10px 12px 0;
color: #426187;
font-size: .74rem;
font-weight: 850;
}
.turnos-history-list {
display: grid;
gap: 12px;
padding: 12px;
}
.turno-history-card {
border: 1px solid rgba(83, 130, 181, .16);
border-radius: 8px;
background: color-mix(in srgb, var(--card-bg2) 72%, transparent);
overflow: hidden;
}
.turno-history-summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 14px 16px;
border-bottom: 1px solid rgba(83, 130, 181, .14);
}
.turno-history-summary strong {
color: var(--text);
font-size: .95rem;
font-weight: 950;
}
.turno-history-summary small {
display: block;
margin-top: 3px;
color: #426187;
font-weight: 800;
}
.turno-history-total {
min-width: 92px;
text-align: right;
}
.turno-history-total span {
display: block;
color: #426187;
font-size: .68rem;
font-weight: 950;
letter-spacing: .16em;
text-transform: uppercase;
}
.turno-history-total strong {
display: block;
margin-top: 2px;
font-size: 1.05rem;
}
.turno-sector-timeline {
display: grid;
}
.turno-sector-step {
display: grid;
grid-template-columns: minmax(150px, .85fr) minmax(210px, 1fr) 72px;
align-items: center;
gap: 14px;
padding: 11px 16px;
border-bottom: 1px solid rgba(83, 130, 181, .10);
}
.turno-sector-step:last-child {
border-bottom: 0;
}
.turno-sector-step small {
color: #426187;
font-size: .76rem;
font-weight: 800;
}
.turno-sector-step>strong {
color: var(--text);
font-weight: 950;
text-align: right;
}
.turnos-my-history {
overflow: hidden;
}
.turnos-my-history>summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 15px 18px;
border-bottom: 1px solid rgba(83, 130, 181, .2);
color: var(--text);
font-weight: 900;
cursor: pointer;
list-style: none;
}
.turnos-my-history>summary::-webkit-details-marker {
display: none;
}
.turnos-my-history>summary strong {
display: inline-flex;
align-items: center;
gap: 9px;
}
.turnos-my-history>summary span {
display: inline-flex;
align-items: center;
gap: 8px;
color: #426187;
font-size: .78rem;
font-weight: 800;
}
.turnos-my-history>summary .fa-chevron-right {
transition: transform .15s ease;
}
.turnos-my-history[open]>summary .fa-chevron-right {
transform: rotate(90deg);
}
html[data-theme="light"] .turnos-my-history>summary:hover {
color: var(--text);
background: rgba(22, 118, 202, .07);
}
.turno-history-panel .turno-history-summary {
grid-template-columns: 1fr;
gap: 8px;
padding: 12px;
}
.turno-history-panel .turno-history-total {
min-width: 0;
text-align: left;
}
.turno-history-panel .turno-sector-step {
grid-template-columns: 1fr;
gap: 5px;
padding: 10px 12px;
}
.turno-history-panel .turno-sector-step>strong {
text-align: left;
}
.turnos-my-history .turno-history-panel .turno-history-summary {
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
padding: 14px 16px;
}
.turnos-my-history .turno-history-panel .turno-history-total {
min-width: 92px;
text-align: right;
}
.turnos-my-history .turno-history-panel .turno-sector-step {
grid-template-columns: minmax(150px, .85fr) minmax(210px, 1fr) 72px;
gap: 14px;
padding: 11px 16px;
}
.turnos-my-history .turno-history-panel .turno-sector-step>strong {
text-align: right;
}
.turnos-history-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 12px 12px;
}
.turnos-history-pager button {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 1px solid rgba(83, 130, 181, .22);
border-radius: 7px;
background: rgba(83, 130, 181, .09);
color: #426187;
cursor: pointer;
}
.turnos-history-pager button:hover {
color: var(--text);
border-color: var(--border-strong);
}
.turnos-history-pager button:disabled {
opacity: .45;
cursor: not-allowed;
}
.turnos-history-pager span {
min-width: 58px;
color: #426187;
font-size: .76rem;
font-weight: 900;
text-align: center;
}
.turnos-empty,
.turnos-empty-row {
padding: 22px;
color: var(--text-muted);
text-align: center;
}
@media (max-width: 900px) {
.turnos-page {
padding: 8px 10px 28px;
}
.turnos-head {
align-items: flex-start;
flex-direction: column;
}
.turnos-highlights {
grid-template-columns: 1fr;
}
.turnos-layout {
grid-template-columns: 1fr;
}
.turnos-row {
grid-template-columns: 1fr;
gap: 10px;
}
.turnos-row-head {
display: none;
}
.turno-row-actions {
justify-content: flex-start;
}
.turno-sector-step {
grid-template-columns: 1fr;
gap: 6px;
}
.turno-sector-step>strong {
text-align: left;
}
.turno-history-summary {
grid-template-columns: 1fr;
}
.turno-history-total {
text-align: left;
}
.turnos-my-history .turno-history-panel .turno-history-summary,
.turnos-my-history .turno-history-panel .turno-sector-step {
grid-template-columns: 1fr;
}
.turnos-my-history .turno-history-panel .turno-history-total,
.turnos-my-history .turno-history-panel .turno-sector-step>strong {
text-align: left;
}
}
/* Perfil: historico da carreira paginado */
body[data-current-route="perfil"] .perfil-history-card {
overflow: hidden;
}
body[data-current-route="perfil"] .perfil-history-card .card-header-row {
align-items: center;
border-bottom: 1px solid var(--border);
background:
linear-gradient(90deg, color-mix(in srgb, var(--green) 9%, transparent), transparent 48%),
var(--card-bg);
}
body[data-current-route="perfil"] #perfilHistoricoTabs {
gap: 8px;
flex-wrap: wrap;
}
body[data-current-route="perfil"] #perfilHistoricoTabs .tab {
min-height: 36px;
gap: 8px;
}
body[data-current-route="perfil"] #perfilHistoricoTabs .tab-count {
display: inline-grid;
place-items: center;
min-width: 24px;
height: 22px;
padding: 0 7px;
border-radius: 7px;
background: var(--overlay-bg2);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: .72rem;
font-weight: 850;
}
body[data-current-route="perfil"] #perfilHistoricoTabs .tab.active .tab-count,
body[data-current-route="perfil"] #perfilHistoricoTabs .tab:hover .tab-count {
border-color: color-mix(in srgb, var(--green) 36%, var(--border));
background: color-mix(in srgb, var(--green) 12%, var(--card-bg));
color: var(--green-light);
}
body[data-current-route="perfil"] .perfil-tab-panel {
padding: 0;
}
body[data-current-route="perfil"] .perfil-history-page {
padding: 16px;
transition: opacity .16s ease;
}
body[data-current-route="perfil"] .perfil-history-page[aria-busy="true"],
body[data-current-route="perfil"] .perfil-history-page.is-loading {
opacity: .58;
pointer-events: none;
}
body[data-current-route="perfil"] .perfil-history-strip {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
margin-bottom: 14px;
padding: 10px 12px;
border: 1px solid var(--border);
border-left: 4px solid var(--green);
border-radius: 8px;
background: var(--card-bg2);
color: var(--text-muted);
font-size: .78rem;
font-weight: 760;
}
body[data-current-route="perfil"] .perfil-history-strip strong {
color: var(--text);
font-size: .9rem;
font-weight: 900;
}
body[data-current-route="perfil"] .perfil-history-strip em {
color: var(--text-muted);
font-style: normal;
}
body[data-current-route="perfil"] .career-timeline {
gap: 10px;
padding: 2px 0 2px 0;
}
body[data-current-route="perfil"] .career-timeline::before {
left: 20px;
top: 8px;
bottom: 8px;
width: 2px;
background: linear-gradient(180deg, var(--green), color-mix(in srgb, var(--accent) 72%, var(--green)), transparent);
opacity: .58;
box-shadow: none;
}
body[data-current-route="perfil"] .career-timeline::after {
content: none;
}
body[data-current-route="perfil"] .career-entry {
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
}
body[data-current-route="perfil"] .career-entry-rail {
padding-top: 8px;
}
body[data-current-route="perfil"] .career-entry-icon {
width: 34px;
height: 34px;
padding: 8px;
border-radius: 8px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--career-accent) 18%, var(--card-bg)), var(--card-bg));
border: 1px solid color-mix(in srgb, var(--career-accent) 34%, var(--border));
box-shadow: 0 0 0 5px color-mix(in srgb, var(--career-accent) 8%, transparent);
}
body[data-current-route="perfil"] .career-entry-card {
border-radius: 8px;
padding: 14px 16px;
background:
linear-gradient(90deg, color-mix(in srgb, var(--career-accent) 10%, transparent), transparent 34%),
var(--card-bg);
border: 1px solid var(--border);
border-left: 4px solid color-mix(in srgb, var(--career-accent) 82%, var(--green));
box-shadow: var(--shadow);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body[data-current-route="perfil"] .career-entry-card::before {
left: -12px;
top: 24px;
width: 12px;
height: 2px;
background: color-mix(in srgb, var(--career-accent) 74%, var(--green));
opacity: .72;
}
body[data-current-route="perfil"] .career-entry-card::after {
content: none;
}
body[data-current-route="perfil"] .career-entry-title-wrap {
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
}
body[data-current-route="perfil"] .career-entry-title {
color: var(--text);
font-size: 1rem;
letter-spacing: 0;
}
body[data-current-route="perfil"] .career-entry-subtitle {
color: var(--text-muted);
font-size: .86rem;
font-weight: 650;
}
body[data-current-route="perfil"] .career-entry-meta {
color: var(--text-muted);
font-size: .76rem;
}
body[data-current-route="perfil"] .career-entry-tag,
body[data-current-route="perfil"] .career-entry-link-chip,
body[data-current-route="perfil"] .career-entry-date-pill {
border-radius: 7px;
}
body[data-current-route="perfil"] .career-entry-tag {
background: color-mix(in srgb, var(--career-accent) 13%, var(--card-bg));
border-color: color-mix(in srgb, var(--career-accent) 28%, var(--border));
}
body[data-current-route="perfil"] .career-entry-date-pill {
background: var(--card-bg2);
border-color: var(--border);
color: var(--text-muted);
}
body[data-current-route="perfil"] .career-entry-motive {
border-radius: 8px;
background: var(--overlay-bg2);
border-color: var(--border);
border-left-color: color-mix(in srgb, var(--career-accent) 44%, var(--green));
color: var(--text-muted);
font-style: normal;
}
body[data-current-route="perfil"] .career-entry.is-linkable:hover .career-entry-card {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--career-accent) 38%, var(--border-strong));
border-left-color: color-mix(in srgb, var(--career-accent) 88%, var(--green));
background:
linear-gradient(90deg, color-mix(in srgb, var(--career-accent) 13%, transparent), transparent 38%),
var(--card-bg);
box-shadow: var(--shadow-md);
}
body[data-current-route="perfil"] .perfil-history-pagination {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 7px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
body[data-current-route="perfil"] .perfil-history-pagination a,
body[data-current-route="perfil"] .perfil-history-pagination span {
display: inline-grid;
place-items: center;
min-width: 34px;
height: 34px;
padding: 0 11px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--card-bg2);
color: var(--text-muted);
font-size: .78rem;
font-weight: 820;
text-decoration: none;
}
body[data-current-route="perfil"] .perfil-history-pagination a:hover,
body[data-current-route="perfil"] .perfil-history-pagination a.active {
border-color: var(--border-strong);
background: var(--green-bg);
color: var(--green-light);
}
body[data-current-route="perfil"] .perfil-history-pagination span.is-disabled,
body[data-current-route="perfil"] .perfil-history-pagination-ellipsis {
opacity: .48;
cursor: default;
}
html[data-theme="light"] body[data-current-route="perfil"] .perfil-history-card .card-header-row,
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-card {
background:
linear-gradient(90deg, color-mix(in srgb, var(--green) 8%, transparent), transparent 38%),
#ffffff;
}
html[data-theme="light"] body[data-current-route="perfil"] .perfil-history-strip,
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-date-pill,
html[data-theme="light"] body[data-current-route="perfil"] .perfil-history-pagination a,
html[data-theme="light"] body[data-current-route="perfil"] .perfil-history-pagination span {
background: #f7fafc;
}
@media (max-width: 620px) {
body[data-current-route="perfil"] .perfil-history-card .card-header-row {
align-items: flex-start;
gap: 12px;
}
body[data-current-route="perfil"] #perfilHistoricoTabs {
width: 100%;
}
body[data-current-route="perfil"] #perfilHistoricoTabs .tab {
flex: 1 1 0;
justify-content: center;
}
body[data-current-route="perfil"] .perfil-history-page {
padding: 14px;
}
body[data-current-route="perfil"] .career-entry {
grid-template-columns: 36px minmax(0, 1fr);
gap: 10px;
}
body[data-current-route="perfil"] .career-timeline::before {
left: 17px;
}
body[data-current-route="perfil"] .career-entry-icon {
width: 30px;
height: 30px;
padding: 7px;
}
body[data-current-route="perfil"] .career-entry-title-wrap {
grid-template-columns: 1fr;
}
body[data-current-route="perfil"] .perfil-history-pagination {
justify-content: center;
}
}
/* Stories polish: placed at the end to beat broad theme/button rules. */
@keyframes febStoryRingSpin {
to {
transform: rotate(360deg);
}
}
html[data-theme] .social-stories-card {
overflow: hidden;
}
html[data-theme] .social-stories-card .card-header-row {
padding: 16px 18px 12px;
}
html[data-theme] .social-stories-row {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 13px 18px 16px !important;
border-top: 1px solid var(--border);
scrollbar-width: thin;
}
html[data-theme] button.social-story-tile {
appearance: none;
width: 78px !important;
min-width: 78px !important;
max-width: 78px !important;
flex: 0 0 78px !important;
min-height: 0 !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 5px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--text) !important;
font: inherit !important;
text-align: center !important;
cursor: pointer;
}
html[data-theme] .social-story-avatar {
width: 66px !important;
height: 66px !important;
min-width: 66px !important;
min-height: 66px !important;
display: grid !important;
place-items: center !important;
margin: 0 auto 2px !important;
padding: 3px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, var(--border-strong), var(--border)) !important;
position: relative;
overflow: hidden;
}
html[data-theme] .social-story-tile.is-create .social-story-avatar {
background: linear-gradient(135deg, rgba(22,118,202,.95), rgba(59,178,115,.95)) !important;
}
html[data-theme] .social-story-tile.is-unseen .social-story-avatar {
background: conic-gradient(from 180deg, #ff2d55, #ffb703, #8b5cf6, #00d4ff, #ff2d55) !important;
animation: febStoryRingSpin 2.2s linear infinite;
}
html[data-theme] .social-story-tile.is-unseen .social-story-avatar > img {
animation: febStoryRingSpin 2.2s linear infinite reverse;
}
html[data-theme] .social-story-avatar > img,
html[data-theme] .social-story-avatar > span {
width: 100% !important;
height: 100% !important;
display: grid !important;
place-items: center !important;
border-radius: 50% !important;
border: 2px solid var(--card-bg) !important;
background: var(--card-bg2) !important;
object-fit: cover !important;
}
html[data-theme] .social-story-avatar > span {
color: #fff !important;
font-size: 1rem !important;
}
html[data-theme] .social-story-name,
html[data-theme] .social-story-meta {
width: 100%;
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
html[data-theme] .social-story-name {
color: var(--text);
font-size: .74rem;
line-height: 1.1;
font-weight: 900;
}
html[data-theme] .social-story-meta {
margin-top: -2px;
color: var(--text-muted);
font-size: .66rem;
font-weight: 750;
}
html[data-theme] .social-story-empty,
html[data-theme] .social-story-loading {
flex: 1 0 240px;
width: auto;
min-height: 74px;
align-self: stretch;
}
@media (max-width: 720px) {
html[data-theme] .social-stories-card .card-header-row {
align-items: flex-start;
}
html[data-theme] .social-stories-row {
padding-left: 14px !important;
padding-right: 14px !important;
}
}
/* Perfil: historical action cards */
body[data-current-route="perfil"] .career-timeline {
display: grid;
gap: 12px;
padding: 4px 0;
}
body[data-current-route="perfil"] .career-timeline::before,
body[data-current-route="perfil"] .career-timeline::after,
body[data-current-route="perfil"] .career-entry-rail {
content: none;
display: none;
}
body[data-current-route="perfil"] .career-entry {
display: block;
color: inherit;
text-decoration: none;
}
body[data-current-route="perfil"] .career-entry-card {
position: relative;
overflow: hidden;
min-width: 0;
padding: 0;
border-radius: 10px;
border: 1px solid rgba(94,148,215,.28);
background: #0d1d31;
box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
body[data-current-route="perfil"] .career-entry-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--career-accent);
opacity: .9;
}
body[data-current-route="perfil"] .career-entry-card::after {
content: none;
}
body[data-current-route="perfil"] .career-entry-toolbar {
position: relative;
z-index: 1;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-height: 52px;
padding: 13px 18px 12px 20px;
border-bottom: 1px solid rgba(121,181,255,.12);
}
body[data-current-route="perfil"] .career-entry-rank-chip,
body[data-current-route="perfil"] .career-entry-tag,
body[data-current-route="perfil"] .career-entry-link-chip,
body[data-current-route="perfil"] .career-entry-date-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
border-radius: 6px;
white-space: nowrap;
line-height: 1;
}
body[data-current-route="perfil"] .career-entry-rank-chip {
padding: 5px 13px;
background: #071121;
border: 1px solid rgba(121,181,255,.18);
color: #fff;
font-size: .78rem;
font-weight: 900;
}
body[data-current-route="perfil"] .career-entry-tag {
padding: 5px 11px;
background: color-mix(in srgb, var(--career-accent) 18%, #071121);
border: 1px solid color-mix(in srgb, var(--career-accent) 40%, rgba(121,181,255,.14));
color: color-mix(in srgb, var(--career-accent) 82%, #e8f3ff);
font-size: .66rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
body[data-current-route="perfil"] .career-entry-tag--revoked {
background: rgba(245,158,11,.12);
border-color: rgba(245,158,11,.34);
color: #f59e0b;
}
body[data-current-route="perfil"] .career-entry-link-chip {
padding: 5px 11px;
background: #071121;
border: 1px solid rgba(121,181,255,.12);
color: #7fa5cf;
font-size: .72rem;
font-weight: 700;
letter-spacing: .02em;
text-decoration: none;
}
body[data-current-route="perfil"] .career-entry-link-chip:hover {
color: #dcecff;
border-color: color-mix(in srgb, var(--career-accent) 42%, rgba(121,181,255,.18));
}
body[data-current-route="perfil"] .career-entry-date-pill {
margin-left: auto;
padding: 5px 12px;
background: #071121;
border: 1px solid rgba(121,181,255,.10);
color: #7fa5cf;
font-size: .72rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: none;
}
body[data-current-route="perfil"] .career-entry-body {
position: relative;
z-index: 1;
padding: 17px 18px 18px 21px;
}
body[data-current-route="perfil"] .career-entry-main-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
margin: 0;
color: #f8fbff;
font-size: 1rem;
line-height: 1.35;
font-weight: 900;
}
body[data-current-route="perfil"] .career-entry-main-title span {
color: #6f90b5;
font-weight: 800;
}
body[data-current-route="perfil"] .career-entry-main-title strong {
color: #fff;
font-weight: 900;
}
body[data-current-route="perfil"] .career-entry-arrow {
color: var(--career-accent) !important;
font-weight: 900 !important;
}
body[data-current-route="perfil"] .career-entry-meta {
display: flex;
flex-wrap: wrap;
gap: 5px 10px;
margin-top: 8px;
color: #6f90b5;
font-size: .76rem;
letter-spacing: 0;
text-transform: none;
}
body[data-current-route="perfil"] .career-entry-meta span + span::before {
content: '\00b7';
margin-right: 10px;
color: rgba(111,144,181,.55);
}
body[data-current-route="perfil"] .career-entry-details {
display: grid;
gap: 8px;
margin-top: 16px;
padding: 12px 14px;
border-radius: 6px;
background: #071121;
border: 1px solid rgba(121,181,255,.08);
color: #7fa5cf;
font-size: .8rem;
line-height: 1.45;
}
body[data-current-route="perfil"] .career-entry-details p {
margin: 0;
}
body[data-current-route="perfil"] .career-entry-detail-row {
display: grid;
grid-template-columns: minmax(92px, .32fr) minmax(0, 1fr);
gap: 10px;
align-items: start;
}
body[data-current-route="perfil"] .career-entry-detail-row span {
color: #5f82ad;
}
body[data-current-route="perfil"] .career-entry-detail-row strong {
min-width: 0;
color: #8eb3df;
font-weight: 700;
}
body[data-current-route="perfil"] .career-entry.is-linkable:hover .career-entry-card {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--career-accent) 38%, rgba(94,148,215,.28));
box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 14px 28px rgba(0,0,0,.16);
}
body[data-current-route="perfil"] .career-entry.is-revoked .career-entry-card,
body[data-current-route="perfil"] .career-entry.is-revoked .career-entry-date-pill {
opacity: 1;
}
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-card {
background: #fff;
border-color: rgba(0,83,156,.16);
box-shadow: 0 8px 22px rgba(13,28,54,.07);
}
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-toolbar {
border-bottom-color: rgba(0,83,156,.10);
}
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-rank-chip,
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-link-chip,
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-date-pill {
background: #f4f8ff;
border-color: rgba(0,83,156,.14);
color: #24476b;
}
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-main-title {
color: #0d1c36;
}
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-main-title span,
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-meta,
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-detail-row span {
color: #5f7690;
}
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-main-title strong,
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-detail-row strong {
color: #0d1c36;
}
html[data-theme="light"] body[data-current-route="perfil"] .career-entry-details {
background: #f7fbff;
border-color: rgba(0,83,156,.10);
color: #315b82;
}
@media (max-width: 620px) {
body[data-current-route="perfil"] .career-entry-toolbar {
align-items: flex-start;
padding: 12px 14px 11px 17px;
}
body[data-current-route="perfil"] .career-entry-date-pill {
margin-left: 0;
}
body[data-current-route="perfil"] .career-entry-body {
padding: 15px 14px 16px 17px;
}
body[data-current-route="perfil"] .career-entry-main-title {
font-size: .94rem;
}
body[data-current-route="perfil"] .career-entry-detail-row {
grid-template-columns: 1fr;
gap: 3px;
}
}
/* Mobile shell fixes */
@media (max-width: 900px) {
html[data-theme] .topbar-action-shell {
display: inline-flex !important;
align-items: center;
gap: 2px;
flex: 0 0 auto;
padding: 2px;
border: 1px solid var(--border);
border-radius: 999px;
background: color-mix(in srgb, var(--card-bg) 86%, transparent);
}
html[data-theme] .topbar-action-shell .theme-btn {
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 999px;
}
html[data-theme] .app-footer-socials.social-fan {
position: static;
width: auto;
height: auto;
margin: 0;
justify-self: start;
justify-content: flex-start;
gap: 10px;
flex-wrap: wrap;
overflow: visible;
isolation: auto;
}
html[data-theme] .app-footer-socials.social-fan::after,
html[data-theme] .app-footer-socials.social-fan .social-fan-link::before {
display: none;
content: none;
}
html[data-theme] .app-footer-socials.social-fan .social-fan-trigger {
display: none;
}
html[data-theme] .app-footer-socials.social-fan .social-fan-link {
position: static;
left: auto;
top: auto;
width: 40px;
height: 40px;
flex: 0 0 40px;
margin: 0;
opacity: 1;
pointer-events: auto;
transform: none !important;
z-index: 1;
}
html[data-theme] .app-footer-socials.social-fan .social-fan-link:hover {
transform: translateY(-1px) !important;
}
}
@media (max-width: 420px) {
html[data-theme] .topbar-action-shell {
gap: 1px;
padding: 1px;
}
html[data-theme] .topbar-action-shell .theme-btn {
width: 32px;
height: 32px;
flex-basis: 32px;
}
}
/* Destaques voting */
html[data-theme] .dashboard-weekly-highlights-head > div {
min-width: 0;
}
html[data-theme] .dashboard-highlight-person .dashboard-highlight-period,
html[data-theme] .dashboard-highlight-tile > .dashboard-highlight-period {
color: var(--text-muted);
background: color-mix(in srgb, var(--card-bg) 86%, transparent);
border-color: var(--border);
}
html[data-theme] .dashboard-highlight-person .dashboard-highlight-period {
margin-left: 6px;
}
html[data-theme] .dashboard-highlight-tile > .dashboard-highlight-period {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 10px 16px 0;
padding: 4px 9px;
border: 1px solid var(--border);
border-radius: 7px;
font-size: .62rem;
font-weight: 900;
}
html[data-theme] .destaques-page,
html[data-theme] .admin-destaques-page {
display: block;
max-width: 1180px;
margin: 0 auto;
padding: 18px 22px 34px;
}
html[data-theme] .destaques-page .content-left,
html[data-theme] .admin-destaques-page .content-left {
width: 100%;
}
html[data-theme] .destaques-title-hero,
html[data-theme] .admin-destaques-hero {
align-items: center;
justify-content: space-between;
gap: 18px;
}
html[data-theme] .destaques-status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: 999px;
color: var(--green-light);
background: var(--green-bg);
font-size: .68rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
html[data-theme] .destaques-status-pill.is-fechada {
color: var(--red);
background: rgba(236, 93, 93, .10);
border-color: rgba(236, 93, 93, .25);
}
html[data-theme] .destaques-status-pill.is-rascunho {
color: var(--text-muted);
background: var(--input-bg);
border-color: var(--border);
}
html[data-theme] .destaques-state-card,
html[data-theme] .destaques-vote-card,
html[data-theme] .admin-destaques-form,
html[data-theme] .admin-destaques-side,
html[data-theme] .admin-destaques-result-card,
html[data-theme] .admin-destaques-history {
padding: 18px;
}
html[data-theme] .dashboard-destaques-vote-card {
margin-top: 16px;
}
html[data-theme] .dashboard-destaques-vote-card .card-header-row {
margin-bottom: 14px;
}
html[data-theme] .destaques-state-card h3 {
margin: 0 0 8px;
color: var(--text);
}
html[data-theme] .destaques-state-card p {
margin: 0;
color: var(--text-muted);
}
html[data-theme] .destaques-vote-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
html[data-theme] .destaques-vote-head span,
html[data-theme] .admin-destaques-summary span,
html[data-theme] .destaques-select-card > span,
html[data-theme] .admin-destaques-fields label > span,
html[data-theme] .admin-destaques-selects label > span {
display: block;
margin-bottom: 6px;
color: var(--text-muted);
font-size: .72rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
html[data-theme] .destaques-vote-head strong,
html[data-theme] .admin-destaques-summary strong {
color: var(--text);
font-size: .92rem;
}
html[data-theme] .destaques-vote-grid,
html[data-theme] .admin-destaques-selects {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
html[data-theme] .destaques-select-card {
display: block;
min-width: 0;
padding: 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--input-bg);
}
html[data-theme] .destaques-vote-footer,
html[data-theme] .admin-destaques-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
}
html[data-theme] .destaques-vote-footer span {
color: var(--text-muted);
font-size: .78rem;
}
html[data-theme] .destaques-voted-summary {
display: grid;
gap: 12px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--input-bg);
}
html[data-theme] .destaques-voted-summary > strong {
color: var(--text);
font-size: .9rem;
}
html[data-theme] .destaques-voted-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
html[data-theme] .destaques-voted-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--card-bg);
}
html[data-theme] .destaques-voted-row span {
flex: 0 0 auto;
color: var(--accent);
font-size: .72rem;
font-weight: 900;
text-transform: uppercase;
}
html[data-theme] .destaques-voted-row strong {
min-width: 0;
overflow: hidden;
color: var(--text);
font-size: .82rem;
text-overflow: ellipsis;
white-space: nowrap;
}
html[data-theme] .admin-destaques-grid {
display: grid;
grid-template-columns: minmax(0, 1.8fr) minmax(260px, .8fr);
gap: 16px;
}
html[data-theme] .admin-destaques-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 16px;
margin-bottom: 16px;
}
html[data-theme] .admin-destaques-control-actions {
display: grid;
gap: 10px;
margin-top: 14px;
}
html[data-theme] .admin-destaques-control-actions form,
html[data-theme] .admin-destaques-control-actions button {
width: 100%;
}
html[data-theme] .admin-destaques-summary {
margin-top: 16px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--input-bg);
}
html[data-theme] .admin-destaques-results {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
html[data-theme] .admin-destaques-result-card h3 {
margin: 0 0 12px;
color: var(--text);
font-size: .9rem;
}
html[data-theme] .admin-destaques-result-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-top: 1px solid var(--border);
}
html[data-theme] .admin-destaques-result-row span {
color: var(--text);
font-weight: 800;
}
html[data-theme] .admin-destaques-result-row strong {
color: var(--green-light);
white-space: nowrap;
}
html[data-theme] .admin-destaques-history {
margin-top: 16px;
}
html[data-theme] .admin-destaques-history-list {
display: grid;
gap: 8px;
margin-top: 14px;
}
html[data-theme] .admin-destaques-history-list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
background: var(--input-bg);
text-decoration: none;
}
html[data-theme] .admin-destaques-history-list a.active,
html[data-theme] .admin-destaques-history-list a:hover {
border-color: var(--border-strong);
background: var(--green-bg);
}
html[data-theme] .admin-destaques-history-list em {
color: var(--text-muted);
font-style: normal;
font-size: .76rem;
white-space: nowrap;
}
@media (max-width: 900px) {
html[data-theme] .destaques-page,
html[data-theme] .admin-destaques-page {
padding: 12px;
}
html[data-theme] .destaques-vote-grid,
html[data-theme] .destaques-voted-grid,
html[data-theme] .admin-destaques-grid,
html[data-theme] .admin-destaques-fields,
html[data-theme] .admin-destaques-selects,
html[data-theme] .admin-destaques-results {
grid-template-columns: 1fr;
}
html[data-theme] .destaques-vote-footer,
html[data-theme] .admin-destaques-actions,
html[data-theme] .admin-destaques-history-list a {
align-items: stretch;
flex-direction: column;
}
html[data-theme] .dashboard-highlight-person .dashboard-highlight-period {
margin-left: 0;
}
}