/* ---------------------------------------------------------------
   Tema do Painel ExpertemTI
   Cores extraídas do logo: azul (#149fd8) + verde-limão (#bfdc16)
   Para retematizar, altere apenas as variáveis abaixo.
--------------------------------------------------------------- */
:root {
    --brand:        #149fd8;   /* azul do logo */
    --brand-dark:   #0c6791;
    --brand-light:  #e4f4fb;
    --accent:       #bfdc16;   /* verde-limão do logo */
    --accent-dark:  #a3bd12;
    --ink:          #0a1430;   /* azul bem escuro (fundo) */
}

body {
    font-family: 'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
    background-color: #f4f6fa;
    color: #1f2733;
}

/* ----- Tela de login ----- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--ink);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.login-card {
    width: 100%;
    max-width: 420px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .5);
}
.login-logo { max-height: 110px; width: auto; }

/* ----- Botões ----- */
.btn-brand        { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover,
.btn-brand:focus  { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.btn-aluno        { background: var(--accent); border-color: var(--accent); color: #14210a; font-weight: 600; }
.btn-aluno:hover,
.btn-aluno:focus  { background: var(--accent-dark); border-color: var(--accent-dark); color: #14210a; }

/* ----- Navbar ----- */
.navbar-brand img { max-height: 34px; width: auto; }
.navbar.admin,
.navbar.aluno { background: var(--ink) !important; border-bottom: 3px solid var(--accent); }

/* ----- Cartões ----- */
.card-stat {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
}
.text-brand  { color: var(--brand) !important; }
.text-accent { color: var(--accent-dark) !important; }

a        { color: var(--brand); text-decoration: none; }
a:hover  { color: var(--brand-dark); }

/* ===============================================================
   Login em tela dividida (split)
   =============================================================== */
.login-split { min-height: 100vh; display: flex; }

/* Lado esquerdo: hero com a imagem do datacenter */
.login-hero {
    flex: 1 1 50%;
    position: relative;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background-color: var(--ink);
    background-image: linear-gradient(rgba(10, 18, 48, .72), rgba(10, 18, 48, .88)), url('../img/login-bg.jpg');
    background-size: cover;
    background-position: center;
}
.login-hero .hero-content { max-width: 440px; text-align: center; }
.login-hero .hero-logo { max-height: 150px; width: auto; margin-bottom: 1.75rem; }
.login-hero h2 { font-weight: 700; line-height: 1.2; }
.login-hero .hero-accent { color: var(--accent); }
.login-hero .hero-dots { margin-top: 2rem; }
.login-hero .hero-dots span {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255, 255, 255, .35); margin: 0 4px;
}
.login-hero .hero-dots span.on { background: var(--accent); }

/* Lado direito: formulário */
.login-form-side {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #fff;
}
.login-form-card { width: 100%; max-width: 380px; }
.login-form-card .form-logo { max-height: 86px; width: auto; }

/* Campos com ícone */
.input-icon { position: relative; }
.input-icon > .bi {
    position: absolute; top: 50%; left: 14px; transform: translateY(-50%);
    color: #9aa3af; pointer-events: none;
}
.input-icon .form-control { padding-left: 42px; }
.input-icon .toggle-pass {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    border: 0; background: transparent; color: #9aa3af; padding: .25rem .4rem; cursor: pointer;
}
.input-icon .toggle-pass:hover { color: var(--brand); }
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(20, 159, 216, .2); }

/* Celular: esconde o hero e mostra só o formulário */
@media (max-width: 991.98px) {
    .login-hero { display: none; }
    .login-form-side { flex-basis: 100%; }
}

/* ===============================================================
   Layout do painel com menu lateral (sidebar)
   =============================================================== */
.admin-layout { display: flex; min-height: 100vh; }

.admin-sidebar { width: 260px; flex-shrink: 0; --bs-offcanvas-width: 260px; }
.admin-sidebar .sidebar-inner {
    height: 100%;
    background: var(--ink);
    color: #cdd5e0;
    display: flex;
    flex-direction: column;
}
.sidebar-header {
    position: relative;
    padding: 1.4rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
}
.sidebar-header .sidebar-logo { display: inline-block; line-height: 0; transition: opacity .15s; }
.sidebar-header .sidebar-logo:hover { opacity: .85; }
.sidebar-header img { max-height: 78px; width: auto; }
.sidebar-close { position: absolute; top: .9rem; right: .9rem; }

.sidebar-nav { padding: 1rem .75rem; flex: 1 1 auto; overflow-y: auto; }
.sidebar-link {
    display: flex; align-items: center; gap: .8rem;
    padding: .72rem .9rem; margin-bottom: .25rem;
    border-radius: 10px; color: #cdd5e0; font-weight: 500;
    font-size: .95rem; letter-spacing: .01em;
    transition: background .15s, color .15s;
}
.sidebar-link.active { font-weight: 600; }
.sidebar-link .bi { font-size: 1.2rem; }
.sidebar-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-link.active { background: var(--brand); color: #fff; }
.sidebar-link.active:hover { background: var(--brand-dark); }

.sidebar-footer { padding: 1rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.sidebar-footer .user-name { color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.1; }
.sidebar-footer .user-email { color: #8b95a7; font-size: .78rem; }

.sidebar-section {
    color: #6b7689; font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; padding: 1rem .95rem .35rem;
}
.sidebar-nav .sidebar-section:first-child { padding-top: .25rem; }
.sidebar-badge {
    margin-left: auto; background: var(--accent); color: #14210a;
    font-size: .7rem; font-weight: 700; border-radius: 10px; padding: 0 .45rem; line-height: 1.55;
}
.avatar-sidebar { background: rgba(255, 255, 255, .12); color: #fff; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 3px; }

.admin-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #f4f6fa; }
.admin-topbar {
    height: 64px; background: #fff; border-bottom: 1px solid #e6e9ef;
    display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
    position: sticky; top: 0; z-index: 5;
}
.admin-topbar .topbar-title { font-size: 1.15rem; font-weight: 600; margin: 0; }
.topbar-search { width: 280px; max-width: 34vw; }
.admin-content { padding: 1.5rem; flex: 1 1 auto; }

.stat-icon {
    width: 56px; height: 56px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: var(--brand-light); color: var(--brand);
    font-size: 1.6rem;
}
.stat-icon.green { background: #e3f6ec; color: #1a9e5f; }
.stat-icon.red   { background: #fdebe8; color: #d6492f; }
.stat-icon.gray  { background: #eef1f6; color: #5b6676; }

/* Avatar com iniciais */
.avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-light); color: var(--brand);
    font-weight: 600; font-size: .85rem; text-transform: uppercase;
}

/* Topbar: botão recolher + título */
.topbar-collapse {
    border: 0; background: transparent; color: #5b6676;
    font-size: 1.3rem; line-height: 1; padding: .25rem .5rem; border-radius: 8px;
}
.topbar-collapse:hover { background: #eef1f6; color: var(--brand); }

/* Breadcrumb */
.admin-breadcrumb { margin-bottom: 1.1rem; }
.admin-breadcrumb .breadcrumb { margin: 0; font-size: .85rem; }

/* Tabelas */
.table-actions { white-space: nowrap; }
.table-actions .btn { padding: .25rem .5rem; }

/* Menu recolhido (somente desktop) */
@media (min-width: 992px) {
    .admin-layout.sidebar-collapsed .admin-sidebar { width: 76px; }
    .admin-layout.sidebar-collapsed .sidebar-link { justify-content: center; padding: .7rem; }
    .admin-layout.sidebar-collapsed .sidebar-link .link-label { display: none; }
    .admin-layout.sidebar-collapsed .sidebar-header { justify-content: center; }
    .admin-layout.sidebar-collapsed .sidebar-header img { max-height: 40px; }
    .admin-layout.sidebar-collapsed .sidebar-footer .user-info { display: none; }
    .admin-layout.sidebar-collapsed .sidebar-footer { text-align: center; }
    .admin-layout.sidebar-collapsed .sidebar-section { display: none; }
    .admin-layout.sidebar-collapsed .sidebar-footer .d-flex { justify-content: center; }
}

/* Submenus do sidebar */
.sidebar-group-toggle .chev { margin-left: auto; transition: transform .2s; font-size: .8rem; }
.sidebar-group-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sidebar-sublink {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .9rem .5rem 2.7rem;
    color: #aeb7c5; font-size: .9rem; border-radius: 8px; margin-bottom: .15rem;
}
.sidebar-sublink:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar-sublink.active { background: rgba(20, 159, 216, .22); color: #fff; }
@media (min-width: 992px) {
    .admin-layout.sidebar-collapsed .sidebar-sub,
    .admin-layout.sidebar-collapsed .sidebar-group-toggle .chev,
    .admin-layout.sidebar-collapsed .sidebar-link .link-label { display: none; }
}

/* ===============================================================
   Kanban de leads
   =============================================================== */
.kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem; align-items: flex-start; }
.kanban-col {
    flex: 0 0 290px; max-width: 290px;
    background: #eef1f6; border-radius: 12px;
    display: flex; flex-direction: column; max-height: calc(100vh - 200px);
}
.kanban-col-header {
    padding: .8rem 1rem; font-weight: 600;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px solid #fff;
}
.kanban-col.etapa-convertido .kanban-col-header { color: #1a9e5f; }
.kanban-col.etapa-perdido .kanban-col-header { color: #d6492f; }
.kanban-count { background: #fff; border-radius: 20px; padding: 0 .55rem; font-size: .78rem; color: #5b6676; }
.kanban-col-body { padding: .7rem; overflow-y: auto; flex: 1 1 auto; min-height: 80px; }
.kanban-card {
    background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    padding: .75rem; margin-bottom: .6rem; cursor: grab;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card .lead-nome { font-weight: 600; }
.sortable-ghost { opacity: .4; }

/* ===============================================================
   Editor de conteúdo + pré-visualização SEO
   =============================================================== */
.ql-container { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.ql-toolbar { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.ql-editor { min-height: 320px; font-size: 1rem; }

.char-counter { font-size: .8rem; color: #9aa3af; }
.char-counter.ok { color: #1a9e5f; }
.char-counter.over { color: #d6492f; }

.serp-preview { font-family: Arial, sans-serif; line-height: 1.35; }
.serp-preview .serp-title { color: #1a0dab; font-size: 1.05rem; }
.serp-preview .serp-url { color: #006621; font-size: .82rem; word-break: break-all; }
.serp-preview .serp-desc { color: #4d5156; font-size: .85rem; }

.img-preview { max-height: 140px; border-radius: 8px; border: 1px solid #e6e9ef; object-fit: cover; }

/* Miniatura em tabelas */
.thumb-sm {
    width: 46px; height: 46px; border-radius: 8px; flex-shrink: 0;
    object-fit: cover; background: #eef1f6;
}
.thumb-ph { display: flex; align-items: center; justify-content: center; color: #9aa3af; font-size: 1.1rem; }

/* Chips de sugestão */
.chip {
    display: inline-block; background: #eef1f6; border: 1px solid #e0e5ee; color: #46506a;
    border-radius: 20px; padding: .3rem .8rem; font-size: .82rem; cursor: pointer; margin: 0 .25rem .35rem 0;
}
.chip:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }

/* Barra de progresso fina de SEO em tabela */
.seo-mini { width: 64px; height: 6px; border-radius: 4px; background: #e6e9ef; overflow: hidden; }
.seo-mini > span { display: block; height: 100%; }

/* ===============================================================
   Site público (/blog e /tutoriais)
   =============================================================== */
body.site { background: #fff; }
.site-nav { background: var(--ink); padding: .55rem 0; position: sticky; top: 0; z-index: 10; }
.site-nav .container { display: flex; align-items: center; }
.site-nav .site-brand img { max-height: 44px; width: auto; }
.site-nav .nav-link { color: #cdd5e0; font-weight: 500; padding: .25rem .25rem; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: #fff; }

.site-hero {
    color: #fff; padding: 4.5rem 0; text-align: center;
    background: linear-gradient(rgba(10, 18, 48, .80), rgba(10, 18, 48, .92)), url('../img/login-bg.jpg') center/cover no-repeat;
}
.site-hero h1 { font-weight: 800; font-size: 2.6rem; }

.post-card {
    border: 0; border-radius: 14px; overflow: hidden; height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
    transition: transform .15s, box-shadow .15s;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, .13); }
.post-card .card-img-top { height: 180px; object-fit: cover; background: #eef1f6; }
.post-card .card-img-ph { display: flex; align-items: center; justify-content: center; color: #aeb7c5; font-size: 2.2rem; }

.article-cover { width: 100%; max-height: 440px; object-fit: cover; border-radius: 14px; }
.article-body { font-size: 1.08rem; line-height: 1.85; color: #2b333f; }
.article-body h2 { margin-top: 2rem; margin-bottom: .75rem; font-weight: 700; }
.article-body h3 { margin-top: 1.5rem; font-weight: 700; }
.article-body img { max-width: 100%; height: auto; border-radius: 10px; }
.article-body a { color: var(--brand); }

.site-footer { background: var(--ink); color: #aeb7c5; padding: 2.5rem 0; margin-top: 3rem; }
.site-footer a { color: #cdd5e0; }
.site-footer a:hover { color: #fff; }

/* ----- Página de artigo ----- */
.reading-progress {
    position: fixed; top: 0; left: 0; height: 4px; width: 0;
    background: var(--accent); z-index: 1031; transition: width .08s linear;
}
.post-meta { color: #6b7480; font-size: .9rem; }
.post-meta .dot { margin: 0 .5rem; opacity: .5; }

.tag-chip {
    display: inline-block; background: var(--brand-light); color: var(--brand);
    border-radius: 20px; padding: .22rem .75rem; font-size: .8rem; margin: 0 .3rem .35rem 0;
    text-decoration: none;
}
.tag-chip:hover { background: var(--brand); color: #fff; }

.post-toc { position: sticky; top: 84px; }
.post-toc .toc-title { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #9aa3af; }
.post-toc a {
    display: block; padding: .28rem 0 .28rem .8rem; margin-left: 1px;
    border-left: 2px solid #e6e9ef; color: #5b6676; font-size: .9rem; text-decoration: none; line-height: 1.35;
}
.post-toc a:hover { color: var(--brand); }
.post-toc a.active { color: var(--brand); border-left-color: var(--brand); font-weight: 600; }
.post-toc a.lvl-3 { padding-left: 1.7rem; font-size: .85rem; }

.share-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.05rem; text-decoration: none;
}
.share-btn:hover { opacity: .9; color: #fff; }
.share-wa { background: #25d366; } .share-li { background: #0a66c2; }
.share-x  { background: #111; }    .share-fb { background: #1877f2; }
.share-copy { background: #5b6676; }

.back-top {
    position: fixed; bottom: 24px; right: 24px; width: 46px; height: 46px; border-radius: 50%;
    background: var(--brand); color: #fff; border: 0; display: none;
    align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); z-index: 50;
}
.back-top.show { display: inline-flex; }

/* ----- Refinos UX do site público ----- */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
.article-body h2, .article-body h3 { scroll-margin-top: 84px; }
.site-nav { transition: box-shadow .2s; }
.site-nav.scrolled { box-shadow: 0 3px 14px rgba(0, 0, 0, .28); }

.card-meta { color: #8a93a3; font-size: .82rem; }
.card-meta .dot { margin: 0 .4rem; opacity: .5; }

.featured-card { border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 34px rgba(0, 0, 0, .10); }
.featured-card .feat-img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; background: #eef1f6; }
.featured-card .feat-ph { display: flex; align-items: center; justify-content: center; color: #aeb7c5; font-size: 3rem; min-height: 280px; }
.featured-badge { background: var(--accent); color: #14210a; font-weight: 700; border-radius: 20px; padding: .22rem .8rem; font-size: .76rem; }
.featured-card h2 { font-weight: 800; line-height: 1.2; }

#copyToast {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(10px);
    background: #14210a; color: #fff; padding: .5rem 1rem; border-radius: 8px; font-size: .88rem;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60;
}
#copyToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===============================================================
   Refinamento visual do painel (tipografia, cores, elementos)
   =============================================================== */
:root {
    --bg:        #f1f4f9;
    --surface:   #ffffff;
    --border:    #e7ebf2;
    --text:      #1f2733;
    --muted:     #6b7689;
    --radius:    14px;
    --font-head: 'Poppins', 'Inter', system-ui, sans-serif;
}

body { background-color: var(--bg); color: var(--text); }

/* Tipografia de títulos no conteúdo do admin */
.admin-content h1, .admin-content h2, .admin-content h3,
.admin-content h4, .admin-content h5, .admin-content h6,
.admin-content .h1, .admin-content .h2, .admin-content .h3,
.admin-content .h4, .admin-content [class*="display-"],
.topbar-title, .card-stat .card-header {
    font-family: var(--font-head);
    letter-spacing: -.01em;
}
.admin-content { padding: 1.75rem; }
.admin-content > h3, .admin-content > h4 { margin-bottom: 1.1rem; }

/* Topbar */
.admin-topbar { box-shadow: 0 1px 0 rgba(16, 24, 40, .05); }
.admin-topbar .topbar-title { font-weight: 600; }

/* Cards */
.card-stat {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 22px rgba(16, 24, 40, .05);
}
.card-stat .card-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
.stat-icon { border-radius: 14px; }

/* Botões */
.btn { border-radius: 10px; font-weight: 500; }
.btn-lg { border-radius: 12px; }
.btn-brand {
    background: linear-gradient(180deg, #1aa7e2 0%, var(--brand) 100%);
    border-color: var(--brand);
    box-shadow: 0 2px 8px rgba(20, 159, 216, .28);
}
.btn-brand:hover, .btn-brand:focus {
    background: var(--brand-dark); border-color: var(--brand-dark);
    box-shadow: 0 5px 14px rgba(20, 159, 216, .34);
}

/* Formulários */
.form-label { font-weight: 500; color: #3a4452; margin-bottom: .35rem; }
.form-control, .form-select {
    border-color: var(--border); border-radius: 10px; padding: .55rem .8rem; color: var(--text);
}
.form-control::placeholder { color: #aab2c0; }
.input-group-text { border-color: var(--border); background: #f8fafc; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(20, 159, 216, .15); }

/* Tabelas */
.table { --bs-table-hover-bg: #f6f9fc; color: var(--text); }
.table > thead th {
    text-transform: uppercase; font-size: .72rem; letter-spacing: .04em;
    color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border);
}
.table > tbody td, .table > thead th { padding-top: .85rem; padding-bottom: .85rem; }
.table.table-light, .table > thead.table-light th, thead.table-light th { background: #f6f8fb; }

/* Badges / breadcrumb / diversos */
.badge { font-weight: 600; border-radius: 8px; padding: .4em .65em; }
.admin-breadcrumb .breadcrumb { background: transparent; margin: 0; }
.breadcrumb-item + .breadcrumb-item::before { color: #c2c9d6; }
.text-muted { color: var(--muted) !important; }
hr { border-color: var(--border); opacity: 1; }

/* ===============================================================
   Tabelas modernas (estilo "clean")
   =============================================================== */
.card-stat > .table-responsive { border-radius: var(--radius); overflow: hidden; }
.card-stat .table { margin: 0; }
.card-stat .table > thead th {
    background: #fafbfe; border: 0; border-bottom: 1px solid var(--border);
    padding: .9rem 1.1rem; color: var(--muted);
}
.card-stat .table > tbody td {
    border: 0; border-bottom: 1px solid #eef1f6;
    padding: .95rem 1.1rem; vertical-align: middle;
}
.card-stat .table > tbody tr:last-child td { border-bottom: 0; }
.card-stat .table > tbody tr { transition: background .12s ease; }
.card-stat .table.table-hover > tbody tr:hover { background: #f6faff; }
.card-stat .table a.text-reset:hover { color: var(--brand) !important; }

/* Ações da linha como ícones suaves */
.table-actions { white-space: nowrap; }
.table-actions .btn {
    border: 0; background: transparent; color: var(--muted);
    width: 34px; height: 34px; padding: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 9px;
}
.table-actions .btn:hover { background: #eef2f8; }
.table-actions .btn-outline-primary:hover { color: var(--brand); background: var(--brand-light); }
.table-actions .btn-outline-danger:hover { color: #d6492f; background: #fdebe8; }

/* Status em pílulas suaves */
.badge.text-bg-success   { background: #e3f6ec !important; color: #167c4a !important; }
.badge.text-bg-secondary { background: #eef1f6 !important; color: #5b6676 !important; }
.badge.text-bg-info      { background: #e4f1fb !important; color: #1366a6 !important; }
.badge.text-bg-danger    { background: #fdebe8 !important; color: #c0392b !important; }
.badge.text-bg-light     { background: #f1f4f9 !important; color: #5b6676 !important; border: 1px solid var(--border); }

/* Avatares um pouco maiores nas tabelas */
.table .avatar { width: 40px; height: 40px; }

/* Paginação moderna */
.pagination { gap: .3rem; }
.pagination .page-link {
    border: 1px solid var(--border); border-radius: 10px; color: var(--text);
    min-width: 38px; text-align: center; padding: .4rem .6rem;
}
.pagination .page-link:hover { background: #eef2f8; color: var(--brand-dark); }
.pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .page-item.disabled .page-link { color: #aab2c0; background: transparent; }

/* Inputs de busca/toolbar mais arredondados */
.input-group > .form-control:first-child,
.input-group > .input-group-text:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.input-group > .btn:last-child,
.input-group > .form-control:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

/* =====================================================================
   Ferramentas do aluno (utilitários)
   ===================================================================== */
.tl-head { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; justify-content:space-between; margin-bottom:1rem; }
.tl-head h4 { margin:0; font-weight:700; }
.tl-head .sub { color:#6c757d; font-size:.85rem; }
.tl-card { border:0; border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.07); }

/* Hub */
.tl-grid-card { border:0; border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.07); height:100%; background:#fff;
                transition:transform .18s, box-shadow .18s; text-decoration:none; color:inherit; display:block; }
.tl-grid-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(13,27,42,.14); color:inherit; }
.tl-grid-ic { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
              font-size:1.5rem; color:#fff; margin-bottom:.8rem; }

/* Resultado tipo chave/valor */
.tl-kv { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid #f2f3f5; }
.tl-kv:last-child { border-bottom:0; }
.tl-kv .k { color:#6c757d; font-size:.85rem; }
.tl-kv .v { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:600; text-align:right; word-break:break-all; }

/* Saída monoespaçada (códigos/comandos) */
.tl-out { position:relative; background:#0d1b2a; color:#e6edf3; border-radius:12px; padding:1rem 1rem; }
.tl-out pre { margin:0; white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85rem; }
.tl-copy { position:absolute; top:.55rem; right:.55rem; }

/* Linha de item gerado (uuid/mac) */
.tl-mono-row { display:flex; align-items:center; gap:.5rem; padding:.45rem .7rem; border:1px solid #eef0f2; border-radius:10px; margin-bottom:.4rem; }
.tl-mono-row code { font-size:.95rem; flex-grow:1; word-break:break-all; }
.tl-badge-soft { background:var(--brand-light); color:var(--brand); border-radius:6px; padding:.1rem .45rem; font-size:.72rem; font-weight:700; }

/* Botão outline na cor da marca */
.btn-outline-brand { color:var(--brand); border-color:var(--brand); }
.btn-outline-brand:hover, .btn-check:checked + .btn-outline-brand { background:var(--brand); border-color:var(--brand); color:#fff; }

/* Hub: busca, categorias e ações rápidas */
.tl-search { position:relative; max-width:420px; }
.tl-search .bi { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:#9aa0a6; }
.tl-search input { padding-left:2.1rem; border-radius:999px; }
.tl-cat-title { font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8a9099; margin:1.25rem 0 .5rem; }
.tl-grid-card .arrow { color:#c2c8d0; transition:transform .18s, color .18s; }
.tl-grid-card:hover .arrow { color:var(--brand); transform:translateX(3px); }
.tl-quick { border:0; border-radius:14px; background:linear-gradient(135deg,#0d1b2a,#1b3a5b); color:#fff; }
.tl-quick code { color:#ffd34d; font-size:.95rem; word-break:break-all; }
.tl-quick .qbox { background:rgba(255,255,255,.08); border-radius:12px; padding:.7rem .85rem; display:flex; align-items:center; gap:.5rem; height:100%; }
.tl-quick .qbox .lbl { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; opacity:.7; }
.tl-quick code { cursor:pointer; }
.tl-noresult { color:#8a9099; text-align:center; padding:2rem 0; }
.min-w-0 { min-width:0; }