/* =========================
   LEGISLAÇÃO HOME — STYLE ÚNICO
   (mais “SaaS”, menos AdminLTE)
   + LUCIDE (SVG)
   ========================= */

/* =========================
   BASE
   ========================= */
.leg-wrap{ padding:0 10px; }
@media (max-width:767px){ .leg-wrap{ padding:0 6px; } }

.leg-wrap *{ box-sizing:border-box; }
.leg-wrap a{ text-decoration:none; color:inherit; }
.leg-wrap a:hover{ text-decoration:none; }

/* =========================
   TOKENS
   ========================= */
:root{
  --leg-bg:#f3f5f7;
  --leg-card:#ffffff;
  --leg-ink:#111827;
  --leg-muted:#6b7280;
  --leg-line:rgba(15,23,42,.10);
  --leg-shadow:0 10px 22px rgba(16,24,40,.06);
  --leg-radius:18px;
  --leg-radius-md:16px;
  --leg-radius-sm:14px;
  --leg-pill:#f3f4f6;
  --leg-pill-hover:#e9edf2;
  --leg-blue:#1d4ed8;
}

/* =========================
   LUCIDE (base)
   ========================= */
.leg-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  vertical-align:middle;
}
.leg-ico svg{
  width:1em;
  height:1em;
  stroke-width:2;
  stroke:currentColor;
}

/* tamanhos utilitários */
.leg-ico-sm svg{ width:14px; height:14px; }
.leg-ico-md svg{ width:16px; height:16px; }
.leg-ico-lg svg{ width:22px; height:22px; }
.leg-ico-xl svg{ width:44px; height:44px; }

/* =========================
   HERO
   (mantém como estava, sem mexer no background)
   ========================= */
.leg-hero{
  position:relative;
  width:100%;
  border-radius:var(--leg-radius);
  overflow:hidden;
  background:linear-gradient(180deg,#f7f2ea 0%,#eef3f7 100%);
  box-shadow:0 10px 26px rgba(16,24,40,.08);

  background-image:url("https://alimentosonline.com.br/imagens/bg_legislacao2.png");
  background-repeat:no-repeat;
  background-position:right center;
  background-size:80%;
}

.leg-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 16% 28%,rgba(255,255,255,.85) 0%,rgba(255,255,255,.62) 48%,rgba(255,255,255,0) 76%),
    linear-gradient(90deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.70) 42%,rgba(255,255,255,.28) 62%,rgba(255,255,255,0) 78%);
  z-index:1;
}

.leg-hero__content{
  position:relative;
  z-index:2;
  padding:26px 34px 92px;
  max-width:780px;
}

.leg-hero__title{
  margin:0 0 10px;
  font-size:40px;
  line-height:1.15;
  font-weight:800;
  color:#1f2937;
  letter-spacing:-.3px;
}
.leg-hero__title span{
  font-size:30px;
  font-weight:500;
  color:#4b5563;
}

.leg-hero__subtitle{
  margin:0;
  max-width:480px;
  min-height:96px;
  display:flex;
  align-items:center;
  font-size:18px;
  line-height:1.65;
  color:#4b5563;
}

/* =========================
   KPIs
   (mantém tamanho original e cores visíveis)
   ========================= */
.leg-hero__kpis{
  position:absolute;
  left:26px;
  right:26px;
  bottom:12px;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.leg-kpi{
  height:82px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(15,23,42,.06);
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 6px 14px rgba(16,24,40,.06);
}

.leg-kpi__ico{
  flex-shrink:0;
  margin-top:2px;
}
.leg-kpi__ico svg{
  width:44px;
  height:44px;
}

.leg-kpi__meta strong{
  display:block;
  font-size:25px;
  font-weight:800;
  color:var(--leg-ink);
  line-height:1.05;
}
.leg-kpi__meta span{
  display:inline;
  margin-top:3px;
  font-size:14px;
  color:var(--leg-muted);
  line-height:1.15;
}

/* cores KPIs (fixas) */
.ico-teal  { color:#0f766e !important; }
.ico-cyan  { color:#0369a1 !important; }
.ico-blue  { color:#2563eb !important; }
.ico-amber { color:#f59e0b !important; }

.kpi-lock-ico{
  width:18px;
  height:18px;
  stroke-width:2.2;
  color:#1f8a4c; /* verde AOL */
  opacity:.9;
}

/* responsivo hero */
@media (max-width:1024px){
  .leg-hero__kpis{ grid-template-columns:repeat(2,1fr); }
  .leg-hero__content{ padding-bottom:150px; }
}
@media (max-width:640px){
  .leg-hero{
    background-size:520px auto;
    background-position:right bottom;
  }
  .leg-hero__content{ padding:18px 18px 232px; }
  .leg-hero__title{ font-size:22px; }
  .leg-hero__title span{ font-size:18px; }

  .leg-hero__kpis{
    left:16px; right:16px; bottom:14px;
    grid-template-columns:1fr;
  }
  .leg-kpi{ height:auto; padding:12px 14px; }
  .leg-kpi__ico svg{ width:40px; height:40px; }
}

/* =========================
   LAYOUT
   ========================= */
.leg-section{
  margin-top:16px;
  background:var(--leg-bg);
  border-radius:var(--leg-radius);
  padding:14px;
}

.leg-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:14px;
  align-items:start;
}
@media(max-width:992px){ .leg-grid{ grid-template-columns:1fr; } }

/* =========================
   CARD
   ========================= */
.leg-card{
  background:var(--leg-card);
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--leg-radius-md);
  box-shadow:var(--leg-shadow);
  overflow:hidden;
}

.leg-card__head{ padding:16px 18px 10px; }
.leg-card__title{
  margin:0;
  font-size:14px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--leg-ink);
}
.leg-card__sub{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.45;
  color:var(--leg-muted);
}

.leg-card__body{ padding:12px 18px 18px; }

/* =========================
   BUSCA
   ========================= */
.leg-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  background:#fff;
}

.leg-search__ico{
  flex:0 0 auto;
  color:#1d4ed8;
}
.leg-search__ico svg{
  width:16px;
  height:16px;
}

.leg-search input{
  width:100%;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  font-size:14px !important;
  color:var(--leg-ink) !important;
}
.leg-search input::placeholder{ color:#9ca3af; }

.leg-search__btn{
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:var(--leg-pill);
  color:var(--leg-ink);
  font-weight:900;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.leg-search__btn .leg-ico{ color:#6b7280; }
.leg-search__btn:hover{ background:var(--leg-pill-hover); }

/* =========================
   A–Z
   ========================= */
.leg-az{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(14,minmax(0,1fr));
  gap:8px;
}
@media (max-width:1200px){ .leg-az{ grid-template-columns:repeat(10,minmax(0,1fr)); } }
@media (max-width:992px){  .leg-az{ grid-template-columns:repeat(8,minmax(0,1fr)); } }
@media (max-width:640px){  .leg-az{ grid-template-columns:repeat(7,minmax(0,1fr)); } }

.leg-pill{
  height:28px;
  width:100%;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:var(--leg-pill);
  color:#374151;
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.12s ease;
}
.leg-pill:hover{
  background:var(--leg-pill-hover);
  border-color:rgba(15,23,42,.14);
}
.leg-pill.is-active{
  background:rgba(29,78,216,.10);
  border-color:rgba(29,78,216,.28);
  color:var(--leg-blue);
}

/* =========================
   CHIPS
   ========================= */
.leg-chips{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.leg-chip{
  height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:var(--leg-pill);
  color:#374151;
  font-weight:900;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:.12s ease;
}
.leg-chip .dot{
  width:8px;
  height:8px;
  border-radius:99px;
  background:#9ca3af;
}
.leg-chip:hover{ background:rgba(29,78,216,.06); }
.leg-chip.is-active{
  background:rgba(29,78,216,.10);
  border-color:rgba(29,78,216,.30);
  color:var(--leg-blue);
}
.leg-chip.is-active .dot{ background:var(--leg-blue); }

/* =========================
   SUGESTÕES
   ========================= */
.leg-sugs{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.leg-sug{
  height:40px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:var(--leg-pill);
  color:var(--leg-ink);
  font-weight:900;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:.12s ease;
}

/* garante ícone visível e NÃO branco */
.leg-sug .leg-ico{ color:#0f766e; }
.leg-sug .leg-ico svg{ width:15px; height:15px; }

.leg-sug:hover{ background:var(--leg-pill-hover); }

.leg-sug.more{
  background:#fff;
  border-style:dashed;
}
.leg-sug.more:hover{ background:#f9fafb; }

/* =========================
   NAV (sem caixinha)
   ========================= */
.leg-nav-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media (max-width:640px){ .leg-nav-grid{ grid-template-columns:1fr; } }

.leg-nav-item{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius:14px;
  background:#f9fafb;
  border:1px solid rgba(15,23,42,.08);
  transition:.15s ease;
}
.leg-nav-item:hover{
  background:#eef2f7;
  transform:translateY(-1px);
}

/* sem caixinha, tamanho estável */
.leg-nav-ico{
  flex:0 0 auto;
  line-height:1;
  align-content:center;
}
.leg-nav-ico .leg-ico svg{
  width:22px;
  height:22px;
}

.leg-nav-main{ flex:1; min-width:0; }
.leg-nav-name{ font-weight:900; color:var(--leg-ink); font-size:14px; }
.leg-nav-sub{ font-size:12px; color:var(--leg-muted); margin-top:2px; }

/* cores NAV (aplicadas via classes ico-*) */
.ico-blue{   color:#2563eb !important; }
.ico-green{  color:#16a34a !important; }
.ico-orange{ color:#f97316 !important; }
.ico-purple{ color:#7c3aed !important; }
.ico-teal{   color:#0d9488 !important; }
.ico-pink{   color:#db2777 !important; }

/* =========================
   LISTAS LATERAIS
   (com data abaixo do badge)
   ========================= */
.leg-list{ display:flex; flex-direction:column; gap:10px; }

.leg-row{
  display:flex;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  transition:.12s ease;
  align-items:flex-start;
}
.leg-row:hover{ background:#f9fafb; }

/* coluna badge + data */
.leg-row__aside{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:92px;
}

/* BADGE base */
.leg-badge{
  height:22px;
  padding:0 10px;
  border-radius:999px;
  font-weight:900;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  white-space:nowrap;
  margin-top:2px;
}

/* DATA abaixo do badge */
.leg-date{
  font-size:12px;
  font-weight:900;
  color:var(--leg-muted);
}
.leg-date--below{
  margin-top:4px;
  font-size:11px;
  font-weight:900;
  color:var(--leg-muted);
  line-height:1.1;
  align-self: center;
}

/* BADGES — cores refinadas (mais bonitas) */
/* NOVA (amarelo/âmbar) */
.badge-novo{
  background:#fef3c7;     /* amber-100 */
  color:#000000;          /* amber-800 */
  border-color:#fde68a;   /* amber-300 */
}

/* ALTERADA (azul) */
.badge-alter{
  background:#eff6ff;     /* blue-50 */
  color:#1d4ed8;          /* blue-700 */
  border-color:#bfdbfe;   /* blue-300 */
  align-self: center;
}

/* RETIFICADA (verde) */
.badge-retif{
  background:#ecfdf5;     /* green-50 */
  color:#047857;          /* green-700 */
  border-color:#a7f3d0;   /* green-300 */
  align-self: center;
}

/* REVOGADA (vermelho escuro) */
.badge-revog{
  background:#fee2e2;     /* red-100 */
  color:#991b1b;          /* red-800 */
  border-color:#fecaca;   /* red-300 */
  align-self: center;
}

/* COMPLEMENTADA (roxo) */
.badge-comp{
  background:#f5f3ff;     /* violet-50 */
  color:#6d28d9;          /* violet-700 */
  border-color:#ddd6fe;   /* violet-300 */
  align-self: center;
}

/* LINKADA (ciano) */
.badge-link{
  background:#ecfeff;     /* cyan-50 */
  color:#0e7490;          /* cyan-700 */
  border-color:#a5f3fc;   /* cyan-300 */
  align-self: center;
}

/* ANEXADA (neutro/amarelo queimado) */
.badge-anexo{
  background:#fefce8;     /* yellow-50 */
  color:#854d0e;          /* yellow-800 */
  border-color:#fde047;   /* yellow-400 */
  align-self: center;
}

/* VIGENTE  */
.badge-vigente{
  background:#4caf50;
  color:#ffffff;
  border-color:#e5e7eb;
  align-self:center;
}

.leg-row__main{ flex:1; min-width:0; }

/* título e texto */
.leg-ref{
  font-weight:950;
  color:var(--leg-ink);
  line-height:1.25;
}
.leg-txt{
  margin-top:4px;
  font-size:12.5px;
  line-height:1.35;
  color:#4b5563;
}
.leg-desc{
  margin-top:4px;
  font-size:12px;
  line-height:1.35;
  color:#6b7280;
}

/* botão seta */
.leg-go{
  width:28px;
  height:28px;
  border-radius:12px;
  background:var(--leg-pill);
  border:1px solid rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin-top:2px;
}
.leg-go .leg-ico{ color:#6b7280; }
.leg-go .leg-ico svg{ width:14px; height:14px; }

/* coluna lateral: empilha cards com espaçamento */
.leg-side{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* =========================
   LINK
   ========================= */
.leg-link{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:950;
  color:var(--leg-ink);
}
.leg-link:hover{ text-decoration:underline; }

/* ===================================================
   CTA — MINHAS FAVORITAS (bloqueado / convite)
   =================================================== */

.leg-empty{
  color: var(--leg-muted, #6b7280);
  font-size: 13px;
  line-height: 1.45;
}

/* wrapper principal */
.leg-cta-lock{
  display:flex;
  gap:14px;
  padding:14px;
  border:1px solid var(--leg-line, rgba(15,23,42,.10));
  border-radius: var(--leg-radius-md, 16px);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.95),
    rgba(248,250,252,.95)
  );
  box-shadow: 0 10px 22px rgba(16,24,40,.06);
}

/* ícone principal */
.leg-cta-lock__icon{
  width:44px;
  min-width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(
    120% 120% at 30% 20%,
    rgba(245,158,11,.28),
    rgba(245,158,11,.12)
  );
  border:1px solid rgba(245,158,11,.30);
}

.leg-cta-lock__icon .leg-ico{
  width:22px;
  height:22px;
}

/* conteúdo */
.leg-cta-lock__content{
  flex:1;
  min-width:0;
}

.leg-cta-lock__title{
  font-size:14px;
  font-weight:800;
  line-height:1.25;
  color: var(--leg-ink, #111827);
  margin-bottom:6px;
}

.leg-cta-lock__text{
  font-size:13px;
  line-height:1.45;
  color: var(--leg-muted, #6b7280);
  margin-bottom:10px;
}

/* lista de benefícios */
.leg-cta-lock__list{
  list-style:none;
  padding:0;
  margin:0 0 12px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.leg-cta-lock__list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  line-height:1.35;
  color: var(--leg-ink, #111827);
}

.leg-cta-lock__list .leg-ico{
  width:16px;
  height:16px;
  opacity:.9;
  margin-top:1px;
}

/* botão principal */
.leg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  font-size:13px;
  font-weight:800;
  text-decoration:none !important;
  cursor:pointer;
  user-select:none;
  border:1px solid transparent;
}

.leg-btn-primary{
  color:#fff !important;
  background: linear-gradient(135deg, #f36a21, #ff8a3d);
  box-shadow: 0 14px 30px rgba(243,106,33,.22);
}

.leg-btn-primary:hover{
  filter:brightness(1.02);
  transform:translateY(-1px);
}

/* link secundário */
.leg-link-muted{
  display:inline-flex;
  margin-top:8px;
  font-weight:700;
  color: var(--leg-muted, #6b7280);
}

.leg-link-muted:hover{
  color: var(--leg-ink, #111827);
}

/* mobile */
@media (max-width: 767px){
  .leg-cta-lock{
    padding:12px;
  }

  .leg-cta-lock__icon{
    width:42px;
    min-width:42px;
    height:42px;
  }
}

/* ================================
   FEATURE CARD: Publicadas no mês (clean premium)
================================== */
.leg-feature{ width:100%; }

.leg-feature__card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:15px 16px;
  border-radius:16px;

  /* cor suave, elegante */
  background: #f8fafc;

  border:1px solid rgba(148,163,184,.25);

  box-shadow:
    0 10px 24px rgba(2,6,23,.05);

  text-decoration:none;
  transition: all .15s ease;
}

.leg-feature__card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(2,6,23,.10);
  background:#f1f5f9;
}

.leg-feature__left{
  display:flex;
  gap:12px;
  flex:1;
  min-width:0;
}

.leg-feature__icon{
  width:44px;
  height:44px;
  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  color: coral;

}

.leg-feature__content{
  min-width:0;
}

.leg-feature__top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.leg-feature__title{
  font-weight:900;
  letter-spacing:.2px;
  color:#0f172a;
  font-size:15px;
  line-height:1.1;
}

.leg-feature__pill{
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;

  background:#fff;
  border:1px solid rgba(148,163,184,.25);
  color:#0f172a;
}

.leg-feature__sub{
  margin-top:6px;
  font-size:13px;
  line-height:1.35;
  color:#475569;
  max-width:720px;
}

.leg-feature__meta{
  margin-top:9px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.leg-feature__tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;

  padding:5px 9px;
  border-radius:999px;

  background:#fff;
  border:1px solid rgba(148,163,184,.22);
  color:#0f172a;
}

.leg-feature__right{
  display:flex;
  align-items:center;
}

.leg-feature__cta{
  font-weight:900;
  font-size:13px;

  padding:10px 12px;
  border-radius:12px;

  background:#fff;
  border:1px solid rgba(148,163,184,.25);
  color:#0f172a;
}

/* mobile */
@media (max-width:640px){
  .leg-feature__right{ display:none; }
  .box-body{ padding: 0px !important; }
  .leg-card__body{ padding: 10px !important; }
  .leg-section{ padding: 10px !important; }

  /* KPIs deixam de ser absolute no mobile (evita sobrepor título/subtítulo) */
  .leg-hero__kpis{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    margin: 12px 16px 16px; /* espaçamento dentro do hero */
    grid-template-columns: 1fr;
    gap: 12px;
    z-index: 2; /* acima do overlay */
  }

  /* o conteúdo não precisa mais “reservar espaço gigante” */
  .leg-hero__content{
    padding: 18px 18px 12px !important;
  }

  /* garante que as KPIs fiquem dentro do hero e acima do ::before */
  .leg-hero{
    padding-bottom: 0px !important;
    padding-left: 15px !important;
  }
}

#legHome .container-fluid,
#legHome .container,
#legHome .container-fluid{
  padding-left: 10px !important;
  padding-right: 10px !important;
}