/* =========================================================
   Trabajos UNT · capa glassmorphism sobre Bootstrap 5.3
   Bootstrap aporta grid/componentes; aquí va el cristal,
   el fondo con manchas de luz y el modo presentación.
   ========================================================= */

:root {
  --brand: #4338ca;
  --brand-2: #0ea5e9;
  --accent: #f59e0b;

  --bg-1: #eef2ff;
  --bg-2: #f8fafc;
  --blob-1: rgba(99, 102, 241, .30);
  --blob-2: rgba(14, 165, 233, .26);
  --blob-3: rgba(245, 158, 11, .22);

  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .84);
  --glass-line: rgba(255, 255, 255, .75);
  --glass-shadow: 0 12px 34px rgba(15, 23, 42, .10);
  --glass-shadow-lg: 0 22px 54px rgba(15, 23, 42, .16);

  --bs-body-bg: transparent;
  --bs-primary: #4338ca;
  --bs-link-color: #4338ca;
  --bs-link-hover-color: #3730a3;
  --bs-border-radius: .9rem;
  --bs-border-radius-lg: 1.15rem;
}

[data-bs-theme="dark"] {
  --brand: #a5b4fc;
  --brand-2: #38bdf8;
  --accent: #fbbf24;

  --bg-1: #0a0f1f;
  --bg-2: #111827;
  --blob-1: rgba(99, 102, 241, .34);
  --blob-2: rgba(14, 165, 233, .24);
  --blob-3: rgba(245, 158, 11, .16);

  --glass: rgba(19, 26, 46, .58);
  --glass-strong: rgba(24, 32, 55, .80);
  --glass-line: rgba(255, 255, 255, .10);
  --glass-shadow: 0 12px 34px rgba(0, 0, 0, .38);
  --glass-shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);

  --bs-primary: #818cf8;
  --bs-link-color: #a5b4fc;
  --bs-link-hover-color: #c7d2fe;
  --bs-body-color: #e8ecf8;
}

/* ---------- Fondo con manchas de luz ---------- */
body {
  min-height: 100vh;
  background-color: var(--bg-2);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 460px at 8% -6%, var(--blob-1), transparent 62%),
    radial-gradient(680px 420px at 96% 4%, var(--blob-2), transparent 60%),
    radial-gradient(620px 420px at 52% 108%, var(--blob-3), transparent 62%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
}

/* ---------- Superficies de cristal ---------- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-line);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--glass-shadow);
}

.glass-strong { background: var(--glass-strong); }

.navbar-glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--glass-line);
}

.navbar-glass .nav-link { font-weight: 600; }
.navbar-glass .nav-link.active, .navbar-glass .nav-link:hover { color: var(--bs-primary); }

.brand-mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #4338ca, #0ea5e9);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(67, 56, 202, .35);
}

[data-bs-theme="dark"] .brand-mark { color: #0a0f1f; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  padding: 64px 0 108px;
  overflow: hidden;
  border-radius: 0 0 2rem 2rem;
}

.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(14, 165, 233, .30), transparent 60%),
    radial-gradient(700px 320px at 88% 0%, rgba(245, 158, 11, .22), transparent 60%),
    linear-gradient(135deg, #312e81 0%, #4338ca 45%, #0ea5e9 100%);
}

[data-bs-theme="dark"] .hero::before {
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(14, 165, 233, .22), transparent 60%),
    linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #0c4a6e 100%);
}

.hero .lead { color: rgba(255, 255, 255, .9); max-width: 660px; }
.hero-stats span { display: block; font-size: 1.65rem; font-weight: 800; line-height: 1.1; }
.hero-stats small { color: rgba(255, 255, 255, .8); font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; }

/* ---------- Controles ---------- */
.buscador-glass {
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  padding: .45rem .9rem;
}

.buscador-glass input { border: 0; background: transparent; box-shadow: none; }
.buscador-glass input:focus { box-shadow: none; }
.buscador-glass:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(67, 56, 202, .18); }

.filtros .btn { border-radius: 999px; font-weight: 600; }
.filtros .btn.active { box-shadow: 0 8px 20px rgba(67, 56, 202, .28); }

/* ---------- Tarjetas de trabajo ---------- */
.tarjeta-trabajo {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-line);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--glass-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
  overflow: hidden;
  height: 100%;
  color: var(--bs-body-color);
}

a.tarjeta-trabajo { text-decoration: none; display: flex; flex-direction: column; }
a.tarjeta-trabajo:hover { transform: translateY(-5px); box-shadow: var(--glass-shadow-lg); }

.tarjeta-trabajo .thumb {
  position: relative;
  height: 132px;
  display: grid;
  place-items: center;
  gap: 2px;
  color: #fff;
  font-weight: 800;
  font-size: .875rem;
  letter-spacing: .05em;
  background: linear-gradient(135deg, #4338ca, #0ea5e9);
}

.tarjeta-trabajo .thumb.mini-amber { background: linear-gradient(135deg, #b45309, #f59e0b); }
.tarjeta-trabajo .thumb.mini-teal { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.tarjeta-trabajo .thumb.mini-rose { background: linear-gradient(135deg, #9f1239, #f43f5e); }

.tarjeta-trabajo .num {
  position: absolute; top: 12px; right: 14px;
  background: rgba(15, 23, 42, .30);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  font-size: .75rem;
  padding: 2px 11px;
  backdrop-filter: blur(6px);
}

.tarjeta-trabajo .nuevo {
  position: absolute; top: 12px; left: 14px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  font-size: .7rem;
  padding: 2px 10px;
  letter-spacing: .06em;
}

.tarjeta-trabajo .card-body { display: flex; flex-direction: column; gap: .6rem; }
.tarjeta-trabajo .card-title { font-size: 1.15rem; margin: 0; }
.tarjeta-trabajo .card-text { color: var(--bs-secondary-color); font-size: .9rem; }

/* ---------- Página de trabajo ---------- */
.panel {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-line);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--glass-shadow);
}

.diagrama { overflow: auto; padding: .5rem 0; color: var(--bs-body-color); }
.diagrama svg { display: block; margin: 0 auto; transform-origin: top center; }
.diagrama [id^="arrow"] path { fill: var(--bs-secondary-color); }

.leyenda .sw { width: 20px; height: 20px; border-radius: 5px; border: 2.4px solid #334155; display: inline-block; }

.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.pasos li { counter-increment: paso; position: relative; padding-left: 46px; }
.pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #4338ca, #0ea5e9);
  color: #fff; font-weight: 800; font-size: .85rem;
}

/* ---------- Modo presentación ---------- */
.panel:fullscreen, .panel:fullscreen * { background: var(--glass-strong); }
.panel:fullscreen {
  display: flex; flex-direction: column;
  border-radius: 0; border: 0;
  overflow: hidden;
}
.panel:fullscreen .diagrama { flex: 1; overflow: auto; display: grid; place-items: start center; }
.panel:fullscreen .solo-presentacion { display: inline-flex !important; }

.solo-presentacion { display: none; }

.present-hint kbd {
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
}

/* ---------- Modal (Bootstrap + cristal) ---------- */
.modal-content.glass {
  background: var(--glass-strong);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-line);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--glass-shadow-lg);
}

.modal-content .form-control,
.modal-content .form-select {
  background: var(--glass);
  border-color: var(--glass-line);
  border-radius: .75rem;
}

.modal-content .form-control:focus,
.modal-content .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(67, 56, 202, .18);
}

/* ---------- Pie ---------- */
.pie-glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-top: 1px solid var(--glass-line);
}

@media (max-width: 575.98px) {
  .hero { padding: 44px 0 96px; }
}

/* =========================================================
   Cursos, arrastrar y soltar, favoritos, vistos y vista lista
   ========================================================= */

/* ---------- Zona de cursos ---------- */
.curso {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-line);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--glass-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
  cursor: pointer;
}

.curso:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-lg); }
.curso .barra { height: 5px; width: 100%; }
.curso .cuerpo { padding: .9rem 1rem; }

.curso[data-color="indigo"] .barra { background: linear-gradient(90deg, #4338ca, #6366f1); }
.curso[data-color="teal"]   .barra { background: linear-gradient(90deg, #0f766e, #14b8a6); }
.curso[data-color="amber"]  .barra { background: linear-gradient(90deg, #b45309, #f59e0b); }
.curso[data-color="rose"]   .barra { background: linear-gradient(90deg, #9f1239, #f43f5e); }
.curso[data-color="sky"]    .barra { background: linear-gradient(90deg, #0369a1, #0ea5e9); }
.curso[data-color="lime"]   .barra { background: linear-gradient(90deg, #4d7c0f, #84cc16); }

/* Estado mientras se arrastra un trabajo encima */
.curso.zona-activa {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(67, 56, 202, .22), var(--glass-shadow-lg);
  transform: translateY(-3px);
}

.curso.zona-activa .cuerpo::after {
  content: "Suelta aquí para agregar";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .9rem;
  color: #fff;
  background: rgba(67, 56, 202, .82);
  backdrop-filter: blur(2px);
}

.papelera.zona-activa {
  border-color: #b91c1c;
  box-shadow: 0 0 0 .25rem rgba(185, 28, 28, .22);
}

.papelera.zona-activa::after {
  content: "Suelta para quitar del curso";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .85rem;
  color: #fff;
  background: rgba(185, 28, 28, .85);
  border-radius: var(--bs-border-radius-lg);
}

/* ---------- Tarjeta arrastrable ---------- */
.tarjeta-trabajo[draggable="true"] { cursor: grab; }
.tarjeta-trabajo.arrastrando { opacity: .45; transform: scale(.98); }

.tarjeta-trabajo .acciones {
  position: absolute;
  top: 10px;
  left: 12px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .18s ease;
}

.tarjeta-trabajo:hover .acciones,
.tarjeta-trabajo:focus-within .acciones { opacity: 1; }

.tarjeta-trabajo .acciones button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(15, 23, 42, .45);
  color: #fff;
  backdrop-filter: blur(6px);
  cursor: pointer;
  padding: 0;
}

.tarjeta-trabajo .acciones button.activo { background: #f59e0b; border-color: #f59e0b; color: #1f2937; }
.tarjeta-trabajo .acciones button.visto-activo { background: #0f766e; border-color: #0f766e; }

.tarjeta-trabajo .curso-chip {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .38);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
}

.tarjeta-trabajo.visto { border-color: rgba(15, 118, 110, .55); }

/* ---------- Vista lista ---------- */
.vista-lista .tarjeta-trabajo { flex-direction: row; align-items: stretch; height: auto; }
.vista-lista .tarjeta-trabajo .thumb { height: auto; min-height: 92px; min-width: 132px; }
.vista-lista .tarjeta-trabajo .card-body { padding: .75rem 1rem !important; }
.vista-lista .tarjeta-trabajo .card-title { font-size: 1rem; }

@media (max-width: 575.98px) {
  .vista-lista .tarjeta-trabajo { flex-direction: column; }
  .vista-lista .tarjeta-trabajo .thumb { min-height: 110px; width: 100%; }
}

/* ---------- Varios ---------- */
.toast-container { z-index: 1080; }

.contador-curso { font-variant-numeric: tabular-nums; }

.orden-select { max-width: 210px; }