/* =========================================================
   TOOLKIT — SIDEBAR DA DOCUMENTAÇÃO
   Arquivo: public_html/css/sidebar.css

   VERSÃO COM ITEM ATIVO DESTACADO
========================================================= */


/* =========================================================
   VARIÁVEIS
========================================================= */

:root{

  --sidebar-width:340px;

  --sidebar-black:#000000;
  --sidebar-white:#ffffff;

  --sidebar-text:#18181B;
  --sidebar-muted:#74747C;

  --sidebar-line:#E6E6E9;
  --sidebar-line-strong:#D3D3D8;

  --sidebar-hover:#F7F7F8;

  --sidebar-pink:#F58CF2;
  --sidebar-lilac:#BC8AF0;
  --sidebar-blue:#A9C8EF;
  --sidebar-mint:#93D0C6;

  /* CORES DO ITEM ATIVO */

  --sidebar-active-bg:
    linear-gradient(
      90deg,
      rgba(245,140,242,.28) 0%,
      rgba(188,138,240,.22) 42%,
      rgba(169,200,239,.28) 100%
    );

  --sidebar-active-soft:
    linear-gradient(
      90deg,
      rgba(245,140,242,.10),
      rgba(188,138,240,.08),
      rgba(169,200,239,.12)
    );

}


/* =========================================================
   COLUNA DA SIDEBAR
========================================================= */

.app{

  grid-template-columns:
    var(--sidebar-width)
    minmax(0,1fr);

}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar{

  position:sticky;

  top:0;

  width:100%;
  height:100vh;

  padding:
    24px
    20px
    20px;

  display:flex;

  flex-direction:column;

  background:
    var(--sidebar-white);

  border-right:
    1px solid
    var(--sidebar-line);

  overflow-y:auto;
  overflow-x:hidden;

  z-index:50;

}


/* =========================================================
   SCROLLBAR
========================================================= */

.sidebar::-webkit-scrollbar{

  width:5px;

}


.sidebar::-webkit-scrollbar-track{

  background:transparent;

}


.sidebar::-webkit-scrollbar-thumb{

  background:#D7D7DB;

  border-radius:20px;

}


.sidebar{

  scrollbar-width:thin;

  scrollbar-color:
    #D7D7DB
    transparent;

}


/* =========================================================
   BRAND / LOGO
========================================================= */

.sidebar-brand{

  min-height:72px;

  padding:
    0
    4px
    20px;

  display:flex;

  align-items:flex-end;

  justify-content:
    space-between;

  gap:18px;

  border-bottom:
    1px solid
    var(--sidebar-black);

}


.sidebar-brand-name{

  margin:0;

  font-size:36px;

  font-weight:900;

  line-height:.86;

  letter-spacing:-.075em;

  color:
    var(--sidebar-black);

}


.sidebar-brand-description{

  max-width:95px;

  font-size:7px;

  font-weight:800;

  line-height:1.35;

  text-align:right;

  text-transform:uppercase;

  letter-spacing:.14em;

  color:
    var(--sidebar-black);

}


/* =========================================================
   TÍTULO DA ÁREA
========================================================= */

.sidebar-area-title{

  margin:
    27px
    5px
    12px;

  font-size:10px;

  font-weight:900;

  line-height:1.3;

  letter-spacing:.15em;

  text-transform:uppercase;

  color:
    var(--sidebar-black);

}


/* =========================================================
   NAVEGAÇÃO
========================================================= */

.sidebar-nav{

  width:100%;

  display:flex;

  flex-direction:column;

  gap:8px;

}


/* =========================================================
   GRUPOS PRINCIPAIS
========================================================= */

.sidebar-group{

  width:100%;

  border-radius:10px;

}


/* =========================================================
   BOTÃO DO GRUPO
========================================================= */

.sidebar-group-button{

  width:100%;

  min-height:43px;

  padding:
    7px
    9px;

  border:0;

  border-radius:9px;

  background:transparent;

  display:grid;

  grid-template-columns:
    26px
    minmax(0,1fr)
    18px;

  align-items:center;

  gap:8px;

  color:
    var(--sidebar-text);

  cursor:pointer;

  text-align:left;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;

}


.sidebar-group-button:hover{

  background:
    var(--sidebar-hover);

}


/* =========================================================
   GRUPO QUE POSSUI UM ITEM SELECIONADO
========================================================= */

.sidebar-group:has(.active)
>
.sidebar-group-button{

  background:
    var(--sidebar-active-soft);

  color:
    var(--sidebar-black);

}


.sidebar-group:has(.active)
>
.sidebar-group-button
.sidebar-group-name{

  font-weight:900;

}


.sidebar-group:has(.active)
>
.sidebar-group-button
.sidebar-group-icon{

  border-color:
    var(--sidebar-lilac);

  background:
    linear-gradient(
      135deg,
      rgba(245,140,242,.35),
      rgba(169,200,239,.35)
    );

}


/* =========================================================
   FOCO
========================================================= */

.sidebar-group-button:focus-visible{

  outline:
    2px solid
    var(--sidebar-lilac);

  outline-offset:2px;

}


/* =========================================================
   ÍCONE DO GRUPO
========================================================= */

.sidebar-group-icon{

  width:24px;
  height:24px;

  display:grid;

  place-items:center;

  border:
    1px solid
    var(--sidebar-black);

  border-radius:6px;

  background:
    var(--sidebar-white);

  font-size:11px;

  line-height:1;

  flex-shrink:0;

  transition:
    background .18s ease,
    border-color .18s ease;

}


/* =========================================================
   NOME DO GRUPO
========================================================= */

.sidebar-group-name{

  min-width:0;

  font-size:13px;

  font-weight:800;

  line-height:1.3;

  white-space:normal;

  overflow-wrap:break-word;

}


/* =========================================================
   SETA
========================================================= */

.sidebar-group-chevron{

  font-size:12px;

  color:#94949A;

  text-align:center;

  transition:
    transform .2s ease,
    color .18s ease;

}


.sidebar-group.is-open
.sidebar-group-chevron{

  transform:
    rotate(180deg);

}


.sidebar-group:has(.active)
.sidebar-group-chevron{

  color:
    var(--sidebar-black);

}


/* =========================================================
   CONTEÚDO DOS GRUPOS
========================================================= */

.sidebar-group-content{

  display:none;

  position:relative;

  margin:
    2px
    0
    2px
    12px;

  padding:
    4px
    0
    5px
    17px;

  border-left:
    1px solid
    var(--sidebar-line-strong);

}


.sidebar-group.is-open
.sidebar-group-content{

  display:block;

}


/* =========================================================
   LINKS HOME / DASHBOARD
========================================================= */

.sidebar-link{

  position:relative;

  width:100%;

  min-height:38px;

  padding:
    8px
    11px;

  display:flex;

  align-items:center;

  border-radius:
    0
    9px
    9px
    0;

  color:
    var(--sidebar-muted);

  font-size:13px;

  font-weight:500;

  line-height:1.35;

  text-decoration:none;

  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;

}


.sidebar-link:hover{

  color:
    var(--sidebar-black);

  background:
    var(--sidebar-hover);

  transform:
    translateX(2px);

}


/* =========================================================
   HOME / DASHBOARD ATIVO
========================================================= */

.sidebar-link.active{

  color:
    var(--sidebar-black);

  font-weight:900;

  background:
    var(--sidebar-active-bg);

  box-shadow:
    inset 0 0 0 1px
    rgba(188,138,240,.12);

}


.sidebar-link.active::before{

  content:"";

  position:absolute;

  left:-18px;

  top:6px;

  bottom:6px;

  width:4px;

  border-radius:
    0
    5px
    5px
    0;

  background:
    linear-gradient(
      180deg,
      var(--sidebar-pink),
      var(--sidebar-lilac),
      #6FA2EC
    );

}


/* =========================================================
   INDICADOR DO ITEM ATIVO
========================================================= */

.sidebar-link.active::after{

  content:"";

  width:7px;
  height:7px;

  margin-left:auto;

  border-radius:50%;

  background:
    var(--sidebar-lilac);

  box-shadow:
    0 0 0 3px
    rgba(188,138,240,.14);

}


/* =========================================================
   SUBGRUPO
========================================================= */

.sidebar-subgroup{

  margin-top:4px;

  padding-top:2px;

}


/* =========================================================
   TELA DE ATENDIMENTO
   LINK CLICÁVEL
========================================================= */

.sidebar-subgroup-title{

  position:relative;

  min-height:42px;

  padding:
    7px
    8px;

  display:grid;

  grid-template-columns:
    24px
    minmax(0,1fr);

  align-items:center;

  gap:8px;

  border-radius:8px;

  color:
    var(--sidebar-text);

  font-size:13px;

  font-weight:800;

  line-height:1.25;

  text-decoration:none;

  cursor:pointer;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;

}


.sidebar-subgroup-title:hover{

  color:
    var(--sidebar-black);

  background:
    var(--sidebar-hover);

  transform:
    translateX(2px);

}


/* =========================================================
   TELA DE ATENDIMENTO ATIVA
========================================================= */

.sidebar-subgroup-title.active{

  color:
    var(--sidebar-black);

  font-weight:900;

  background:
    var(--sidebar-active-bg);

  box-shadow:
    inset 0 0 0 1px
    rgba(188,138,240,.14);

}


.sidebar-subgroup-title.active::before{

  content:"";

  position:absolute;

  left:-18px;

  top:7px;

  bottom:7px;

  width:4px;

  border-radius:
    0
    5px
    5px
    0;

  background:
    linear-gradient(
      180deg,
      var(--sidebar-pink),
      var(--sidebar-lilac),
      #6FA2EC
    );

}


/* =========================================================
   ÍCONE TELA DE ATENDIMENTO
========================================================= */

.sidebar-subgroup-icon{

  width:22px;
  height:22px;

  display:grid;

  place-items:center;

  border-radius:6px;

  background:
    linear-gradient(
      135deg,
      rgba(245,140,242,.16),
      rgba(169,200,239,.22)
    );

  font-size:10px;

  line-height:1;

  transition:
    background .18s ease,
    transform .18s ease;

}


.sidebar-subgroup-title.active
.sidebar-subgroup-icon{

  background:
    linear-gradient(
      135deg,
      rgba(245,140,242,.50),
      rgba(169,200,239,.55)
    );

}


/* =========================================================
   ITENS FILHOS
========================================================= */

.sidebar-subitems{

  position:relative;

  margin:
    3px
    0
    0
    11px;

  padding:
    4px
    0
    4px
    15px;

  display:flex;

  flex-direction:column;

  gap:3px;

  border-left:
    1px solid
    #E1E1E5;

}


/* =========================================================
   ITEM FILHO
========================================================= */

.sidebar-subitem{

  position:relative;

  display:block;

  width:100%;

  min-height:36px;

  padding:
    8px
    12px;

  border-radius:
    0
    8px
    8px
    0;

  color:
    var(--sidebar-muted);

  font-size:12px;

  font-weight:500;

  line-height:1.35;

  white-space:normal;

  overflow-wrap:anywhere;

  word-break:normal;

  text-decoration:none;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;

}


.sidebar-subitem:hover{

  color:
    var(--sidebar-black);

  background:
    var(--sidebar-hover);

  transform:
    translateX(2px);

}


/* =========================================================
   ITEM FILHO SELECIONADO
========================================================= */

.sidebar-subitem.active{

  color:
    var(--sidebar-black);

  font-weight:900;

  background:
    var(--sidebar-active-bg);

  box-shadow:
    inset 0 0 0 1px
    rgba(188,138,240,.12);

  transform:
    translateX(2px);

}


/* BARRA COLORIDA */

.sidebar-subitem.active::before{

  content:"";

  position:absolute;

  left:-16px;

  top:6px;

  bottom:6px;

  width:4px;

  border-radius:
    0
    5px
    5px
    0;

  background:
    linear-gradient(
      180deg,
      var(--sidebar-pink),
      var(--sidebar-lilac),
      #6FA2EC
    );

}


/* BOLINHA INDICADORA */

.sidebar-subitem.active::after{

  content:"";

  position:absolute;

  right:10px;

  top:50%;

  width:7px;
  height:7px;

  transform:
    translateY(-50%);

  border-radius:50%;

  background:
    var(--sidebar-lilac);

  box-shadow:
    0 0 0 3px
    rgba(188,138,240,.14);

}


/* ESPAÇO PARA BOLINHA */

.sidebar-subitem.active{

  padding-right:28px;

}


/* =========================================================
   QUANDO UM FILHO ESTÁ ATIVO
   TELA DE ATENDIMENTO RECEBE DESTAQUE SECUNDÁRIO
========================================================= */

.sidebar-subgroup:has(.sidebar-subitem.active)
.sidebar-subgroup-title{

  background:
    linear-gradient(
      90deg,
      rgba(245,140,242,.08),
      rgba(169,200,239,.10)
    );

  color:
    var(--sidebar-black);

}


/* NÃO SOBRESCREVER SE A PRÓPRIA TELA ESTIVER ATIVA */

.sidebar-subgroup:has(.sidebar-subitem.active)
.sidebar-subgroup-title.active{

  background:
    var(--sidebar-active-bg);

}


/* =========================================================
   FOCO DOS LINKS
========================================================= */

.sidebar-link:focus-visible,
.sidebar-subgroup-title:focus-visible,
.sidebar-subitem:focus-visible{

  outline:
    2px solid
    var(--sidebar-lilac);

  outline-offset:2px;

}


/* =========================================================
   CARD TOOLKIT DIGITAL
========================================================= */

.sidebar-footer{

  position:relative;

  min-height:82px;

  margin-top:auto;

  padding:14px;

  display:flex;

  align-items:flex-end;

  border:
    1px solid
    var(--sidebar-black);

  overflow:hidden;

  flex-shrink:0;

}


.sidebar-footer::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    repeating-linear-gradient(
      0deg,
      transparent 0 12px,
      rgba(255,255,255,.35) 12px 13px
    ),

    repeating-linear-gradient(
      90deg,
      transparent 0 12px,
      rgba(255,255,255,.35) 12px 13px
    ),

    radial-gradient(
      circle at 0% 0%,
      #F3A4ED,
      transparent 38%
    ),

    radial-gradient(
      circle at 100% 30%,
      #B9D2F0,
      transparent 48%
    ),

    radial-gradient(
      circle at 35% 100%,
      #A7D7CE,
      transparent 40%
    ),

    #fff;

}


.sidebar-footer span{

  position:relative;

  z-index:2;

  font-size:10px;

  font-weight:900;

  letter-spacing:.02em;

  text-transform:uppercase;

}


/* =========================================================
   MOBILE TAP
========================================================= */

.sidebar-group-button,
.sidebar-link,
.sidebar-subgroup-title,
.sidebar-subitem{

  -webkit-tap-highlight-color:
    transparent;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

  :root{

    --sidebar-width:300px;

  }


  .sidebar{

    padding:
      22px
      17px
      18px;

  }


  .sidebar-brand-name{

    font-size:33px;

  }


  .sidebar-subitem{

    font-size:11.5px;

  }

}


/* =========================================================
   TABLET MENOR
========================================================= */

@media(max-width:980px){

  :root{

    --sidebar-width:285px;

  }


  .sidebar-brand-description{

    display:none;

  }


  .sidebar-brand{

    justify-content:flex-start;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:760px){


  .app{

    display:block;

    margin-left:0;

  }


  .sidebar{

    position:fixed;

    left:0;
    top:0;

    width:
      min(
        340px,
        90vw
      );

    height:100vh;

    transform:
      translateX(-105%);

    transition:
      transform .24s ease;

    box-shadow:
      20px
      0
      45px
      rgba(0,0,0,.14);

    z-index:200;

  }


  body.nav-open
  .sidebar{

    transform:
      translateX(0);

  }


  .sidebar-brand-description{

    display:block;

  }


  .sidebar-brand{

    justify-content:
      space-between;

  }

}


/* =========================================================
   MOBILE PEQUENO
========================================================= */

@media(max-width:420px){


  .sidebar{

    width:92vw;

    padding:
      20px
      16px;

  }


  .sidebar-brand-name{

    font-size:31px;

  }


  .sidebar-area-title{

    margin-top:24px;

  }


  .sidebar-subitem{

    font-size:11.5px;

  }

}

/* =========================================================
   FALLBACK GLOBAL DO ESTADO ATIVO (SEM DEPENDER DE :has)
========================================================= */

/*
   O layout.js adiciona .has-active no grupo/subgrupo atual.
   Estas regras garantem o destaque em TODAS as páginas,
   inclusive em navegadores onde :has() não esteja disponível.
*/

.sidebar-group.has-active > .sidebar-group-button{
  background:var(--sidebar-active-soft);
  color:var(--sidebar-black);
}

.sidebar-group.has-active > .sidebar-group-button .sidebar-group-name{
  font-weight:900;
}

.sidebar-group.has-active > .sidebar-group-button .sidebar-group-icon{
  border-color:var(--sidebar-lilac);
  background:linear-gradient(
    135deg,
    rgba(245,140,242,.35),
    rgba(169,200,239,.35)
  );
}

.sidebar-group.has-active .sidebar-group-chevron{
  color:var(--sidebar-black);
}

.sidebar-subgroup.has-active .sidebar-subgroup-title{
  background:linear-gradient(
    90deg,
    rgba(245,140,242,.08),
    rgba(169,200,239,.10)
  );
  color:var(--sidebar-black);
}

.sidebar-subgroup.has-active .sidebar-subgroup-title.active{
  background:var(--sidebar-active-bg);
}

/* Sidebar revision: v40 - Contatos global */

/* =========================================================
   SUBGRUPOS EXPANSÍVEIS — v49
   Tela de Atendimento / Contatos / Envio em Massa
========================================================= */

.sidebar-subgroup[data-sidebar-subgroup] > .sidebar-subgroup-title.sidebar-subgroup-collapsible{
  width:100%;
  grid-template-columns:minmax(0,1fr) 28px;
  gap:6px;
  padding-right:5px;
}

.sidebar-subgroup-main-link{
  min-width:0;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  align-items:center;
  gap:8px;
  color:inherit;
  text-decoration:none;
}

.sidebar-subgroup-label{
  min-width:0;
  white-space:normal;
  overflow-wrap:break-word;
}

.sidebar-subgroup-toggle{
  width:26px;
  height:26px;
  padding:0;
  margin:0;
  border:0;
  border-radius:6px;
  display:grid;
  place-items:center;
  background:transparent;
  color:#94949A;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  transition:
    transform .22s ease,
    background .18s ease,
    color .18s ease;
}

.sidebar-subgroup-toggle:hover{
  background:rgba(0,0,0,.055);
  color:var(--sidebar-black);
}

.sidebar-subgroup-toggle:focus-visible{
  outline:2px solid var(--sidebar-lilac);
  outline-offset:2px;
}

.sidebar-subgroup[data-sidebar-subgroup].is-open
> .sidebar-subgroup-title
.sidebar-subgroup-toggle{
  transform:rotate(180deg);
  color:var(--sidebar-black);
}

.sidebar-subgroup[data-sidebar-subgroup] > .sidebar-subitems{
  max-height:1200px;
  opacity:1;
  overflow:hidden;
  transition:
    max-height .24s ease,
    opacity .18s ease,
    padding-top .24s ease,
    padding-bottom .24s ease,
    margin-top .24s ease;
}

.sidebar-subgroup[data-sidebar-subgroup]:not(.is-open)
> .sidebar-subitems{
  max-height:0;
  opacity:0;
  margin-top:0;
  padding-top:0;
  padding-bottom:0;
  pointer-events:none;
}

.sidebar-subgroup[data-sidebar-subgroup].has-active
> .sidebar-subgroup-title
.sidebar-subgroup-toggle{
  color:var(--sidebar-black);
}

.sidebar-subgroup-main-link:focus-visible{
  outline:2px solid var(--sidebar-lilac);
  outline-offset:2px;
  border-radius:6px;
}

.sidebar-subgroup-toggle{
  -webkit-tap-highlight-color:transparent;
}