/* Qualquer elemento com onclick mostra “mão” ao passar o rato */
    [onclick] { cursor: pointer; }

    .details-row {
        display: none;
    }
    .toggle-icon {
        cursor: pointer;
    }

    .summary-preview.is-clamped{
    /* estilos livres, sem -webkit-line-clamp / -webkit-box */
     
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;

      text-align: left;
      /* altura fixa */
      line-height: 1.5em;
      max-height: 7.5em; /*  5*1.5 */  
    }

    .summary-preview.is-expanded {
      display: block; /* Garante que ocupa o espaço correto */
      max-height: none; /* Remove o limite das 5 linhas */
      -webkit-line-clamp: initial;
    }

   

    .toggle-summary{
        display:none;
        margin:10px auto;
    }

      .page-title {
          text-transform: uppercase;
          letter-spacing: 5.0px;
          text-align: center;
          margin: 30px 0 1.5rem 0;
          font-weight: 600;
      }

    /* A truncagem fica só nesta classe que será alternada */
    /* .is-clamped {
        display: -webkit-box;
        -webkit-line-clamp: 5;
         -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    } */

    .descritores-inline {
        display: inline-block;
        margin-top: 5px;
        color: #333;
        font-weight: 500;
    }

    /* Encosta o aside das temáticas à esquerda */
  .aside-thematics {
    overflow: hidden;
    overflow-y: auto;
    border-bottom: 1px solid #e3e6f0;
    margin-bottom: 0rem !important;
  }

  .aside-thematics::-webkit-scrollbar {
      width: 6px;
  }
  .aside-thematics::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 4px;
  }
  .aside-thematics::-webkit-scrollbar-track {
      background-color: #f1f1f1;
  }

  @media (min-width: 992px) {
    .aside-thematics { margin-left: -0.5rem; } /* ajusta se quiseres mais (-0.75rem, -1rem) */
  }

  /* Pills verticais (mantém o que já tinhas) */
  .tab-link{
    text-align:left;border-radius:.5rem;display:flex;align-items:center;justify-content:space-between;white-space:nowrap
  }
  .count-badge{background:var(--bs-light);color:var(--bs-dark);flex:0 0 auto}

  /* Conector até à coluna central */
  .tab-link.position-relative::after{
    content:"";position:absolute;top:50%;right:-12px;width:12px;height:2px;background:var(--bs-primary);
    transform:translateY(-50%);opacity:0;transition:opacity .15s ease
  }
  .tab-link:hover::after,.tab-link.active::after{opacity:1}
  .tab-link.active{background:var(--bs-primary);color:#fff;border-color:var(--bs-primary)}
  .tab-link.active .count-badge{background:#fff;color:var(--bs-primary)}


    .decision-panel {
        background-color: #fafafa !important;
        /* 2. Sombra estática e difusa */
        /* Cria destaque do fundo branco da página */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        transform: none;
        transition: none;
    }

  /* Aplica só dentro do painel desta página --> DIV DECISAO */
.decision-panel strong {
  font-weight: 700;                 /* reforça o negrito */
  color: #bf9412 !important;                   /* azul Bootstrap sutil */
  position: relative;
  display: inline-block;
  padding-bottom: .65rem;
  transition: color .18s ease, text-shadow .18s ease;
}

/* Sublinhado suave “de fábrica” */
.decision-panel strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  opacity: .25;
  transform: scaleX(.6);
  transform-origin: left;
  transition: opacity .25s ease, transform .25s ease;
}

/* Um toque extra quando há foco/hover (teclado ou rato) */
.decision-panel strong:focus,
.decision-panel strong:focus::after,
.decision-panel strong:hover::after {
  opacity: .4;
  transform: scaleX(1);
}

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  .decision-panel strong,
  .decision-panel strong::after {
    transition: none;
  }
}


    .ecli-title {
        font-weight: 700;
         margin: 0;
         position: relative;
        display: inline-block;
        padding-bottom: .15rem;
        font-size: 1.45rem;
    }

    .ecli-title::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 2px;
        background: #0d6efd;              /* primário Bootstrap */
        opacity: .35;
        transform: scaleX(.7);
        transform-origin: left;
        transition: transform .25s ease, opacity .25s ease;
    }
    .ecli-title:hover::after,
    .ecli-title:focus::after {
        opacity: .55;
        transform: scaleX(1);
    }

    /* 2 colunas: esquerda (temáticas+artigos), direita (decisões) */
    .two-col { display: block; }
    @media (min-width: 992px) {
      .two-col {
        display: grid;
        grid-template-columns: 360px minmax(0, 1fr); /* ajusta 360px se quiseres */
        gap: 1.25rem;
        align-items: start;
      }
    }

    /* empilha dentro da coluna esquerda */
    .left-stack {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      align-items: flex-start;
    }

    /* 1. O Botão Base */
    .btn-modern-filter {
        background-color: #ffffff;      /* Fundo branco limpo */
        border: 1px solid #e3e6f0;      /* Borda cinza muito suave */
        color: #555;                    /* Texto cinza escuro */
        padding: 8px 16px;              /* Mais espaço interno */
        font-weight: 600;               /* Texto levemente mais grosso */
        font-size: 0.9rem;
        transition: all 0.2s ease-in-out; /* Suavizar animações */
        display: inline-flex;
        align-items: center;
    }

    /* 2. Efeito ao passar o rato (Hover) */
    .btn-modern-filter:hover {
        background-color: #fff;
        border-color: #4e73df;          /* Borda fica azul */
        color: #4e73df;                 /* Texto fica azul */
        transform: translateY(-2px);    /* O botão "sobe" levemente */
        box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* Sombra suave em baixo */
    }

    /* 3. O Badge (Contador) - Estilo "Soft" */
    .badge-soft {
        background-color: #f1f3f5;      /* Fundo cinza claro */
        color: #495057;
        font-weight: 700;
        padding: 6px 10px;
        font-size: 0.75rem;
        transition: all 0.2s;
    }

    /* 4. O Badge ao passar o rato no botão */
    .btn-modern-filter:hover .badge-soft {
        background-color: #e7f1ff;      /* Fundo azul muito claro */
        color: #0056b3;                 /* Texto azul escuro */
    }

    /* 5. (Opcional) Se quiser simular um estado "Ativo" via CSS server-side depois */
    .btn-modern-filter.active-filter {
        background-color: #4e73df;
        color: white;
        border-color: #4e73df;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    }


    /* Layout Grelha: Sidebar (320px) | Conteúdo (Resto) */
    .two-col {
        display: flex;
        flex-direction: column; /* Mobile first */
        gap: 1.5rem;
    }

    @media (min-width: 992px) {
        .two-col {
            display: grid;
            /* Sidebar fixa, conteúdo estica */
            grid-template-columns: 320px 1fr;
            gap: 2rem;
            align-items: start;
        }
        .left-stack {
            align-items: flex-end;     /* desktop: direita */
        }
    }

    /* Sidebar Fixa no scroll */
    .sticky-lg {
        position: static;
    }
    @media (min-width: 992px) {
        .sticky-lg {
            position: sticky;
            top: 2rem;
            overflow-y: auto;
            padding-bottom: 2rem;
        }
    }