/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 02 2026 | 18:07:37 */
/* cp-pages-topicos.css — páginas dedicadas dos tópicos do Informativo do
   STJ. Índice (/informativos-topicos/) e detalhe (/informativos-topico/).
   Prefixo cp-top-*. Usa os tokens do design system (cp-design-system.css). */

/* ── Wrappers de largura ── */
.cp-top-hero-inner,
.cp-top-toolbar-inner,
.cp-top-count,
.cp-top-main,
.cp-top-detail {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* ══════════════════════════ ÍNDICE ══════════════════════════ */

/* ── Hero ── */
.cp-top-hero {
  background: var(--cp-bg-light, #f7f7fb);
  border-bottom: 1px solid var(--cp-border, #e7e7ee);
  padding: 44px 24px 34px;
}
.cp-top-hero-crumb {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cp-text-secondary, #667);
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}
.cp-top-hero-crumb a { color: var(--cp-roxo, #6d3bde); text-decoration: none; }
.cp-top-hero-crumb a:hover { text-decoration: underline; }
.cp-top-crumb-sep { margin: 0 7px; color: var(--cp-text-muted, #99a); }
.cp-top-hero-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--cp-text, #1a1a1a);
  margin: 0 0 12px;
}
.cp-top-hero-sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--cp-text-secondary, #556);
  max-width: 760px;
  margin: 0;
}

/* ── Toolbar (busca + ordenação) ── */
.cp-top-toolbar { padding: 26px 24px 0; }
.cp-top-toolbar-inner {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.cp-top-search-wrap { position: relative; flex: 1 1 320px; min-width: 240px; }
.cp-top-search-icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--cp-text-muted, #99a); font-size: 14px; pointer-events: none;
}
.cp-top-search {
  width: 100%;
  padding: 12px 16px 12px 40px;
  font-size: 14.5px;
  border: 1px solid var(--cp-border-dark, #d7d7e0);
  border-radius: var(--cp-radius-sm, 10px);
  background: var(--cp-white, #fff);
  color: var(--cp-text, #1a1a1a);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cp-top-search:focus {
  outline: none;
  border-color: var(--cp-roxo, #6d3bde);
  box-shadow: 0 0 0 3px rgba(109, 59, 222, 0.12);
}
.cp-top-sort { display: flex; align-items: center; gap: 8px; }
.cp-top-sort-label {
  font-size: 12.5px; font-weight: 600; color: var(--cp-text-secondary, #667);
  white-space: nowrap;
}
.cp-top-sort-select {
  padding: 10px 14px;
  font-size: 13.5px;
  border: 1px solid var(--cp-border-dark, #d7d7e0);
  border-radius: var(--cp-radius-sm, 10px);
  background: var(--cp-white, #fff);
  color: var(--cp-text, #1a1a1a);
  cursor: pointer;
}
.cp-top-count {
  padding: 16px 24px 0;
  font-size: 13px;
  color: var(--cp-text-secondary, #667);
}
.cp-top-count strong { color: var(--cp-text, #1a1a1a); }

/* ── Grade + cards ── */
.cp-top-main { padding: 18px 24px 56px; }
.cp-top-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.cp-top-card {
  display: block;
  position: relative;
  padding: 18px 20px 16px;
  background: var(--cp-white, #fff);
  border: 1px solid var(--cp-border, #e7e7ee);
  border-radius: var(--cp-radius-sm, 12px);
  text-decoration: none !important;
  color: inherit;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.cp-top-card:hover {
  border-color: var(--cp-roxo, #6d3bde);
  box-shadow: 0 6px 20px rgba(30, 20, 60, 0.08);
  transform: translateY(-1px);
}
.cp-top-card-nome {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cp-text, #1a1a1a);
  padding-right: 22px;
  margin-bottom: 5px;
}
.cp-top-card-meta {
  font-size: 12.5px;
  color: var(--cp-text-secondary, #667);
  margin-bottom: 12px;
}
.cp-top-card-go {
  position: absolute; top: 18px; right: 18px;
  color: var(--cp-text-muted, #b3b3c0);
  font-size: 13px;
  transition: color 0.14s ease, transform 0.14s ease;
}
.cp-top-card:hover .cp-top-card-go { color: var(--cp-roxo, #6d3bde); transform: translateX(2px); }

/* ── Lente defesa/acusação ── */
.cp-top-lens-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--cp-bg-light, #eef0f4);
  margin-bottom: 8px;
}
.cp-top-lens-seg { display: block; height: 100%; }
.cp-top-lens-def { background: #57ad5b; }
.cp-top-lens-acu { background: #d0544c; }
.cp-top-card-legend, .cp-topi-lens-legend {
  font-size: 11.5px;
  color: var(--cp-text-secondary, #667);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cp-top-lens-k-def { color: #2e7d32; font-weight: 600; }
.cp-top-lens-k-acu { color: #b3261e; font-weight: 600; }
.cp-top-lens-dot { color: var(--cp-text-muted, #b3b3c0); }

/* ── Skeleton / erro / vazio ── */
.cp-top-skel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  padding: 18px 0 0;
}
.cp-top-skel-timeline { display: block; }
.cp-top-skel-card {
  padding: 18px 20px;
  border: 1px solid var(--cp-border, #e7e7ee);
  border-radius: var(--cp-radius-sm, 12px);
  background: var(--cp-white, #fff);
}
.cp-top-skel-timeline .cp-top-skel-card { margin-bottom: 12px; }
.cp-top-skel-bar {
  height: 12px; border-radius: 6px; margin-bottom: 10px;
  background: linear-gradient(90deg, #eee 25%, #f4f4f7 37%, #eee 63%);
  background-size: 400% 100%;
  animation: cp-top-shimmer 1.3s ease infinite;
}
.cp-top-skel-title { width: 60%; height: 15px; }
.cp-top-skel-meta { width: 40%; }
.cp-top-skel-lens { width: 80%; }
@keyframes cp-top-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.cp-top-error {
  margin: 18px 0;
  padding: 16px 20px;
  border: 1px solid #f3cfcb;
  background: #fce8e6;
  border-radius: var(--cp-radius-sm, 10px);
  color: #b3261e;
  font-size: 14px;
}
.cp-top-error i { margin-right: 8px; }
.cp-top-noresults {
  text-align: center;
  padding: 48px 20px;
  color: var(--cp-text-secondary, #667);
}
.cp-top-noresults-title { font-size: 16px; font-weight: 700; color: var(--cp-text, #1a1a1a); margin-bottom: 6px; }
.cp-top-noresults-sub { font-size: 13.5px; }

/* ══════════════════════════ DETALHE ══════════════════════════ */

.cp-top-detail { padding: 30px 24px 60px; }
.cp-top-detail-crumb {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cp-text-secondary, #667);
  margin-bottom: 20px;
}
.cp-top-detail-crumb a { color: var(--cp-roxo, #6d3bde); text-decoration: none; }
.cp-top-detail-crumb a:hover { text-decoration: underline; }

/* ── Cabeçalho do tópico ── */
.cp-topi-header { margin-bottom: 28px; }
.cp-topi-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--cp-roxo, #6d3bde);
  margin-bottom: 8px;
}
.cp-topi-title {
  font-size: 30px; font-weight: 800; line-height: 1.15;
  color: var(--cp-text, #1a1a1a);
  margin: 0 0 10px;
}
.cp-topi-sub {
  font-size: 14px;
  color: var(--cp-text-secondary, #556);
  margin-bottom: 14px;
}
.cp-topi-sub a { color: var(--cp-roxo, #6d3bde); }
.cp-topi-lens { max-width: 360px; }
.cp-topi-lens .cp-top-lens-bar { height: 8px; margin-bottom: 7px; }

/* ── Timeline ── */
.cp-topi-timeline {
  position: relative;
  padding-left: 26px;
}
.cp-topi-timeline::before {
  content: "";
  position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--cp-border, #e7e7ee);
}
.cp-topi-node {
  position: relative;
  margin-bottom: 14px;
}
.cp-topi-node-marker {
  position: absolute; left: -26px; top: 18px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cp-white, #fff);
  border: 2px solid var(--cp-roxo, #6d3bde);
  z-index: 1;
}
.cp-topi-node.is-open .cp-topi-node-marker { background: var(--cp-roxo, #6d3bde); }
.cp-topi-node-head {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  background: var(--cp-white, #fff);
  border: 1px solid var(--cp-border, #e7e7ee);
  border-radius: var(--cp-radius-sm, 12px);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.cp-topi-node-head:hover { border-color: var(--cp-border-dark, #cfcfda); box-shadow: 0 3px 12px rgba(30, 20, 60, 0.05); }
.cp-topi-node.is-open .cp-topi-node-head {
  border-color: var(--cp-roxo, #6d3bde);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.cp-topi-node-when {
  font-size: 12.5px; font-weight: 700; color: var(--cp-text-secondary, #667);
  margin-bottom: 8px;
}
.cp-topi-node-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cp-topi-node-tese {
  font-size: 15px; font-weight: 600; line-height: 1.45;
  color: var(--cp-text, #1a1a1a);
  margin-bottom: 6px;
}
.cp-topi-node-ctx {
  font-size: 12px; color: var(--cp-text-secondary, #778);
}
.cp-topi-node-proc { font-family: 'SF Mono', Consolas, monospace; font-size: 11.5px; }
.cp-topi-node-toggle {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px; font-weight: 600;
  color: var(--cp-roxo, #6d3bde);
}
.cp-topi-node-toggle i { transition: transform 0.15s ease; }
.cp-topi-node.is-open .cp-topi-node-toggle i { transform: rotate(180deg); }

/* ── Corpo expandido da nota ── */
.cp-topi-node-body {
  padding: 4px 20px 20px;
  background: var(--cp-white, #fff);
  border: 1px solid var(--cp-roxo, #6d3bde);
  border-top: 0;
  border-bottom-left-radius: var(--cp-radius-sm, 12px);
  border-bottom-right-radius: var(--cp-radius-sm, 12px);
}
.cp-topi-body-loading { padding: 14px 0; color: var(--cp-text-secondary, #667); font-size: 13.5px; }
.cp-topi-body-loading i { margin-right: 6px; }
.cp-topi-body-destaque {
  padding: 12px 16px;
  background: #fffbea;
  border-left: 3px solid #e6c98a;
  border-radius: 6px;
  margin: 8px 0 14px;
}
.cp-topi-body-destaque p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: #4a3f1e; }
.cp-topi-body-destaque p:last-child { margin-bottom: 0; }
.cp-topi-body-teor p {
  margin: 0 0 12px;
  font-size: 14.5px; line-height: 1.72;
  color: var(--cp-text-body, #333);
}
.cp-topi-body-empty { font-size: 13.5px; color: var(--cp-text-muted, #99a); font-style: italic; }
.cp-topi-body-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--cp-border, #eee);
}
.cp-topi-body-cite { font-size: 12px; color: var(--cp-text-secondary, #667); }
.cp-topi-body-stj {
  font-size: 13px; font-weight: 600;
  color: var(--cp-roxo, #6d3bde); text-decoration: none;
}
.cp-topi-body-stj:hover { text-decoration: underline; }

/* ── Badges de qualificação (espelham cp-inf-qbadge) ── */
.cp-top-qb {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cp-top-qb i { font-size: 10px; margin-right: 4px; opacity: 0.9; }
.cp-top-qb--amber   { color: #8a5a00; background: #fdf0d3; border-color: #e6c98a; }
.cp-top-qb--blue    { color: #0b5394; background: #e6f0fa; border-color: #c5dcf0; }
.cp-top-qb--purple  { color: var(--cp-roxo, #6d3bde); background: #f3f0fb; border-color: #e4ddf6; }
.cp-top-qb--slate   { color: #556070; background: #eef1f5; border-color: #dde3ea; }
.cp-top-qb--green   { color: #2e7d32; background: #e7f4e8; border-color: #cce8cf; }
.cp-top-qb--red     { color: #b3261e; background: #fce8e6; border-color: #f3cfcb; }
.cp-top-qb--outline { color: var(--cp-text-secondary, #667); background: var(--cp-white, #fff); border-color: var(--cp-border-dark, #d7d7e0); }

/* ── Responsivo ── */
@media (max-width: 720px) {
  .cp-top-hero { padding: 32px 18px 26px; }
  .cp-top-hero-title { font-size: 27px; }
  .cp-top-toolbar, .cp-top-main, .cp-top-count { padding-left: 18px; padding-right: 18px; }
  .cp-top-detail { padding: 24px 18px 44px; }
  .cp-top-grid, .cp-top-skel { grid-template-columns: 1fr; }
  .cp-topi-title { font-size: 25px; }
}