/* ==========================
       ESCOPADO EM .filtro-novo-lateral
       ========================== */
       :root {
        --fnl-bg: #ffffff;
        --fnl-titulo: #061844; /* slate-900 */
        --fnl-muted: #94a3b8; /* slate-400 */
        --fnl-border: #e2e8f0; /* slate-200 */
        --fnl-chip-bg: #f1f5f9; /* slate-100 */
        --fnl-chip-text: #334155; /* slate-700 */
        --fnl-chip-x: #64748b; /* slate-500 */
        --fnl-primary: #1e40af; /* blue-800 */
        --fnl-primary-600: #2563eb; /* blue-600 */
        --fnl-primary-50: #eff6ff; /* blue-50 */
        --fnl-focus: #93c5fd; /* blue-300 */
        --fnl-cinza: #686868; /* slate-500 */
      }
  
      .filtro-novo-lateral * { box-sizing: border-box; }
  
      .filtro-novo-lateral .card { width: 270px;}
  
      .filtro-novo-lateral .titulo { color: var(--fnl-titulo);
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; 
        margin-bottom: 16px;
      }


      .filtro-novo-lateral .sub { font-size: 12px; color: var(--fnl-muted); }
  
      .filtro-novo-lateral .linha { height: 1px; background: #CACACA; margin-top: 24px; margin-bottom: 28px;}
  
      /* Selecionados topo */
      .filtro-novo-lateral .selecionados { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 8px; }
      
      .filtro-novo-lateral .chip {
        height: 40px;
        display: inline-flex;
        padding: 8px 16px;
        align-items: center;
        gap: 8px;
        border-radius: 24px;
        border: 1px solid #CACACA;
        background: #F8F7F5;
        color: #686868;
        font-family: "Titillium Web";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
      }
      .filtro-novo-lateral .chip .x { cursor: pointer; background: transparent; border: 0; padding: 0; display: flex;}
 
  
      /* Seções */
      .filtro-novo-lateral .secao { margin: 14px 0; position: relative;
        z-index: 0;}
      .filtro-novo-lateral .secao-cabecalho { display: flex; align-items: center; justify-content: space-between;       margin-bottom: 24px;}
      .filtro-novo-lateral .secao-titulo { color: var(--fnl-cinza);
        font-size: 18px;
        font-style: normal;
  
        font-weight: 600;
        line-height: 24px; /* 133.333% */ }
      .filtro-novo-lateral .toggle-secao { cursor: pointer;  border: 0; background: transparent; }
      .filtro-novo-lateral .toggle-secao:focus { outline: none; }
  
      /* Pills botões */
      .filtro-novo-lateral .pills { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
      .filtro-novo-lateral .pill { color: #686868;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; 
display: inline-flex;
padding: 8px 16px;
align-items: center;
gap: 8px;
font-family: "Titillium Web";
border-radius: 100px;
border: 1px solid #CACACA;
background: #FFF;
cursor: pointer;
transition: all 0.3s ease;
}
   
      .filtro-novo-lateral .pill.ativo { background:rgba(32, 149, 238, 0.16); color: #2095EE; border-color: #2095EE; }
  
      /* Checkboxes lista (Distribuidor) */
    
      .filtro-novo-lateral .lista .linha-item { display: flex; align-items: center; gap: 8px; color: #686868;
        font-family: "Titillium Web";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px; margin-bottom: 16px;}
      .filtro-novo-lateral .lista input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--fnl-primary-600); }
  
      /* Utilidades */
      .filtro-novo-lateral .muted { color: var(--fnl-muted); font-size: 12px; }
      .filtro-novo-lateral .count { color: var(--fnl-cinza);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; 
        margin-bottom: 16px;}

        .lista {
          max-height: 340px;
          overflow-x: auto;
        }

        .busca-filtro-padrao {
          display: flex;
          width: 100%;
          height: 48px;
          padding: 12px 16px;
          align-items: center;
          gap: 16px;
          flex-shrink: 0;
          border-radius: 8px;
          border: 1px solid #CACACA;
          background: #FFF;
          margin-left: auto;
          max-width: 370px;
          position: relative;
        }
        
        .busca-filtro-padrao input {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          border: none;
          border-radius: 8px !important;
          padding-left: 48px;
          color: #686868;
          font-family: "Titillium Web";
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 16px;
        }

        .busca-filtro-padrao svg {
          position: absolute;
          z-index: 1;
        }
  
      /* Acessibilidade focus */
      .btn-fechar-filtro-novo-lateral{
        display: none;
      }

      .btn-filtro-novo-lateral-mobile{
        display: none;
      }

      .btns-geral {
        display: none;
      }

      .btn-abre-filtro-mobile {
        display: none;
      }
      @media (max-width: 1180px) {
        .btn-abre-filtro-mobile {
          display: flex;
          color: #061844;
font-family: "Titillium Web";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
display: flex;
max-width: 424px;
width: 100%;
height: 48px;
padding: 12px 16px;
justify-content: center;
align-items: center;
gap: 16px;
flex-shrink: 0;
border-radius: 24px;
border: 2px solid #061844;
background: #FFF;
margin-top: 24px;
margin-bottom: 48px;
margin-left: auto;
margin-right: auto;
        }
        .filtro-novo-lateral{
          display: none;
        }
        .btn-fechar-filtro-novo-lateral{
          display: block;
        }
        .dpFlex {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;
        }
        .dpFlex .titulo{
          margin-bottom: 0;
        }
        .filtro-novo-lateral .card {
          width: 100%;
        }
        .filtro-novo-lateral {
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          background: #fff;
          z-index: 10000000;
          padding: 24px 16px;
          overflow-x: scroll;
          height: 100%;
        }
        .btns-geral {
          display: flex;
          margin-bottom: 24px;
          justify-content: space-between;
        }
        .btn-limpar-filtros {
          display: flex;
          width: 49%;
          height: 48px;
          padding: 12px 24px;
          justify-content: center;
          align-items: center;
          gap: 16px;
          flex-shrink: 0;
          border-radius: 100px;
          border: 2px solid #2095EE;
          color: #2095EE;
          text-align: center;
          font-family: "Titillium Web";
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 16px;
          cursor: pointer;
        }
        .btn-aplicar-filtros{
          border-radius: 100px;
          border: 2px solid #2095EE;
          background: #2095EE;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 49%;
          height: 48px;
          color: #FFF;
text-align: center;
font-family: "Titillium Web";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; 
cursor: pointer;
        }
        .qtdeSelecionados {
          display: contents;
        }
       
      }