Histórico da Página

HTML

<img src="https://totvscrm.com/wp-content/uploads/2023/04/capaartigo3.png" style="width:100%">  


 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 


 <div class="content">

    <div class="article"> <br>  

<style>
    /* Seleciona a classe CSS 'meu-titulo' e aplica o padding de 0 3em 0 3em */
    .meu-titulo {
      padding: 0 3em 0 3em;
    }
  </style>

 <h2> <img src="https://totvscrm.com/wp-content/uploads/2023/04/[email protected]" alt="some text" width=40> &nbsp &nbsp <strong>CONFIGURAÇÃO<strong>CONFIGURACIÓN DE DESCONTODESCUENTO MÁXIMO POR PIPELINE</strong> </h2>     <br> <br>
<span class="badge badge-novo"><strong>NOVO<><strong>NUEVO</strong></span> <span class="badge badge-dark"><strong>OPORTUNIDADES</strong></span> <br> 

<br> 

  <style>
      /* Estilo para a tabela */
      table {
        width: 100%;
               border-collapse: collapse;
      }
      
      /* Estilo para as células da tabela */
   
    </style>

 <div class="coluna1">
 <div class="table-wrap" style="margin-left: 0px;padding: 0 3em 0 3em;">

 <table class="relative-table wrapped confluenceTable" style="width: 100%;" resolved="">
    <thead>
      <tr>
        <th style="text-align: left;" colspan="1" class="confluenceTh">Produto>Producto:</th>
        <td style="text-align: left;" colspan="1" class="confluenceTd"> TCRM - GestãoGestión de Clientes<clientes</td>
        <div class="content-wrapper">
        </div>
        </td>
      </tr>
    </thead>
    <colgroup>
      <col style="width: 162.912px;">
      <col style="width: 203.153px;">
    </colgroup>
    <tbody>
      <tr>
        <th style="text-align: left;" class="confluenceTh">Linha>Línea de Produtoproducto:</th>
        <td style="text-align: left;" class="confluenceTd">TOTVS CRM</td>
        <div class="content-wrapper">

        </div>
        </td>
      </tr>
      <tr>
        <th style="text-align: left;" class="confluenceTh">Segmento:</th>
        <td style="text-align: left;" class="confluenceTd">Cross Segmentos</td>
        <div class="content-wrapper">
        </div>
        </td>
      </tr>
      <tr>
        <th style="text-align: left;" class="confluenceTh">Módulo:</th>
        <td style="text-align: left;" class="confluenceTd">Oportunidades</td>
      </tr>
      <tr>
        <th style="text-align: left;" colspan="1" class="confluenceTh">Aplicação</th>
        <td style="text-align: left;" colspan="1" class="confluenceTd">Web/app móvel<móvil</td>
      </tr>
      <tr>
        <th style="text-align: left;" colspan="1" class="confluenceTh">Identificador:</th>
        <td style="text-align: left;" colspan="1" class="confluenceTd"><span style="color: rgb(23,43,77);">NR041120221430</span></td>
      </tr>
         
              
          <div class="content-wrapper">

            
            </span>

          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div> 



    </div>  <div class="coluna2">
      <div class="conteudo"> <br> 
      
        <p> La Aimplementación implementaçãode desseeste recurso permite que oslos gestoresadministradores tenhamtengan maiormayor controlecontrol sobre oslos descontosdescuentos concedidos emen suassus equipesequipos, garantindogarantizando que sejamse aplicadosapliquen de forma estratégica ey alinhadosalineados comcon aslas políticas de dala empresa. IssoEsto levaráconducirá a umauna gestãogestión maismás eficiente ey precisa de doslos descontosdescuentos, evitando concessõesconcesiones excessivasexcesivas ey melhorandomejorando oslos resultados de las vendasventas.  </p>
      </div>
    </div>



 <br> 



 <h2> <img src="https://totvscrm.com/wp-content/uploads/2023/04/[email protected]" alt="some text" width=40> &nbsp &nbsp <strong>O<strong>¿QUÉ QUEHACE OESTE RECURSO FAZ?</strong> </h2>    <br>  <br> 



<p> OEl recurso dedel parâmetroparámetro de descontodescuento máximo por pipeline permite definir comcon precisãoprecisión oel limitelímite máximo de descontodescuento que podepuede seraplicarse aplicado emen cada pipeline de oportunidades. IssoEsto significa que vocêpuede poderáestablecer estabelecerun um percentualporcentaje máximo de descontodescuento permitido emen cada situaçãosituación específica.

ComCon esseeste recurso, vocêtendrá terá controlecontrol sobre quemquién podepuede aplicar descontosdescuentos emen cada pipeline, ya sejasea por meiomedio de permissõespermisos atribuídasatribuidos a usuáriosusuarios, papéispapeles ouo grupos de usuáriosusuarios. IssoEsto garantegarantiza que apenassolamente pessoaspersonas autorizadas possampuedan conceder descontosdescuentos ey que essesestos descontosdescuentos estejamestén dentro de doslos limiteslímites estabelecidosestablecidos.</p>  


  <h2> <img src="https://totvscrm.com/wp-content/uploads/2023/04/[email protected]" alt="some text" width=40> &nbsp &nbsp <strong>O<strong>¿QUÉ QUE MUDOUCAMBIÓ?</strong> </h2>   <br> 




  <p> <h3 class="meu-titulo"> DIVISÃODIVISIÓN EMEN ABASSOLAPAS  </h3> <br> </p> 

 <p> En Noel construtorconstructor de pipelines, fizemosrealizamos melhoriasmejoras para tornardejar asu suaexperiencia experiência maismás intuitiva ey organizada. Agora,Ahora você encontrará trêstres abassolapas distintasdiferentes para facilitar ala navegaçãonavegación ey ala separaçãoseparación lógica de daslas informaçõesinformaciones. </p>  <br> 

<p> 1) En Nala abasolapa chamadadenominada <strong>"InformaçõesInformaciones"</strong>,  estarãoestarán concentradas todas aslas informaçõesinformaciones geraisgenerales dode seusu pipeline</p> <br>

<ul style="padding-left: 60px;">
  <li>Ativo<<li>Activo</li>
  <li>Padrão<<li>Estándar</li>
  <li>Descrição<<li>Descripción</li>
  <li>Informações<li>Informaciones dodel card</li>
  <li>Informações<li>Informaciones de la etapa</li>
</ul> <br>

   <div style="padding: 0 3em 0 3em;">
 <img src="https://totvscrm.com/wp-content/uploads/2023/05/telaprincipal.gif" class="destaque"> </div>
<br> 

  <p> 2) En Nala abasolapa <strong>"ParâmetrosParámetros"</strong>, você encontrará ala seçãosección de "ConfiguraçõesConfiguración de daslas oportunidades" ey oel novonuevo parâmetroparámetro "Permitir salvargrabar itensítems comcon descontodescuento maiormayor doque queel permitido". Por padrão,estándar esseeste parâmetroparámetro está desativadodesactivado. NoSin entantoembargo, quandocuando se ativadoactiva, permite que vocêgrabe salveítems itenscon com desconto maior dodescuento mayor que oel permitido. ÉEs importante destacar que, mesmoincluso comcon esseeste parâmetroparámetro ativadoactivado, aindaaún nãono será possívelposible ganharganar ala oportunidadeoportunidad.</p> <br>      

 <div style="padding: 0 3em 0 3em;">
 <img src="https://totvscrm.com/wp-content/uploads/2023/05/UniConverter-14_20230511155709.gif" class="destaque"> </div>
<br>      


<p> 3) En Nala abasolapa "PermissõesPermisos" estãoestán aslos "PermissõesPermisos de acessoacceso" ey umauna novanueva seçãosección chamadadenominada "PermissõesPermisos de descontodescuento". </p> <br>             


<div style="padding: 0 3em 0 3em;">
 <img src="https://totvscrm.com/wp-content/uploads/2023/05/UniConverter-14_20230511163601.gif" class="destaque"> </div>
<br>   



<p> 
Nesta seção, é possívelEn esta sección es posible configurar faixasrangos de descontodescuento máximo emen umauna pipeline. Si Seno nenhumse registrorealizara forningún feitoregistro, no nenhumase restriçãoaplicará seráninguna aplicadarestricción. En Noel campo "DescontoDescuento máximo", insiraincluya oel valor desejadodeseado (atéhasta duasdos casas decimaisdecimales). Lembre-seRecuerde que devedebe ser maiormayor que zerocero e igual ouo menor que 100. Por padrãoestándar, "Todos oslos usuáriosusuarios" podempueden aplicar oel descontodescuento. CasoSi prefiraprefiriera, desmarque essaesta opçãoopción ey selecioneseleccione usuáriosusuarios, papéispapeles ouo grupos para aplicar ala restriçãorestricción. AoAl desmarcar "Todos oslos usuáriosusuarios", oel campo "Permitido para" será obrigatórioobligatorio.</p>    <br>   

 <div style="padding: 0 3em 0 3em;">
 <img src="https://totvscrm.com/wp-content/uploads/2023/05/UniConverter-14_20230511175804.gif" class="destaque"> </div>
<br>   

       <p> <h3 class="meu-titulo"> APLICACIÓN APLICAÇÃODE DASLAS RESTRIÇÕESRESTRICCIONES DE DESCONTODESCUENTO </h3> 

<br>    </p>    

<h4 class="meu-titulo">Verificação>Verificación de Permissõespermisos:</h4>  
<p>Se<p>Si oel descontodescuento forfuera maiormayor que zerocero, ala soluçãosolución valida sesi oel usuáriousuario logadoconectado ouo responsávelresponsable temtiene permissãopermiso para aplicar aqueleaquel percentualporcentaje de descontodescuento. Consideramos aslos faixasrangos de descontodescuento máximo aplicado en noel itemítem, tomando levandoen emconsideración contacuenta o papel, grupo de usuáriousuario ouo permissõespermisos individuaisindividuales.</p>

<h4 class="meu-titulo">Visualização>Visualización de doslos Itensítems:</h4>
<p>Se<p>Si oel usuáriousuario logadoconectado nãono tivertuviera permissãopermiso para aplicar oel descontodescuento ey ala oportunidadeoportunidad estiverestuviera emen progressoprogreso, oel campo de descuento descontose destacará serácon destacadoun comaviso umde alerta. OEl aviso de alerta informará aoal usuáriousuario queno ele nãopuede pode aplicar aqueleaquel descontodescuento específico e indicará oel percentualporcentaje máximo permitido para osu seu usuáriousuario.</p>

<h4 class="meu-titulo">Restrições>Restricciones aoal Usuáriousuario Responsávelresponsable:</h4>
<p>Se<p>Si oel usuáriousuario logadoconectado tivertuviera permissãopermiso para aplicar oel descontodescuento, maspero oel usuáriousuario responsávelresponsable nãono tivertuviera, oel campo de descontodescuento será señalado con sinalizadoun comaviso umde alerta. EssaEste mensaje mensagemse serámostrará exibidasolamente apenassi quandoel ousuario usuárioresponsable responsávelestuviera estiverjerárquicamente hierarquicamentedebajo abaixodel dousuario usuárioconectado logadoen noslos papéispapeles.</p>

<h4 class="meu-titulo">Salvando>Grabando Itensítems comcon Descontodescuento Maiormayor:</h4>
<p>Caso<p>Si oel usuáriousuario logadoconectado nãono tenhatuviera permissãopermiso para aplicar oel descontodescuento ey ala opçãoopción "Permitir salvargrabar itensítems comcon descontodescuento maiormayor doque queel permitido" estiverestuviera ativadaactivada, oel campo de descontodescuento será señalado con sinalizadoun comaviso umde alerta. El aviso Ode alerta informará aoal usuáriousuario que eleno não podepuede aplicar aqueleaquel descontodescuento e indicará oel percentualporcentaje máximo permitido.</p>  <br>

  <div style="padding: 0 3em 0 3em;">
 <img src="https://totvscrm.com/wp-content/uploads/2023/05/UniConverter-14_20230511190318.gif" class="destaque"> </div>
<br>    


<div class="alert-box warning"><i class="fa fa-exclamation-triangle"> </i><span>Atençãoi><span>Atención: </span> Para definir oel percentualporcentaje máximo de descontodescuento, ées necessárionecesario que oel produtoproducto tenhatenga umun preçoprecio de vendaventa definido.</div>

      <br> <br> <br> <br>

HTML

<style>

 #title-text {
	display: none !important;}  


@import "compass/css3";  @import "compass/css3";

* {
  box-sizing: border-box;
  font-family: lato, sans-serif;
}  

* {
  font-family: lato, sans-serif;
}  

blockquote {
  margin: 3%;
  border-left: 10px solid #363636;
  padding: 2%;
  color: #222;
  background: #fff;
  font-style: italic;
  line-height: 130%;
}



.top {
  width: 100%;
  background: #363636;
  
}

.img {
image-resolution: 5px 5px 9px;
image-rendering: auto;
image-orientation:0deg
}

.header {
  max-width: 1200px;
  width: 98%;
  height: 7em;
  margin: 0px auto;
  overflow: hidden;

  
  h1 {
    text-align: center;     
    font-weight: bold;     
    color: #fff;
    padding: 20px;
   font-size: 22px;

     div {
      margin: 0;
      font-weight: normal;
      font-size: 1.8em;
    }
  }
  .author {
    font-size: 0.8em;
    font-weight: normal;
    border-top: 1px dashed #555;
    border-bottom: 1px dashed #555;
    max-width: 160px;
    text-align: center;
    margin: -1em auto 0 auto;
    padding: 0.;
    text-transform: uppercase;
    color: #ccc;
  }
}

.content {
  max-width: auto;
  float: right;
  margin: auto;
  padding: 0;
}

.date {
  float: left;
  width: 10%;
  color: #444;
  text-align: center;
  div {
    margin: 0;
    line-height: 50%;
  }}
  .day {
    float: left;
    margin-top: 0.1em;
    width: 100%;
    color: #FEAC0E;
    font-size: 200%;
  }
}

.date-line {
  display: none;
}

.article {
  width: 100%;
  padding: 0 7em 0 7em;
  background: rgb(247, 247, 252);
 
  }
  h2 {
    font-weight: normal;       
    font-size: 22px;
   font-weight: bold;
   color: #555555;
    margin: 0;
  }
  h3 {
    font-weight: normal;
    font-size: 16px;
    color: #888;
    font-style: italic;
    margin: 0 0 1em 0;
  }
  p {
    margin: 0;
    padding-top: 8px;
    color: #555;
    text-align: justify;
    font-size: 16px;
    line-height: 150%;
    
  }

li{

  font-size: 16px;
  color: #555555;
}    

div{
    font-style: 16px;
    color: #555;
  }
  .firstpara {
    text-indent: 0;
    font-size: 16px;
  }
  .pause {
    margin: 2em auto 2em auto;
    color: #555555;
    width: 60%;
    padding: 10px;
    text-align: center;
   font-size: 20px;
 

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .firstcharacter {
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    line-height: 0.6em;
    padding-top: 0.12em;
    padding-right: 0.1em;
    padding-left: 0;
  }
}

.footer {
  max-width: 1200px;
  width: 98%;
  height: 50px;
  margin: 0px auto;
  overflow: hidden;
  border-top: 1px solid #ccc;}
  .copy {
    float: right;
    font-style: italic;
    color: #888;
    padding: 1% 1% 0 0;
  }
}

.prev a,
.next a {
  position: fixed;
  top: 9.6em;
  padding: 1em;
  background: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.prev a:hover,
.next a:hover {
  background: #fff;
}
.prev a {
  left: 0.7em;
}
.next a {
  right: 0.7em;
}

@media only screen and (max-width: 450px) {
  .content {
    margin-top: 2em;
  }
  .social {
    display: none;
  }
  .date {
    display: none;
  }
  .date-line {
    display: inline;
  }
  .article {
    width: 100%;
    margin: 0 auto 2em auto;
    border-left: none;
    padding-bottom: 2em;
    border-bottom: 1px solid #ccc;
    p {
      font-size: 1.2em;
    }
  }
  .header {
    height: auto;
    position: fixed;
    top: 0;
    padding: 0;
    margin: 0;
    background: rgb(34, 16, 171)
     
    h1 {
      text-align: center;
      width: 100%;
      margin: 0;
      color: #f1f1f1;
      span {
        font-size: 80%;
      }
    }
    .author {
      display: none;
    }
  }
  .footer {
    text-align: center;
    padding: 3%;
    height: 40px;
    .copy {
      float: none;
    }
  }
  .prev a,
  .next a {
    position: relative;
    margin-bottom: 2em;
    text-align: center;
    top: 0;
  }
  .prev a {
    float: left;
    width: 40%;
  }
  .next a {
    float: right;
    width: 40%;
  }s
.table {
font-family: lato;
background-color: #fff;

}
  
#wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  inset: 0;
  justify-content: center;
  align-items: center;
}}
.flexWrap {
  display: flex;
  gap: 2px;
  width: 110px;
}
#disclaimer {
  font-family: sans-serif;
  color: #333333;
  position: fixed;
  top: 5%;
  right: 5%;
  width: 5%;
} 

.badge-primary {
  color: #8686FF;
  background-color: #F3F3FF;
    border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold  }

.badge-secondary{
  color: #ebeef0;
  background-color: #2abe74;
    border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold 

}

.badge-novo {
  color: #fff;
  background-color: #20d691;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold  }

.badge-danger{
  color: #FFFFFF;
  background-color: #FF4057;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold }

.badge-manutencao {
  color: #FFF;
  background-color: #efc307;
  border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}

.badge-melhoria {
  color: #FFF;
  background-color: #6f60f6;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}
.badge-light {
  color: #8686FF;
  background-color: #F3F3FF
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}
.badge-dark {
  color: #ebeef0;
  background-color: #064118;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold } 


body {
  font-family: lato;
}
table {
  border-collapse: collapse;
}
th {
  text-align: left;
  background-color: #363636;
  color: #fff;
}
caption {
  font-size: 1.5rem;
  text-align: left;
  padding-bottom: 1rem;
}
td, th {
  padding: 0.5rem;
  border: 3px solid #fff;
}
tbody tr:nth-child(odd),
tfoot tr:nth-child(even) {
   background-color: #fff;
}
tfoot tr td:first-child {
  border: none;
  background-color: white;
}
tfoot {
border-top: 5px solid #fff;
}

.img2 {
   width:50%;
    height:auto;
    padding:2%;
    margin-bottom:4%;
    align-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto }

 #f7f7fc;
  }  



}
container{
    width: 50%;
}
.borderbox{
  border: 1px dashed #ebebeb;
  width:45%;
  margin: 50px auto;
  border-radius: 8px;
  border-width:2px;
}
.box{
  position:relative;
  width:auto;
  height:auto;
  margin: 50px auto;
  padding: 20px;
  box-shadow: 0px 1px 8px 1px #ebebeb;
  border-radius: 8px;
}
.sucess-box{
    border-left: solid 5px #3FC43C;
    background-color: #fff;

} .info-box{
    border-left: solid 5px #585EC2;
    background-color: #fff;
}
.warning-box{
    border-left: solid 5px #EFA162;
    background-color: #fff;
}
.error-box{
    border-left: solid 5px #F32D70;
    background-color: #fff;
}
.fa{
    padding-right:10px;
}
.fa-check-circle{
  color: #3FC43C;
} 
.fas fa-info-circle
{
  color: #585EC2;
}
.warning-box .fa-exclamation-triangle{
  color: #EFA162;
}
.error-box .fa-exclamation-triangle{
  color: #E63470;
}
p{
  padding:0 3em 0 3em;
}
.time{
  color:#9b9b9b;
}
.fa-close{
    color:#BCC4CD;
}
.close{
  position:absolute;
  top: 20px;
  right:20px; 
}
.link1,
.link2,
.link3,
.link4{
  opacity:0;
  margin-left:20px;
  text-decoration:none;
}
.link1{
  color:#3FC43C;
}
.link2{
  color:#585EC2;
}
.link3{
  color:#EFA162;
}
.link4{
  color:#E63470;
}
.box:hover a{
  opacity:1;
}


.topic-cluster-index {
  list-style: none;

  }
.topic-cluster-index li {
 display: inline-block; list-style: none;
  min-height: 30px;
  width: 98%;
  background-color: #fff;
  border-radius: 2px;
  padding: 2em 3em 2em 3em;

   margin: 5px 0;
  border: 1px solid #e4e8ec;
  line-height: 16px !important;
font-weight: bold;
   color: #363636;
  font-family: lato;
  font-weight: 600;
}
.topic-cluster-index li a {
list-style: none;
  font-weight: 400;
  color: #363636 !important;
  list-style: none;
font-size: 15px;
   margin: 0;
  padding: 0;
  font-family: lato;
font-weight: bold;
 text-decoration: none !important;
}
.topic-cluster-index li:hover {
list-style: none;
  background-color: #F7F7FC;
  font-family: lato;
  font-weight: 700;
  cursor: pointer;
}
.topic-cluster-index li:hover a {
list-style: none;
  color: #feac0e !important;
  font-family: lato;
  font-weight: 700;
  text-decoration: none !important;
}
.index-title {
  width: 100%;
  height: 30px;
  background: #feac0e;
  font-family: lato;
  font-size: 20px;
  border-radius: 2px;
  color: #fff;
  font-weight: 700;
  padding: 6px 10px 6px 25px;
}
  </style>

HTML

<style>  body {
  margin: 0; // 1
  font-family: lato;
  font-size: 16px;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: #555555
  text-align: left; // 3
  background-color: $body-bg; // 2
}

.speech-bubble {
  max-width: 300px;   
  font-family: lato;   
  color: #555555;
font-size: 16px;
   margin: 1rem;
  padding: 1rem;
  position: relative;
  border: 2px solid #FEAC0E;
  background: #fff;
  border-radius: 0.4em;
}
.speech-row {
  display: flex;
  justify-content: center;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}

.speech-img img {
  border-radius: 50%;
}
img {
  vertical-align: middle;
  border-style: none;
}
.speech-img {
  align-self: center;
  max-width: 100%;
  height: auto;
}
*,
::after,
::before {
  box-sizing: border-box;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}
.speech-bubble:before,
.speech-bubble:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-right-color: #FEAC0E;
  border-left: 0;
  margin-top: -20px;
  margin-left: -20px;
}

.speech-bubble:after {
  border-right-color: #fff;
  margin-left: -18px;
  z-index: 1;
}
    </style>

HTML

<style>
.main-presupuestoMensual {
  min-width: 320px;
  max-width: 100%;
  padding: 50px;
  margin: 0 auto;
  background: #F7F7FC;
}

.containter-tab1 {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

.input-tabPresupuestoMensual {
  display: none;
}

.label-tabPresupuestoMensual {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

.label-tabPresupuestoMensual:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

/* .label-tabPresupuestoMensual[for*='1']:before {
  content: '\f1cb';
}

.label-tabPresupuestoMensual[for*='2']:before {
  content: '\f17d';
}

.label-tabPresupuestoMensual[for*='3']:before {
  content: '\f16b';
}

.label-tabPresupuestoMensual[for*='4']:before {
  content: '\f1a9';
} */

.label-tabPresupuestoMensual:hover {
  color: #888;
  cursor: pointer;
}

.input-tabPresupuestoMensual:checked + .label-tabPresupuestoMensual {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid orange;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 
#tab5:checked ~ #content5{
  display: flex;
}

@media screen and (max-width: 650px) {
  .label-tabPresupuestoMensual {
    font-size: 0;
  }

  .label-tabPresupuestoMensual:before {
    margin: 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 400px) {
  .label-tabPresupuestoMensual {
    padding: 15px;
  }
}

/**/
body {
  background: #ececec;
}

.loader:before,
.loader:after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border-style: solid;
  border-top-color: #ecd078;
  border-right-color: #c02942;
  border-bottom-color: #542437;
  border-left-color: #53777a;
  content: "";
  transform: translate(-50%, -50%);
  animation: rotate 1.5s infinite ease-in-out;
}
.loader:before {
  border-width: 10vh;
}
.loader:after {
  width: 30vh;
  height: 30vh;
  border-width: 2.5vh;
  animation-direction: reverse;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

</style>

HTML

<style> 

.half {
  float: left;
  width: 100%;
  padding: 0 1em;
}
/* Acordeon styles */
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #363636;
  overflow: hidden;
}
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  width: 100%;
   display: block;
  padding: 0 0 0 1em;
  margin: 0 auto;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #feac0e;
  background: #afaf4a00;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.blue label {
  background: #2980b9;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #f7f7fc;
  -webkit-transition: max-height 0.35s;
  -o-transition: max-height 0.35s;
  transition: max-height 0.35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 300em;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
}
input[type="checkbox"] + label::after {
  content: "+";
}
input[type="radio"] + label::after {
  content: "\25BC";
}
input[type="checkbox"]:checked + label::after {
  transform: rotate(315deg);
}
input[type="radio"]:checked + label::after {
  transform: rotateX(180deg);
}

/*----------------------------------------------------------*/
/* Estilos generales */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Open Sans", sans-serif;
}
h2 {
  font-weight: normal;
}

.wrapper {
  margin: auto;
  width: 90%;
  max-width: 960px;
}

/* Otros estilos */
.card {
  padding: 1em;
  color: #333;
  background: #fff;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
.card h2:first-child,
.card p:first-child {
  margin-top: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.container {
  margin: 2rem auto;
  padding: 0 1rem;
  max-width: 50rem;
}

details {
  padding: 1rem 1rem;
  margin: 6px;
  position: relative;
  background-color: #ffffff;
  transition: all 0.3s;
}

details[open] {
  min-height: 20px;
}

summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

summary:focus {
  outline: none;
}

summary::-webkit-details-marker {
  display: none;
}

.control-wrapper {
  border-radius: 50%;
  line-height: 0;
}

summary .control-wrapper {
  transition: background-color 0.3s, box-shadow 0.3s;
}

summary:focus .control-wrapper {
  transition-duration: 0s;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09), 0 0 0 4px #feac0e;
}

.control-icon-close {
  display: none;
}

details[open] .control-icon-close {
  display: initial;
}

details[open] .control-icon-expand {
  display: none;
}
 </style>

HTML

<style>  #title-text {
	display: none !important;}       body {
  font-size: 100%;
  font-family: "lato", serif;
  color: #363636;
  background-color: #ffffff;
}

a {
  color: #acb7c0;
  text-decoration: none;
  font-family: "lato";
  font-size: 16px;
}

img {
  max-width: 100%;
}

p {
  text-align:justify;
  font-family: "Lato", sans-serif;
}

h2
h5 {
  font-family: "lato", sans-serif;
  font-size: 90px ;
  font-weight: bold;
  
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

/* -------------------------------- 

xnugget info 

-------------------------------- */
.cd-nugget-info {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50px;
  line-height: 50px;
  top: 0;
  left: 0;
}
.cd-nugget-info a {
  position: relative;
  font-size: 14px;
  color: #718ca1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-nugget-info a:hover {
  opacity: 0.8;
}
.cd-nugget-info span {
  vertical-align: middle;
  display: inline-block;
}
.cd-nugget-info span svg {
  display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
  fill: #718ca1;
}

/* -------------------------------- 

Main components 

-------------------------------- */


#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0;
  }
  .cd-timeline-block:first-child {
    margin-top: 0;
  }
  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
}

.cd-timeline-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08),
    0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
  display: block;
  width: 32px;
  height: 32px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -16px;
  margin-top: -16px;
}
.cd-timeline-img.cd-novo {
  background: #363636;
}
.cd-timeline-img.cd-melhoria {
  background: #363636;
}
.cd-timeline-img.cd-manutencao {
  background: #363636;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
  }
  .cssanimations .cd-timeline-img.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;
    -moz-animation: cd-bounce-1 0.6s;
    animation: cd-bounce-1 0.6s;
  }
}

@-webkit-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -moz-transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -moz-transform: scale(1.2);
  }

  100% {
    -moz-transform: scale(1);
  }
}
@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.cd-timeline-content {
  position: relative;
  margin-left: 50px;
  background: #f5f5fa;
  border-radius: 0.25em;
  max-width: 400px;
  padding: 1em;
  box-shadow: 0 3px 0 #363636;
}
.cd-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-content h2 {
  color: #363636;
  font-weight: bold;
}
.cd-timeline-content p,

.cd-timeline-content .cd-date {
  font-size: 13px;
  font-size: 0.8125rem;

}

.cd-timeline-content .cd-date {
  display: inline-block;
}
.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
  float: right;
  padding: 0.8em 1em;
  background: #5596e6;
  color: white;
  border-radius: 0.25em;
  text-decoration: none;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
  background-color: #ffffff;
}
.cd-timeline-content .cd-date {
  float: left;
  padding: 0.8em 0;
  opacity: 0.7;
}
.cd-timeline-content::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid #bfcdd6;
}
@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: bold ;
  }
  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-content .cd-read-more,
  .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    margin-left: 0;
    padding: 1.6em;
    width: 45%;
  }
  .cd-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: #d7e4ed;
  }
  .cd-timeline-content .cd-read-more {
    float: left;
  }
  .cd-timeline-content .cd-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #d7e4ed;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }

  .button-2 {
    padding: 8px 9px;
    font-size: 12px;
    color: #fff;
    background-color: #FDAB0E;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .button-2:hover {
    background-color: #0897E9;
  }
  
  .button-2:active {
    background-color: #FDAB0E;
  }
  
  
  #wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
  .flexWrap {
    display: flex;
    gap: 2px;
    width: 50px;
  }
  #disclaimer {
    font-family: Tahoma;
    color: #333333;
    position: fixed;
    top: 5%;
    right: 5%;
    width: 5%;
  }
  
  
  
  .button-2 {
    padding: 8px 9px;
    font-size: 12px;
      color: #fff;
    background-color: #363636;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .button-2:hover {
    background-color: #feac0e;
  }
  
  .button-2:active {
    background-color: #feac0e;
  }
  
  
  #wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
  }
  .flexWrap {
    display: flex;
    gap: 2px;
    width: 110px;
  }
  #disclaimer {
    font-family: sans-serif;
    color: #333333;
    position: fixed;
    top: 5%;
    right: 5%;
    width: 5%;
  } 

  .badge-primary {
    color: #8686FF;
    background-color: #F3F3FF;
      border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold  }
 
 .badge-secondary{
    color: #ebeef0;
    background-color: #2abe74;
      border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold 
 
 }
 
 .badge-novo {
    color: #fff;
    background-color: #20d691;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold  }
 
 .badge-danger{
    color: #FFFFFF;
    background-color: #FF4057
      border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold }
 
 .badge-manutencao {
    color: #FFF;
    background-color: #FEAC0E;
    border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold;
 }
 
 .badge-melhoria {
    color: #FFF;
    background-color: #6f60f6;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold;
 }
 .badge-light {
    color: #8686FF;
    background-color: #F3F3FF
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold;
 }
 .badge-dark {
    color: #ebeef0;
    background-color: #363636;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold }
  </style>

HTML

<style>

.alert-box {
    color:#555;
    border-radius:5px;
    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
    padding:10px 25px 10px 25px;  
margin: 5px 25px 5px 25px;   
max-width: 100%;
}

.alert-box span {
    font-weight:bold;
    text-transform:uppercase;
}

.error {
    background:#ffecec url('images/error.png') no-repeat 10px 50%;
    border:1px solid #f5aca6;
}
.success {
    background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;
    border:1px solid #a6ca8a;
}
.warning {
    background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
    border:1px solid #f2c779;
}
.notice {
    background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
    border:1px solid #8ed9f6;
}
</style>

Árvore de páginas

Versões comparadas

Versão antiga 1

Nova versão Atual

Chave