Template buga quando membros postam, mas funciona comigo

Detalhes da questão

Endereço do fórum: https://contodehogwarts.forumeiros.com/t2-template-de-ficha#12
Versão do fórum: phpBB3

Descrição

Oi, gente. Espero que estejam bem e tenham tido um ótimo Natal e Ano Novo.

Estou tendo um problema no template de fichas do meu fórum. Você pode ver o teste que fiz no link abaixo:

https://contodehogwarts.forumeiros.com/t2-template-de-ficha#12

Há três círculos, correto?

Quando a conta administradora (no caso, eu) posta o template, os círculos são clicáveis, como na imagem abaixo.



Quando outra conta faz a mesma postagem, os círculos não são clicáveis. Vejam o teste que fiz no tópico.

Alguém pode me explicar o que está acontecendo ou tentar me ajudar?

Conta teste:

Pessoal, acho que identifiquei a causa do problema. Quando uma ficha é postada DUAS VEZES no mesmo tópico, só a primeira aceita transições entre as seções. Não tem nada a ver com o cargo.

Mas ainda não sei como resolver.

Boa noite.

Poderia postar o código aqui no tópico, por favor? Isso deve se relacionar ao fato de ter atributo name repetido, mas como se trata de input do tipo radio, então preciso checar o código. Se houver scripts associados, queira nos citá-los na sua próxima mensagem também.

Obrigado.

Claro!

Aqui está o código.

Código:

<style>.expediente {--foto-expediente: url(https://i.ibb.co/svN3ZCC/joel.png);}</style>

<div class="expediente"><div class="exp-up">
<div class="exp-name">Nombre A. Apellido</div>

</div><div class="exp-middle"><input type="radio" name="pest" id="pesta1" checked/><input type="radio" name="pest" id="pesta2"/><input type="radio" name="pest" id="pesta3"/><div class="exp-pestis"><label for="pesta1" title="FOTO"></label><label for="pesta2" title="HISTORIA"></label><label for="pesta3" title="EXTRA"></label></div><div class="env-middle"><div class="pholi ep1"></div>

<div class="pholi ep2"><div class="pest-text">[b]Historia[/b]. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div></div>


<div class="pholi ep3"><div class="pest-text">[b]Extra[/b]. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div></div></div></div><div class="exp-down">


<div class="exp-quote"><i class="icofont-quote-left"></i> the more you shoot people, the harder it is to sleep</div>
<div class="exp-data">
<div><b>Dato:</b> Respuesta</div>
<div><b>Dato:</b> Respuesta</div>
<div><b>Dato:</b> Respuesta</div>
<div><b>Dato:</b> Respuesta</div>
<div><b>Dato:</b> Respuesta</div>
<div><b>Dato:</b> Respuesta</div>
</div></div></div>

Olá novamente.

Antes de mais nada, preciso explicar como funciona de forma resumida a página ou códigos HTML. Toda tag HTML que contém um id= deve ser única na página, assim como atributos name= (isso não se aplica aos input radio. Se repetidos, o primeiro é o que valerá). Infelizmente, você precisa ter essa noção básica da estrutura HTML para conseguir usar esse formato.

Em outras palavras, você tem esse trecho em seu código:

Código:

      <input type="radio" name="pest" id="pesta1" checked/>
      <input type="radio" name="pest" id="pesta2" />
      <input type="radio" name="pest" id="pesta3" />

Ele funciona na primeira mensagem porque na estrutura HTML a primeira existência do name="pest" e o id="pesta1" são considerados únicos na página. Se postar uma nova mensagem com o mesmo conteúdo repetido, o HTML será ignorado, porque ele já existe na página. Logo, não funcionará da maneira que deseja.

Outro detalhe é em seu CSS. Você possui esse trecho:

Código:

.expediente input#pesta1:checked ~ .exp-pestis label[for="pesta1"] {
    background: var(--grupo-color)
}

.expediente input#pesta2:checked ~ .exp-pestis label[for="pesta2"] {
    background: var(--grupo-color)
}

.expediente input#pesta3:checked ~ .exp-pestis label[for="pesta3"] {
    background: var(--grupo-color)
}

.expediente input#pesta1:checked ~ .env-middle .ep1 {
    bottom: -400px
}

.expediente input#pesta2:checked ~ .env-middle .ep2 {
    bottom: 0
}

.expediente input#pesta3:checked ~ .env-middle .ep3 {
    bottom: 0
}

Com esse trecho você define para os id pesta1, pesta2 e pesta3 que as propriedades do CSS seja usada apenas na ID. Por mais que seja contraditório, o HTML também vai ignorar isso porque ele já existe na primeira mensagem. Tudo isso que escrevi é para demonstrar que você precisa analisar algum tutorial de HTML básico para entender como poderá usar esses elementos.

Como resolver então? Primeiro, precisa entender que a nova mensagem que for usado esse HTML, os <input type="radio" name="pest" id="pesta1" checked/> não podem ser repetidos nas mensagens. O código correto deveria ser esse:

Código:

<style>.expediente {--foto-expediente: url(https://i.ibb.co/svN3ZCC/joel.png);}</style>
<div class="expediente">
   <div class="exp-up">
      <div class="exp-name">Nombre A. Apellido</div>
   </div>
   <div class="exp-middle">
      <input type="radio" name="pest1" id="pesta1" class="pesta1" checked/>
      <input type="radio" name="pest1" id="pesta2" class="pesta2" />
      <input type="radio" name="pest1" id="pesta3" class="pesta3" />
      <div class="exp-pestis">
         <label for="pesta1" title="FOTO"></label>
         <label for="pesta2" title="HISTORIA"></label>
         <label for="pesta3" title="EXTRA"></label>
      </div>
      <div class="env-middle">
         <div class="pholi ep1"></div>
         <div class="pholi ep2">
            <div class="pest-text">[b]Historia[/b]. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div>
         </div>
         <div class="pholi ep3">
            <div class="pest-text">[b]Extra[/b]. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div>
         </div>
      </div>
   </div>
   <div class="exp-down">
      <div class="exp-quote"><i class="icofont-quote-left"></i> the more you shoot people, the harder it is to sleep</div>
      <div class="exp-data">
         <div><b>Dato:</b> Respuesta</div>
         <div><b>Dato:</b> Respuesta</div>
         <div><b>Dato:</b> Respuesta</div>
         <div><b>Dato:</b> Respuesta</div>
         <div><b>Dato:</b> Respuesta</div>
         <div><b>Dato:</b> Respuesta</div>
      </div>
   </div>
</div>

<div class="expediente">
   <div class="exp-up">
      <div class="exp-name">Nombre A. Apellido</div>
   </div>
   <div class="exp-middle">
      <input type="radio" name="pest2" id="pesta4" class="pesta4" checked/>
      <input type="radio" name="pest2" id="pesta5" class="pesta5"/>
      <input type="radio" name="pest2" id="pesta6" class="pesta6"/>
      <div class="exp-pestis">
         <label for="pesta4" title="FOTO"></label>
         <label for="pesta5" title="HISTORIA"></label>
         <label for="pesta6" title="EXTRA"></label>
      </div>
      <div class="env-middle">
         <div class="pholi ep1"></div>
         <div class="pholi ep2">
            <div class="pest-text">[b]Historia[/b]. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div>
         </div>
         <div class="pholi ep3">
            <div class="pest-text">[b]Extra[/b]. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div>
         </div>
      </div>
   </div>
   <div class="exp-down">
      <div class="exp-quote"><i class="icofont-quote-left"></i> the more you shoot people, the harder it is to sleep</div>
      <div class="exp-data">
         <div><b>Dato:</b> Respuesta</div>
         <div><b>Dato:</b> Respuesta</div>
         <div><b>Dato:</b> Respuesta</div>
         <div><b>Dato:</b> Respuesta</div>
         <div><b>Dato:</b> Respuesta</div>
         <div><b>Dato:</b> Respuesta</div>
      </div>
   </div>
</div>

No CSS, você deveria alterar todos os input#pesta1, input#pesta2 e input#pesta3 por atributos CLASS e não ID. O "class" pode ser repetido inúmeras vezes sem causar dor de cabeça. Já o ID é o mesmo que atribuir um número único (CPF no caso de brasileiros) ao código. O mesmo acontece com o atributo name= desses inputs (como pode notar no código acima). No seu CSS, é preciso inserir mais linhas a cada vez que o usuário postar, e infelizmente isso será muito chato de se fazer. Se for substituir, teria que mudar de:

Código:

.expediente input#pesta1:checked ~ .exp-pestis label[for="pesta1"] {
    background: var(--grupo-color)
}

.expediente input#pesta2:checked ~ .exp-pestis label[for="pesta2"] {
    background: var(--grupo-color)
}

.expediente input#pesta3:checked ~ .exp-pestis label[for="pesta3"] {
    background: var(--grupo-color)
}

.expediente input#pesta1:checked ~ .env-middle .ep1 {
    bottom: -400px
}

.expediente input#pesta2:checked ~ .env-middle .ep2 {
    bottom: 0
}

.expediente input#pesta3:checked ~ .env-middle .ep3 {
    bottom: 0
}

Por:

Código:

.expediente input.pesta1:checked ~ .exp-pestis label[for="pesta1"] {
    background: var(--grupo-color)
}

.expediente input.pesta2:checked ~ .exp-pestis label[for="pesta2"] {
    background: var(--grupo-color)
}

.expediente input.pesta3:checked ~ .exp-pestis label[for="pesta3"] {
    background: var(--grupo-color)
}

.expediente input.pesta4:checked ~ .exp-pestis label[for="pesta4"] {
    background: var(--grupo-color)
}

.expediente input.pesta5:checked ~ .exp-pestis label[for="pesta5"] {
    background: var(--grupo-color)
}

.expediente input.pesta6:checked ~ .exp-pestis label[for="pesta6"] {
    background: var(--grupo-color)
}

.expediente input.pesta1:checked ~ .env-middle .ep1 {
    bottom: -400px
}

.expediente input.pesta2:checked ~ .env-middle .ep2 {
    bottom: 0
}

.expediente input.pesta3:checked ~ .env-middle .ep3 {
    bottom: 0
}
.expediente input.pesta4:checked ~ .env-middle .ep1 {
    bottom: -400px
}

.expediente input.pesta5:checked ~ .env-middle .ep2 {
    bottom: 0
}

.expediente input.pesta6:checked ~ .env-middle .ep3 {
    bottom: 0
}

Se notar, foi incluso pesta4,5 e 6 no código. E a cada nova postagem, você terá que ir ao HTML da mensagem e mudar a ID, name do input e elemento CSS.

Ou seja, o resultado correto é esse: https://shek.forumeiros.com/h1-minha-primeira-pagina
O código dessa página HTML é:

Código:

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Topic test</title>
      <style>
:root {
    --fonte1: Raleway;
    --fundo1: #121212c9;
    --fundo2: #0c0c0c82;
    --fundo3: #0e0e0e;
    --cor1: #969c77;
    --cor2: #688976;
    --textob: #ededed;
    --link1: #969c77;
    --borda1: 1px solid #ededed;
    --borda1-c: #ededed;
    --borda2: 1px solid #1c1c1c;
    --borda2-c: #1c1c1c;
    --gradiente1: linear-gradient(44deg,#a18956,#87b39e);
    --sombreamento: 1px 0 0 #000;
    --grupo-color: #be863d
}

.rela1:hover .rel1-text {
    bottom: 0;
    transition: .5s
}

.rela1:hover .rel1-name {
    bottom: 350px;
    transition: .5s
}

.rel1-name {
    background: var(--colorela);
    opacity: 1;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    text-shadow: 1px 1px 1px #000;
    line-height: 100%;
    transition: .5s;
    bottom: 10px;
    position: absolute;
    left: 10px;
    padding: 10px;
    max-width: 150px;
    border-radius: 6px
}

.relaciones1 {
    display: flex;
    flex-wrap: wrap;
    margin: 20px
}

.rela1 {
    border: var(--borda2);
    width: 200px;
    margin: 5px;
    height: 320px;
    overflow: hidden;
    position: relative;
    background: var(--rfoto)
}

.rela2 {
    border: 1px solid var(--colorela);
    margin: 5px;
    height: 305px;
    overflow: hidden;
    position: relative
}

.rel1-text {
    position: absolute;
    left: 0;
    bottom: -350px;
    background: #0e0e0ec9;
    backdrop-filter: blur(3px);
    height: 100%;
    box-sizing: border-box;
    border: 20px solid transparent;
    font-size: 11px;
    overflow: auto;
    padding-right: 5px;
    transition: .5s
}

.expediente input.pesta1:checked ~ .exp-pestis label[for="pesta1"] {
    background: var(--grupo-color)
}

.expediente input.pesta2:checked ~ .exp-pestis label[for="pesta2"] {
    background: var(--grupo-color)
}

.expediente input.pesta3:checked ~ .exp-pestis label[for="pesta3"] {
    background: var(--grupo-color)
}

.expediente input.pesta4:checked ~ .exp-pestis label[for="pesta4"] {
    background: var(--grupo-color)
}

.expediente input.pesta5:checked ~ .exp-pestis label[for="pesta5"] {
    background: var(--grupo-color)
}

.expediente input.pesta6:checked ~ .exp-pestis label[for="pesta6"] {
    background: var(--grupo-color)
}

.expediente input.pesta1:checked ~ .env-middle .ep1 {
    bottom: -400px
}

.expediente input.pesta2:checked ~ .env-middle .ep2 {
    bottom: 0
}

.expediente input.pesta3:checked ~ .env-middle .ep3 {
    bottom: 0
}
.expediente input.pesta4:checked ~ .env-middle .ep1 {
    bottom: -400px
}

.expediente input.pesta5:checked ~ .env-middle .ep2 {
    bottom: 0
}

.expediente input.pesta6:checked ~ .env-middle .ep3 {
    bottom: 0
}

.exp-pestis label {
    width: 15px;
    height: 15px;
    display: block;
    margin-right: 10px;
    padding: 0;
    line-height: 100%;
    border: 2px solid var(--grupo-color);
    border-radius: 100%;
    cursor: pointer
}

.pholi {
    position: absolute;
    width: 600px;
    height: 400px;
    background: #080808db;
    transition: .5s;
    left: 0;
    backdrop-filter: blur(5px);
    bottom: -400px;
    box-sizing: border-box;
    padding: 45px
}

.pest-text {
    height: 100%;
    overflow: auto;
    padding-right: 10px;
    margin-right: -10px;
    font-size: 13px
}

.env-middle {
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative
}

.exp-pestis {
    position: absolute;
    right: 20px;
    top: 38px;
    font-size: 25px;
    display: flex
}

.expediente input {
    display: none
}

.exp-middle {
    height: 400px;
    background: var(--foto-expediente)
}

.exp-data div b {
    color: var(--grupo-color);
    font-weight: 900;
    margin-right: 10px
}

.exp-down {
    border-top: 3px solid var(--grupo-color);
    background: var(--fundo2);
    box-sizing: border-box;
    padding: 10px
}

.exp-quote i {
    position: absolute;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    top: 0;
    font-size: 16px;
    width: 50px;
    justify-content: center;
    color: #be863d
}

.exp-quote {
    border: var(--borda2);
    position: relative;
    padding: 5px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    padding-left: 50px;
    font-style: italic;
    background: #0f0f0f;
    margin-bottom: 10px
}

.exp-data {
    border: var(--borda2);
    display: flex;
    flex-wrap: wrap;
    border-bottom: none;
    border-right: none
}

.exp-data div {
    width: 50%;
    box-sizing: border-box;
    border-right: var(--borda2);
    height: 35px;
    border-bottom: var(--borda2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden
}

.expediente .exp-up {
    height: 100px;
    border-bottom: 3px solid var(--grupo-color);
    background: var(--fundo2);
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 30px
}

.exp-name {
    display: block;
    background: var(--grupo-color);
    width: fit-content;
    padding: 10px 15px;
    text-transform: uppercase;
    font-weight: 900;
    text-shadow: var(--sombreamento);
    border-radius: 8px
}

.expediente {
    border: var(--borda2);
    width: 600px;
    margin: 0 auto;
    background: var(--fundo3);
    position: relative;
    display: flex;
    flex-direction: column
}

.expediente br {
    display: none
}

.npc-title {
    width: 600px;
    overflow: hidden;
    margin: 0 auto;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.npc-title:before {
    content: ' ';
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    height: 1px;
    background: var(--grupo-color)
}

.npc-title div {
    border: 1px solid var(--grupo-color);
    padding: 15px 25px;
    text-transform: uppercase;
    font-weight: 900;
    background: var(--fundo2);
    position: relative;
    line-height: 100%
}

.base-npc .bnpc-photo {
    margin: 15px;
    box-sizing: border-box;
    border: 1px solid var(--grupo-color);
    height: 170px;
    outline: 1px solid var(--grupo-color);
    outline-offset: -1px;
    transition: .5s
}

.base-npc .bnpc-data d:before {
    content: '\ea69';
    color: var(--grupo-color);
    margin-right: 10px;
    margin-left: -10px;
    font-family: 'IcoFont'
}

.base-npc .bnpc-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    height: 100%;
    opacity: 0;
    transition: .5s;
    background: var(--fundo1)
}

.base-npc:hover .bnpc-data {
    opacity: 1;
    transition: .5s
}

.base-npc:hover .bnpc-photo {
    outline-offset: 15px;
    transition: .5s
}

.base-npc .bnpc-name span {
    font-size: 11px;
    background: var(--grupo-color);
    color: var(--textob);
    font-weight: 700;
    padding: 5px 10px;
    margin: -5px;
    border-radius: 7px;
    text-shadow: var(--sombreamento)
}

.base-npc .bnpc-text {
    margin: 15px;
    padding-right: 10px;
    font-size: 12px;
    overflow: auto;
    height: 120px
}

.base-npc {
    width: 605px;
    margin: 0 auto;
    display: flex
}

.base-npc .bnpc-img {
    width: 200px;
    border: var(--borda2);
    height: 200px;
    background: var(--fundo2);
    margin-right: 10px
}

.base-npc .bnpc-right {
    width: 390px;
    border: var(--borda2);
    height: 200px;
    position: relative;
    overflow: hidden
}

.base-npc .bnpc-name {
    border-bottom: var(--borda2);
    background: var(--fundo2);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 15px;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--grupo-color)
}

.base-npc.alt {
    flex-direction: row-reverse
}

.base-npc.alt .bnpc-img {
    margin-right: 0;
    margin-left: 10px
}

.base-npc.alt .bnpc-name {
    justify-content: flex-start
}

.base-npc br {
    display: none
}

.base-npc .bnpc-text br {
    display: block
}

.admintalk .at-line {
    height: 5px;
    background: var(--gradiente1);
    border-radius: 10px;
    margin: -10px 0
}

.admintalk .at-text {
    border: var(--borda2);
    padding: 35px;
    background: var(--fundo3);
    font-size: 13px
}

.admintalk .at-icon {
    font-size: 40px;
    line-height: 100%;
    background: var(--gradiente1);
    -webkit-background-clip: text;
    color: transparent;
    margin: 0 auto;
    margin-bottom: -10px;
    width: fit-content
}

.admintalk {
    width: 400px;
    margin: 0 auto;
    margin-bottom: 25px
}

.admintalk .at-title {
    border: var(--borda2);
    background: var(--fundo2);
    padding: 15px;
    text-transform: uppercase;
    text-align: center;
    font-size: 13px;
    font-weight: 700
}

.bt-titulo2 div {
    width: fit-content;
    margin: 0 auto;
    background: var(--grupo-color);
    padding: 12px;
    margin-top: 15px;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 15px;
    text-shadow: var(--sombreamento);
    border-radius: 10px;
    position: relative;
    z-index: 1
}

.bt-titulo2:after {
    display: block;
    content: ' ';
    height: 1px;
    width: 100%;
    background: var(--borda2-c);
    position: relative;
    top: -23px
}

.btexto {
    padding: 45px;
    font-size: 13px
}

.btexto br:first-of-type {
    display: none
}

.bsubtitulo {
    display: flex;
    justify-content: flex-end;
    padding-right: 15px
}

.bsubtitulo div {
    background: var(--grupo-color);
    padding: 5px 15px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    text-shadow: var(--sombreamento);
    border-radius: 0 0 10px 10px
}

div#base1 {
    border: var(--borda2);
    margin: 35px
}

div#base1 i {
    color: var(--grupo-color)
}

.btitulo {
    font-family: Roboto Condensed;
    border-bottom: 5px solid var(--grupo-color);
    color: var(--grupo-color);
    text-shadow: #000 1.5px 1.5px;
    padding: 40px;
    font-size: 30px;
    font-weight: 900;
    background: #0c0c0c82
}

busqueda.abierta:after,busqueda.cerrada:after {
    content: '\ec8c';
    position: absolute;
    height: 35px;
    width: 35px;
    background: var(--borda2-c);
    left: -20px;
    top: 50%;
    margin-top: -20px;
    display: flex;
    font-family: 'IcoFont';
    font-size: 18px;
    align-items: center;
    justify-content: center;
    color: #be863d;
    border-radius: 100%;
    border: 2px solid #be863d
}

busqueda.cerrada:after {
    content: '\ec61'
}

.btexto .bb-cuadro br:first-of-type {
    display: block!important
}

div#base1 busqueda .bb-title {
    color: #be863d;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 900
}

div#base1 busqueda .bb-datos {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px
}

div#base1 busqueda .bb-texto {
    margin-top: 15px;
    max-height: 250px;
    overflow: auto;
    padding-right: 30px
}

div#base1 busqueda {
    display: flex;
    flex-direction: column;
    border-left: 2px solid #be863d;
    padding: 10px 0 10px 40px;
    position: relative
}

div#base1 busqueda br {
    display: none
}

div#base1 busqueda .bb-texto br {
    display: block
}

div#base1 .bb-cuadro {
    border: 1px solid var(--grupo-color);
    padding: 35px;
    margin: 20px;
    outline: 1px solid var(--borda2-c);
    outline-offset: -7px
}

.imagem-container img {
    outline: 1px solid var(--grupo-color);
    outline-offset: -1px;
    width: 500px;
    height: 350px;
    position: center;
    display: block;
    margin: 0 auto;
    transition: transform .3s ease-in-out
}

.imagem-container img:hover {
    transform: scale(1.1)
}
         .expediente {--foto-expediente: url(https://i.ibb.co/svN3ZCC/joel.png);}
      </style>
   </head>
   <body>
      <div class="expediente">
         <div class="exp-up">
            <div class="exp-name">Nombre A. Apellido</div>
         </div>
         <div class="exp-middle">
            <input type="radio" name="pest1" id="pesta1" class="pesta1" checked/>
            <input type="radio" name="pest1" id="pesta2" class="pesta2" />
            <input type="radio" name="pest1" id="pesta3" class="pesta3" />
            <div class="exp-pestis">
               <label for="pesta1" title="FOTO"></label>
               <label for="pesta2" title="HISTORIA"></label>
               <label for="pesta3" title="EXTRA"></label>
            </div>
            <div class="env-middle">
               <div class="pholi ep1"></div>
               <div class="pholi ep2">
                  <div class="pest-text">[b]Historia[/b]. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div>
               </div>
               <div class="pholi ep3">
                  <div class="pest-text">[b]Extra[/b]. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div>
               </div>
            </div>
         </div>
         <div class="exp-down">
            <div class="exp-quote"><i class="icofont-quote-left"></i> the more you shoot people, the harder it is to sleep</div>
            <div class="exp-data">
               <div><b>Dato:</b> Respuesta</div>
               <div><b>Dato:</b> Respuesta</div>
               <div><b>Dato:</b> Respuesta</div>
               <div><b>Dato:</b> Respuesta</div>
               <div><b>Dato:</b> Respuesta</div>
               <div><b>Dato:</b> Respuesta</div>
            </div>
         </div>
      </div>
      <br /><br /><br />
      <div class="expediente">
         <div class="exp-up">
            <div class="exp-name">Nombre A. Apellido</div>
         </div>
         <div class="exp-middle">
            <input type="radio" name="pest2" id="pesta4" class="pesta4" checked/>
            <input type="radio" name="pest2" id="pesta5" class="pesta5"/>
            <input type="radio" name="pest2" id="pesta6" class="pesta6"/>
            <div class="exp-pestis">
               <label for="pesta4" title="FOTO"></label>
               <label for="pesta5" title="HISTORIA"></label>
               <label for="pesta6" title="EXTRA"></label>
            </div>
            <div class="env-middle">
               <div class="pholi ep1"></div>
               <div class="pholi ep2">
                  <div class="pest-text">[b]Historia[/b]. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div>
               </div>
               <div class="pholi ep3">
                  <div class="pest-text">[b]Extra[/b]. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div>
               </div>
            </div>
         </div>
         <div class="exp-down">
            <div class="exp-quote"><i class="icofont-quote-left"></i> the more you shoot people, the harder it is to sleep</div>
            <div class="exp-data">
               <div><b>Dato:</b> Respuesta</div>
               <div><b>Dato:</b> Respuesta</div>
               <div><b>Dato:</b> Respuesta</div>
               <div><b>Dato:</b> Respuesta</div>
               <div><b>Dato:</b> Respuesta</div>
               <div><b>Dato:</b> Respuesta</div>
            </div>
         </div>
      </div>
   </body>
</html>

Atenciosamente,
Shek

Nossa, muito obrigado pela senhora aula.

Valeu demais!

Entendi tudo e vou aplicar.

Boa tarde @bitchoin,

Após resolução da aplicação do código dado pelo @shek, deixe feedback por favor.

Atenciosamente,
Sleep