/*!
* ============================================================
* UNITDK · Tema Chamilo 1.11.x (Fase 1 — Identidade / Dark Mode)
* Universidade Corporativa Tradetek
* ------------------------------------------------------------
* Este arquivo aplica a identidade "Corporate Tech" (dark) sobre
* o Bootstrap 3 + estilos nativos do Chamilo.
*
* Caminho de instalacao:
* app/Resources/public/css/themes/unitdk/default.css
*
* Estrategia: sobrescrever cores/tipografia/componentes via CSS,
* sem quebrar o HTML nativo do Chamilo. Fidelidade de estrutura
* (sidebar) vem em fase dedicada posterior.
* ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('tokens.css');
/* ============================================================
1. BASE GLOBAL
============================================================ */
html,
body {
background: var(--tdk-bg) !important;
color: var(--tdk-text) !important;
font-family: var(--tdk-font) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body > main {
background: var(--tdk-bg) !important;
}
a {
color: var(--tdk-accent);
transition: color var(--tdk-trans);
}
a:hover,
a:focus {
color: var(--tdk-accent-hov);
text-decoration: none;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: var(--tdk-text);
font-family: var(--tdk-font-display);
font-weight: var(--tdk-fw-semi);
letter-spacing: -0.015em;
}
hr { border-color: var(--tdk-border); }
p, span, li, td, th, label, div {
/* nao forcar cor em tudo p/ nao quebrar componentes; cor herda do body */
}
::selection { background: var(--tdk-accent); color: var(--tdk-on-accent); }
/* Scrollbar dark */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--tdk-bg-2); }
::-webkit-scrollbar-thumb { background: var(--tdk-surface-3); border-radius: 6px; border: 2px solid var(--tdk-bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--tdk-border-hi); }
/* ============================================================
2. CONTAINERS / SECOES
============================================================ */
#main,
#cm-content,
section#cm-content,
.actions {
background: transparent !important;
}
#cm-content > .container {
background: transparent;
}
/* ============================================================
3. TOPBAR (barra admin) + NAVBAR (menu principal)
============================================================ */
/* Topbar admin (#toolbar-admin) */
#toolbar-admin.navbar-inverse {
background: var(--tdk-bg-2) !important;
border: none !important;
border-bottom: 1px solid var(--tdk-border) !important;
margin-bottom: 0;
}
#toolbar-admin .navbar-nav > li > a,
#toolbar-admin .navbar-brand {
color: var(--tdk-text-2) !important;
}
#toolbar-admin .navbar-nav > li > a:hover,
#toolbar-admin .navbar-nav > .active > a,
#toolbar-admin .navbar-nav > .open > a {
color: var(--tdk-text) !important;
background: var(--tdk-surface) !important;
}
/* Navbar principal (menu) */
.navbar-default {
background: var(--tdk-surface) !important;
border: none !important;
border-bottom: 1px solid var(--tdk-border) !important;
border-radius: 0 !important;
box-shadow: var(--tdk-shadow-sm);
}
.navbar-default .navbar-nav > li > a {
color: var(--tdk-text-2) !important;
font-weight: var(--tdk-fw-medium);
transition: color var(--tdk-trans), background var(--tdk-trans);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: var(--tdk-text) !important;
background: var(--tdk-surface-2) !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .open > a {
color: var(--tdk-accent) !important;
background: var(--tdk-surface-2) !important;
}
.navbar-default .navbar-toggle { border-color: var(--tdk-border); }
.navbar-default .navbar-toggle .icon-bar { background: var(--tdk-text-2); }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: var(--tdk-surface-2); }
/* Logo no header */
#cm-header .logo img,
.logo img { max-height: 46px; width: auto; }
/* Dropdowns */
.dropdown-menu {
background: var(--tdk-surface-3) !important;
border: 1px solid var(--tdk-border) !important;
border-radius: var(--tdk-radius-md) !important;
box-shadow: var(--tdk-shadow);
padding: 6px;
}
.dropdown-menu > li > a {
color: var(--tdk-text-2) !important;
border-radius: var(--tdk-radius-sm);
padding: 8px 12px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background: var(--tdk-surface-2) !important;
color: var(--tdk-text) !important;
}
.dropdown-menu .divider { background: var(--tdk-border); }
.caret { color: inherit; }
/* ============================================================
4. BOTOES
============================================================ */
.btn {
border-radius: var(--tdk-radius) !important;
font-family: var(--tdk-font);
font-weight: var(--tdk-fw-semi);
transition: background var(--tdk-trans), transform var(--tdk-trans), border-color var(--tdk-trans);
}
.btn:active { transform: translateY(1px); }
.btn-primary,
.btn.btn-primary {
background: var(--tdk-accent) !important;
border-color: var(--tdk-accent) !important;
color: var(--tdk-on-accent) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background: var(--tdk-accent-hov) !important;
border-color: var(--tdk-accent-hov) !important;
color: var(--tdk-on-accent) !important;
}
.btn-success {
background: var(--tdk-success) !important;
border-color: var(--tdk-success) !important;
color: var(--tdk-on-accent) !important;
}
.btn-info {
background: var(--tdk-blue) !important;
border-color: var(--tdk-blue) !important;
color: var(--tdk-on-accent) !important;
}
.btn-warning {
background: var(--tdk-warn) !important;
border-color: var(--tdk-warn) !important;
color: var(--tdk-on-accent) !important;
}
.btn-danger {
background: var(--tdk-danger) !important;
border-color: var(--tdk-danger) !important;
color: var(--tdk-on-accent) !important;
}
.btn-default {
background: var(--tdk-surface) !important;
border: 1px solid var(--tdk-border-hi) !important;
color: var(--tdk-text) !important;
}
.btn-default:hover,
.btn-default:focus {
background: var(--tdk-surface-2) !important;
border-color: var(--tdk-border-hi) !important;
color: var(--tdk-text) !important;
}
.btn-link { color: var(--tdk-accent) !important; }
.btn-link:hover { color: var(--tdk-accent-hov) !important; }
/* ============================================================
5. CARDS / PANELS / WELLS
============================================================ */
.panel,
.well,
.thumbnail {
background: var(--tdk-surface) !important;
border: 1px solid var(--tdk-border) !important;
border-radius: var(--tdk-radius-md) !important;
color: var(--tdk-text);
box-shadow: var(--tdk-shadow-sm);
}
.panel-heading {
background: transparent !important;
border-bottom: 1px solid var(--tdk-border) !important;
color: var(--tdk-text) !important;
border-top-left-radius: var(--tdk-radius-md) !important;
border-top-right-radius: var(--tdk-radius-md) !important;
font-weight: var(--tdk-fw-semi);
}
.panel-footer {
background: var(--tdk-bg-2) !important;
border-top: 1px solid var(--tdk-border) !important;
color: var(--tdk-text-2) !important;
}
.panel-title { color: var(--tdk-text) !important; }
.panel-default > .panel-heading { color: var(--tdk-text) !important; }
/* Course/session blocks */
.course-items .panel:hover,
.items-courses .panel:hover {
border-color: var(--tdk-border-hi) !important;
box-shadow: var(--tdk-shadow);
transform: translateY(-2px);
transition: transform var(--tdk-trans), box-shadow var(--tdk-trans), border-color var(--tdk-trans);
}
/* ============================================================
6. FORMULARIOS / INPUTS
============================================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
background: var(--tdk-surface) !important;
border: 1px solid var(--tdk-border) !important;
color: var(--tdk-text) !important;
border-radius: var(--tdk-radius) !important;
box-shadow: none !important;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
border-color: var(--tdk-accent) !important;
box-shadow: 0 0 0 3px var(--tdk-accent-soft) !important;
}
.form-control::placeholder { color: var(--tdk-text-3) !important; }
.form-control[disabled],
.form-control[readonly] { background: var(--tdk-bg-2) !important; color: var(--tdk-text-3) !important; }
label,
.control-label { color: var(--tdk-text-2) !important; font-weight: var(--tdk-fw-medium); }
.input-group-addon {
background: var(--tdk-surface-2) !important;
border: 1px solid var(--tdk-border) !important;
color: var(--tdk-text-2) !important;
}
.help-block { color: var(--tdk-text-3) !important; }
/* ============================================================
7. TABELAS
============================================================ */
.table { color: var(--tdk-text) !important; }
.table > thead > tr > th {
font-family: var(--tdk-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tdk-text-2) !important;
background: var(--tdk-bg-2) !important;
border-color: var(--tdk-border) !important;
border-bottom: 1px solid var(--tdk-border) !important;
font-weight: var(--tdk-fw-semi);
}
.table > tbody > tr > td,
.table > tbody > tr > th {
border-color: var(--tdk-border) !important;
}
.table-hover > tbody > tr:hover { background: var(--tdk-surface-2) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--tdk-bg-2) !important; }
.table-bordered { border-color: var(--tdk-border) !important; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--tdk-border) !important; }
/* ============================================================
8. PROGRESS BARS
============================================================ */
.progress {
background: rgba(255,255,255,0.06) !important;
border-radius: var(--tdk-radius-pill) !important;
box-shadow: none !important;
height: 8px;
}
.progress-bar {
background: var(--tdk-accent) !important;
border-radius: var(--tdk-radius-pill) !important;
}
.progress-bar-success { background: var(--tdk-success) !important; }
.progress-bar-warning { background: var(--tdk-warn) !important; }
.progress-bar-danger { background: var(--tdk-danger) !important; }
/* ============================================================
9. LABELS / BADGES / ALERTS
============================================================ */
.label, .badge {
border-radius: var(--tdk-radius-pill) !important;
font-weight: var(--tdk-fw-medium);
font-size: 11px;
padding: 3px 9px;
}
.label-default, .badge { background: rgba(255,255,255,0.08) !important; color: var(--tdk-text-2) !important; }
.label-primary { background: var(--tdk-accent-soft) !important; color: var(--tdk-accent) !important; }
.label-success { background: var(--tdk-success-soft) !important; color: var(--tdk-success) !important; }
.label-info { background: var(--tdk-accent-soft) !important; color: var(--tdk-accent) !important; }
.label-warning { background: var(--tdk-warn-soft) !important; color: var(--tdk-warn) !important; }
.label-danger { background: var(--tdk-danger-soft) !important; color: var(--tdk-danger) !important; }
.alert {
border-radius: var(--tdk-radius-md) !important;
border: 1px solid var(--tdk-border) !important;
background: var(--tdk-surface) !important;
color: var(--tdk-text) !important;
}
.alert-success { border-color: var(--tdk-success) !important; background: var(--tdk-success-soft) !important; }
.alert-info { border-color: var(--tdk-accent) !important; background: var(--tdk-accent-soft) !important; }
.alert-warning { border-color: var(--tdk-warn) !important; background: var(--tdk-warn-soft) !important; }
.alert-danger { border-color: var(--tdk-danger) !important; background: var(--tdk-danger-soft) !important; }
/* ============================================================
10. TABS / NAV PILLS / BREADCRUMB
============================================================ */
.nav-tabs { border-bottom: 1px solid var(--tdk-border) !important; }
.nav-tabs > li > a {
color: var(--tdk-text-2) !important;
border-radius: var(--tdk-radius-sm) var(--tdk-radius-sm) 0 0 !important;
border: none !important;
}
.nav-tabs > li > a:hover { background: var(--tdk-surface-2) !important; border: none !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background: transparent !important;
color: var(--tdk-text) !important;
border: none !important;
border-bottom: 2px solid var(--tdk-accent) !important;
}
.nav-pills > li > a { color: var(--tdk-text-2) !important; border-radius: var(--tdk-radius) !important; }
.nav-pills > li > a:hover { background: var(--tdk-surface-2) !important; color: var(--tdk-text) !important; }
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover { background: var(--tdk-accent) !important; color: var(--tdk-on-accent) !important; }
/* Breadcrumb nativo, restilizado pra ficar IDÊNTICO ao layout proposto
(.tdk-home-breadcrumb — ver Seção "Home breadcrumb" mais abaixo).
Motivo: Template::set_header_parameters() do Chamilo sempre monta essa
breadcrumb em toda página (curso + título da ferramenta), então em vez
de reconstruir a navegação à mão página por página (que gera duplicação
quando também temos uma própria — ver Histórico v0.12.2), fazemos a
nativa parecer a mesma coisa aqui, uma vez só, valendo pra TODA página
(inclusive as que ainda não foram customizadas). */
.breadcrumb {
background: transparent !important;
padding: var(--tdk-sp-5) 0 0;
margin: 0 0 var(--tdk-sp-4);
font-size: var(--tdk-fs-xs);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.breadcrumb::before {
content: "UNITDK /";
color: var(--tdk-text-3);
font-weight: var(--tdk-fw-medium);
letter-spacing: 0.04em;
}
.breadcrumb img { display: none; } /* ícone home.png legado — texto já basta */
.breadcrumb > li {
color: var(--tdk-text-2) !important;
font-weight: var(--tdk-fw-medium);
}
.breadcrumb > li > a {
color: var(--tdk-text-3) !important;
font-weight: 400 !important;
text-decoration: none !important;
}
.breadcrumb > li > a:hover { color: var(--tdk-accent) !important; }
.breadcrumb > li + li:before {
content: "/";
color: var(--tdk-text-3) !important;
opacity: 0.5;
}
/* ============================================================
11. PAGINACAO / WELL / MODAIS
============================================================ */
.pagination > li > a,
.pagination > li > span {
background: var(--tdk-surface) !important;
border: 1px solid var(--tdk-border) !important;
color: var(--tdk-text-2) !important;
}
.pagination > li > a:hover { background: var(--tdk-surface-2) !important; color: var(--tdk-text) !important; }
.pagination > .active > a,
.pagination > .active > span {
background: var(--tdk-accent) !important;
border-color: var(--tdk-accent) !important;
color: var(--tdk-on-accent) !important;
}
.modal-content {
background: var(--tdk-surface) !important;
border: 1px solid var(--tdk-border) !important;
border-radius: var(--tdk-radius-lg) !important;
color: var(--tdk-text);
}
.modal-header,
.modal-footer { border-color: var(--tdk-border) !important; }
.modal-backdrop { background: #000; }
.close { color: var(--tdk-text); opacity: 0.6; text-shadow: none; }
.close:hover { color: var(--tdk-text); opacity: 1; }
/* ============================================================
12. FOOTER
============================================================ */
.footer,
footer.footer {
background: var(--tdk-bg-2) !important;
border-top: 1px solid var(--tdk-border) !important;
color: var(--tdk-text-3) !important;
}
.footer a, footer.footer a { color: var(--tdk-text-2) !important; }
.footer a:hover { color: var(--tdk-accent) !important; }
/* ============================================================
13. UTILITARIOS DE MARCA (classes do tokens.css disponiveis)
------------------------------------------------------------
.tdk-btn, .tdk-card, .tdk-pill, .tdk-bar etc. ja vem do
tokens.css e podem ser usados em conteudo custom.
============================================================ */
/* well/panel-body texto */
.panel-body { color: var(--tdk-text); }
.text-muted { color: var(--tdk-text-3) !important; }
.well { background: var(--tdk-surface) !important; }
/* ============================================================
14. RESPONSIVO / MOBILE (mobile-first do handoff)
------------------------------------------------------------
Ajustes leves para garantir legibilidade em telas pequenas.
A estrutura nativa do Chamilo (Bootstrap 3) ja e responsiva;
aqui apenas reforcamos cores/contraste do menu colapsado.
============================================================ */
@media (max-width: 991px) {
/* navbar colapsada: itens empilhados sobre surface */
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
background: var(--tdk-surface) !important;
border-top: 1px solid var(--tdk-border) !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: var(--tdk-text-2) !important;
}
/* botao hamburguer */
.navbar-default .navbar-toggle {
border-color: var(--tdk-border) !important;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: var(--tdk-text-2) !important;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: var(--tdk-surface-2) !important;
}
}
@media (max-width: 767px) {
/* tabelas com scroll horizontal mantem contraste */
.table-responsive { border-color: var(--tdk-border) !important; }
/* cards ocupam largura total com respiro */
.panel { margin-bottom: var(--tdk-space-4, 16px); }
}
/* ============================================================
15. SHELL UNITDK · SIDEBAR FIXA (Fase 2)
------------------------------------------------------------
Usado por chamilo/main/template/unitdk/layout/page.tpl +
sidebar_unitdk.tpl. As classes base .tdk-shell/.tdk-sidebar/
.tdk-nav-item ja vem do tokens.css (sec. "Layout · sidebar
fixa") - aqui completamos o restante da casca (coluna
principal, header interno, rodape de usuario da sidebar) e o
fallback responsivo (sidebar deitada em telas pequenas; a tab
bar inferior do protótipo mobile fica para a Fase 7).
============================================================ */
.tdk-main-col {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.tdk-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 8px 24px;
min-height: 0;
border-bottom: 1px solid var(--tdk-border);
background: var(--tdk-bg);
}
.tdk-header-search { flex: 1; max-width: 420px; }
.tdk-header-actions { display: flex; align-items: center; gap: 14px; }
/* Widget nativo "Utilizadores online" (ul#notifications) - o link tem
padding pensado pra navbar grande (10px 15px); aqui na faixa fina do
header isso sozinho ja empurrava a barra pra ~73px de altura. */
.tdk-header-actions #notifications {
display: flex;
align-items: center;
}
.tdk-header-actions #notifications > li > a {
display: flex !important;
align-items: center;
gap: 6px;
padding: 4px 8px !important;
color: var(--tdk-text-2) !important;
font-size: 12.5px;
}
.tdk-header-actions #notifications > li > a:hover {
color: var(--tdk-text) !important;
}
.tdk-sidebar-inner {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
/* Área rolável: logo + trilha + nav principal. Só ela rola (o rodapé
fica fixo). O padding lateral vive aqui (não na .tdk-sidebar) pra a
barra de rolagem não comer o respiro. */
.tdk-sidebar-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--tdk-sp-4);
padding: 20px 14px 8px;
/* scrollbar discreta */
scrollbar-width: thin;
scrollbar-color: var(--tdk-border) transparent;
}
.tdk-sidebar-scroll::-webkit-scrollbar { width: 6px; }
.tdk-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--tdk-border); border-radius: 3px; }
/* Rodapé fixo: Mensagens + Perfil + card do usuário, agrupados. */
.tdk-sidebar-footer {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 14px 14px;
border-top: 1px solid var(--tdk-border);
}
.tdk-sidebar-logo { display: block; padding: 4px 10px 0; }
.tdk-sidebar-logo img { height: 26px; width: auto; }
.tdk-nav { display: flex; flex-direction: column; gap: 2px; }
.tdk-nav-group-label { font-weight: var(--tdk-fw-medium); cursor: default; }
.tdk-nav-subgroup { display: flex; flex-direction: column; padding-left: 22px; }
.tdk-nav-subitem { font-size: 11.5px; padding: 6px 10px; }
/* Card do usuário — dentro do rodapé, separado de Mensagens/Perfil por
um respiro (o border-top já é do .tdk-sidebar-footer). Avatar + nome +
cargo real (Aluno/Professor/Administrador — dado nativo do status),
igual à estrutura de 2 linhas do mockup, sem inventar senioridade. */
.tdk-sidebar-user {
display: flex;
align-items: center;
gap: 10px;
margin-top: var(--tdk-sp-2);
padding: 8px;
border-radius: var(--tdk-radius-md);
background: var(--tdk-surface-2);
border: 1px solid var(--tdk-border);
}
.tdk-sidebar-user-link {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
color: var(--tdk-text);
text-decoration: none;
}
.tdk-sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* Sem foto (fallback nativo do Chamilo é unknown.jpg, um silhueta cinza
genérica) — quadrado arredondado dourado com iniciais brancas. */
.tdk-sidebar-user-avatar--fallback {
width: 32px;
height: 32px;
border-radius: 9px;
background: var(--tdk-gold);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: var(--tdk-fw-bold);
flex-shrink: 0;
}
.tdk-sidebar-user-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.tdk-sidebar-user-name {
font-size: 12.5px;
font-weight: var(--tdk-fw-medium);
color: var(--tdk-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tdk-sidebar-user-role {
font-size: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tdk-text-3);
}
.tdk-sidebar-user-icon { color: var(--tdk-text-3); padding: 4px; text-decoration: none; flex-shrink: 0; }
.tdk-sidebar-user-icon:hover { color: var(--tdk-accent); }
/* Fallback responsivo: sidebar deitada no topo, rolagem horizontal.
A tab bar inferior (telas 16-18 do protótipo) fica para a Fase 7. */
@media (max-width: 767px) {
.tdk-shell { flex-direction: column; }
.tdk-sidebar {
flex: 0 0 auto;
width: 100%;
border-right: none;
border-bottom: 1px solid var(--tdk-border);
/* desfaz o fixo do desktop: no mobile a sidebar deita no topo e
rola horizontalmente junto com a página */
position: static;
height: auto;
overflow: visible;
}
.tdk-sidebar-inner { min-height: 0; }
.tdk-sidebar-scroll {
flex-direction: row;
align-items: center;
overflow-x: auto;
overflow-y: visible;
gap: var(--tdk-sp-3);
padding: 10px 12px;
}
.tdk-sidebar-footer {
flex-direction: row;
align-items: center;
border-top: none;
padding: 10px 12px;
}
.tdk-sidebar-logo,
.tdk-active-trail,
.tdk-sidebar-user { display: none; }
.tdk-nav { flex-direction: row; overflow-x: auto; flex: none; }
.tdk-nav-group { flex: none; }
.tdk-nav-item { white-space: nowrap; }
}
/* ============================================================
16. REMOVER DUPLICACAO DA SIDEBAR NATIVA (Fase 3)
------------------------------------------------------------
layout_2_col.tpl e layout_3_col.tpl (default/, nao sobrescritos)
ainda renderizam sua propria coluna lateral nativa (.sidebar com
Perfil/Cursos, ou #menu-wrapper com login/profile/account/etc.)
dentro do nosso #cm-content. Como a navegacao e o card "Trilha
ativa" ja vivem na sidebar fixa (.tdk-sidebar), essa segunda
coluna fica redundante e bagunça o layout - escondemos via CSS
(sem tocar nos .tpl nativos) e expandimos a coluna de conteudo.
IMPORTANTE: só para usuario LOGADO (body.tdk-logged-in, setado em
page.tpl). Para visitante anonimo (body.tdk-anonymous) esse mesmo
.sidebar/#menu-wrapper e onde o login_form.tpl nativo vive - se
escondermos sem essa condicao, o visitante perde o unico jeito de
logar pela home (ja aconteceu uma vez, ver lição aprendida no
README/historico).
============================================================ */
body.tdk-logged-in #cm-content .sidebar,
body.tdk-logged-in #cm-content #menu-wrapper {
display: none !important;
}
body.tdk-logged-in #cm-content .col-md-9.col-md-push-3 {
width: 100% !important;
left: 0 !important;
float: none !important;
}
body.tdk-logged-in #cm-content #maincontent {
width: 100% !important;
float: none !important;
}
/* ============================================================
17. WIDGETS DE TERCEIROS (Fase 3 - varredura de telas)
------------------------------------------------------------
Bibliotecas que o Chamilo embute (FullCalendar, jQuery UI,
bootstrap-select) e um componente Bootstrap 4 (.card, usado em
telas mais novas como Relatorios/mySpace) renderizam com CSS
proprio que nao herda nossas variaveis - apareciam como caixas
brancas/nao tematizadas. Cobertura ampla (varias telas usam as
mesmas classes), nao exaustiva pagina-a-pagina.
============================================================ */
/* FullCalendar (Agenda) */
.fc-button {
background: var(--tdk-surface) !important;
background-image: none !important;
border: 1px solid var(--tdk-border-hi) !important;
color: var(--tdk-text) !important;
text-shadow: none !important;
box-shadow: none !important;
}
.fc-state-hover { background: var(--tdk-surface-2) !important; }
.fc-state-active,
.fc-state-down {
background: var(--tdk-accent) !important;
color: var(--tdk-on-accent) !important;
border-color: var(--tdk-accent) !important;
}
.fc-state-disabled { opacity: 0.5; }
.fc th, .fc td, .fc-row, .fc-list-view, .fc-divider {
border-color: var(--tdk-border) !important;
}
.fc-unthemed td.fc-today { background: var(--tdk-accent-soft) !important; }
.fc-toolbar h2 { color: var(--tdk-text) !important; }
.fc-day-number, .fc-list-heading-main, .fc-list-heading-alt { color: var(--tdk-text-2) !important; }
.fc-event { border-color: var(--tdk-accent) !important; }
.fc-widget-header,
.fc-day-header {
background: var(--tdk-bg-2) !important;
color: var(--tdk-text-2) !important;
}
.fc-other-month { background: var(--tdk-bg-2) !important; }
.fc-widget-content { background: transparent !important; }
/* bootstrap-select (selects customizados em forms) */
.bootstrap-select > .btn,
.bootstrap-select .dropdown-toggle {
background: var(--tdk-surface) !important;
border: 1px solid var(--tdk-border) !important;
color: var(--tdk-text) !important;
}
.bootstrap-select .dropdown-menu {
background: var(--tdk-surface-3) !important;
border: 1px solid var(--tdk-border) !important;
}
.bootstrap-select .dropdown-menu li a {
color: var(--tdk-text-2) !important;
}
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a {
background: var(--tdk-surface-2) !important;
color: var(--tdk-text) !important;
}
/* Select2 (outro plugin de select customizado, DIFERENTE do bootstrap-select
acima — usado em campos multi-seleção com chips, ex.: "Professores" e
"Tags" nos formulários de Criar curso/Criar sessão/etc. Vem com CSS
próprio branco por padrão — achado pelo usuário com print da tela real.
IMPORTANTE: main/css/base.css (nativo) tem regras `!important` pra esse
mesmo plugin com seletor composto (.select2-container--default
.select2-selection--multiple, especificidade 0,2,0) — um seletor simples
(.select2-selection--multiple, 0,1,0) PERDE mesmo com !important, porque
entre duas regras !important quem desempata é especificidade, não ordem
de carregamento. Por isso os seletores abaixo replicam o MESMO composto
do base.css, nunca um seletor solto. */
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container .select2-selection--multiple {
background: var(--tdk-surface) !important;
border: 1px solid var(--tdk-border) !important;
color: var(--tdk-text) !important;
box-shadow: none !important;
}
.select2-container .select2-selection__rendered {
color: var(--tdk-text) !important;
}
.select2-container .select2-selection__placeholder {
color: var(--tdk-text-3) !important;
}
.select2-container .select2-selection__arrow b {
border-color: var(--tdk-text-3) transparent transparent transparent !important;
}
.select2-container .select2-selection__choice {
background: var(--tdk-surface-3) !important;
border: 1px solid var(--tdk-border) !important;
color: var(--tdk-text) !important;
border-radius: var(--tdk-radius-sm) !important;
}
.select2-container .select2-selection__choice__remove {
color: var(--tdk-text-3) !important;
}
.select2-container .select2-selection__choice__remove:hover {
color: var(--tdk-text) !important;
}
.select2-container .select2-search__field,
.select2-container .select2-search--inline .select2-search__field {
background: transparent !important;
color: var(--tdk-text) !important;
}
.select2-container .select2-search__field::placeholder { color: var(--tdk-text-3) !important; }
.select2-dropdown.select2-dropdown {
background: var(--tdk-surface-3) !important;
border: 1px solid var(--tdk-border) !important;
}
.select2-container .select2-results__option {
color: var(--tdk-text-2) !important;
}
.select2-container .select2-results__option--highlighted,
.select2-container .select2-results__option[aria-selected="true"] {
background: var(--tdk-surface-2) !important;
color: var(--tdk-text) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
background: var(--tdk-surface) !important;
border: 1px solid var(--tdk-border) !important;
color: var(--tdk-text) !important;
}
/* jQuery UI (dialogs/botoes de modais nativos) */
.ui-widget-content,
.ui-dialog {
background: var(--tdk-surface) !important;
border: 1px solid var(--tdk-border) !important;
color: var(--tdk-text) !important;
}
.ui-dialog .ui-dialog-titlebar {
background: var(--tdk-surface-2) !important;
border-bottom: 1px solid var(--tdk-border) !important;
color: var(--tdk-text) !important;
}
.ui-button,
.ui-state-default {
background: var(--tdk-surface) !important;
border: 1px solid var(--tdk-border-hi) !important;
color: var(--tdk-text) !important;
}
.ui-state-hover { background: var(--tdk-surface-2) !important; }
.ui-state-active {
background: var(--tdk-accent) !important;
color: var(--tdk-on-accent) !important;
}
/* Bootstrap 4 .card (telas mais novas, ex. Relatorios/mySpace) */
.card {
background: var(--tdk-surface) !important;
border: 1px solid var(--tdk-border) !important;
color: var(--tdk-text);
}
.card-header, .card-footer {
background: transparent !important;
border-color: var(--tdk-border) !important;
}
.card-body { color: var(--tdk-text); }
/* Cards de curso no Catalogo */
.items.items-courses,
.items-courses {
background: var(--tdk-surface) !important;
color: var(--tdk-text);
}
/* Controles nativos do navegador (checkbox/radio/file) */
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--tdk-accent);
}
input[type="file"] {
color: var(--tdk-text-2);
}
/* ============================================================
18. DASHBOARD HERO (Fase 3)
------------------------------------------------------------
Usado pelo plugin chamilo/plugin/unitdk_dashboard_hero (regiao
content_top) - hero "Continuar de onde parou" + cards de stat
no topo do dashboard do aluno.
============================================================ */
.tdk-dashboard-hero {
display: flex;
flex-wrap: wrap;
gap: var(--tdk-sp-5);
margin-bottom: var(--tdk-sp-6);
}
.tdk-hero-card {
flex: 2 1 320px;
display: flex;
flex-direction: column;
gap: 10px;
}
.tdk-hero-course {
font-size: var(--tdk-fs-lg);
font-weight: var(--tdk-fw-semi);
color: var(--tdk-text);
}
.tdk-hero-card .tdk-btn { align-self: flex-start; }
.tdk-hero-stats {
flex: 1 1 220px;
display: flex;
gap: var(--tdk-sp-4);
}
.tdk-stat-card {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
}
.tdk-stat-value {
font-size: var(--tdk-fs-2xl);
font-weight: var(--tdk-fw-semi);
color: var(--tdk-text);
font-family: var(--tdk-font-mono);
}
@media (max-width: 767px) {
.tdk-dashboard-hero { flex-direction: column; }
.tdk-hero-stats { flex-direction: row; }
}
/* ============================================================
19. LOGIN SPLIT-SCREEN (Fase 3)
------------------------------------------------------------
Usado por main/template/unitdk/layout/login_form.tpl. So se
aplica para visitante anonimo (body.tdk-anonymous, setado em
page.tpl) - colapsa a casca do app (header/footer/grid nativo)
para o login ocupar a tela inteira em duas colunas.
============================================================ */
body.tdk-anonymous .tdk-header-bar,
body.tdk-anonymous .footer,
body.tdk-anonymous footer.footer {
display: none !important;
}
body.tdk-anonymous #cm-content {
padding: 0 !important;
}
body.tdk-anonymous #cm-content > .container {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.tdk-anonymous #cm-content .row {
margin: 0 !important;
}
body.tdk-anonymous #cm-content .col-md-3.col-md-pull-9 {
width: 100% !important;
float: none !important;
left: 0 !important;
padding: 0 !important;
}
body.tdk-anonymous #cm-content .col-md-9.col-md-push-3 {
display: none !important;
}
.tdk-login-shell {
display: flex;
min-height: 100vh;
}
.tdk-login-left {
flex: 1 1 480px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px 64px;
max-width: 560px;
}
.tdk-login-logo img { height: 28px; width: auto; margin-bottom: 48px; }
.tdk-login-intro { margin-bottom: 28px; }
.tdk-login-title {
font-size: var(--tdk-fs-2xl);
font-weight: var(--tdk-fw-semi);
color: var(--tdk-text);
margin: 8px 0 10px;
}
.tdk-login-sub { color: var(--tdk-text-2); font-size: 14px; }
.tdk-login-card { padding: var(--tdk-sp-6); }
.tdk-login-links { margin-top: 14px; }
.tdk-login-links > li > a {
color: var(--tdk-text-2) !important;
font-size: 13px;
padding: 4px 0 !important;
background: transparent !important;
}
.tdk-login-links > li > a:hover { color: var(--tdk-accent) !important; }
.tdk-login-footer { margin-top: 24px; color: var(--tdk-text-3); font-size: 12px; }
.tdk-login-right {
flex: 1 1 480px;
display: flex;
align-items: center;
padding: 64px;
background: var(--tdk-bg-2);
border-left: 1px solid var(--tdk-border);
}
.tdk-login-right-inner { max-width: 480px; }
.tdk-login-right-title {
font-size: var(--tdk-fs-xl);
font-weight: var(--tdk-fw-semi);
color: var(--tdk-text);
margin: 10px 0 12px;
}
.tdk-login-right-sub { color: var(--tdk-text-2); font-size: 14px; margin-bottom: 32px; }
.tdk-login-stats { display: flex; gap: var(--tdk-sp-4); }
.tdk-login-stat { flex: 1; }
.tdk-login-stat .tdk-stat-value { font-size: var(--tdk-fs-xl); }
@media (max-width: 991px) {
.tdk-login-right { display: none; }
.tdk-login-left { max-width: none; margin: 0 auto; }
}
/* ============================================================
20. CATALOGO (Fase 4)
------------------------------------------------------------
Usado por main/template/unitdk/catalog/course_catalog.tpl e
course_item_catalog.tpl. Pills de categoria sao progressive
enhancement em cima do select nativo "search_category_code"
(ver script no .tpl) - sem inventar categoria nenhuma, so le o
que o admin cadastrou em Categorias de Curso.
============================================================ */
.tdk-catalog-header { margin-bottom: var(--tdk-sp-5); }
.tdk-catalog-title {
font-size: var(--tdk-fs-2xl);
font-weight: var(--tdk-fw-semi);
color: var(--tdk-text);
margin: 8px 0 0;
}
.tdk-catalog-filter-card { margin-bottom: var(--tdk-sp-5); }
.tdk-catalog-filter-form .form-inline-box,
.tdk-catalog-filter-form .input-group { width: 100%; }
.tdk-hidden-but-functional {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.tdk-pill-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.tdk-catalog-pill {
border: 1px solid var(--tdk-border);
background: transparent;
cursor: pointer;
transition: background var(--tdk-trans), border-color var(--tdk-trans), color var(--tdk-trans);
}
.tdk-catalog-pill:hover { background: var(--tdk-surface-2); color: var(--tdk-text); }
.tdk-catalog-pill.tdk-pill-accent { border-color: var(--tdk-accent); }
.tdk-catalog-counts {
color: var(--tdk-text-2);
font-size: 12.5px;
margin-bottom: var(--tdk-sp-3);
}
.tdk-catalog-counts strong { color: var(--tdk-text); }
.tdk-course-card {
background: var(--tdk-surface) !important;
border: 1px solid var(--tdk-border) !important;
border-radius: var(--tdk-radius-md) !important;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
transition: border-color var(--tdk-trans), transform var(--tdk-trans);
}
.tdk-course-card:hover { border-color: var(--tdk-border-hi) !important; transform: translateY(-2px); }
.tdk-course-card-image { position: relative; background: var(--tdk-bg-2); }
.tdk-course-card-image img { width: 100%; height: auto; display: block; }
.tdk-course-card-category {
position: absolute;
top: 10px;
left: 10px;
text-decoration: none;
}
.tdk-course-card-body {
padding: var(--tdk-sp-4) var(--tdk-sp-5);
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.tdk-course-card-title {
font-size: 15px;
font-weight: var(--tdk-fw-semi);
margin: 0;
}
.tdk-course-card-title a { color: var(--tdk-text) !important; text-decoration: none; }
.tdk-course-card-teacher { color: var(--tdk-text-2); font-size: 12.5px; }
.tdk-course-card-action { margin-top: auto; padding-top: 10px; }
/* ============================================================
21. LEARNING PATH PLAYER (Fase 5)
------------------------------------------------------------
Classes reais confirmadas inspecionando o player nativo em
unitdk.test (lp_controller.php?action=view). O default.css
ja e carregado nessa pagina (confirmado: body bg = tdk-bg),
entao estas regras complementam o que ja temos globalmente.
============================================================ */
#content-scorm { min-height: 100vh; }
#learning_path_left_zone {
background: var(--tdk-bg-2) !important;
border-right: 1px solid var(--tdk-border) !important;
}
#scorm-info,
#panel-scorm {
background: var(--tdk-surface) !important;
border-bottom: 1px solid var(--tdk-border) !important;
}
.image-avatar { text-align: center; padding: var(--tdk-sp-4); }
#progress_bar .progress { margin: 0 var(--tdk-sp-4) var(--tdk-sp-3); }
#actions_lp { border-top: 1px solid var(--tdk-border); padding: var(--tdk-sp-3); }
#actions_lp .btn-group .btn { font-size: 11px; }
#toc_id.scorm-body { background: var(--tdk-bg-2) !important; }
.scorm-title { background: var(--tdk-bg-2) !important; border-bottom: 1px solid var(--tdk-border) !important; }
.scorm-title h4 { color: var(--tdk-text-2) !important; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--tdk-sp-3) var(--tdk-sp-4); margin: 0; }
#inner_lp_toc { padding: var(--tdk-sp-2); }
.item.level_0 { border-radius: var(--tdk-radius-sm); margin-bottom: 2px; }
.item.level_0:hover { background: var(--tdk-surface) !important; }
.item.level_0.current_element { background: var(--tdk-surface) !important; border: 1px solid var(--tdk-border) !important; }
a.items-list { color: var(--tdk-text) !important; display: block; padding: 8px 10px; font-size: 13px; }
a.items-list:hover { color: var(--tdk-accent) !important; text-decoration: none; }
#learning_path_right_zone { background: var(--tdk-bg) !important; }
.nav-tabs-bar,
#navTabsbar { background: var(--tdk-surface) !important; border-bottom: 1px solid var(--tdk-border) !important; }
#navTabs.nav-tabs { border-bottom: none !important; }
#navTabs.nav-tabs > li > a { color: var(--tdk-text-2) !important; font-size: 12px; }
#navTabs.nav-tabs > li.active > a {
background: transparent !important;
color: var(--tdk-text) !important;
border-bottom: 2px solid var(--tdk-accent) !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
}
#lp-view-content,
#tab-iframe { background: var(--tdk-bg) !important; }
/* ============================================================
22. FORUM (Fase 6)
------------------------------------------------------------
Classes reais inspecionadas via viewforum.php e
forumfunction.inc.php do Chamilo 1.11. Paineis (.panel,
.thumbnail) ja estao dark pelo Section 5 — aqui so
adicionamos comportamentos especificos do forum.
============================================================ */
/* Category header with forum name */
.topic-forum h3,
.topic-forum h4 { color: var(--tdk-text); font-weight: var(--tdk-fw-semi); margin-bottom: var(--tdk-sp-3); }
/* Thread cards hover + sticky accent */
.panel.forum { transition: border-color var(--tdk-trans), transform var(--tdk-trans); }
.panel.forum:hover { border-color: var(--tdk-border-hi) !important; transform: translateY(-1px); }
.panel.forum.sticky { border-left: 3px solid var(--tdk-accent) !important; }
/* User thumbnail inside post/thread */
.forum_display .thumbnail img,
.forum_message .thumbnail img {
border-radius: 50%;
border: 2px solid var(--tdk-border);
}
/* Post action icon group */
.tools-icons { margin-top: var(--tdk-sp-2); }
.tools-icons a,
.tools-icons img { opacity: 0.65; transition: opacity var(--tdk-trans); }
.tools-icons a:hover,
.tools-icons img:hover { opacity: 1; }
/* Attachment comment label */
.forum_attach_comment { color: var(--tdk-text-2); font-size: 12px; font-style: italic; }
/* Thread stat cols (last reply, views) */
.forum_display .col-md-6 .row { color: var(--tdk-text-2); font-size: 12.5px; }
/* Forum toolbar (#toolbar-forum from DOM inspection) */
#toolbar-forum.actions { margin-bottom: var(--tdk-sp-4); }
/* ============================================================
23. MENSAGENS (Fase 6)
------------------------------------------------------------
Layout de 3+9 colunas: .social-network-menu (col-md-3) com
#sn-avatar, #sn-sidebar (painel de navegacao) + coluna
principal com lista de mensagens e formulario.
Classes reais inspecionadas em inbox.php (unitdk.test).
============================================================ */
/* Avatar panel inside social sidebar */
#sn-avatar .panel { text-align: center; }
.sidebar-avatar,
.area-avatar { padding: var(--tdk-sp-3); text-align: center; }
.sidebar-avatar .img-circle,
.area-avatar .img-circle { border: 2px solid var(--tdk-accent); width: 64px; height: 64px; }
/* Social sidebar nav pills (vertical stacked) */
#sn-sidebar .nav-pills > li > a {
color: var(--tdk-text-2) !important;
background: transparent !important;
border-radius: var(--tdk-radius-sm) !important;
font-size: 13px;
padding: 6px 12px;
transition: background var(--tdk-trans), color var(--tdk-trans);
}
#sn-sidebar .nav-pills > li > a:hover {
background: var(--tdk-surface-2) !important;
color: var(--tdk-text) !important;
}
#sn-sidebar .nav-pills > li.active > a,
#sn-sidebar .nav-pills > li.active > a:hover {
background: var(--tdk-accent) !important;
color: var(--tdk-on-accent) !important;
}
/* Message list rows */
.list-user-data,
.list-info {
border-bottom: 1px solid var(--tdk-border);
padding: var(--tdk-sp-3) var(--tdk-sp-4);
transition: background var(--tdk-trans);
}
.list-user-data:hover,
.list-info:hover { background: var(--tdk-surface-2); }
/* Message preview text */
.email-overflow {
color: var(--tdk-text-2);
font-size: 12.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Sender name */
.item-name { color: var(--tdk-text); font-weight: var(--tdk-fw-medium); }
/* User type badge */
.user-type { color: var(--tdk-text-2); font-size: 11px; }
/* ============================================================
24. ADMIN (Fase 6)
------------------------------------------------------------
Classes reais inspecionadas em /admin/index.php (unitdk.test).
Cada bloco usa .panel.panel-default.block-admin-* (6 colunas
side-by-side). Lista de itens: .list-items-admin com links
icone + texto. Icones sao imagens claras — invertidas aqui.
============================================================ */
/* Admin block icons: invert para ficarem visiveis no dark */
.block-admin-users > .panel-heading img,
.block-admin-courses > .panel-heading img,
.block-admin-sessions > .panel-heading img,
.block-admin-platform > .panel-heading img,
.block-admin-settings > .panel-heading img,
.block-admin-skills > .panel-heading img,
.block-admin-privacy > .panel-heading img,
.block-admin-version-check > .panel-heading img {
filter: invert(1) brightness(0.8);
width: 22px;
height: 22px;
}
/* Admin item list */
.list-items-admin { list-style: none; padding: 0; margin: 0; }
.list-items-admin li { border-bottom: 1px solid var(--tdk-border); }
.list-items-admin li:last-child { border-bottom: none; }
.list-items-admin li a {
color: var(--tdk-text-2) !important;
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 6px;
border-radius: var(--tdk-radius-sm);
transition: background var(--tdk-trans), color var(--tdk-trans);
}
.list-items-admin li a:hover {
background: var(--tdk-surface-2);
color: var(--tdk-text) !important;
text-decoration: none;
}
.list-items-admin li a img { filter: invert(0.6); width: 16px; height: 16px; }
/* Chamilo version-check alert */
.block-admin-version-check .alert-info {
background: rgba(99,102,241,0.1) !important;
border-color: var(--tdk-accent) !important;
color: var(--tdk-text-2) !important;
}
/* ============================================================
25. PLUGIN: DASHBOARD ADMIN (Fase 6)
------------------------------------------------------------
Renderizado pelo plugin unitdk_admin_dashboard em content_top
apenas na pagina main/admin/index.php. KPI cards + grafico
Chart.js (inscricoes por trilha). Chart.js carregado via CDN
se nao estiver presente; nenhum core editado.
============================================================ */
.tdk-admin-dashboard {
background: var(--tdk-surface);
border: 1px solid var(--tdk-border);
border-radius: var(--tdk-radius-lg);
padding: var(--tdk-sp-5);
margin-bottom: var(--tdk-sp-6);
}
.tdk-admin-dashboard > h3 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--tdk-text-2);
font-weight: var(--tdk-fw-medium);
margin: 0 0 var(--tdk-sp-4);
}
.tdk-admin-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--tdk-sp-4);
margin-bottom: var(--tdk-sp-5);
}
.tdk-admin-kpi-card {
background: var(--tdk-bg-2);
border: 1px solid var(--tdk-border);
border-radius: var(--tdk-radius-md);
padding: var(--tdk-sp-4) var(--tdk-sp-5);
text-align: center;
transition: border-color var(--tdk-trans);
}
.tdk-admin-kpi-card:hover { border-color: var(--tdk-border-hi); }
.tdk-admin-kpi-icon { font-size: 22px; color: var(--tdk-accent); margin-bottom: var(--tdk-sp-2); }
.tdk-admin-kpi-value {
font-size: var(--tdk-fs-2xl);
font-weight: var(--tdk-fw-bold);
color: var(--tdk-text);
line-height: 1.1;
}
.tdk-admin-kpi-label {
font-size: 11px;
color: var(--tdk-text-2);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 4px;
}
.tdk-admin-chart-wrap {
background: var(--tdk-bg-2);
border: 1px solid var(--tdk-border);
border-radius: var(--tdk-radius-md);
padding: var(--tdk-sp-4) var(--tdk-sp-5);
}
.tdk-admin-chart-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--tdk-text-2);
font-weight: var(--tdk-fw-medium);
margin: 0 0 var(--tdk-sp-3);
}
@media (max-width: 991px) {
.tdk-admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
.tdk-admin-kpi-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════
26 · Perfil (main/auth/profile.php)
═══════════════════════════════════════════════════════════════════════ */
/* Menu lateral esquerdo */
.social-network-menu {
background: var(--tdk-bg-2);
border: 1px solid var(--tdk-border);
border-radius: var(--tdk-radius-md);
overflow: hidden;
}
.social-network-menu .header {
background: var(--tdk-surface);
color: var(--tdk-text-2);
border-bottom: 1px solid var(--tdk-border);
padding: var(--tdk-sp-3) var(--tdk-sp-4);
font-size: var(--tdk-fs-xs);
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: var(--tdk-fw-medium);
}
.social-network-menu ul {
margin: 0;
padding: var(--tdk-sp-2) 0;
list-style: none;
}
.social-network-menu ul li a {
display: block;
padding: var(--tdk-sp-2) var(--tdk-sp-4);
color: var(--tdk-text-2);
font-size: var(--tdk-fs-sm);
transition: color var(--tdk-trans), background var(--tdk-trans);
text-decoration: none;
}
.social-network-menu ul li a:hover {
color: var(--tdk-text);
background: var(--tdk-surface);
}
/* Avatar do perfil */
.profile-picture-box { text-align: center; margin-bottom: var(--tdk-sp-4); }
.profile-picture-box img {
border: 3px solid var(--tdk-border-hi);
border-radius: 50%;
max-width: 120px;
}
.img-thumbnail {
background: var(--tdk-surface) !important;
border-color: var(--tdk-border) !important;
}
/* Labels, legend e help-text de QUALQUER formulário nativo .form-horizontal
(não só o de Perfil — mesmo padrão do FormValidator é usado em praticamente
toda tela de CRUD administrativa: Criar curso, Criar sessão, Criar usuário
etc., que nunca tinham recebido nenhum tratamento). O