/* ==========================================================================
   ESTILOS EXCLUSIVOS PARA A TELA DE VISUALIZAÇÃO INDIVIDUAL
   ========================================================================== */

/* Bloco de Metadados/Ficha Técnica (Alinhamento dos nós) */
.pcpo-ficha-tecnica {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    justify-content: center;
}

/* Etiquetas/Badges dos relacionamentos (Orixá, Entidade, etc.) */
.pcpo-badge {
    background-color: #f1f7fc;
    color: #015a94;
    border: 1px solid #d2e4f0;
    padding: 6px 12px;
    font-size: 20px;
    border-radius: 20px;
    display: inline-block;
}

/* Container que exibe a Letra/Texto do Ponto */
.pcpo-letra-container {
    background-color: #fafafa;
    border-left: 4px solid #0274be;
    padding: 20px;
    font-size: 20px;
    
    /* CONFIGURAÇÃO DO MEIO TERMO PERFEITO */
    line-height: 1.5;             /* Altura confortável para as linhas normais */
    white-space: pre-line;        /* Mantém as quebras nativas do banco */
    word-spacing: 1px;            /* Melhora a distribuição das palavras */
    
    color: #2c3e50;
    font-style: italic;
    margin-bottom: 20px;
    border-radius: 0 4px 4px 0;
}

/* Bloco de Observações Complementares */
.pcpo-observacao-box {
    background-color: #fffdf0;
    border: 1px solid #f9f3c2;
    padding: 12px 15px;
    font-size: 13px;
    color: #665c1a;
    border-radius: 4px;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Ajustes nos botões inferiores de navegação */
.pcpo-btn-editar-link {
    text-align: center;
}

.pcpo-btn-editar-link:hover {
    background-color: #d35400 !important;
}

/* ==========================================================================
   MELHORIAS DE RESPONSIVIDADE (MOBILE)
   ========================================================================== */
@media (max-width: 600px) {
    .pcpo-letra-container {
        font-size: 18px;
        padding: 15px;
    }
    
    .pcpo-ficha-tecnica {
        gap: 5px;
    }
    
    .pcpo-badge {
        font-size: 18px;
        padding: 4px 8px;
    }
}