Histórico da Página

<style>
    /* Início estilo banner */
  
    .compositiondani-banner {
      position: relative;
      min-height: 220px;
      border-radius: 5px;
      margin-bottom: 5px;
      overflow: hidden;
    }
  
    .compositiondani-banner-image {
      background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/capa-com-fundo-e-sem-icone-TDN21.png");
      background-size: cover;
      min-height: inherit;
      width: 100%;
    }
  
    .compositiondani-banner-overlay {
      min-height: inherit;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      pointer-events: none;
    }
  
    .compositiondani-banner-logo-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, -50%);
    }
  
    .compositiondani-banner-logo {
      width: 350px;
      height: 180px;
      background-image: url("https://totvscrm.com/wp-content/uploads/2023/09/logo-com-descricao-totvsgc.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  
    .compositiondani-banner-title {
      margin-bottom: 10px !important;
      padding: 10px !important;
      background: rgba(0, 0, 0, 0.5) !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      font-size: 12px !important;
      line-height: 1.3 !important;
      max-height: 133px !important;
      font-family: "Roboto", sans-serif !important;
      -webkit-line-clamp: 3 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      color: #ffffff !important;
      position: relative !important;
      margin-top: 130px !important;
      border-radius: 10px !important;
    }
  
    .compositiondani-banner-content {
      position: absolute;
      padding: 30px;
      max-width: 60%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      color: white;
      text-align: center;
    }
  
    .custom-header h1 {
      font-size: 16px;
      background-color: rgba(0, 0, 0, 0.6);
      padding: 10px;
      border-radius: 5px;
      margin: 0;
    }
  
    .negrito-materialize {
      font-weight: bold;
    }
  
    .custom-margin-justified {
      margin: 0 20px;
      text-align: justify;
    }
      /* Final estilo banner */

      #content.page.view {
    padding-right: 0 !important;
}   /* impedir vermelho no nav */

#breadcrumb-section > nav {
    background-color: initial !important;
    box-shadow: none !important;
}

@media only screen and (min-width: 601px) {
    nav, 
    nav .nav-wrapper i, 
    nav a.sidenav-trigger, 
    nav a.sidenav-trigger i {
        height: auto !important;
        line-height: normal !important;
    }
}
/* final vermelho no nav */
   </style>
  
  <header>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/>
  
    <div class="compositiondani-banner">
      <div class="compositiondani-banner-image"></div>
      <div class="compositiondani-banner-overlay"></div>
      <div class="compositiondani-banner-logo-container">
        <div class="compositiondani-banner-logo"></div>
      </div>
      <div class="compositiondani-banner-content">
        <h1 class="compositiondani-banner-title"> 
            REGRASREGLAS DE OCULTAMIENTO OCULTAÇÃOY EEDICIÓN EDIÇÃOCONDICIONALES CONDICIONAISEN NALA TELAPANTALLA DE CLIENTES
  </h1>
  </header>
    </div>
  </div>

  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Inclua o estilo do tema Monokai -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css"/>
  
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />

  <style>
  /* ==============================
    =       CONFIGURAÇÕES GERAIS      =
    =============================== */

* {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

a {
  color: #42526e;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  color: white;
}

li {  font-size: 14px !important;
}

h3 {  font-size: 14px !important;
  font-weight: bold;  

}

h1 {  font-size: 13px !important;
  

}

h2 {  font-size: 15px !important;
  font-weight: bold;  

}

td, th {
    padding: 6px;
}

* p {
    margin-bottom: 0 !important;
}

/* ==============================
      =        ESTILOS DE TÍTULOS       =
      =============================== */

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

#content > div.page-metadata > div {
    float: none !important;
    line-height: normal !important;
    width: auto !important;
    display: none !important; /* ou outra propriedade de display que você deseja usar */
    margin: 0 !important; /* ou outra propriedade de margin que você deseja usar */
}

#section2 > ol > li:nth-child(2) > p {
    margin-bottom: 0;
}



.wiki-content h1,
.wiki-content h2 {
  font-family: "Roboto", sans-serif !important;
  font-size: 13px!important;
 
}

.wiki-content h1 {
  font-size: 13px !important;
}

.wiki-content h2 {
  font-size: 14px !important;
  color: #42526e !important;
  border-bottom: 2px solid #dfe1e5;
   padding-bottom: 5px;
  font-weight: bold;  
}

.custom-heading,
h3.custom-h3 {
  font-size: 16px;
  color: #42526e;
  margin-bottom: 20px;
}

.custom-h1 {
  color: #feac0e;
}

.explanation h2 {
  font-weight: bold;
}

/* ==============================
      =        ESTILOS DE TEXTO         =
      =============================== */

.wiki-content p {
  font-size: 14px !important;
}

.justificado,
.custom-justified {
  text-align: justify;
  margin: 10px 0;
}

/* ==============================
      =       ESTILOS DE LINKS         =
      =============================== */

.wiki-content a,
.wiki-content a:link,
.wiki-content a:visited,
.wiki-content a:focus,
.wiki-content a:active {
  text-decoration: none;
  color: #42526e;
  font-size: 14px;


}

.wiki-content a:hover {
  color: white;
}

/* ==============================
      =       ESTILOS DE CONTAINER     =
      =============================== */



.custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* ==============================
      =       ESTILOS DE CARDS         =
      =============================== */

.card {
  border: 2px solid #9aa1ad;
  padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #f4f5f7;
  color: #42526e;
  overflow-x: hidden;
   top: 0;

  
}



/* ==============================
      =       ESTILOS DE TABS          =
      =============================== */

.tabs {
  background-color: #dfe1e5;
}

.tabs .tab a {
  color: rgb(66, 82, 110);
}

.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {
  color: #6B48FF;
  background-color: transparent;
}

.tabs .tab a:focus {
  background-color: rgba(82, 97, 232, 0.25);
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: rgba(16, 148, 184, 0.24);
}

.tabs .indicator {
  background-color: #6B48FF;
}

.tab-content {
   gap: 0;
  padding: 10px;
}

.tab-content pre {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==============================
      =        ESTILOS DE ÍCONES        =
      =============================== */

.icon-list,
.icon {
  padding-left: 0;
  list-style-type: none;
}

.icon {
  display: inline-block;
  width: 24px;
  vertical-align: middle;
  margin-right: 45px;
  position: relative;
  left: -25px;
}

.item .label i {
  margin-right: 10px;
}

.label b {
color: #42526e;
}

td th {
color: #42526e;
}

/* ==============================
      =    ESTILOS DE COMPONENTES      =
      =============================== */

.collapsible,
.collapsible-header,
.collapsible-body {
  box-shadow: none !important;
}

.faq-question {
  font-weight: bold;
  margin-bottom: 5px;
}

.faq-answer {
  margin-bottom: 20px;
}

.custom-list {
  padding-left: 0;
  margin-left: 1.5em;
}

.custom-list li {
  position: relative;
  padding-left: 1em;
}

ul.custom-list {
  padding-left: 10px;
}

ul.custom-list li {
  position: relative;
  list-style-type: disc;
  padding-left: 30px;
  margin-bottom: 10px;
}

.item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.item:last-child {
  border-bottom: none;
}

.item .label {
  flex: 1;
  font-weight: bold;
}

.item .value {
  flex: 1;
  text-align: right;
}
.item {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item:last-child {
  border-bottom: none;
}

/* Estilos para o label */
.label {
  font-weight: bold;
  display: flex;
  align-items: center;
}

.item .label i {
  margin-right: 10px; /* Adiciona espaço depois dos ícones */
}

/* ==============================
      =     ESTILOS DE IMAGENS         =
      =============================== */

.imagem-responsiva {
  max-width: 100%;
  height: auto;
}

.custom-header-bg img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==============================
      =     ESTILOS DE VÍDEO           =
      =============================== */

#youtube-video-container iframe {
  width: 100%;
  height: auto;
  display: block;
}

.video-container {
    max-width: 800px;
    margin: 0 auto;
  }

.ytp-cued-thumbnail-overlay-image {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* ==============================
      =    OUTROS ESTILOS PERSONALIZADOS =
      =============================== */
.custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.custom-heading {
  font-size: 16px;
  color: #42526e;
  margin: 10px 0;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 5px;
  font-weight: bold;  
}

#indice {
  border-radius: 5px;
  padding: 20px;
  max-width: 100%;
  overflow: hidden;
}

#indice h2 {
  text-align: center;
  margin-bottom: 16px;
}

#indice ul {
  list-style-type: none;
  padding-left: 0;
}

#indice li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

#indice li:last-child {
  border-bottom: none;
}

#indice li:hover {
  background-color: #6B48FF;
  color: white;
}

/* ==============================
  =      ESTILOS DE TABELAS        =
  ============================== */
.custom-grey {
  background-color: #ffffff;
}

.custom-grey th,
.custom-grey td {
  border: 1px solid #362194;
  padding: 10px;
  color:#362194
}

.custom-grey tr:nth-child(even) td {
  background-color: #e6e0f7;
}

.custom-grey tr:nth-child(odd) td {
  background-color: #f4f5f7;
}

.custom-grey th {
  color: #fff;
  background-color: #443391;
}



.custom-grey td {
  font-size: 13px;
}

.custom-grey tr:nth-child(odd) {
  background-color: #e4e4e6;
}

.custom-grey tr:nth-child(even) {
  background-color: #dfdfdf;
}

.custom-alert-warning {
  background-color: #fdf1dc; /* ou qualquer outra cor que preferir */
  color: #5c4225; /* cor do texto */
  border: 1px solid #d6800f; /* adicionando borda da mesma cor que o ícone */
  padding: 10px; /* adicione padding conforme necessário */
 
}

.custom-alert-warning .fas {
  color: #5c4225; /* cor do ícone no alerta de aviso */
  margin-right: 10px; /* espaço extra entre o ícone e o texto */
}

.custom-alert-danger {
  background-color: #ffe7ec; /* ou qualquer outra cor que preferir */
  color: #9e1d3b; /* cor do texto */
  border: 1px solid #eb7893; /* adicionando borda da mesma cor que o ícone */
  padding: 10px; /* adicione padding conforme necessário */
  
}

.custom-alert-danger .fas {
  color: #f34b72; /* cor do ícone no alerta de perigo */
  margin-right: 10px; /* espaço extra entre o ícone e o texto */
}


.alert-secondary-custom {
    background-color: #F2EEFF; /* Cor de fundo do alerta */
    color: #3217a7; /* Cor do texto */
    border: 1px solid #9475f7; /* adicionando borda da mesma cor que o ícone */
  padding: 10px; /* adicione padding conforme necessário */
}

.alert-secondary-custom .fas {
    color: #6B48FF; /* Cor dos ícones FontAwesome */
    margin-right: 10px; /* Espaço extra entre o ícone e o texto */
}


/* ========== FIM DO ESTILO ========= */

  </style>
  

   





  <!-- Tabs e conteúdo das guias -->
  <div class="card">
    <ul class="tabs">
      <li class="tab col s4"><a href="#tab1">DETALHES>DETALLES FUNCIONAIS<FUNCIONALES</a></li>
      <li class="tab col s4"><a href="#tab3">FAQ</a></li>
    </ul>
     <!-- Tab Content -->
 
      <div id="tab1" class="col s12">
        <div class="tab-content">
          <div style="background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;">
            <section id="section1" style="margin-top: 40px;">
               <!-- Tab 70 conteúdo -->
  <!-- Segundo Card -->

    <!-- Primeiro Card -->
      <!-- Primeiro Card -->
  <div class="card">
    <div class="item">
      <span class="label">
        <table border="1">
          <tr>
              <td><i class="fas fa-tags"></i> <b>Produto<b>Producto:</b></td>
              <td>Gestão<td>Gestión de Clientes<clientes</td>
          </tr>
          <tr>
              <td><i class="fas fa-link"></i> <b>Linha<b>Línea de Produtoproducto:</b></td>
              <td>TOTVS CRM</td>
          </tr>
          <tr>
              <td><i class="fas fa-chart-pie"></i> <b>Segmento:</b></td>
              <td>Cross Segmentos</td>
          </tr>
          <tr>
              <td><i class="fas fa-desktop"></i> <b>Módulo:</b></td>
              <td>Personalização</td>
          </tr>
          <tr>
              <td><i class="fas fa-globe"></i> <b>Aplicação<b>Aplicación:</b></td>
              <td>Web/app móvel<móvil</td>
          </tr>
          <tr>
              <td><i class="fas fa-hashtag"></i> <b>Identificador:</b></td>
              <td>
                
                ME260520220840</td>
          </tr>
      </table>
      </span>
    </div>
    </div>
 

      <br>

      <h2 class="custom-heading">
        <i class="fa-solid fa-eye"></i>&nbsp &nbsp VISÃOVISIÓN GERALGENERAL
      </h2>
      <p class="justificado">
        AgoraAhora, en nala telapantalla de cadastroregistro, vocêtiene temla alibertad liberdade de personalizar ala visibilidade
visibilidad y la capacidad para edición   e a editabilidade dosde los campos de acordoacuerdo comcon critérioscriterios específicos, alémademás de poder
        validar as informações inseridas através de regras definidas. Este
        aperfeiçoamento representa uma gestão de dados mais inteligente e eficiente,
        alinhando-se perfeitamente às necessidades e preferências da sua  las informaciones incluidas por medio de reglas definidas. Esta mejora representa una gestión de datos más inteligente y eficiente, alineándose perfectamente a las necesidades y preferencias de su empresa.
        
        
        
      </p>
<br>

    <h2 class="custom-heading">
      <i class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO
    </h2>
    <p class="justificado">
O El principal objetivo destade esta atualizaçãoactualización ées otimizaroptimizar ala gestãogestión de clientes, proporcionando umauna telapantalla maismás adaptáveladaptable ey dinâmicadinámica que responde de formamanera maismás alinhadaalineada àsa suassus necessidadesnecesidades específicas.
    </p>
    <br>

  <!-- ... (seu conteúdo existente) ... -->

               <h2 class="custom-heading">
                <i class="fa-solid fa-book"></i> &nbsp ANTES DE COMEÇARCOMENZAR
            </h2>
            <h3>Requisitos</h3>
            <p>Para aproveitaraprovechar aoal máximo este novonuevo recurso, recomendamos que esteja
                familiarizado com oesté familiarizado con el módulo PersonalizaçãoPersonalización.</p> <br>

                <h3> Atributos padrões do formulário</h3>

                <p>A maioria dos atributos do formulário são suportados para as funções, porém,
 Atributos estándar del formulario</h3>

                <p>La mayoría de los atributos del formulario son compatibles con las funciones, sin embargo, existemexisten algumasalgunas exceçõesexcepciones que foramse detalhadasdetalla logoa abaixocontinuación. </p> <br>

                <table class="striped custom-grey">
                  <thead>
                  <tr>
                    <th>Nome<th>Nombre Técnico<técnico</th>
                    <th>Nome<th>Nombre emen Tela<pantalla</th>
                    <th>Tipo dode Dado<dato</th>
                    <th>É<th>¿Es Suportadocompatible?</th>
                  </tr>
                  <tr>
                    <td>active</td>
                    <td>Ativo<<td>Activo</td>
                    <td>Booleano</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>name</td>
                    <td>Nome<<td>Nombre</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>tradingName</td>
                    <td>Apelido<td>Alias/NomeNombre Fantasia<fantasía</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>code</td>
                    <td>Código</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>customerPersonType</td>
                    <td>Tipo de Pessoa<persona</td>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>birthday</td>
                    <td>Data<td>Fecha de Nascimentonacimiento/DataFecha de Fundação<fundación</td>
                    <td>Data<<td>Fecha</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>parentAccount</td>
                    <td>Conta<td>Cuenta Pai<principal</td>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>contacts</td>
                    <td>Contatos<<td>Contactos</td>
                    <td>Relacionamento<td>Relación Multivalorado<multivalorada</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>professionalId</td>
                    <td>Responsável<<td>Responsable</td>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>phones</td>
                    <td>Telefone<<td>Teléfono</td>
                    <td>Indefinido</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>emails</td>
                    <td>E-mail</td>
                    <td>Indefinido</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>leadSituation</td>
                    <td>Tipo</td>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>leadOrigin</td>
                    <td>Origem<<td>Origen</td>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>location</td>
                    <td>Ramos de Atividade<actividad</td>
                    <td>Relacionamento<td>Relación Multivalorado<multivalorada</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>customerGroups</td>
                    <td>Grupos</td>
                    <td>Relacionamento<td>Relación Multivalorado<multivalorada</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>customerClassification</td>
                    <td>Classificação<<td>Clasificación</td>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>companies</td>
                    <td>Empresas</td>
                    <td>Relacionamento<td>Relación Multivalorado<multivalorada</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>note</td>
                    <td>Observação<<td>Observación</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>addresses</td>
                    <td>Endereços<<td>Direcciones</td>
                    <td>Indefinido</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>facebook</td>
                    <td>Facebook</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>instagram</td>
                    <td>Instagram</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>twitter</td>
                    <td>Twitter</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>linkedin</td>
                    <td>LinkedIn</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>website</td>
                    <td>Website</td>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                </table>

                <br>
                <h3>Atributos personalizados</h3> 
<p>Antes de começarcomenzar a construir regrasreglas utilizando atributos personalizados, ées importante
 verificar conferirsi selos os tipos de atributos selecionadosseleccionados sãoson permitidos. Consulte ala siguiente lista abaixo para identificar quais
 qué tipos de campos sãoson suportadoscompatibles:</p><br>

                <table class="striped custom-grey">
                  <thead>
                  <tr>
                    <th>Tipo dodel Atributoatributo Personalizado<personalizado</th>
                    <th>É<th>¿Es Suportadocompatible?</th>
                  </tr>
                  <tr>
                    <td>Booleano</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>Fórmula</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>Indefinido</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>Lista de Opções<opciones</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>Número</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                  <tr>
                    <td>Relacionamento<<td>Relación</td>
                    <td>Sim<td>Sí *</td>
                  </tr>
                  <tr>
                    <td>Relacionamento<td>Relación Remoto<remota</td>
                    <td>Não<<td>No</td>
                  </tr>
                  <tr>
                    <td>SubObjeto<<td>Subobjeto</td>
                    <td>Não<td>No **</td>
                  </tr>
                  <tr>
                    <td>Texto</td>
                    <td>Sim<<td>Sí</td>
                  </tr>
                </table>
<br>
                
<div class="alert custom-alert-warning" role="alert" style="padding-left: 20px;">
  <i class="fas fa-info-circle"></i> 
   Los Os campos de relacionamentorelación multivalorados no nãoson sãocompatibles suportadosen noel momento ey es éobligatorio obrigatóriotener terpor aolo menos umun campo configurado para exibiçãoexhibición. ALa criaçãocreación de subobjetos emen objetos padrõesestándar nãono está disponíveldisponible atualmenteactualmente.
</div>
              
                
          </section>

          <section id="section2" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALHESDETALLES FUNCIONAIS<FUNCIONALES</h2>
            <h3>Funções<h3>Funciones </h3>
            <ol>
              <li>
                <p><b>Regras<p><b>Reglas de Ocultaçãoocultamiento ey Ediçãoedición Condicional<condicional</b>:</p>
                <ul class="browser-default">
                  <li>Habilita ala definiçãodefinición de critérioscriterios específicos para ala exibiçãoexhibición ouu ocultaçãoocultamiento de
                    campos en nala telapantalla, proporcionando umauna visãovisión maismás focadaenfocada ey relevante.
                    </li>
                </ul>
              </li>
              <li>
                <p><b>Validação<p><b>Validación de Camposcampos de Cadastro<registro</b>:</p>
                <ul class="browser-default">
                  <li>Assegura<li>Garantiza que oslos dadosdatos inseridosincluidos estejamestén corretoscorrectos ey consistentes, minimizando
                    erroserrores ey otimizando processosprocesos subsequentesposteriorees.
                    </li>
                </ul>
              </li>
                           <li>
                <p><b>Opção<p><b>Opción de Cadastroregistro de Mensagemmensaje Condicional<condicional</b>:</p>
                <ul class="browser-default">
                  <li>Permite oel registro de mensagensmensajes customizadaspersonalizados que serãose apresentadasmostrarán quandosi
                    condiçõeslas condiciones atribuídasatribuidas foremsean atendidas ouo nãono, auxiliandoayudando en nala orientaçãoorientación ey
                    notificaçãonotificación a aoslos usuários durante oel processoproceso de cadastroregistro ouo ediçãoedición de informaçõesinformaciones
                    de cliente.</li>
            </ol>
            
          </section>
         
      
          <section id="section3" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>&nbsp COMO¿CÓMO USARUTILIZAR?</h2>
            <h3> PassoPaso a Passo<paso</h3>

            <p><b>Para<p><b>Cómo utilizar ala regraregla de exibiçãoexhibición/ediçãoedición condicional:</b> </p>
            <br>

            <ol>
                <li>
                  <p>
                    <b>Inicie<b>Comience ala Personalização<personalización</b>: AcesseAcceda oal módulo de
                    personalizaçãopersonalización.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Cómo acceder <b>Acessandoa Funcionalidades</b>: VáVaya atéhasta ala seçãosección
                    "Funcionalidades".
                  </p>
                </li>
                <li>
                  <p>
                    <b>Iniciando<b>Cómo iniciar ala Edição<Edición</b>: Clique no ícone Para editar haga clic en el ícono de lápis para editar.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Editando<b>Cómo editar oel Formulário<Formulario</b>: Noen el card do formulárioformulario, haga cliqueclic emen
                    'editar' ey selecioneseleccione oel campo ouo ala seçãosección que desejadesea modificar.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Cómo <b>Definindodefinir ConfiguraçõesConfiguraciones Dinâmicas<dinámicas</b>: EscolhaSeleccione ala opçãoopción
                    "dinâmicodinámico" para ajustar aslas configuraçõesconfiguraciones de visibilidadevisibilidad ouo ediçãoedición.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Adicionando<b>Cómo incluir Regras<reglas</b>: CliqueHaga clic emen 'adicionarincluir regraregla' ey
                    descrevadescriba ala regraregla que desejadesea implementar noen el campo 'DescriçãoDescripción'.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Criando<b>Cómo crear ala ExpressãoExpresión Lógica<lógica</b>: NoEn el campo "ExpressãoExpresión",
                    estabeleçaestablezca aslas condiçõescondiciones para que asse açõesejecuten sejamlas executadasacciones.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Estabelecendo<b>Cómo establecer Ações<acciones</b>: EmEn 'AçõesAcciones', selecioneseleccione ala açãoacción
                    desejada (como "ocultar" ouo "exibirexhibir") e identifique oel elemento alvoobjetivo.
                  </p>
                </li>
                <li>
                  <p>
                    <b>Finalizando<<b>Cómo finalizar</b>: AdicioneIncluya más maisacciones açõessi sefuera necessárionecesario ey depoisdespués
                    cliquehaga clic emen 'salvargrabar' para finalizar aslas alteraçõesmodificaciones.
                  </p>
                </li>
              </ol>
              <br>

              <p>
                <video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;">
                  <source src="https://totvscrm.com/wp-content/uploads/2023/09/condicionalcliente.mp4" type="video/mp4">
                </video>
              </p>
              
            
            <br />


            <h3>Regra de Validaçãovalidación en noel formulárioformulario "Clientes"</h3>
            <ol>
              <li>
                <p><b>Início<p><b>Comienzo de dala Configuração<configuración</b>:</p>
                <ul>
                  <li>Abra oel módulo de objetos ey selecioneseleccione "Customers".</li>
                </ul>
              </li>
              <li>
                <p><b>Edição<<p><b>Edición</b>:</p>
                <ul>
                  <li>Clique no ícone<li>Haga clic en el ícono de lápis para iniciarcomenzar ala ediçãoedición.</li>
                </ul>
              </li>
              <li>
                <p><b>Acessando<p><b>Cómo acceder asa Regras<Reglas</b>:</p>
                <ul>
                  <li>Na<li>En la abasolapa "REGRASREGLAS", cliquehaga clic emen "AdicionarIncluir".</li>
                  <li>
                    EscolhaSeleccione "RegraRegla Avançadaavanzada" para configurar usandoutilizando expressõesexpresiones complexascomplejas.
                  </li>
                </ul>
              </li>
              <li>
                <p><b>Configuração<p><b>Configuración detallada Detalhadade dala Regra<regla</b>:</p>
                <ul>
                  <li>En <li>Noel campo "DescriçãoDescripción", explique brevemente ala regraregla.</li>
                  <li>
                    Utilize "ObservaçãoObservación" para fornecerofrecer detalhesdetalles adicionaisadicionales sobre ala regraregla.
                  </li>
                </ul>
              </li>
              <li>
                <p><b>Estabelecendo<p><b>Cómo establecer ala Expressão<expresión</b>:</p>
                <ul>
                  <li>
                    En Noel campo "ExpressãoExpresión", determine aslas condiçõescondiciones necessáriasnecesarias para ativaractivar aslas
                    açõesacciones programadas.
                  </li>
                </ul>
              </li>
              <li>
                <p><b>Configuração<p><b>Configuración dadel Mensagemmensaje de Alerta<alerta</b>:</p>
                <ul>
                  <li>
                    SelecioneSeleccione quandocuándo adebe mensagemmostrarse deveel ser mostradamensaje: sesi aslas condiçõescondiciones foramfueron
                    atendidas ouo nãono.
                  </li>
                  <li>
                    EscrevaEscriba oel texto que se serámostrará en exibidola napantalla telaen noel campo de texto
                    correspondentecorrespondiente.
                  </li>
                  <li>
                    Especifique ondedónde ase mensagemmostrará seráel exibida: no topo da tela ou abaixo domensaje: en la parte superior de la pantalla o debajo del
                    campo correspondentecorrespondiente.
                  </li>
                </ul>
              </li>
              <li>
                <p><b>Finalização<<p><b>Finalización</b>:</p>
                <ul>
                  <li>
                    ApósDespués de configurar todos oslos detalhesdetalles, haga cliqueclic emen "SalvarGrabar" para aplicar aslas
                    alteraçõesmodificacionees feitasrealizadas.
                  </li>
                </ul>
              </li>
            </ol>
            
          <br /> 
       
          <p>
            <video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;">
              <source src="https://totvscrm.com/wp-content/uploads/2023/09/validacaocampo.mp4" type="video/mp4">
            </video>
          </p>

          </section>

          <section id="section4" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEXEMPLOnbspEJEMPLO PRÁTICO<PRÁCTICO</h2>
            <h3>Caso de uso</h3>
            

            <p>
              <b>Cenário:</b>
         utilización</h3>
     <p>Maria lida diariamente com uma grande quantidade de dados de clientes, buscando constante otimização e fiabilidade na base de dados. 
                </p>
              <p>
              <br><b>Escenario:</b>
              
<p>Maria trabaja diariamente con una gran cantidad de datos de clientes, buscando constantemente optimización <b>Desafio Antigo:</b>
      y confiabilidad en la base de datos. 
        <p>Antes da atualização do TOTVS CRM, Maria enfrentava desafios</p>
              
   na gestão de dados. O processo de entrada de dados
  <br>
              era
 inconsistente, com falta de validação de preenchimento, o que
     <b>Desafío antiguo:</b>
          levava a erros. A incapacidade<p>Antes de personalizarla a
actualización del TOTVS CRM, María enfrentaba desafíos en la gestión de datos. El proceso de entrada visibilidadede edatos editabilidadeera dosinconsistente, camposcon dofalta formuláriode tambémvalidación limitavade a
cumplimentación,                eficiência do processo, forçando a equipe a navegar através de campos
                irrelevantes e desperdiçar tempolo cual llevaba a errores. La incapacidad de personalizar la visibilidad y capacidad para edición de los campos del formulario también limitaba la eficiencia del proceso, forzando al equipo a navegar por medio de campos irrelevantes y desperdiciar tiempo precioso.
                
                </p>
              
              <br>
              
              <b>Solução<b>Solución Atualizadaactualizada:</b>
              <p>Agora<p>Ahora, elesestos podempueden nãono apenassolamente personalizar ala visibilidadevisibilidad ey ala editabilidadecapacidad dos
para edición               de los campos, massino tambémtambién implementar regrasreglas condicionaiscondicionales que validam o preenchimento
                dos campos no momento do preenchimento do formulário, garantindo dados mais
                precisos e confiáveisvalidan la cumplimentación de los campos en el momento de la cumplimentación del formulario, garantizando datos más precisos y confiables.</p>
              
              <br>
              
              
              </p>
          </section>
      
         
          </div>
          
            <!-- Tab 30 fim -->
          
            <!-- Tab 30 fim -->
          
          </div>
        </div>
    


    

    <div id="tab3" class="col s12">
      <div class="tab-content">
        <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
              <!-- Primeira coluna do conteúdo da guia 2 -->
              <div class="container">
                <h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTASPREGUNTAS FREQUENTES<FRECUENTES</h2>
                <ul class="collapsible">
                  <li>
                    <div class="collapsible-header"><i class="material-icons">question_answer</i>Existei>¿Existe una umalimitación limitaçãoen noel número de regrasreglas condicionaiscondicionales que podempueden ser criadascrearse?</div>
                    <div class="collapsible-body"><span>Não><span>No, nosin entantoembargo, ées importante notarobservar que ala criaçãocreación de umun grandegran número de regrasreglas podepuede complicar ala gestãogestión ey potencialmente desacelerar oel sistema. 
                      </span></div>
                </li> 
                <li>
                  <div class="collapsible-header"><i class="material-icons">question_answer</i>Osi>¿Los campos que se ocultaron forampor ocultadosmedio atravésde dala personalizaçãopersonalización sãoson completamente retirados removidosde dola bancobase de dadosdatos?</div>
                  <div class="collapsible-body"><span>Não><span>No, nãono son sãoretirados removidosde dola bancobase de dadosdatos; elesestos sãosolamente apenasson ocultados dade la interfaceinterfaz dodel usuáriousuario para simplificar ala entrada de dadosdatos ey ala visualizaçãovisualización. 
                    </span></div>
              </li> 

              <li>
                <div class="collapsible-header"><i class="material-icons">question_answer</i>Quaisi>¿Cuáles sãoson oslos operadores disponíveisdisponibles para usarutilizar emen umauna expressãoexpresión?</div>
                <div class="collapsible-body"><span><h3>Operadores Matemáticosmatemáticos:</h3> <br>
                  <ol>
                    <li><b>"+" (SomaSuma)</b></li>
                    <li><b>"-" (SubtraçãoSustracción)</b></li>
                    <li><b>"*" (MultiplicaçãoMultiplicación)</b></li>
                    <li><b>"/" (DivisãoDivisión)</b></li>
                    <li>
                      <b>"()" (ParêntesesParéntesis) -</b> UsadoUtilizado para definir ala ordemorden de operaçõesoperaciones
                      emen umauna expressãoexpresión.
                    </li>
                  </ol>

                  <br>

                  <h3>Operadores Lógicoslógicos:</h3>
<br>
                  <ol>
                    <li>
                      <b>"AND" (EY) -</b> RetornaDevuelve verdadeiroverdadero sesi ambas asexpresiones expressões foremfueran
                      verdadeirasverdaderas.
                    </li>
                    <li>
                      <b>"OR" (OUO) -</b> RetornaDevuelve verdadero verdadeirosi sepor pelolo menos una umade daslas
                      expressõesexpresiones forfuera verdadeiraverdadera.
                    </li>
                    <li>
                      <b>"!=" (Diferente) -</b> RetornaDevuelve verdadeiroverdadero sesi oslos valores
                      comparados foremfueran diferentes.
                    </li>
                    <li>
                      <b>"==" (Igual) -</b> RetornaDevuelve verdadeiroverdadero sesi oslos valores comparados
                      foremfueran iguaisiguales.
                    </li>
                    <li>
                      <b>">" (MaiorMayor que) -</b> RetornaDevuelve verdadeiroverdadero sesi oel valor de àla iz
                      esquerdaquierda forfuera maior que oel valor àde la direitaderecha.
                    </li>
                    <li>
                      <b>"<" (Menor que) -</b> RetornaDevuelve verdadeiroverdadero sesi oel valor àde la iz
                      esquerdaquierda forfuera menor que oel valor de àla direitaderecha.
                    </li>
                    <li>
                      <b>">=" (MaiorMayor ouo igual a) -</b> RetornaDevuelve verdadeiroverdadero sesi oel valor
                      de àla esquerdaizquierda forfuera maiormayor ouo igual aoque el valor àde la direitaderecha.
                    </li>
                    <li>
                      <b>"<=" (Menor ouo igual a) -</b> RetornaDevuelve verdadeiroverdadero sesi oel valor
                      àde la esquerdaizquierda forfuera menor ouo igual aoque el valor àde la direitadercha.
                    </li>
                  </ol>
                  <br>
                  <h3>Funções<h3>Funciones de Utilidadeutilidad:</h3>
                  <br>
                  <ol>
                    <li>
                      <b>"IN" -</b> Verifica sesi umun valor está presente emen umauna lista de
                      valores.
                    </li>
                    <li>
                      <b>"IS_EMPTY" -</b> Verifica sesi umun valor está vaziovacío, ey retornadevuelve
                      verdadeiroverdadero sesi estiverestuviera vaziovacío.
                    </li>
                    <li><b>"IS_NUMBER" -</b> Verifica sesi umun valor ées umun número.</li>
                    <li>
                      <b>"COALESCE" -</b> RetornaDevuelve oel primeiroprimeir valor nãono nulo emen umauna lista
                      de valores (essaesta funçãofunción nãono foifue detalhadadetallada noen seusu texto, maspero ées umauna explicaçãoexplicación
                      general geralde dolo que elaesta fazrealiza).
                    </li>
                  </ol>
                  
                  </span></div>
            </li> 


                
                    <!-- Adicione mais perguntas e respostas aqui conforme necessário -->

                </ul>
                
            </div>

            
                            <!-- Primeira coluna do conteúdo da guia 2 -->

            
            </div>
             
      </div>
  </div>

    
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  // Inicialização das tabs
  document.addEventListener("DOMContentLoaded", function () {
    var tabs = document.querySelectorAll(".tabs");
    M.Tabs.init(tabs);
  });
</script>

<script>
  const items = document.querySelectorAll("#indice li");

  items.forEach(item => {
      item.addEventListener('click', (e) => {
          const targetId = e.target.getAttribute('data-target');
          const targetElement = document.getElementById(targetId);
          window.scrollTo({
              top: targetElement.offsetTop - 10,
              behavior: "smooth"
          });
      });
  });
</script>

<script src="https://kit.fontawesome.com/c97d4c197a.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 


<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> 

<script>hljs.highlightAll();</script>
  


<script src="scripts.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.collapsible');
      var instances = M.Collapsible.init(elems);
  });
</script>

 <!-- ... (conteudo video) ... -->
 <script src="https://www.youtube.com/iframe_api"></script>

 <script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '315',
      width: '560',
      videoId: 'FvsuBOvyyro',
      playerVars: {
        start: 1238, // 20:38 em segundos
        end: 1356   // 22:36 em segundos
      }
    });
  }
</script>