/* --- RESET E ESTILOS GLOBAIS --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Garante que o corpo ocupe a tela toda */
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- ESTRUTURA BASE (LAYOUT) --- */
.main-content {
    flex-grow: 1; /* Empurra o rodapé para o final da página */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 16px;
}

/* --- BARRA DE NAVEGAÇÃO (TOPO) --- */
.navbar {
    background-color: #2563eb; /* Azul padrão */
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-link:hover {
    text-decoration: underline;
}

.nav-btn {
    background-color: #1d4ed8;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.nav-btn:hover {
    background-color: #1e40af;
}

/* --- CARD DA PÁGINA INICIAL (INDEX) --- */
.welcome-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 40px;
    text-align: center;
    max-width: 640px;
    margin: 40px auto 0 auto;
}

.welcome-card h2 {
    font-size: 1.8rem;
    color: #030712;
    margin-bottom: 16px;
    font-weight: 800;
}

.welcome-card p {
    color: #4b5563;
    margin-bottom: 24px;
    line-height: 1.5;
}

.welcome-card .domain-highlight {
    font-weight: 600;
    color: #2563eb;
}

.welcome-card .status-section {
    border-top: 1px solid #f3f4f6;
    padding-top: 24px;
}

.welcome-card .status-title {
    font-size: 0.75rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 8px;
}

.welcome-card .status-badge {
    display: inline-block;
    background-color: #dcfce7;
    color: #166534;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.welcome-card .status-badge.status-badge-erro {
    background-color: #fde2e2;
    color: #b91c1c;
}

.link-painel {
    color: #2563eb;
    font-weight: 600;
}

.link-painel:hover {
    text-decoration: underline;
}

/* --- RODAPÉ (FOOTER) --- */
.footer {
    background-color: #1f2937; /* Cinza escuro */
    color: #9ca3af;
    text-align: center;
    padding: 16px;
    font-size: 0.875rem;
    border-top: 1px solid #374151;
}

/* --- FORMULÁRIOS --- */
.welcome-card.cartao-formulario {
    max-width: 420px;
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    text-align: left;
}

.formulario label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.formulario input {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
}

.formulario input:focus {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
    border-color: #2563eb;
}

.formulario .botao {
    margin-top: 12px;
    padding: 10px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.formulario .botao:hover {
    background-color: #1d4ed8;
}

.mensagem {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    text-align: left;
}

.mensagem-erro {
    background-color: #fde2e2;
    color: #b91c1c;
}

.mensagem-aviso {
    background-color: #e0f2fe;
    color: #075985;
}

.mensagem-sucesso {
    background-color: #dcfce7;
    color: #166534;
}

/* --- PÁGINAS DA EQUIPE --- */
.cartao-pagina {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.cartao-pagina h2 {
    font-size: 1.5rem;
    color: #030712;
    margin-bottom: 8px;
}

.cartao-pagina h3 {
    margin: 28px 0 12px;
    color: #111827;
}

.cartao-pagina p {
    margin-bottom: 12px;
    line-height: 1.5;
}

.trilha {
    font-size: 0.875rem;
    color: #6b7280;
}

.trilha a {
    color: #2563eb;
}

.trilha a:hover {
    text-decoration: underline;
}

.nota {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Formulário em linha (campos lado a lado) */
.formulario.formulario-linha {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.formulario.formulario-linha label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.formulario.formulario-linha select,
.formulario.formulario-linha input {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
}

.formulario.formulario-linha .botao {
    margin-top: 0;
    padding: 9px 20px;
}

.botao-secundario {
    padding: 4px 10px;
    background-color: #ffffff;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
}

.botao-secundario:hover {
    background-color: #fde2e2;
}

/* Ícone de engrenagem ao lado do título (atalho para Configurações) */
.icone-configuracoes {
    margin-left: 8px;
    font-size: 1.1rem;
    font-weight: normal;
    color: #9ca3af;
    vertical-align: middle;
}

.icone-configuracoes:hover {
    color: #2563eb;
}

/* Link "Voltar" no fim de toda página (padrão do projeto) */
.link-voltar {
    margin-top: 24px;
    font-size: 0.9rem;
    text-align: left;
}

.link-voltar a {
    color: #2563eb;
    font-weight: 600;
}

.link-voltar a:hover {
    text-decoration: underline;
}

/* --- TABELAS --- */
.tabela-rolagem {
    overflow-x: auto;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.tabela th,
.tabela td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    white-space: nowrap;
}

.tabela th {
    background-color: #f9fafb;
    color: #374151;
    font-weight: 600;
}

/* Mensagem do pedido numa segunda linha, abaixo dos dados */
.tabela tr.linha-com-mensagem td {
    border-bottom: none;
}

.tabela tr.linha-mensagem td {
    padding-top: 0;
    white-space: normal;
    font-size: 0.8rem;
    color: #6b7280;
}

/* Cabeçalho de grupo (clique mostra/oculta as linhas do grupo) */
.tabela tr.linha-grupo th {
    background-color: #eef2ff;
    color: #1e3a8a;
    cursor: pointer;
    user-select: none;
}

.tabela tr.linha-grupo:hover th {
    background-color: #e0e7ff;
}

.tabela tr.linha-grupo:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.tabela .seta-grupo {
    display: inline-block;
    width: 1em;
}

/* Matriz de perfis (competência × nível) */
.tabela-matriz .coluna-nivel {
    text-align: center;
}

.tabela-matriz .coluna-competencia,
.tabela-matriz thead th:first-child {
    position: sticky;   /* primeira coluna fixa ao rolar para o lado */
    left: 0;
    background-color: #ffffff;
    z-index: 1;
}

.tabela-matriz thead th:first-child {
    background-color: #f9fafb;
}

.tabela-matriz tr.linha-area th,
.tabela-competencias tr.linha-area th {
    background-color: #eef2ff;
    color: #1e3a8a;
}

.tabela-matriz input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.tabela-matriz input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Cabeçalho de página com botão ao lado do título */
.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.cabecalho-pagina h2 {
    margin-bottom: 0;
}

.botao-novo {
    display: inline-block;
    padding: 8px 16px;
    background-color: #2563eb;
    color: #ffffff;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.botao-novo:hover {
    background-color: #1d4ed8;
}

/* Caixa de marcação dentro de formulário em linha */
.formulario.formulario-linha label.rotulo-caixa {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    padding-bottom: 9px;
}

.formulario.formulario-linha label.rotulo-caixa input {
    padding: 0;
}

/* Tabela com linhas alternadas */
.tabela-listrada tbody tr:nth-child(even) td {
    background-color: #f9fafb;
}

.tabela-listrada tbody tr:hover td {
    background-color: #eff6ff;
}

.texto-secundario {
    color: #9ca3af;
    margin-left: 4px;
}

.icone-editar {
    color: #2563eb;
    font-size: 1rem;
}

.icone-editar:hover {
    color: #1e40af;
}

.paginacao {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 16px;
    font-size: 0.875rem;
}

.paginacao a {
    color: #2563eb;
    font-weight: 600;
}

/* Formulário de cadastro (campos um abaixo do outro) */
.formulario.formulario-cadastro {
    max-width: 480px;
}

.formulario select {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    background-color: #ffffff;
}

.campo-com-botao {
    display: flex;
    gap: 8px;
}

.campo-com-botao input {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.botao-secundario-neutro {
    padding: 8px 14px;
    background-color: #ffffff;
    color: #2563eb;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.botao-secundario-neutro:hover {
    background-color: #eff6ff;
}

/* Ficha do usuário */
.secao-ficha {
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.secao-ficha h3 {
    margin-top: 12px;
}

.lista-niveis {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.lista-niveis li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 12px;
    background-color: #f3f4f6;
    border-radius: 9999px;
    font-size: 0.9rem;
}

.acoes-situacao {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.formulario-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.campo-motivo {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.8rem;
    width: 180px;
}

.tabela-competencias td {
    vertical-align: middle;
}

/* --- SELOS DE SITUAÇÃO --- */
.selo {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.selo-fila       { background-color: #e5e7eb; color: #374151; }
.selo-executando { background-color: #dbeafe; color: #1e40af; }
.selo-concluida  { background-color: #dcfce7; color: #166534; }
.selo-erro       { background-color: #fde2e2; color: #b91c1c; }
.selo-cancelada  { background-color: #fef3c7; color: #92400e; }

/* Situação do usuário */
.selo-ativo      { background-color: #dcfce7; color: #166534; }
.selo-bloqueado  { background-color: #fde2e2; color: #b91c1c; }
.selo-excluido   { background-color: #e5e7eb; color: #4b5563; }

/* --- COLETAS: acervo, coletor e barra de progresso --- */
.acervo-total {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.lista-acervo {
    list-style: none;
    margin-bottom: 8px;
}

.lista-acervo li {
    padding: 2px 0;
}

.acoes-coletor {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.acoes-coletor .formulario {
    margin-top: 0;
}

.botao:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.bloco-andamento {
    margin-top: 16px;
    padding: 12px 16px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.andamento-titulo {
    font-weight: 600;
    margin-bottom: 8px;
}

.barra-progresso {
    height: 14px;
    background-color: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 8px;
}

.barra-progresso-preenchida {
    height: 100%;
    width: 0;
    background-color: #2563eb;
    transition: width 0.5s ease;
}

/* Sem total conhecido: faixa listrada em movimento */
.barra-progresso.barra-indeterminada .barra-progresso-preenchida {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.35) 25%, transparent 25%,
                      transparent 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 75%,
                      transparent 75%, transparent);
    background-size: 28px 28px;
    animation: barraAndando 1s linear infinite;
}

@keyframes barraAndando {
    from { background-position: 0 0; }
    to   { background-position: 28px 0; }
}

/* Seção recolhida (ex.: coleta manual) */
.secao-recolhida {
    margin-top: 28px;
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
}

.secao-recolhida summary {
    cursor: pointer;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

/* --- ORGANOGRAMA: árvore, detalhes e busca --- */
.busca-organograma {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
}

.busca-organograma input[type="search"] {
    flex: 1 1 280px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
}

.arvore-organograma {
    list-style: none;
    margin-left: 22px;
    padding-left: 12px;
    border-left: 1px dashed #d1d5db;
}

.arvore-organograma.arvore-raiz {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

.arvore-organograma li {
    margin: 2px 0;
}

.no-organograma > summary {
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1.4;
}

.no-organograma > summary:hover {
    background-color: #f3f4f6;
}

.no-organograma.no-encontrado > summary {
    background-color: #fef3c7;
    outline: 1px solid #f59e0b;
}

.nome-orgao {
    font-weight: 600;
    color: #111827;
}

.sigla-orgao {
    font-size: 0.8rem;
    color: #1e40af;
    font-weight: 600;
}

.tipo-orgao {
    display: inline-block;
    padding: 0 8px;
    border-radius: 9999px;
    background-color: #e5e7eb;
    color: #374151;
    font-size: 0.72rem;
}

.detalhe-orgao {
    margin: 2px 0 6px 26px;
    font-size: 0.875rem;
}

.detalhe-orgao p {
    margin-bottom: 2px;
}

.detalhe-orgao a {
    color: #2563eb;
    text-decoration: underline;
}

.titulo-grupo-organograma {
    margin: 8px 0 2px;
    padding-left: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}