:root {
    /* Identidade Nebula Code: azul #3ea3f8 / índigo #4010c8, Archivo + Hanken Grotesk. */
    --nb-primary: #4010c8;
    --nb-primary-dark: #2a1da8;
    --nb-topbar-h: 56px;
    --nb-sidebar-w: 240px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #f5f6fb;
    color: #14123a;
}

/* Topbar */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--nb-topbar-h);
    display: flex; align-items: center; gap: .75rem; padding: 0 1rem;
    background: var(--nb-primary); color: #fff; z-index: 100;
}
.topbar .brand { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-family: "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif; }
.topbar .brand .brand-logo { height: 52px; width: auto; display: block; }
.topbar .logo { display: inline-flex; }
.topbar .spacer { flex: 1; }

/* Sidebar */
.sidebar {
    position: fixed; top: var(--nb-topbar-h); left: 0; bottom: 0; width: var(--nb-sidebar-w);
    background: #fff; border-right: 1px solid #e5e7eb; padding: 1rem .5rem; overflow-y: auto;
}
.sidebar .nav-label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: #9ca3af; padding: .5rem .75rem .25rem;
}
.sidebar a {
    display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; margin-bottom: .1rem;
    border-radius: .4rem; color: #374151; text-decoration: none; font-size: .9rem;
}
.sidebar a:hover { background: #f3f4f6; }
.sidebar a.active { background: var(--nb-primary); color: #fff; }
.sidebar a i { width: 1.1rem; text-align: center; }

/* Content */
.content {
    margin-left: var(--nb-sidebar-w); margin-top: var(--nb-topbar-h);
    padding: 1.5rem; min-height: calc(100vh - var(--nb-topbar-h));
}

/* Matriz de permissoes */
.matriz th, .matriz td { text-align: center; vertical-align: middle; }
.matriz td:first-child, .matriz th:first-child { text-align: left; }
.matriz .cat-row td {
    background: #f3f4f6; font-weight: 600; text-transform: uppercase;
    font-size: .75rem; letter-spacing: .03em; color: #6b7280;
}
.matriz .acao-row td:first-child { padding-left: 2rem; font-size: .85rem; color: #6b7280; }

/* Login */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--nb-primary), var(--nb-primary-dark));
}
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: .75rem; padding: 2rem; }
.login-card .logo-big {
    width: 56px; height: 56px; border-radius: 14px; background: var(--nb-primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 1rem;
}

/* ----------------------------------------------------------------- Responsivo (mobile) */
/* Topbar é roxa (--nb-primary), sidebar é branca. Botão hambúrguer clara sobre a topbar. */
.nav-toggle {
    display: none; background: transparent; border: 1px solid rgba(255,255,255,.35);
    color: #fff; width: 38px; height: 38px; border-radius: .4rem;
    align-items: center; justify-content: center; margin-right: .25rem; cursor: pointer;
    flex-shrink: 0; transition: background .12s, border-color .12s;
}
.nav-toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }
.nav-overlay {
    position: fixed; inset: var(--nb-topbar-h) 0 0 0; z-index: 90;
    background: rgba(15,15,25,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

@media (max-width: 860px) {
    .topbar { gap: .5rem; padding: 0 .75rem; }
    .nav-toggle { display: inline-flex; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.25);
        z-index: 99;
    }
    body.nav-open .sidebar { transform: translateX(0); }

    .content { margin-left: 0; padding: 1.25rem 1rem; }

    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Matriz de permissões é larga — permite rolar lateral sem quebrar */
    .matriz { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (min-width: 861px) {
    .nav-overlay { display: none !important; }
}

@media (max-width: 460px) {
    .content { padding: 1rem .75rem; }
}

/* =============================================================================
   Dashboard (Visao Geral) — cards de KPI (icone em pilula + acento por KPI)
   e cards de ferramenta harmonizados.
   ============================================================================= */
.kpi {
    position: relative; border: none; border-radius: .9rem; overflow: hidden;
    background: #fff; box-shadow: 0 1px 3px rgba(23, 16, 50, .06);
    transition: box-shadow .15s, transform .15s;
}
.kpi:hover { box-shadow: 0 8px 24px rgba(23, 16, 50, .10); transform: translateY(-2px); }
.kpi .kpi-body { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.15rem 1.25rem; }
.kpi .kpi-icon {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.kpi .kpi-eyebrow {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #8b8b96; margin-bottom: .15rem;
}
.kpi .kpi-value { font-family: "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.9rem; font-weight: 800; line-height: 1; color: #1c1035; }
.kpi .kpi-sub { font-size: .78rem; color: #9a9aa6; margin-top: .2rem; }
.kpi .kpi-accent { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }

/* Cores por KPI (fundo suave do icone + faixa de acento) */
.kpi.k-roxo     .kpi-icon { background: #e3eefe; color: var(--nb-primary); }
.kpi.k-roxo     .kpi-accent { background: var(--nb-primary); }
.kpi.k-indigo   .kpi-icon { background: #e6e9ff; color: #4f46e5; }
.kpi.k-indigo   .kpi-accent { background: #4f46e5; }
.kpi.k-teal     .kpi-icon { background: #d9f5f0; color: #0d9488; }
.kpi.k-teal     .kpi-accent { background: #0d9488; }
.kpi.k-verde    .kpi-icon { background: #dcfce7; color: #16a34a; }
.kpi.k-verde    .kpi-accent { background: #16a34a; }
.kpi.k-vermelho .kpi-icon { background: #fee2e2; color: #dc2626; }
.kpi.k-vermelho .kpi-accent { background: #dc2626; }
.kpi.k-cinza    .kpi-icon { background: #e6eaf1; color: #475569; }
.kpi.k-cinza    .kpi-accent { background: #475569; }
.kpi.k-vermelho .kpi-value.alerta { color: #dc2626; }

/* Cards de ferramenta (ricos: status dot, divisoria, metrica em destaque, barra de uso) */
.tool-card {
    border: none; border-radius: .9rem; box-shadow: 0 1px 3px rgba(23, 16, 50, .06);
    transition: box-shadow .15s, transform .15s;
}
.tool-card:hover { box-shadow: 0 8px 24px rgba(23, 16, 50, .10); transform: translateY(-2px); }
.tool-card .tool-icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: #e3eefe; color: var(--nb-primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
/* Cor da pilula do icone por ferramenta (fallback = roxo da marca acima) */
.tool-icon.ti-aws      { background: #fff1e6; color: #ea580c; }
.tool-icon.ti-cofre    { background: #e6f0ff; color: #2563eb; }
.tool-icon.ti-deploy   { background: #dcfce7; color: #16a34a; }
.tool-icon.ti-finance  { background: #e3eefe; color: var(--nb-primary); }
.tool-icon.ti-tutorial { background: #ffe6f2; color: #db2777; }
.tool-card .tool-nome { font-family: "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .98rem; font-weight: 700; color: #1c1035; line-height: 1.1; }
.tool-card .tool-codigo { font-size: .72rem; color: #9a9aa6; letter-spacing: .03em; }
/* Status como bolinha (dot) */
.tool-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; }
.tool-status .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tool-status.on  { color: #16a34a; } .tool-status.on  .dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.tool-status.off { color: #94a3b8; } .tool-status.off .dot { background: #94a3b8; }
/* Divisoria sutil */
.tool-card .tool-sep { border: none; border-top: 1px solid #eef0f4; margin: .85rem 0; }
/* Metrica em destaque */
.tool-metric { display: flex; align-items: baseline; gap: .5rem; }
.tool-metric .num { font-size: 1.6rem; font-weight: 800; color: var(--nb-primary); line-height: 1; }
.tool-metric .lbl { font-size: .78rem; color: #6b7280; line-height: 1.15; }
/* Barra de intensidade de uso */
.tool-bar { height: 6px; border-radius: 4px; background: #eef0f4; overflow: hidden; margin-top: .55rem; }
.tool-bar > span { display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--nb-primary), var(--nb-primary-dark)); }

/* =============================================================================
   Rodape de versao/build (painel + login) — discreto, monospace.
   Preenchido por GlobalModelAdvice.appVersion.
   ============================================================================= */
.app-version {
    margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e5e7eb;
    text-align: right; font-size: .72rem; color: #9ca3af;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.login-version {
    margin-top: .75rem; text-align: center; font-size: .7rem; color: #9ca3af;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}


/* ============================================================================
   Telas de acesso (login, verificação em duas etapas, recuperação e redefinição
   de senha): painel escuro com a identidade à esquerda e o cartão à direita.
   Escopo pela classe auth-page no <body>: a regra antiga .login-card acima
   continua valendo para quem não é tela de acesso.
   ============================================================================ */
.auth-page {--brand:#3ea3f8; --brand-2:#4010c8;}
.auth-page {margin:0; min-height:100vh;}
.auth-page .split {display:flex; min-height:100vh;}
.auth-page .hero {flex:1 1 55%; position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:3rem; color:#e6e2f5; background: radial-gradient(900px 620px at 12% 18%, rgba(62,163,248,.16), transparent 62%), radial-gradient(1100px 720px at 62% 78%, rgba(92,46,206,.30), transparent 60%), linear-gradient(160deg, #1a0f33 0%, #150c29 48%, #0d0719 100%); overflow:hidden;}
.auth-page .hero::before {content:""; position:absolute; inset:0; opacity:.35; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M120 0H0v120' fill='none' stroke='%23554080' stroke-width='.6'/%3E%3C/svg%3E"); -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 92%); mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 92%);}
.auth-page .hero::after {content:""; position:absolute; pointer-events:none; top:-28%; left:-14%; width:70%; height:78%; background:radial-gradient(closest-side, rgba(62,163,248,.20), transparent 72%); filter:blur(14px);}
.auth-page .hero > * {position:relative; z-index:1;}
.auth-page .hero-brand {display:flex; align-items:center; gap:1rem;}
.auth-page .hero-brand .brand-logo {height:88px; width:auto; max-width:100%;}
.auth-page .hero-brand h1 {font-size:1.25rem; font-weight:700; margin:0; color:#f5f3ff;}
.auth-page .hero-brand .sub {font-size:.82rem; color:#a99fce;}
.auth-page .hero-mid h2 {font-size:2rem; font-weight:800; line-height:1.2; color:#faf9ff; margin-bottom:.75rem;}
.auth-page .hero-mid p {color:#c3bae0; max-width:34rem;}
.auth-page .hero-icons {display:flex; gap:1.4rem; margin-top:1.8rem; font-size:1.6rem; color:#c4b5fd;}
.auth-page .hero-icons i {opacity:.85;}
.auth-page .hero-features {list-style:none; padding:0; margin:1.6rem 0 0; color:#d3cbec;}
.auth-page .hero-features li {display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem; font-size:.92rem;}
.auth-page .hero-features i {color:var(--brand-2);}
.auth-page .hero-foot {font-size:.75rem; color:#8b7fb0;}
.auth-page .panel {flex:1 1 45%; display:flex; align-items:center; justify-content:center; padding:2rem; background:#f5f5f7;}
.auth-page .login-card {width:100%; max-width:400px; background:#fff; border-radius:1rem; padding:2.5rem; box-shadow:0 12px 40px rgba(23,16,50,.10);}
.auth-page .login-brand {text-align:center; margin-bottom:1.5rem;}
.auth-page .login-brand img {height:72px; width:auto;}
.auth-page .login-title {font-size:1.35rem; font-weight:700; color:#1c1035; margin-bottom:.15rem; text-align:center;}
.auth-page .login-sub {font-size:.88rem; color:#6b7280; text-align:center; margin-bottom:1.75rem;}
.auth-page .login-card .form-label {font-size:.85rem; font-weight:600; color:#374151;}
.auth-page .login-card .input-group-text {background:#fff; border-color:#e5e7eb; color:#9ca3af;}
.auth-page .login-card .form-control {padding:.7rem .9rem; border-color:#e5e7eb; background:#fafafb;}
.auth-page .login-card .form-control:focus {border-color:var(--brand-2); box-shadow:0 0 0 .2rem rgba(139,92,246,.18); background:#fff;}
.auth-page .login-card .input-group .btn-outline-secondary {border-color:#e5e7eb; color:#9ca3af;}
.auth-page .panel .btn-primary {background:var(--brand); border-color:var(--brand); padding:.7rem; border-radius:.6rem; font-weight:600;}
.auth-page .panel .btn-primary:hover {background:var(--brand-2); border-color:var(--brand-2);}
.auth-page .login-foot {text-align:center; font-size:.75rem; color:#9ca3af; margin-top:1.25rem;}
@media (max-width: 860px) { .auth-page .hero {display:none;} .auth-page .panel {flex:1 1 100%;} }
.auth-page .login-codigo {text-align:center; letter-spacing:6px; font-size:1.25rem;}
.auth-page .login-link {display:block; text-align:center; font-size:.85rem; color:var(--brand); text-decoration:none; margin-top:1rem;}
.auth-page .login-link:hover {color:var(--brand-2);}
.auth-page .login-hint {font-size:.8rem; color:#9ca3af; text-align:center; margin:1rem 0 0;}