/* ==========================================================================
   CONTAINER PRINCIPAL (CAIXA / BLOCO)
   ========================================================================== */
.pcpo-caixa-bloco {
    background: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    max-width: 600px;
    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;
    width: 90%; /* Garante que o bloco reduza em telas menores que 600px */
    box-sizing: border-box;
}

/* 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;
}

/* ==========================================================================
   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;
}



/* ==========================================================================
   FORÇA A SEGUNDA TABELA (RESULTADO AJAX) A TER 50% / 50% DE LARGURA
   ========================================================================== */
.pcpo-container-resultado-interno table {
    table-layout: fixed !important;
    width: 100% !important;
}

.pcpo-container-resultado-interno table th,
.pcpo-container-resultado-interno table td {
    width: 50% !important;
    max-width: 50% !important;
    box-sizing: border-box;
}



/* Tabelas de Resultados Assíncronos */
.pcpo-tabela-resultado {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.pcpo-tabela-resultado th {
    background-color: #f1f1f1;
    color: #444444;
    text-align: left;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 2px solid #dcdcdc;
}

.pcpo-tabela-resultado td {
    padding: 0; /* Permite que o link cubra toda a área da linha */
    border-bottom: 1px solid #e0e0e0;
}

.pcpo-link-tabela {
    display: block;
    padding: 12px 10px;
    color: #0274be;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.pcpo-link-tabela:hover {
    background-color: #f0f7fc;
    color: #015a94;
}

.pcpo-sem-resultados {
    font-size: 13px;
    color: #777777;
    font-style: italic;
    margin: 5px 0 0 5px;
}

/* ==========================================================================
   AJUSTE DE ALTURA E CORTE DE TEXTO DAS DROPDOWNS (SELECTS)
   ========================================================================== */
.pcpo-select-estilizado {
    padding: 10px 12px !important; /* Ajusta o espaçamento interno para dar respiro ao texto */
    height: 48px !important;       /* Força uma altura física ideal para que nada seja cortado */
    line-height: 1.5 !important;   /* Define uma altura de linha perfeita para os acentos */
    font-size: 15px;
    background-color: #fafafa;
    border: 1px solid #cccccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    appearance: select;            /* Garante o comportamento visual nativo corrigido */
    -webkit-appearance: select;    /* Correção para navegadores baseados em Webkit/Chrome */
    transition: all 0.3s ease;
}

/* Garante que as opções internas da lista também herdem o espaço correto */
.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%; /* Ocupa um pouco mais de área horizontal em telas muito pequenas */
    }
    
    .pcpo-caixa-header {
        font-size: 20px; 
        padding: 12px 15px;
    }
    
    .pcpo-caixa-corpo {
        padding: 20px; /* Reduz espaçamento interno para sobrar mais área para inputs */
    }
    
    .pcpo-frase-informativa {
        font-size: 15px;
    }

    /* Melhora a disposição dos botões de setas de ID em celulares */
    .pcpo-botoes-seta {
        gap: 8px;
        max-width: 100%; /* Permite que os botões usem toda a largura disponível */
    }

    .pcpo-btn-seta {
        padding: 10px 5px;
        font-size: 13px; /* Fonte ligeiramente menor para não quebrar texto do botão */
    }

    /* Otimizações de fontes e espaçamentos dos títulos azuis no smartphone */
    .pcpo-grupo-campo label,
    .pcpo-texto-titulo-tipo {
        font-size: 15px;
        padding: 12px 10px;
    }

    .pcpo-tabela-resultado th, 
    .pcpo-tabela-resultado td {
        padding: 8px 6px; /* Condensa as células para mostrar mais conteúdo no smartphone */
    }
}

/* ==========================================================================
   FORMATAÇÃO DE 50% PARA AS TABELAS FIXAS (DESKTOP, TABLET E MOBILE)
   ========================================================================== */
.pcpo-tabela-fixa-metade {
    table-layout: fixed; /* Força o navegador a respeitar rigidamente as larguras definidas */
    width: 100% !important;
}

.pcpo-tabela-fixa-metade th,
.pcpo-tabela-fixa-metade td {
    width: 50% !important;
    max-width: 50% !important;
    box-sizing: border-box;
    word-wrap: break-word; /* Garante que textos longos não estourem o limite da coluna */
}

/* Ajuste fino para os links internos ocuparem toda a metade respectiva */
.pcpo-tabela-fixa-metade .pcpo-link-tabela {
    white-space: normal; /* Permite que o nome quebre em mais linhas se necessário no mobile */
}




/* ==========================================================================
   FORMATAÇÃO DE LARGURA FIXA PARA TABELAS DINÂMICAS (75% / 25%)
   ========================================================================== */
.pcpo-tabela-fixa-dinamica {
    table-layout: fixed; /* Obriga o navegador a respeitar rigidamente as larguras em % */
    width: 100% !important;
}

.pcpo-tabela-fixa-dinamica th:first-child,
.pcpo-tabela-fixa-dinamica td:first-child {
    width: 50% !important;
    max-width: 50% !important;
    box-sizing: border-box;
    word-wrap: break-word; /* Evita que nomes muito longos quebrem o layout */
}

.pcpo-tabela-fixa-dinamica th:last-child,
.pcpo-tabela-fixa-dinamica td:last-child {
    width: 50% !important;
    max-width: 50% !important;
    box-sizing: border-box;
}

/* Permite que o link quebre linha de forma amigável no mobile se o nome for longo */
.pcpo-tabela-fixa-dinamica .pcpo-link-filtro-dinamico {
    white-space: normal;
    word-break: break-word;
}


/* Centraliza os nomes nas tabelas por Orixá, Entidade, Linha e Momento */
.pcpo-txt-centro {
    text-align: center !important;
}