@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800&display=swap');
/*
 * PORTAL - estilos do layout "app": topo do Portal (arte + menu + botoes), paginas publicas (login, cadastro, novidades, ajuda,
 * privacidade) e o painel do jogador/administracao vestido com as cores do Portal (marinho + dourado).
 * Carregado por Portal/_publico.php e, no painel, por pt/index.php (somente com DTK_LAYOUT_PORTAL). A pagina inicial usa portal.css.
 */
:root { --pt-f: 'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; }

/* ==========================================================================
   Paleta: reaproveita os tokens do painel (--dtk-*) e do site (site-theme.css) para que TODAS as paginas e modulos mudem de cor sem
   reescrever nenhum modulo. Dourado no lugar do laranja, marinho no lugar do cinza-azulado.
   ========================================================================== */
body.dtk-portal, body.pt-publico {
    --dtk-bg: #071027;
    --dtk-bg-2: #0a1633;
    --dtk-surface: #0c1a3c;
    --dtk-surface-2: #11244d;
    --dtk-card: rgba(12, 26, 60, .88);
    --dtk-card-solid: #0c1a3c;
    --dtk-border: rgba(110, 150, 220, .32);
    --dtk-border-light: rgba(130, 170, 235, .42);
    --dtk-ink: #eaf2ff;
    --dtk-ink-soft: #9db4d8;
    --dtk-text: #eaf2ff;
    --dtk-text-muted: #9db4d8;
    --dtk-text-faint: rgba(157, 180, 216, .78);
    --dtk-orange: #f6c743;
    --dtk-orange-light: #ffe08a;
    --dtk-orange-dark: #e0a21f;
    --dtk-orange-soft: rgba(246, 199, 67, .16);
    --dtk-blue: #7cb6ff;
    --dtk-blue-dark: #a8cfff;
    --dtk-shadow: 0 14px 40px rgba(0, 0, 0, .5);
    --dtk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --dtk-shadow-md: 0 10px 28px rgba(0, 0, 0, .5);
    --dtk-ov-02: rgba(130, 170, 235, .035);
    --dtk-ov-03: rgba(130, 170, 235, .05);
    --dtk-ov-045: rgba(130, 170, 235, .07);
    --dtk-ov-05: rgba(130, 170, 235, .08);
    --dtk-ov-065: rgba(130, 170, 235, .1);
    --bs-body-bg: #071027;
    --bs-body-bg-rgb: 7, 16, 39;
    --bs-body-color: #eaf2ff;
    --bs-secondary-color: #9db4d8;
    --bs-border-color: rgba(110, 150, 220, .32);
    --bs-primary: #f6c743;
    --bs-primary-rgb: 246, 199, 67;
    --bs-link-color: #7cb6ff;
    --bs-link-hover-color: #a8cfff;
    --dtk-topbar-h: 110px;
    /* os modulos de ../modulos leem --mod-*, definidos em :root (la os --dtk-* ainda sao os da pagina classica): redefine aqui com a paleta do Portal */
    --mod-laranja: var(--dtk-orange); --mod-laranja-claro: var(--dtk-orange-light); --mod-laranja-escuro: var(--dtk-orange-dark);
    --mod-card: var(--dtk-card); --mod-card-solid: var(--dtk-card-solid); --mod-borda: var(--dtk-border-light); --mod-borda-suave: var(--dtk-border);
    --mod-texto: var(--dtk-text); --mod-mudo: var(--dtk-text-muted); --mod-muito-mudo: var(--dtk-text-faint); --mod-sombra: var(--dtk-shadow);
    --mod-ov-02: var(--dtk-ov-02); --mod-ov-03: var(--dtk-ov-03); --mod-ov-045: var(--dtk-ov-045); --mod-ov-05: var(--dtk-ov-05); --mod-ov-065: var(--dtk-ov-065);
}
html { background: #071027; }
body.dtk-portal, body.pt-publico { background: transparent !important; color: var(--dtk-ink); }
body.dtk-portal::before, .pt-fundo {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: #071027 url(img/placa.jpg) center top / cover no-repeat; filter: blur(20px) brightness(.42) saturate(1.1); transform: scale(1.08);
}
.pt-fundo { content: none; }
.pt-pular { position: absolute; left: -999px; top: 8px; z-index: 2000; padding: 8px 14px; border-radius: 6px; background: #fff; color: #0b1430; font: 700 14px var(--pt-f); }
.pt-pular:focus { left: 8px; }

/* botao principal dourado (mesmo do JOGAR AGORA) */
body.dtk-portal .btn-primary, body.pt-publico .btn-primary {
    --bs-btn-color: #2b1600; --bs-btn-hover-color: #2b1600; --bs-btn-active-color: #2b1600; --bs-btn-disabled-color: #5a4310;
    --bs-btn-bg: #f6c743; --bs-btn-border-color: #c98a0a; --bs-btn-hover-bg: #ffd75e; --bs-btn-hover-border-color: #e0a21f;
    --bs-btn-active-bg: #e8b52f; --bs-btn-active-border-color: #c98a0a; --bs-btn-disabled-bg: #b99a3e; --bs-btn-disabled-border-color: #9a7a22;
    background-image: linear-gradient(180deg, #ffe35a, #f5b81f); font-weight: 700;
}
body.dtk-portal .btn-outline-primary, body.pt-publico .btn-outline-primary {
    --bs-btn-color: #f6c743; --bs-btn-border-color: #c98a0a; --bs-btn-hover-bg: rgba(246, 199, 67, .16); --bs-btn-hover-color: #ffe08a; --bs-btn-hover-border-color: #f6c743;
    --bs-btn-active-bg: rgba(246, 199, 67, .26); --bs-btn-active-color: #ffe08a; --bs-btn-active-border-color: #f6c743;
}

/* ==========================================================================
   Topo: faixa da arte (110 px = barra de 69 px + 41 px da arte, que se dissolve no fundo)
   ========================================================================== */
.pt-head { position: relative; z-index: 1040; zoom: var(--z, 1); height: 110px; background: linear-gradient(180deg, #00152e 0, #051b3f 69px, #06112a 69px); }
.pt-head::before {
    content: ""; position: absolute; top: 0; height: 110px; left: max(0px, calc(50% - 768px)); width: 1536px; pointer-events: none;
    background: url(img/placa.jpg) 0 0 / 1536px 1024px no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 69px, rgba(0, 0, 0, .9) 80px, transparent 110px); mask-image: linear-gradient(180deg, #000 0, #000 69px, rgba(0, 0, 0, .9) 80px, transparent 110px);
}
.pt-head-in { position: relative; max-width: 1536px; height: 69px; margin: 0 auto; padding: 0 104px 0 0; display: flex; align-items: center; gap: 12px; font-family: var(--pt-f); }
.pt-head-in .navbar-brand, .pt-marca { position: absolute; left: 104px; top: 6px; width: 206px; height: 104px; margin: 0; padding: 0; border-radius: 12px; z-index: 3; transition: filter .2s; }
.pt-head-in .navbar-brand img { display: none; }
.pt-head-in .navbar-brand:hover, .pt-marca:hover { filter: drop-shadow(0 0 10px rgba(255, 200, 70, .55)); background: rgba(255, 255, 255, .03); }

/* menu do topo */
.pt-head a, .pt-head a:hover, .pt-head a:focus { text-decoration: none; }
.pt-menu-wrap { display: contents; }
.pt-menu-top { position: absolute; left: 332px; top: 15px; display: flex; margin: 0; padding: 0; list-style: none; z-index: 2; }
.pt-menu-top li { display: block; }
.pt-menu-top a.nv { position: relative; display: block; height: 53px; padding: 15px 16.5px 0; font: 500 13px/13px var(--pt-f); letter-spacing: .1px; text-transform: uppercase; color: #e6eefa; white-space: nowrap; transition: color .15s, text-shadow .15s; }
.pt-menu-top li:first-child a.nv { padding: 15px 20px 0 22px; min-width: 78px; }
.pt-menu-top a.nv:hover { color: #fff; text-shadow: 0 0 10px rgba(120, 180, 255, .75); }
.pt-menu-top a.nv.ativo { color: #f3d46b; }
.pt-menu-top a.nv.ativo::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 214, 120, .22); border-bottom: 0; border-radius: 11px 11px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(255, 196, 64, .11)); pointer-events: none; }
.pt-menu-top a.nv.ativo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: radial-gradient(ellipse at 50% 50%, #fff6b8 0, #ffe36a 14%, rgba(255, 255, 255, 0) 15%), linear-gradient(90deg, #b07a10, #f4c92e 16%, #f8d54a 50%, #f4c92e 84%, #b07a10); box-shadow: 0 0 8px rgba(255, 200, 60, .55); }

/* botoes (iguais aos da pagina inicial) */
.pt-acoes-topo { margin-left: auto; display: flex; align-items: center; gap: 16px; position: relative; z-index: 2; }
.bt, .pt-head-in .btn-play-now { display: inline-flex; align-items: center; font: 700 13px/1 var(--pt-f); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: filter .15s, transform .15s; text-decoration: none; }
.bt:hover, .pt-head-in .btn-play-now:hover { filter: brightness(1.12); transform: translateY(-1px); }
.bt svg { flex: none; }
.bt-login { height: 37px; min-width: 84px; padding: 0 13px; gap: 10px; border-radius: 6px; border: 1px solid #4aa6ee; color: #e9f8ff; background: linear-gradient(180deg, #2a95f5 0%, #0c63c9 48%, #074da3 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 4px rgba(0, 30, 90, .35), 0 0 12px rgba(33, 130, 255, .3); }
.bt-login svg { fill: #a5dcff; }
.bt-cad { height: 37px; min-width: 108px; padding: 0 13px 0 12px; gap: 6px; border-radius: 6px; border: 1px solid #cfa84a; color: #f2cd68; background: linear-gradient(180deg, #141f3d, #0d1633); box-shadow: inset 0 0 0 1px rgba(255, 214, 120, .12); }
.bt-cad svg { fill: #f0bf45; }
.bt-jogar, .pt-head-in .btn-play-now { height: 46px; min-width: 181px; padding: 0 14px; gap: 9px; border-radius: 8px; border: 2px solid #b8730b; color: #3a1600; font-size: 18.4px; font-weight: 800; letter-spacing: .1px; background: linear-gradient(180deg, #ffe35a 0%, #fcc728 42%, #f5a312 100%); box-shadow: inset 0 1px 0 #fff3a8, inset 0 -3px 0 rgba(160, 80, 0, .25), 0 0 16px rgba(255, 190, 40, .35); }
.bt-jogar .play { flex: none; width: 27px; height: 27px; border-radius: 50%; border: 2px solid #7a3d05; background: radial-gradient(circle at 50% 35%, #ffcb3a, #e8960c); display: grid; place-items: center; }
.bt-jogar .play i { display: block; width: 0; height: 0; border-left: 11px solid #2c1100; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.pt-menu-botao { display: none; }

/* ==========================================================================
   Rodape e conteudo das paginas publicas
   ========================================================================== */
.pt-conteudo { position: relative; min-height: calc(100vh - 260px); padding: 28px 0 40px; }
.pt-conteudo:focus { outline: 0; }
.pt-rodape { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center; padding: 14px 16px 22px; background: #060d1f; border-top: 1px solid rgba(80, 130, 220, .25); font: 400 12.5px/1.4 var(--pt-f); color: #8fa6c7; }
.pt-rodape a:hover { color: #fff; text-decoration: underline; }
.pt-auth-arte { display: flex; flex-direction: column; gap: 16px; }
.pt-auth-heroi { width: 100%; aspect-ratio: 430 / 363; border-radius: 14px; border: 1px solid var(--dtk-border); background: #071027 url(img/placa.jpg) 50% 10.45% / 357.2% auto no-repeat; box-shadow: 0 12px 36px rgba(0, 0, 0, .5); }
.pt-auth-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; font: 700 14px/1 var(--pt-f); text-transform: uppercase; }
.pt-auth-lista li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--dtk-border); background: linear-gradient(180deg, #11285a, #0b1b3e); color: #eaf2ff; }
.pt-auth-lista i { color: var(--dtk-orange); font-size: 1.1rem; }
body.pt-publico .auth-card, body.pt-publico .news-card { background: linear-gradient(180deg, rgba(14, 33, 71, .94), rgba(8, 19, 44, .96)); border-color: var(--dtk-border); }
body.pt-publico h1, body.pt-publico h2, body.pt-publico h3 { font-family: var(--pt-f); }

/* ==========================================================================
   PAINEL (pt/index.php com DTK_LAYOUT_PORTAL): topo no estilo do Portal, menu lateral vira gaveta
   ========================================================================== */
body.dtk-portal .dtk-topbar { position: relative !important; top: auto !important; left: auto !important; right: auto !important; height: 69px !important; padding: 0 104px 0 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.dtk-portal .pt-head-in .search-wrap, body.dtk-portal .pt-head-in .btn-vip, body.dtk-portal .pt-head-in .dtk-theme-toggle { display: none !important; }
body.dtk-portal .pt-head-in > .d-md-flex { order: 3; margin: 0 !important; display: flex !important; position: relative; z-index: 2; }
body.dtk-portal .pt-head-in .btn-play-now { margin: 0 !important; text-transform: uppercase; }
body.dtk-portal .pt-head-in .btn-play-now i { display: none; }
body.dtk-portal .pt-head-in .btn-play-now::before { content: ""; flex: none; width: 27px; height: 27px; border-radius: 50%; border: 2px solid #7a3d05; background: radial-gradient(circle at 50% 35%, #ffcb3a, #e8960c); }
body.dtk-portal .pt-head-in .btn-play-now::after { content: ""; position: absolute; left: 14px; top: 50%; width: 0; height: 0; margin: -7px 0 0 11px; border-left: 11px solid #2c1100; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
body.dtk-portal .pt-head-in .btn-play-now { position: relative; }
body.dtk-portal .pt-head-in .topbar-actions { order: 2; margin-left: auto !important; gap: 10px !important; position: relative; z-index: 2; border: 0 !important; padding-left: 0 !important; }
body.dtk-portal .pt-head-in .topbar-actions > li { border: 0 !important; }
body.dtk-portal .pt-head-in .navbar-toggler { position: absolute; left: 14px; top: 16px; z-index: 4; display: inline-flex !important; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid #cfa84a; border-radius: 6px; background: linear-gradient(180deg, #141f3d, #0d1633); color: #f2cd68; font: 700 13px/1 var(--pt-f); }
body.dtk-portal .pt-head-in .navbar-toggler i { font-size: 1.3rem !important; line-height: 1; }
body.dtk-portal .pt-head-in .navbar-toggler::after { content: "MENU"; }
body.dtk-portal .pt-head-in .notification-icon-box, body.dtk-portal .pt-head-in .avatar-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 8px; border: 1px solid rgba(110, 150, 220, .4); background: rgba(12, 26, 60, .75); color: #cfe0fb; }
body.dtk-portal .pt-head-in .avatar-toggle { padding: 0 4px; }
body.dtk-portal .pt-head-in .notification-icon-box:hover, body.dtk-portal .pt-head-in .avatar-toggle:hover { border-color: #f6c743; color: #fff; }
body.dtk-portal .dtk-srv-status { color: #cfe0fb; }

/* a barra lateral vira gaveta em qualquer largura */
/* sem .fixed-left: o app.js antigo tira essa classe do body em telas pequenas e o #wrapper ganha .enlarged (barra de 70 px, margin-left -75 px) */
body.dtk-portal #wrapper .dtk-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 300px !important; max-width: 86vw; z-index: 1101 !important; transform: translateX(-104%) !important; margin-left: 0 !important; padding-top: 8px !important; transition: transform .25s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .6); background: linear-gradient(180deg, #0c1a3c, #08122a) !important; padding-top: 8px; }
body.dtk-portal #wrapper .dtk-sidebar.show { transform: translateX(0) !important; }
body.dtk-portal .dtk-sidebar-backdrop { display: block !important; position: fixed; inset: 0; z-index: 1100; background: rgba(2, 6, 16, .62); opacity: 0; pointer-events: none; transition: opacity .2s; }
body.dtk-portal.pt-menu-aberto .dtk-sidebar-backdrop { opacity: 1; pointer-events: auto; }
body.dtk-portal.pt-menu-aberto { overflow: hidden; }
/* pesquisa do menu, movida para a gaveta por portal-app.js */
.pt-busca-gaveta { display: flex !important; position: relative; align-items: center; margin: 12px 14px 6px; }
.pt-busca-gaveta .bi-search { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #9db4d8; font-size: .95rem; pointer-events: none; z-index: 2; }
.pt-busca-gaveta .search-bar { width: 100% !important; margin: 0 !important; height: 38px; padding-left: 2.3rem !important; background: rgba(17, 36, 77, .8) !important; border: 1px solid var(--dtk-border) !important; color: var(--dtk-ink) !important; border-radius: 8px !important; font-size: .875rem; box-shadow: none !important; }
.pt-busca-gaveta .search-bar::placeholder { color: #9db4d8 !important; }
.pt-busca-gaveta .search-bar:focus { border-color: var(--dtk-orange) !important; box-shadow: 0 0 0 .2rem rgba(246, 199, 67, .2) !important; }
body.dtk-portal .content-page { margin-left: 0 !important; margin-top: 0 !important; padding: 0 !important; }
body.dtk-portal .content-page > .content { max-width: 1400px; margin: 0 auto !important; padding: 22px 22px 34px !important; }
/* GRADE UNICA (tela >= 1100 px): a largura util e 1328 px da arte (de 104 a 1432), escalada por --z como o cabecalho; logo, menu, botoes, titulo, cartoes e rodape ficam nas mesmas bordas */
@media (min-width: 1100px) {
    body.dtk-portal .content-page > .content, body.pt-publico .pt-conteudo > .container {
        width: auto !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important;
        /* mesma conta do cabecalho: a margem e a maior entre 104 px (escalados) e o que sobra para centralizar 1328 px; com barra de rolagem as bordas continuam batendo */
        margin-left: max(calc(104px * var(--z, 1)), calc((100% - 1328px * var(--z, 1)) / 2)) !important; margin-right: max(calc(104px * var(--z, 1)), calc((100% - 1328px * var(--z, 1)) / 2)) !important;
    }
    .pt-menu-top a.nv { padding-left: 16px; padding-right: 16px; }
}
body.dtk-portal #wrapper { background: transparent; }

/* ==========================================================================
   Telas pequenas
   ========================================================================== */
@media (max-width: 1099.98px) {
    .pt-head { height: auto; background: linear-gradient(180deg, #00152e, #051b3f); border-bottom: 1px solid rgba(80, 130, 220, .3); }
    .pt-head::before { display: none; }
    .pt-head-in { height: auto; min-height: 58px; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
    .pt-head-in .navbar-brand, .pt-marca { display: inline-flex; position: static; width: auto; height: auto; padding: 4px 6px; border-radius: 6px; font: 800 21px/1 var(--pt-f); letter-spacing: .5px; color: #ffd54a; text-shadow: 0 2px 0 #7a3d05; }
    .pt-head-in .navbar-brand::before, .pt-marca::before { content: "DDTANK"; margin-right: .3em; }
    .pt-head-in .navbar-brand::after, .pt-marca::after { content: "PRIVATE"; color: #4fb2ff; }
    .pt-marca { order: 1; }
    .pt-menu-botao { order: 2; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #cfa84a; border-radius: 6px; background: linear-gradient(180deg, #141f3d, #0d1633); color: #f2cd68; font: 700 13px/1 var(--pt-f); margin-left: auto; }
    .pt-menu-botao i { font-size: 1.25rem; }
    .pt-acoes-topo { order: 3; width: 100%; margin-left: 0; gap: 8px; flex-wrap: wrap; }
    .pt-acoes-topo .bt { height: 34px; min-width: 0; padding: 0 12px; font-size: 12px; }
    .pt-acoes-topo .bt-jogar { margin-left: auto; font-size: 14px; }
    .pt-acoes-topo .bt-jogar .play { width: 20px; height: 20px; }
    .pt-acoes-topo .bt-jogar .play i { border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px; margin-left: 2px; }
    .pt-menu-wrap { display: none; order: 4; width: 100%; }
    .pt-menu-wrap.aberto { display: block; }
    .pt-menu-top { position: static; flex-direction: column; width: 100%; padding: 4px 0; }
    .pt-menu-top a.nv, .pt-menu-top li:first-child a.nv { height: auto; min-width: 0; padding: 11px 6px; border-bottom: 1px solid rgba(110, 150, 220, .2); font-size: 14px; line-height: 1.2; }
    .pt-menu-top a.nv.ativo::before, .pt-menu-top a.nv.ativo::after { display: none; }
    .pt-menu-top a.nv.ativo { color: #ffd54a; }
    /* painel: logo em texto, menu so na gaveta */
    body.dtk-portal .pt-head-in .navbar-toggler { position: static; order: 2; margin-left: auto; }
    body.dtk-portal .pt-menu-top { display: none; }
    body.dtk-portal .dtk-topbar { height: auto !important; padding: 8px 12px !important; }
    body.dtk-portal .pt-head-in > .d-md-flex { order: 4; }
    body.dtk-portal .pt-head-in .topbar-actions { order: 3; margin-left: 0 !important; }
    body.dtk-portal .pt-head-in .btn-play-now { height: 38px; min-width: 0; font-size: 14px; padding: 0 12px; }
    body.dtk-portal .content-page > .content { padding: 14px 12px 24px !important; }
    .pt-auth-lista { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Acabamento do layout (painel e administracao): titulo de pagina no estilo dos paineis da arte, rodape em largura total, cartoes e tabelas
   ========================================================================== */
/* titulo da pagina: deixa de ser uma faixa chapada com 100 px de vazio e vira um painel dourado/marinho, alinhado com os cartoes */
body.dtk-portal .page-header-title {
    margin: 0 0 18px !important; padding: 15px 22px 14px !important; min-height: 0;
    background: linear-gradient(180deg, rgba(16, 38, 82, .95), rgba(8, 19, 44, .96)) !important;
    border: 1px solid var(--dtk-border); border-radius: 14px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
}
body.dtk-portal .page-header-title::before { filter: blur(18px); opacity: .55; }
body.dtk-portal .page-header-title::after {
    content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, #f6c743, rgba(246, 199, 67, .35) 38%, rgba(246, 199, 67, 0) 85%);
}
body.dtk-portal .page-header-title .page-title {
    margin: 0 !important; padding: .12em 0 .08em; font: 800 1.45rem/1.1 var(--pt-f) !important; letter-spacing: .02em; text-transform: uppercase;
    color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none;
    background: linear-gradient(180deg, #fff3ae 0%, #f9d34f 55%, #e9a31f 100%); -webkit-background-clip: text; background-clip: text;
}
body.dtk-portal .page-header-title .page-title > i:first-child {
    -webkit-text-fill-color: #ffe08a; color: #ffe08a !important; width: 42px; height: 42px; border-radius: 12px; font-size: 1.2rem;
    background: linear-gradient(180deg, rgba(246, 199, 67, .28), rgba(246, 199, 67, .1)); box-shadow: 0 0 0 1px rgba(246, 199, 67, .45) inset, 0 8px 22px -8px rgba(246, 199, 67, .6);
}
body.dtk-portal .page-header-title .dtk-welcome-sub, body.dtk-portal .page-header-title p { color: var(--dtk-ink-soft) !important; }
body.dtk-portal .page-content-wrapper { margin-top: 0 !important; }

/* cartoes e paineis: mesma "vidraça" marinho dos paineis da arte */
body.dtk-portal .card { background: linear-gradient(180deg, rgba(14, 33, 71, .94), rgba(8, 19, 44, .96)); border-color: var(--dtk-border); border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
body.dtk-portal .card-header { background: transparent; border-bottom-color: var(--dtk-border); }
body.dtk-portal .table { --bs-table-bg: transparent; --bs-table-color: var(--dtk-ink); --bs-table-border-color: rgba(110, 150, 220, .22); --bs-table-hover-bg: rgba(246, 199, 67, .07); --bs-table-striped-bg: rgba(130, 170, 235, .05); }
body.dtk-portal .table > thead th { color: #ffe08a; background: rgba(8, 19, 44, .7); font-family: var(--pt-f) !important; text-transform: uppercase; letter-spacing: .04em; }
body.dtk-portal .nav-tabs .nav-link.active, body.dtk-portal .nav-tabs .nav-link:hover { color: #ffe08a; border-bottom-color: #f6c743; }
body.dtk-portal .form-control, body.dtk-portal .form-select { background-color: rgba(8, 19, 44, .75); border-color: var(--dtk-border); color: var(--dtk-ink); }
body.dtk-portal .form-control:focus, body.dtk-portal .form-select:focus { border-color: #f6c743; box-shadow: 0 0 0 .2rem rgba(246, 199, 67, .22); }

/* rodape: largura total (a barra lateral antiga deixava 240 px de vazio a esquerda) e rente ao resto da pagina */
body.dtk-portal .content-page { display: flex; flex-direction: column; min-height: calc(100vh - 110px); }
body.dtk-portal .content-page > .content { flex: 1 0 auto; width: 100%; }
body.dtk-portal .footer {
    position: static !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100%; margin: 24px 0 0 !important;
    background: #060d1f !important; border-top: 1px solid rgba(80, 130, 220, .25) !important; color: #8fa6c7 !important;
}
body.dtk-portal .footer a { color: #b7cdee; }
body.dtk-portal .footer a:hover { color: #fff; }
@media (max-width: 1099.98px) { body.dtk-portal .page-header-title { padding: 12px 14px 11px !important; } body.dtk-portal .page-header-title .page-title { font-size: 1.15rem !important; } body.dtk-portal .content-page { min-height: calc(100vh - 160px); } }

/* controles antigos do DataTables (busca, quantidade por pagina, informacao e paginacao): iguais aos do resto do Portal.
   Onde a propria pagina ja tem paginacao (ex.: Ranking, #rankPaginacao) a paginacao duplicada do DataTables some (classe pt-pg-propria, portal-app.js). */
body.dtk-portal .dataTables_wrapper { color: var(--dtk-ink); }
body.dtk-portal .dataTables_wrapper .dataTables_length, body.dtk-portal .dataTables_wrapper .dataTables_filter { margin: 4px 0 12px; font-size: .85rem; color: var(--dtk-ink-soft); }
body.dtk-portal .dataTables_wrapper .dataTables_filter { float: right; }
body.dtk-portal .dataTables_wrapper .dataTables_length select, body.dtk-portal .dataTables_wrapper .dataTables_filter input {
    height: 36px; padding: 0 12px; margin: 0 6px; border: 1px solid var(--dtk-border); border-radius: 8px; background: rgba(8, 19, 44, .75); color: var(--dtk-ink); outline: 0;
}
body.dtk-portal .dataTables_wrapper .dataTables_filter input { width: 220px; max-width: 60vw; }
body.dtk-portal .dataTables_wrapper .dataTables_filter input:focus, body.dtk-portal .dataTables_wrapper .dataTables_length select:focus { border-color: #f6c743; box-shadow: 0 0 0 .2rem rgba(246, 199, 67, .22); }
body.dtk-portal .dataTables_wrapper .dataTables_info { padding-top: 14px; font-size: .82rem; color: var(--dtk-ink-soft); }
body.dtk-portal .dataTables_wrapper .dataTables_paginate { float: right; padding-top: 10px; }
body.dtk-portal .dataTables_wrapper .dataTables_paginate ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.dtk-portal .dataTables_wrapper .dataTables_paginate li a { display: inline-block; min-width: 34px; padding: 6px 11px; border: 1px solid var(--dtk-border); border-radius: 8px; background: rgba(12, 26, 60, .8); color: var(--dtk-ink); text-align: center; text-decoration: none; font-size: .85rem; }
body.dtk-portal .dataTables_wrapper .dataTables_paginate li a:hover { border-color: #f6c743; color: #ffe08a; }
body.dtk-portal .dataTables_wrapper .dataTables_paginate li.active a { background: linear-gradient(180deg, #ffe35a, #f5b81f); border-color: #c98a0a; color: #2b1600; font-weight: 700; }
body.dtk-portal .dataTables_wrapper .dataTables_paginate li.disabled a { opacity: .45; pointer-events: none; }
body.dtk-portal .dataTables_wrapper::after { content: ""; display: block; clear: both; }
body.dtk-portal.pt-pg-propria .dataTables_wrapper .dataTables_paginate, body.dtk-portal.pt-pg-propria .dataTables_wrapper .dataTables_info { display: none; }

/* caixas de marcar dentro de colunas (<div class="col-md-3 form-check">): sem isto a caixinha ficava 21 px fora da grade dos campos */
body.dtk-portal .row > .form-check, body.pt-publico .row > .form-check { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5 + 1.5em); }
body.dtk-portal .row > .form-check .form-check-input { margin-left: -1.5em; }
@media (max-width: 1099.98px) { .pt-head { zoom: 1; } }

/* gaveta no celular: menu completo (o estado .enlarged do tema antigo escondia os textos e os submenus) */
body.dtk-portal #wrapper.enlarged .dtk-sidebar #sidebar-menu > ul > li > a span:not(.dtk-chevron) { display: inline !important; }
body.dtk-portal #wrapper.enlarged .dtk-sidebar #sidebar-menu ul > li:hover > a { width: auto; background: transparent; }
body.dtk-portal #wrapper.enlarged .dtk-sidebar #sidebar-menu ul > li:hover > ul { position: static; width: auto; left: auto; }
body.dtk-portal #wrapper.enlarged .dtk-sidebar .user-details { display: flex !important; }
/* tabelas largas: rolagem horizontal DENTRO do cartao, com a primeira coluna visivel (nao corta no meio da pagina) */
@media (max-width: 767.98px) { body.dtk-portal .table-responsive { -webkit-overflow-scrolling: touch; } body.dtk-portal .table-responsive > .table { min-width: 560px; } }
/* pesquisa do menu na gaveta: o tema antigo esconde .search-bar em telas pequenas (max-width 480px) */
.pt-busca-gaveta .search-bar, .pt-busca-gaveta { display: block !important; }
.pt-busca-gaveta { display: flex !important; }