/* TLÁLOC-ish: fondo oscuro, cards blancas, sidebar fijo */
.tl-body { background:#2b2f36; }

.tl-layout{
  display:flex;
  min-height:100vh;
}

.tl-sidebar{
  width:260px;
  background:#1f232a;
  color:#fff;
  position:sticky;
  top:0;
  height:100vh;
  padding:14px;
}

.tl-brand{
  padding:10px 10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:12px;
}
.tl-brand-title{ font-size:18px; font-weight:700; }
.tl-brand-sub{ font-size:12px; opacity:.7; }

.tl-user{
  padding:10px;
  background:rgba(255,255,255,.06);
  border-radius:10px;
  margin-bottom:12px;
}

.tl-navitem{
  display:block;
  color:#fff;
  text-decoration:none;
  padding:10px 10px;
  border-radius:10px;
  margin-bottom:6px;
}
.tl-navitem:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
  text-decoration:none;
}

.tl-sep{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:10px 0;
}

.tl-content{ flex:1; }

.tl-topbar{
  background:#111419;
  color:#fff;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tl-topbar-title{ font-weight:700; }

.card{ border-radius:14px; }
.badge-pill{ border-radius:999px; }

.kanban{
  display:flex;
  gap:12px;
  overflow:auto;
  padding-bottom:8px;
}
.kan-col{
  min-width:290px;
  background:#f7f7f8;
  border-radius:14px;
  padding:10px;
}
.kan-col h6{
  font-weight:800;
  margin:4px 4px 10px;
}
.kan-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:10px;
  margin-bottom:10px;
}
.kan-meta{ font-size:12px; color:#666; }

/* ==============================
   PMO · Tema Estrategica (morado)
   ============================== */

:root{
  --es-morado-900:#2a0f3a;
  --es-morado-800:#3b1652;
  --es-morado-700:#4b1c6b;
  --es-morado-600:#5a2381;  /* principal */
  --es-morado-500:#6a2d95;  /* hover */
  --es-morado-300:#cbb6e6;
  --es-morado-200:#eadff7;

  --es-bg: #f2ecfb;         /* fondo general */
  --es-card: #ffffff;       /* tarjetas */
  --es-border: rgba(60, 25, 90, .18);
  --es-text: #23152e;
  --es-muted: rgba(35,21,46,.70);
}

/* Fondo general */
body, .tl-body{
  background: var(--es-bg) !important;
  color: var(--es-text) !important;
}

/* Topbar (la franja morada) */
.tl-topbar, .navbar.tl-topbar{
  background: linear-gradient(90deg, var(--es-morado-700), var(--es-morado-500)) !important;
  color: #fff !important;
  border: 0 !important;
}
.tl-topbar a, .tl-topbar .nav-link{
  color:#fff !important;
  opacity:.95;
}
.tl-topbar a:hover, .tl-topbar .nav-link:hover{
  opacity:1;
  text-decoration:none;
}

/* Cards */
.card{
  border: 1px solid var(--es-border) !important;
  border-radius: 14px;
}
.card.shadow-sm{
  box-shadow: 0 .35rem .9rem rgba(30,10,45,.12) !important;
}

/* Links */
a{
  color: var(--es-morado-600);
}
a:hover{
  color: var(--es-morado-500);
}

/* Botones primarios */
.btn-primary{
  background: linear-gradient(135deg, var(--es-morado-600), var(--es-morado-500)) !important;
  border: 0 !important;
}
.btn-primary:hover{
  filter: brightness(1.05);
}

/* Botón oscuro usado como principal secundario (Kanban, regresar, etc.) */
.btn-dark{
  background: var(--es-morado-700) !important;
  border: 0 !important;
}
.btn-dark:hover{
  background: var(--es-morado-600) !important;
}

/* Outline oscuro -> morado */
.btn-outline-dark{
  color: var(--es-morado-700) !important;
  border-color: var(--es-morado-300) !important;
}
.btn-outline-dark:hover{
  background: var(--es-morado-700) !important;
  border-color: var(--es-morado-700) !important;
  color:#fff !important;
}

/* Badges */
.badge-info{
  background: rgba(90,35,129,.14) !important;
  color: var(--es-morado-700) !important;
  border: 1px solid rgba(90,35,129,.22) !important;
}
.badge-secondary{
  background: rgba(35,21,46,.08) !important;
  color: var(--es-text) !important;
}

/* Inputs */
.form-control:focus{
  border-color: rgba(90,35,129,.45) !important;
  box-shadow: 0 0 0 .2rem rgba(90,35,129,.18) !important;
}

/* Kanban */
.kanban .kan-col h6{
  color: var(--es-morado-700);
}
.kan-card{
  border: 1px solid var(--es-border) !important;
  border-radius: 14px;
  background: var(--es-card);
}
.kan-meta{
  color: var(--es-muted);
}

/* ==============================
   PMO �� Tema Estrategica (morado)
   ============================== */

:root{
  --es-morado-900:#2a0f3a;
  --es-morado-800:#3b1652;
  --es-morado-700:#4b1c6b;
  --es-morado-600:#5a2381;  /* principal */
  --es-morado-500:#6a2d95;  /* hover */
  --es-morado-300:#cbb6e6;
  --es-bg: #f2ecfb;
  --es-border: rgba(60, 25, 90, .18);
  --es-text: #23152e;
  --es-muted: rgba(35,21,46,.70);
}

/* Fondo general */
body.tl-body{
  background: var(--es-bg) !important;
  color: var(--es-text) !important;
}

/* Topbar (tu div actual) */
.tl-topbar{
  background: linear-gradient(90deg, var(--es-morado-700), var(--es-morado-500)) !important;
  color:#fff !important;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 .35rem .9rem rgba(30,10,45,.12);
}
.tl-topbar-title{
  font-weight: 800;
  letter-spacing: .2px;
}

/* Cards */
.card{
  border: 1px solid var(--es-border) !important;
  border-radius: 14px;
}
.card.shadow-sm{
  box-shadow: 0 .35rem .9rem rgba(30,10,45,.12) !important;
}

/* Links */
a{ color: var(--es-morado-600); }
a:hover{ color: var(--es-morado-500); }

/* Botones */
.btn-primary{
  background: linear-gradient(135deg, var(--es-morado-600), var(--es-morado-500)) !important;
  border: 0 !important;
}
.btn-primary:hover{ filter: brightness(1.05); }

.btn-dark{
  background: var(--es-morado-700) !important;
  border: 0 !important;
}
.btn-dark:hover{ background: var(--es-morado-600) !important; }

.btn-outline-dark{
  color: var(--es-morado-700) !important;
  border-color: var(--es-morado-300) !important;
}
.btn-outline-dark:hover{
  background: var(--es-morado-700) !important;
  border-color: var(--es-morado-700) !important;
  color:#fff !important;
}

/* Badges */
.badge-info{
  background: rgba(90,35,129,.14) !important;
  color: var(--es-morado-700) !important;
  border: 1px solid rgba(90,35,129,.22) !important;
}
.badge-secondary{
  background: rgba(35,21,46,.08) !important;
  color: var(--es-text) !important;
}

/* Inputs focus */
.form-control:focus{
  border-color: rgba(90,35,129,.45) !important;
  box-shadow: 0 0 0 .2rem rgba(90,35,129,.18) !important;
}

/* Kanban cards (si existen clases) */
.kan-card{
  border: 1px solid var(--es-border) !important;
  border-radius: 14px;
  background: #fff;
}
.kan-meta{ color: var(--es-muted); }