:root {
    --cc-bg: #f3f6f9;
    --cc-panel: #ffffff;
    --cc-line: #d8e1ea;
    --cc-ink: #132235;
    --cc-muted: #69788a;
    --cc-navy: #0b2745;
    --cc-blue: #1769aa;
    --cc-green: #16835a;
    --cc-yellow: #d8a313;
    --cc-red: #c83b3b;
    --cc-orange: #e97828;
    --cc-shadow: 0 16px 40px rgba(13, 35, 60, .09);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--cc-bg);
    color: var(--cc-ink);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0;
}

a { text-decoration: none; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar {
    width: 270px;
    background: var(--cc-navy);
    color: #fff;
    padding: 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 800;
    font-size: 1.02rem;
    padding: 8px 6px 20px;
}
.brand-mark {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: #e8f6f0;
    color: var(--cc-green);
}
.nav-label {
    display: block;
    color: #9fb3c7;
    font-size: .72rem;
    text-transform: uppercase;
    margin: 18px 8px 8px;
    font-weight: 700;
}
.nav-link {
    color: #d8e7f5;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    font-weight: 600;
}
.nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.workspace { flex: 1; padding: 24px; min-width: 0; }
.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.topbar h1 { font-size: 1.75rem; margin: 0; font-weight: 800; }
.page-kicker { color: var(--cc-muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; }
.user-menu { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--cc-muted); font-weight: 700; }
.icon-btn {
    border: 1px solid var(--cc-line);
    background: #fff;
    color: var(--cc-ink);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
}
.content-card, .stat-card, .table-card {
    background: var(--cc-panel);
    border: 1px solid var(--cc-line);
    border-radius: 8px;
    box-shadow: var(--cc-shadow);
}
.content-card { padding: 20px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { padding: 18px; min-height: 118px; }
.stat-label { color: var(--cc-muted); font-size: .8rem; text-transform: uppercase; font-weight: 800; }
.stat-value { font-size: 1.75rem; font-weight: 850; margin-top: 8px; overflow-wrap: anywhere; }
.stat-icon { float: right; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: #edf4fa; color: var(--cc-blue); }
.stat-card small { color: var(--cc-muted); font-weight: 650; }
.stat-card-accent { border-left: 4px solid var(--cc-blue); }
.stat-card-accent.danger { border-left-color: var(--cc-red); }
.stat-card-accent.warning { border-left-color: var(--cc-yellow); }
.stat-card-accent.success { border-left-color: var(--cc-green); }
.table-card { overflow: hidden; }
.table { margin: 0; }
.table thead th { color: var(--cc-muted); font-size: .78rem; text-transform: uppercase; white-space: nowrap; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.badge-regular, .badge-ativa, .badge-ativo, .badge-Resolvida, .badge-Concluída { background: var(--cc-green); color: #fff; }
.badge-atencao, .badge-Média, .badge-teste, .badge-Aguardando, .badge-nao_informada, .badge-nao_verificada { background: var(--cc-yellow); color: #1d2630; }
.badge-critica, .badge-Crítica, .badge-erro, .badge-suspenso, .badge-vencida, .badge-vencido, .badge-sem_permissao { background: var(--cc-red); color: #fff; }
.badge-Aberta, .badge-Alta, .badge-Em { background: var(--cc-orange); color: #fff; }
.badge-Baixa, .badge-Ignorada, .badge-inativo { background: #8795a5; color: #fff; }
.badge-mock { background: #6c757d; }
.badge-serpro { background: var(--cc-blue); }
.filter-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.toolbar-card { background: #fff; border: 1px solid var(--cc-line); border-radius: 8px; box-shadow: var(--cc-shadow); padding: 16px; }
.filter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; }
.filter-wide { grid-column: span 2; }
.filter-actions { display: flex; gap: 8px; align-items: end; }
.batch-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; border-top: 1px solid var(--cc-line); margin-top: 14px; padding-top: 14px; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; }
.kanban-column { background: #eef3f8; border: 1px solid var(--cc-line); border-radius: 8px; padding: 12px; min-height: 320px; }
.task-card { background: #fff; border: 1px solid var(--cc-line); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.hero-dashboard {
    background: linear-gradient(135deg, var(--cc-navy), #164d78);
    color: #fff;
    border-radius: 8px;
    padding: 22px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 18px;
    box-shadow: var(--cc-shadow);
}
.hero-dashboard h2 { margin: 4px 0; font-size: 2rem; font-weight: 850; }
.hero-dashboard p { margin: 0; color: #d7e7f4; max-width: 720px; }
.hero-dashboard .page-kicker { color: #9fcae8; }
.risk-meter {
    --risk: 0%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: conic-gradient(#fff var(--risk), rgba(255,255,255,.22) 0);
    display: grid;
    place-items: center;
    position: relative;
    color: var(--cc-navy);
}
.risk-meter::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: #fff;
}
.risk-meter strong, .risk-meter span { position: relative; z-index: 1; line-height: 1; }
.risk-meter strong { font-size: 2rem; font-weight: 900; align-self: end; }
.risk-meter span { align-self: start; color: var(--cc-muted); font-weight: 800; font-size: .72rem; text-transform: uppercase; }
.integration-status { border-radius: 8px; padding: 10px 12px; font-weight: 750; }
.integration-status.is-ok { background: #e5f6ef; color: #0c6b46; }
.integration-status.is-alert { background: #fff4d9; color: #7a5100; }
.usage-row { margin-top: 14px; }
.usage-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.usage-row span { color: var(--cc-muted); font-weight: 700; }
.usage-row.compact { margin-top: 0; }
.checklist-mini { display: grid; gap: 8px; }
.checklist-mini a {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--cc-ink);
    padding: 6px 0;
    font-weight: 700;
}
.checklist-mini a.is-done { color: var(--cc-green); }
.risk-list { display: grid; gap: 8px; }
.risk-list a {
    border: 1px solid var(--cc-line);
    border-radius: 8px;
    padding: 10px;
    color: var(--cc-ink);
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.risk-list small { display: block; color: var(--cc-muted); }
.chart-card { height: 360px; }
.empty-state {
    min-height: 170px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    gap: 8px;
    color: var(--cc-muted);
    padding: 24px;
}
.empty-state i { font-size: 2rem; color: var(--cc-green); }
.empty-state strong { color: var(--cc-ink); }
.commercial-plan {
    min-height: 100%;
    background: linear-gradient(135deg, #0b2745, #1769aa);
    color: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--cc-shadow);
}
.plan-eyebrow { text-transform: uppercase; color: #b7d9f0; font-size: .78rem; font-weight: 800; }
.commercial-plan h2 { margin: 8px 0; font-weight: 850; }
.commercial-plan p { color: #d7e7f4; }
.plan-price { font-size: 2rem; font-weight: 900; }
.plan-price span { font-size: .9rem; color: #d7e7f4; }
.feature-pill {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--cc-line);
    border-radius: 8px;
    color: var(--cc-muted);
    font-weight: 800;
    text-align: center;
}
.feature-pill.is-on { background: #e5f6ef; border-color: #a8dbc8; color: var(--cc-green); }
.batch-progress { height: 12px; }
.batch-row-status .badge { white-space: normal; text-align: left; }
.auth-body {
    min-height: 100vh;
    background:
        linear-gradient(120deg, rgba(11,39,69,.92), rgba(23,105,170,.75)),
        url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16'%3E%3Cpath d='M0 60h120M60 0v120'/%3E%3C/g%3E%3C/svg%3E");
}
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.auth-panel {
    width: min(440px, 100%);
    background: #fff;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(0,0,0,.24);
    padding: 30px;
}
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 28px; }
.auth-brand strong { display: block; font-size: 1.28rem; }
.auth-brand span span { color: var(--cc-muted); font-weight: 700; }
.auth-alert { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 10; }
.report-body { background: #fff; padding: 32px; }
.report-page { max-width: 980px; margin: 0 auto; }
.report-cover {
    border: 1px solid var(--cc-line);
    border-radius: 8px;
    padding: 22px;
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
}
.report-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.report-summary-item { border: 1px solid var(--cc-line); border-radius: 8px; padding: 12px; }
.report-summary-item strong { display: block; font-size: 1.25rem; }
.signature-line { border-top: 1px solid #222; width: 280px; margin-top: 60px; padding-top: 8px; text-align: center; }
pre.payload { max-height: 460px; overflow: auto; background: #101923; color: #e2edf7; border-radius: 8px; padding: 16px; }

@media (max-width: 1100px) {
    .stat-grid, .filter-row, .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kanban { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
    .hero-dashboard { grid-template-columns: 1fr auto; }
    .hero-dashboard .btn { grid-column: span 2; }
    .report-summary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .app-shell { display: block; }
    .sidebar { position: fixed; left: -280px; z-index: 30; transition: left .2s ease; }
    .sidebar.is-open { left: 0; }
    .workspace { padding: 16px; }
    .topbar h1 { font-size: 1.35rem; }
    .stat-grid, .filter-row, .filter-grid, .kanban, .hero-dashboard, .report-cover, .report-summary-grid { grid-template-columns: 1fr; }
    .filter-wide { grid-column: auto; }
    .filter-actions, .batch-actions { flex-direction: column; align-items: stretch; }
    .hero-dashboard .btn { grid-column: auto; }
    .risk-meter { width: 96px; height: 96px; }
    .user-menu span { display: none; }
}

@media print {
    .report-body { padding: 0; }
    .report-page { max-width: none; }
    .btn, .sidebar, .topbar { display: none !important; }
    .table { font-size: 12px; }
}