:root {
    --bg-color: #f4f6f9; --sidebar-bg: #1e293b; --sidebar-text: #cbd5e1;
    --sidebar-hover: #334155; --text-main: #334155; --text-light: #64748b;
    --white: #ffffff; --border: #e2e8f0; --btn-yellow: #facc15;
    --btn-yellow-hover: #eab308;
    
    /* Cores da Matriz */
    --risk-low: #86efac; --risk-mod: #fde047; --risk-high: #fdba74;
    --risk-crit: #fca5a5; --risk-ext: #d8b4fe;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { display: flex; height: 100vh; background-color: var(--bg-color); color: var(--text-main); overflow: hidden; }

/* Layout Base */
.sidebar { width: 250px; background-color: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; transition: width 0.3s ease; flex-shrink: 0; }
.sidebar.collapsed { width: 70px; }
.logo-container { padding: 20px; font-size: 1.2rem; font-weight: bold; color: var(--white); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); overflow: hidden; white-space: nowrap; }
.logo-container i { color: var(--btn-yellow); font-size: 1.5rem; min-width: 30px; text-align: center; }
.sidebar.collapsed .logo-text { display: none; }
.nav-menu { list-style: none; padding: 15px 0; flex-grow: 1; }
.nav-item { padding: 15px 20px; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: 0.2s; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-decoration: none; color: inherit; }
.nav-item i { font-size: 1.2rem; min-width: 25px; text-align: center; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 15px 0; }
.sidebar.collapsed .nav-item span { display: none; }
.nav-item:hover, .nav-item.active { background-color: var(--sidebar-hover); color: var(--white); border-left: 4px solid var(--btn-yellow); }
.sidebar.collapsed .nav-item:hover, .sidebar.collapsed .nav-item.active { border-left: none; border-bottom: 4px solid var(--btn-yellow); }

.main-content { flex-grow: 1; display: flex; flex-direction: column; overflow-y: auto; transition: width 0.3s ease; }
.topbar { background-color: var(--white); padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.header-left { display: flex; align-items: center; gap: 20px; }
.toggle-btn { background: none; border: none; font-size: 1.2rem; color: var(--text-light); cursor: pointer; transition: color 0.2s; }
.toggle-btn:hover { color: var(--text-main); }
.user-info { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 500; }
.dashboard-container { padding: 20px 30px; display: flex; flex-direction: column; gap: 20px; }

/* Grid e Paineis */
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kpi-card { background-color: var(--white); padding: 15px 20px; border-radius: 4px; border: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.kpi-data h3 { font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; margin-bottom: 5px; }
.kpi-data .value { font-size: 1.5rem; font-weight: bold; color: var(--sidebar-bg); }
.kpi-icon { font-size: 1.5rem; color: var(--border); }

.middle-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.panel { background-color: var(--white); border-radius: 4px; border: 1px solid var(--border); padding: 20px; }
.panel-title { font-size: 1rem; margin-bottom: 15px; color: var(--sidebar-bg); border-bottom: 1px solid var(--border); padding-bottom: 10px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }

/* Botões */
.action-buttons { display: flex; flex-direction: column; gap: 15px; }
.btn-primary { background-color: var(--btn-yellow); color: #453303; border: none; padding: 12px; font-size: 0.9rem; font-weight: bold; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; }
.btn-primary:hover { background-color: var(--btn-yellow-hover); }
.btn-outline { background-color: #fff; border: 1px solid var(--btn-yellow); color: #854d0e; }

/* Matriz de Risco (Ajustada para ficar Lado a Lado) */
/* --- Matriz de Risco (Lado a Lado e Proporcional) --- */
.matrix-wrapper { 
    display: flex; 
    flex-direction: row; 
    justify-content: flex-start; 
    align-items: center; 
    gap: 50px; /* Distância entre a matriz e a legenda */
    padding: 10px 20px; 
}

.matrix-container { display: flex; flex-direction: column; align-items: center; }

.matrix-grid { 
    display: grid; 
    grid-template-columns: 30px repeat(5, 50px); /* 1 col para números Y + 5 para células */
    grid-template-rows: repeat(5, 50px) 30px;    /* 5 linhas para células + 1 para números X */
    gap: 4px; 
    text-align: center; 
    position: relative; /* Necessário para a label Y absoluta */
    margin-left: 20px;
}

.cell { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.85rem; 
    font-weight: bold; 
    color: #333; 
    width: 100%; 
    height: 100%; 
    border-radius: 3px; 
}

.bg-low { background-color: var(--risk-low); }
.bg-mod { background-color: var(--risk-mod); }
.bg-high { background-color: var(--risk-high); }
.bg-crit { background-color: var(--risk-crit); }
.bg-ext { background-color: var(--risk-ext); color: #fff; }

/* Ajustes dos Eixos para não ficarem com cor de fundo */
.axis-label { font-size: 0.75rem; color: var(--text-light); font-weight: bold; background: transparent !important; }
.y-axis-label { 
    position: absolute; 
    left: -80px; 
    top: 45%; 
    transform: translateY(-50%) rotate(-90deg); 
    font-size: 0.75rem; 
    font-weight: bold; 
    color: var(--text-light); 
    letter-spacing: 2px; 
}

.x-axis-label { 
    grid-column: 2 / span 5; 
    font-size: 0.75rem; 
    font-weight: bold; 
    color: var(--text-light); 
    margin-top: 5px; 
    letter-spacing: 2px; 
}
/* Legenda na direita */
.legend-box { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    font-size: 0.85rem; 
    /* Remova qualquer margin-right que existia aqui antes */
}
/* Container do Radar para garantir o alinhamento */
.radar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 280px;
    height: 280px;
}

.legend-item { display: flex; align-items: center; gap: 10px; color: var(--text-main); font-weight: 500; }
.legend-color { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); }









/* Tabelas e Badges idênticas ao protótipo */
.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
th { background-color: #f8fafc; color: var(--text-light); font-weight: 600; }
.badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; display: inline-block; }
.badge.pendente { background-color: #fef08a; color: #854d0e; }
.badge.acao { background-color: #bfdbfe; color: #1e3a8a; }
.badge.resolvido { background-color: #bbf7d0; color: #166534; }

/* Modais */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 1000; }
.modal-overlay.active { display: flex; }
.modal-content { background: #fff; padding: 25px; border-radius: 8px; width: 500px; max-width: 90%; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-size: 0.85rem; font-weight: bold; }
.form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Regras de Impressão */
@media print {
    .sidebar, .topbar, .btn-primary, .no-print, .action-buttons { display: none !important; }
    .main-content { overflow: visible; background: #fff; width: 100%; }
    .dashboard-container { padding: 0; }
    .panel { border: none; box-shadow: none; padding: 0; }
    body { background-color: #fff; }
    table { width: 100%; border: 1px solid #000; }
    th, td { border: 1px solid #000; padding: 8px; }
}




/* Layout dos Gráficos Lado a Lado */
.charts-row { 
    display: grid; 
    grid-template-columns: 1.3fr 1fr; /* Dá um pouco mais de espaço para a Matriz */
    gap: 20px; 
}

/* Matriz de Risco e Legenda */
.matrix-wrapper { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; /* Centraliza o conjunto todo no painel */
    align-items: center; 
    gap: 60px; /* DISTÂNCIA ENTRE O BLOCO DA MATRIZ E O RADAR (Ajuste aqui para trazer o radar mais para a esquerda) */
    padding: 20px;
    flex-wrap: wrap;
}

/* Novo grupo para manter Matriz e Legenda sempre juntas */
.matrix-legend-group {
    display: flex;
    align-items: center;
    gap: 25px; /* DISTÂNCIA ENTRE A MATRIZ E A LEGENDA */
}
.matrix-container { display: flex; flex-direction: column; align-items: center; }

/* Forçando os quadrados a terem o mesmo tamanho (50px) */
.matrix-grid { 
    display: grid; 
    grid-template-columns: 20px repeat(5, 50px); 
    grid-template-rows: repeat(5, 50px) 20px;    
    gap: 4px; 
    text-align: center; 
}

.cell { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.9rem; 
    font-weight: bold; 
    color: #333; 
    width: 100%; 
    height: 100%; 
    border-radius: 4px; 
}

/* Layout dos Botões de Ação na Base */
.actions-row { 
    display: flex; 
    gap: 15px; 
    margin-bottom: 10px; 
}

.actions-row button { 
    flex: 1; 
    justify-content: center; 
}


/* --- Cards de Relatórios Lado a Lado --- */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.card-relatorio {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.card-header h3 {
    font-size: 1.05rem;
    color: var(--sidebar-bg);
}

.card-body p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.card-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.card-actions button {
    flex: 1;
    font-size: 0.8rem;
    padding: 10px;
}



/* --- CORREÇÃO PONTUAL PARA IMPRESSÃO DO PGR --- */
@media print {
    /* Esconde ABSOLUTAMENTE TUDO que não seja o container de impressão */
    body > *:not(#notaImpressao) {
        display: none !important;
        visibility: hidden !important;
    }

    /* Garante que apenas o documento PGR seja visível e ocupe a tela toda */
    #notaImpressao {
        display: block !important;
        visibility: visible !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background-color: white !important;
        color: black !important;
        margin: 0;
        padding: 0;
        z-index: 10000; /* Garante que fique por cima de tudo */
    }

    /* Reset básico para garantir que o navegador não quebre o layout */
    main.main-content { margin: 0; padding: 0; }
    .dashboard-container { margin: 0; padding: 0; width: 100%; }
}





/* Estilos para o novo layout do inventário de riscos */

.card-setor {
    border: 1px solid #e0e0e0;
    transition: box-shadow 0.3s ease-in-out;
}

.card-setor:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.card-setor-header {
    cursor: pointer;
}

.card-setor-header:hover {
    background-color: #fcfcfc;
}

/* Seta de colapso (Chevron) */
.seta-collapse {
    color: #555;
    transition: transform 0.3s ease-in-out;
}

/* Gira a seta quando o colapso é aberto (requer Bootstrap) */
.card-setor-header:not(.collapsed) .seta-collapse {
    transform: rotate(180deg);
}

/* Container de fatores de risco associados */
.fatores-risco-container {
    background-color: #fdfdfd;
}

.fator-risco-item {
    font-weight: 500;
    font-size: 0.9rem;
}

.fator-risco-item i {
    width: 25px; /* Alinhamento dos ícones */
    text-align: center;
}

/* Tabela de detalhes dentro do card expandido */
.area-inventario .collapse .table-bordered td,
.area-inventario .collapse .table-bordered th {
    vertical-align: middle;
}

/* Estilo para o mini-dashboard no final da página */
#mini-dashboard-inventario {
    border: 1px solid #e0e0e0;
}

#mini-dashboard-inventario h3 {
    color: #333;
}