/* Piezas del chasis de la app (sidebar, listas densas) que Tailwind por CDN
   no necesita recompilar en cada pantalla. Los valores son los tokens v0.5
   del producto (ver tailwind.config.ts en el repo de la app). */

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.navlink,
.modbtn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border-radius: 8px; padding: 8px 12px;
  font-size: 14px; font-weight: 500; color: #5b606b;
  background: none; border: 0; cursor: pointer; transition: background .15s, color .15s;
}
.navlink:hover, .modbtn:hover { background: #e3e6eb; color: #20211C; }
.navlink.is-active { background: #20211C; color: #fff; }
.navlink.is-active svg { color: #fff; }
.navlink svg, .modbtn svg { width: 18px; height: 18px; flex: none; color: #8b909c; }
.modbtn.is-open { background: #e3e6eb; color: #20211C; }
.modbtn .chev { width: 14px; height: 14px; transition: transform .15s; }
.modbtn.is-open .chev { transform: rotate(180deg); }
.modsub {
  margin: 2px 0 4px 26px; padding-left: 12px;
  border-left: 1px solid #e7e9ee; display: flex; flex-direction: column; gap: 2px;
}
.modlink {
  border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 500;
  color: #5b606b; cursor: pointer; transition: background .15s, color .15s;
}
.modlink:hover { background: #e3e6eb; color: #20211C; }
.modlink.is-active { background: #20211C; color: #fff; }

/* ── Listas densas (banco de material) ───────────────────────────────────── */
.densa-row {
  display: block; width: 100%; text-align: left; padding: 10px 16px;
  border-bottom: 1px solid #e7e9ee; cursor: pointer; transition: background .12s;
}
.densa-row:last-child { border-bottom: 0; }
.densa-row:hover { background: #f7f8fa; }
.densa-row.sel { background: #EEEBFE; box-shadow: inset 3px 0 0 #20211C; }

/* Pestañas del hub de cursos */
.cursos-tab { user-select: none; }

/* Tira de navegación en pantallas chicas (el sidebar es lg-only). */
.navchip { cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.navchip:hover { background: #eef0f3; color: #20211C; }
.navchip.is-active { background: #20211C; border-color: #20211C; color: #fff; }