:root{
  --bg:#ffffff;
  --bg-soft:#f7f8fa;
  --line:#e8e9ee;
  --text:#1f2937;
  --muted:#6b7280;
  --accent:#0b6efd;
  --accent-ink:#ffffff;
  --danger:#ef4444;
  --radius:14px;
  --shadow:0 8px 28px rgba(0,0,0,.06);
  --side-w: 260px;
}

/* Reset mínimo */



/* ====== Layout base ====== */
.dem-layout{
  min-height:100dvh;
  display:grid;
  grid-template-columns: var(--side-w) 1fr;
  gap:0;
}

@media (max-width: 960px){
  .dem-layout{
    grid-template-columns: 1fr; /* sidebar vira sticky topo */
  }
}

/* ====== Sidebar ====== */
.dem-side{
  position:sticky; top:0;
  align-self:start;
  height:100dvh;
  display:flex; flex-direction:column;
  background:#fff;
  border-right:1px solid var(--line);
}

@media (max-width: 960px){
  .dem-side{
    height:auto; position:sticky; top:0; z-index:20;
    border-right:none; border-bottom:1px solid var(--line);
  }
}

/* Cabeçalho da lateral */
.dem-side__head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.dem-side__menu{
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg-soft);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.dem-side__title{ font-weight:700; color:#374151; }

/* NAV */
.dem-side__nav{
  padding:10px;
  overflow:auto;
}
.dem-side__list{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;
}
.dem-side__item{
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  color:#111827;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.dem-side__item:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.dem-side__item--danger{
  color:#b91c1c;
  border-color:#f2cccc;
  background:#fff7f7;
}
.dem-side__item--danger:hover{
  border-color:#ef9a9a; background:#fff2f2;
}

/* Estados “ativos” que seu JS aplica */
.classbd1, .classdx1{ /* ativo */
  background:linear-gradient(180deg, #f4f7ff 0%, #ffffff 100%);
  border-color:#cfe0ff;
  box-shadow:0 4px 14px rgba(11,110,253,.12);
  color:#0b6efd;
  font-weight:700;
}
.classbd2, .classdx2{ /* inativo */
  background:#fff;
  border-color:var(--line);
  color:#111827;
}

/* ====== Main / Conteúdo ====== */
.dem-main{
  background:var(--bg-soft);
}
.dem-main__wrap{
  padding:16px;
}
.dem-main__inner{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  min-height:calc(100dvh - 32px);
  display:flex; flex-direction:column;
}
#trtelacadastro, #divajustetelademanda, .dem-content{
  display:block;
}
.dem-content{
  padding:16px;
  overflow:auto;
  min-height:60vh;
}

/* ==== Elementos legados/auxiliares ===== */
.box0{
  position:fixed;
  inset:auto 16px 16px auto;
  max-width:min(760px,92vw);
  max-height:80vh;
  overflow:auto;
  display:none;
  z-index:120;
  margin:0;
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
}

/* Classes herdadas do sistema (cores) */
.cinzaheader{ color:#111827; }
.fonteclass{ color:#111827; font-size:12px; padding:4px 0; }

/* Hover legacy hook (se sua função hover aplicar .hover2) */
.hover2{ background:#eef2ff !important; }

/* Scroll em listas da sidebar sempre suave e sem “pulos” */
.dem-side__nav{
  scrollbar-gutter: stable both-edges;
}

/* Pequenos ajustes de responsividade */
@media (max-width: 640px){
  :root{ --side-w: 220px; }
  .dem-main__wrap{ padding:10px; }
  .dem-content{ padding:12px; }
}