/* ==========================================================================
   CONTAINER PRINCIPAL (CAIXA / BLOCO) - ATUALIZADO
   ========================================================================== */
.pcpo-caixa-bloco {
    background: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    width: 100%; /* Ocupa toda a largura da página para as tabelas */
    max-width: 100%; /* Remove qualquer limitação de 600px que venha de outros arquivos */
    margin: 40px auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    box-sizing: border-box;
    padding: 20px;
}

/* Cabeçalho do Bloco (Saudação) */
.pcpo-caixa-header {
    background-color: #0274be; /* Tom de azul do cabeçalho */
    color: #ffffff;
    padding: 15px 20px;
    margin: 0;
    font-size: 20px; 
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #015a94;
    line-height: 1.4;
}

/* Corpo Interno do Bloco */
.pcpo-caixa-corpo {
    padding: 30px;
    background-color: #ffffff;
}

/* Formatação das Frases Internas */
.pcpo-frase-informativa {
    font-size: 16px;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: center;
}

/* Erro e Mensagens Restritas */
.pcpo-msg-erro {
    color: #c0392b;
    font-weight: bold;
    text-align: center;
}

/* Títulos Globais de Seção */
.pcpo-caixa-bloco h2 {
    margin-top: 0;
    color: #0274be;
    border-bottom: 2px solid #0274be;
    padding-bottom: 10px;
}

.pcpo-caixa-bloco h3 {
    color: #444;
    margin-top: 20px;
}
.pcpo-caixa-bloco h3:last-of-type {
    margin-top: 30px;
}

/* ==========================================================================
   ELEMENTOS DE FORMULÁRIO (INPUTS, SELECTS E TEXTAREAS)
   ========================================================================== */
.pcpo-grupo-campo {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
}

/* Padronização visual universal: Todos os labels agora herdam a estilização azul */
.pcpo-grupo-campo label,
.pcpo-texto-titulo-tipo {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #0274be;
    padding: 8px 12px;
    border-left: 4px solid #0274be;
    background-color: #f4f9fc;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0 4px 4px 0;
    margin-bottom: 10px;
    font-family: inherit;
}

/* Padronização visual de todos os campos de entrada */
.pcpo-grupo-campo input[type="text"],
.pcpo-grupo-campo input[type="number"],
.pcpo-select-estilizado, 
.pcpo-textarea-estilizado {
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 15px;
    background-color: #fafafa;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    transition: all 0.3s ease;
}

/* Efeito de Foco global nos elementos */
.pcpo-grupo-campo input[type="text"]:focus,
.pcpo-grupo-campo input[type="number"]:focus,
.pcpo-select-estilizado:focus, 
.pcpo-textarea-estilizado:focus {
    border-color: #0274be;
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 4px rgba(2, 116, 190, 0.2);
}

/* ==========================================================================
   BOTÕES ESTILIZADOS
   ========================================================================== */
.pcpo-btn-bloco {
    background-color: #0274be; /* Tom de azul padrão */
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
}

.pcpo-btn-bloco:hover {
    background-color: #015a94; /* Efeito hover mais escuro */
    color: #ffffff;
}

/* Link/Botão de Logoff específico */
.pcpo-btn-logoff {
    background-color: #cc0000;
    margin-top: 15px;
}

.pcpo-btn-logoff:hover {
    background-color: #aa0000;
}

/* Botão Voltar da edição */
.pcpo-btn-voltar:hover {
    background-color: #95a5a6 !important;
}

/* ==========================================================================
   NAVEGADOR DE ID (CARROSSEL SUPERIOR)
   ========================================================================== */
.pcpo-navegador-id {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fdfdfd;
    padding: 10px;
    border-radius: 4px;
}

.pcpo-botoes-seta {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    width: 100%;
    max-width: 300px;
}

.pcpo-btn-seta {
    flex: 1;
    background-color: #f1f1f1;
    color: #333333;
    border: 1px solid #cccccc;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
}

.pcpo-btn-seta:hover {
    background-color: #e0e0e0;
}

/* ==========================================================================
   SEÇÃO DE PESQUISA E TABELAS AJAX (TEMPO REAL)
   ========================================================================== */
.pcpo-secao-pesquisa {
    margin-top: 25px;
}

.pcpo-divisor {
    border: 0;
    border-top: 1px dashed #cccccc;
    margin: 25px 0;
}

.pcpo-titulo-pesquisa {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 25px;
    text-align: center;
}

.pcpo-container-resultado {
    margin-top: 8px;
    max-height: 250px;
    overflow-y: auto; /* Adiciona barra de rolagem se houver muitos registros */
    width: 100%;
    overflow-x: auto; /* Evita quebra no mobile permitindo deslizar tabelas longas */
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   ESTILIZAÇÃO E ESTRUTURAÇÃO DE TABELAS DE DADOS (NOVO)
   ========================================================================== */
.pcpo-wrapper-tabela {
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
}

.pcpo-tabela-dados {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-family: sans-serif;
    font-size: 14px;
    word-wrap: break-word;
}

/* Tabelas com colunas estritamente fixas (como a de contatos) */
.pcpo-tabela-dados.tabela-fixa {
    table-layout: fixed;
}

.pcpo-tabela-dados th {
    background-color: #0274be;
    color: white;
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

/* Variação vermelha (Acessos deslogados) */
.pcpo-tabela-dados th.th-vermelho {
    background-color: #c0392b;
}

/* Variação cinza (Usuários Nulos) */
.pcpo-tabela-dados th.th-cinza {
    background-color: #7f8c8d;
}

.pcpo-tabela-dados td {
    border: 1px solid #ddd;
    padding: 10px;
    color: #333;
    vertical-align: top;
    overflow: hidden;
}

/* Customizações de células específicas */
.pcpo-tabela-dados tbody tr {
    border-bottom: 1px solid #ddd;
}

.pcpo-tabela-dados tbody tr.tr-pequena {
    font-size: 13px;
}

.pcpo-tabela-dados td.td-break-word {
    word-break: break-word;
}

.pcpo-tabela-dados td.td-break-all {
    word-break: break-all;
}

.pcpo-tabela-dados td.td-destaque {
    font-weight: bold;
}

.pcpo-tabela-dados td.td-pequena-escura {
    color: #555;
    font-size: 11px;
}

.pcpo-tabela-dados td.td-alerta {
    color: #c0392b;
}

.pcpo-tabela-dados td.td-vazia {
    text-align: center;
    color: #666;
    padding: 20px;
}

.pcpo-tabela-dados td.td-vazia-italica {
    color: #777;
    font-style: italic;
    text-align: center;
}

/* Tabela interna de dados técnicos */
.pcpo-tabela-tecnica {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    background: #fafafa;
    word-wrap: break-word;
}

.pcpo-tabela-tecnica td {
    border: 1px solid #e0e0e0;
    padding: 4px;
}

.pcpo-tabela-tecnica td.lbl {
    font-weight: bold;
    color: #555;
}

.pcpo-tabela-tecnica td.val-ip {
    color: #2980b9;
    font-family: monospace;
}

/* Status e Roteiros de navegação */
.pcpo-status-online {
    color: #27ae60;
    font-weight: bold;
}

.pcpo-roteiro-container {
    line-height: 1.4;
    font-size: 12px;
}

.pcpo-roteiro-container small {
    color: #777;
}

.pcpo-roteiro-container .txt-ponto {
    color: #e67e22;
    font-weight: bold;
}

.pcpo-roteiro-container .txt-inicial {
    color: #2980b9;
    font-weight: bold;
}

.pcpo-roteiro-container .txt-contato {
    color: #9b59b6;
    font-weight: bold;
}

.pcpo-roteiro-container .txt-vazio {
    color: #95a5a6;
    font-style: italic;
}

/* ==========================================================================
   AJUSTE DE ALTURA E CORTE DE TEXTO DAS DROPDOWNS (SELECTS)
   ========================================================================== */
.pcpo-select-estilizado {
    padding: 10px 12px !important;
    height: 48px !important;
    line-height: 1.5 !important;
    font-size: 15px;
    background-color: #fafafa;
    border: 1px solid #cccccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    appearance: select;
    -webkit-appearance: select;
    transition: all 0.3s ease;
}

.pcpo-select-estilizado option {
    padding: 10px;
    font-size: 15px;
}

/* ==========================================================================
   REGRAS DE RESPONSIVIDADE (MOBILE / DISPOSITIVOS MÓVEIS)
   ========================================================================== */
@media (max-width: 600px) {
    .pcpo-caixa-bloco {
        margin: 20px auto; 
        width: 95%;
    }
    
    .pcpo-caixa-header {
        font-size: 20px; 
        padding: 12px 15px;
    }
    
    .pcpo-caixa-corpo {
        padding: 20px;
    }
    
    .pcpo-frase-informativa {
        font-size: 15px;
    }

    .pcpo-botoes-seta {
        gap: 8px;
        max-width: 100%;
    }

    .pcpo-btn-seta {
        padding: 10px 5px;
        font-size: 13px;
    }

    .pcpo-grupo-campo label,
    .pcpo-texto-titulo-tipo {
        font-size: 15px;
        padding: 12px 10px;
    }
}