/* ==========================================================================
   Layout · caparazón, barra lateral, cabecera, contenido y pie
   ========================================================================== */

.course-shell {
  --lateral: var(--sidebar-width);

  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns var(--dur-base) var(--ease-out);
  /* La barra lateral es sticky con alto de pantalla, así que en páginas
     largas su columna quedaría en blanco por debajo. El degradado pinta esa
     columna del color de la barra sin añadir un elemento extra. */
  background: linear-gradient(
    to right,
    var(--forest) 0 var(--lateral),
    transparent var(--lateral)
  );
}

/* Barra plegada en escritorio. */
.course-shell[data-lateral="oculta"] {
  --lateral: 0rem;
}

/* --- Barra lateral -------------------------------------------------------- */

.course-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--forest);
  color: #fff;
  overflow-y: auto;
  /* Horizontal oculto: al plegarse, la columna llega a 0 y el contenido
     interior debe recortarse, no reflowear. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.course-shell[data-lateral="oculta"] > .course-sidebar {
  opacity: 0;
  pointer-events: none;
}

/* Las secciones conservan su ancho mientras la columna se cierra. */
.course-sidebar__header,
.course-sidebar__body,
.course-sidebar__footer {
  width: var(--sidebar-width);
  flex: none;
}

.course-sidebar__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.25rem 1rem 1rem;
}

/* Cierre dentro del cajón: solo hace falta cuando el cajón tapa la cabecera. */
.sidebar-close {
  display: none;
  flex: none;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid #ffffff26;
  border-radius: 0.6rem;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.sidebar-close:hover { background: #ffffff1f; }
.course-sidebar__body { flex: 1 0 auto; padding: 0 0.6rem; }
.course-sidebar__footer { padding: 1rem; }

.course-mark {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #fff;
}

.course-mark__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, var(--blue), #0b7a9d);
  color: #fff;
  box-shadow: 0 8px 24px #079fd340;
}

.course-mark strong,
.course-mark small { display: block; }
.course-mark strong { font-size: 0.96rem; }
.course-mark small { margin-top: 0.14rem; color: #ffffff9e; font-size: 0.72rem; }

.sidebar-group + .sidebar-group { margin-top: 0.9rem; }

.sidebar-group__label {
  padding: 0.5rem 0.6rem;
  color: #ffffff73;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sidebar-divider {
  height: 1px;
  margin: 0.6rem 0.6rem 0;
  background: #ffffff1c;
  border: 0;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.7rem;
  padding: 0 0.7rem;
  border-radius: 0.75rem;
  color: #e6eeea;
  font-size: 0.82rem;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.sidebar-link:hover { background: #1c3931; color: #fff; }

.sidebar-link[aria-current="page"] {
  background: #1c3931;
  color: #fff;
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--green);
}

.sidebar-link > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-link .icon { flex: none; }

.session-state-icon {
  flex: none;
  width: 0.78rem;
  height: 0.78rem;
  margin-left: auto;
  opacity: 0.42;
}

.session-state-icon--open { color: var(--green-light); opacity: 1; }

.sidebar-progress {
  padding: 1rem;
  border: 1px solid #ffffff1a;
  border-radius: var(--radius-sm);
  background: #ffffff0b;
}

.sidebar-progress__label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  font-size: 0.76rem;
}

.sidebar-progress small {
  display: block;
  margin-top: 0.65rem;
  color: #ffffff7a;
  font-size: 0.67rem;
  line-height: 1.45;
}

/* --- Cabecera ------------------------------------------------------------- */

.course-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  padding: 0.85rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid #dce2ddd9;
  background: #f5f6f2e0;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.course-header__left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.notebook-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.save-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.3rem;
  color: #64716b;
  font-size: 0.72rem;
}

/* El botón sirve en las dos anchuras: pliega la barra en escritorio y abre
   el cajón en móvil. Se declara con dos clases para ganarle a .btn, que se
   carga después en components.css. */
.btn.sidebar-toggle { display: inline-flex; }

/* --- Marca ---------------------------------------------------------------- */

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand-lockup .partner-logo img {
  width: auto;
  height: 3.2rem;
  object-fit: contain;
}

.brand-lockup--compact .partner-logo img { height: 2.4rem; }

.brand-divider {
  width: 1px;
  height: 2.8rem;
  background: var(--line);
}

.brand-lockup--compact .brand-divider { height: 2.1rem; }

/* --- Contenido ------------------------------------------------------------ */

.course-main {
  width: min(100%, var(--content-width));
  min-height: 65vh;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 4.5rem) clamp(1rem, 4vw, 4.5rem) 5rem;
}

.route-section,
.outputs-section,
.activities-section { margin: var(--space-8) 0; }

/* --- Rejillas reutilizadas ------------------------------------------------ */

.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.timeline-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; }
.outputs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.principles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin: 1.2rem 0 var(--space-8); }
.agenda-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.activity-stack { display: grid; gap: var(--space-4); }
.review-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }

/* --- Pie ------------------------------------------------------------------ */

.course-footer {
  margin-top: var(--space-6);
  padding: 2.6rem clamp(1rem, 4vw, 4.5rem) 1.5rem;
  background: var(--forest);
  color: #fff;
}

.course-footer__top,
.course-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.course-footer__top {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--on-dark-line);
}

.course-footer .brand-lockup {
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  background: #fff;
}

.course-footer__status { text-align: right; }

.course-footer__status span,
.course-footer__status strong {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.course-footer__status span {
  color: #9cc7b8;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.course-footer__status strong { margin-top: 0.45rem; font-size: var(--text-md); }

.course-footer__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 1.5rem 0;
}

.course-footer__links a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem;
  border: 1px solid #ffffff1c;
  border-radius: 0.8rem;
  color: #d7e4de;
  font-size: 0.76rem;
  font-weight: 700;
  transition: background var(--dur-fast) var(--ease-out);
}

.course-footer__links a:hover { background: #ffffff12; }
.course-footer__links .icon { color: var(--green-light); }

.course-footer__bottom {
  padding-top: 1.2rem;
  border-top: 1px solid var(--on-dark-line);
  color: var(--on-dark-faint);
  font-size: var(--text-2xs);
}

/* --- Adaptación ----------------------------------------------------------- */

@media (width <= 1120px) {
  .timeline-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-grid > :last-child { grid-column: span 2; min-height: 17rem; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (width <= 980px) {
  .course-shell,
  .course-shell[data-lateral="oculta"] {
    grid-template-columns: minmax(0, 1fr);
    background: none;
  }

  .sidebar-close { display: grid; }

  /* En móvil manda data-open, no el plegado de escritorio. */
  .course-shell[data-lateral="oculta"] > .course-sidebar {
    opacity: 1;
    pointer-events: auto;
  }

  .course-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: var(--sidebar-width);
    max-width: 86vw;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .course-sidebar[data-open="true"] { transform: translateX(0); }


  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: #10241f7a;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
  }

  .sidebar-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
}

@media (width <= 820px) {
  .course-header { flex-wrap: wrap; }
  .course-header .brand-lockup,
  .save-status { display: none; }
  .profile-grid,
  .outputs-grid,
  .agenda-grid,
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
  .review-list { grid-template-columns: 1fr; }
}

@media (width <= 580px) {
  .course-main { padding-inline: 0.8rem; }
  .course-header { min-height: 4.4rem; padding-inline: 0.8rem; }
  .profile-grid,
  .timeline-grid,
  .outputs-grid,
  .principles-grid,
  .tools-grid,
  .agenda-grid,
  .course-footer__links { grid-template-columns: 1fr; }
  .timeline-grid > :last-child { grid-column: auto; }
  .course-footer__top,
  .course-footer__bottom { flex-direction: column; align-items: flex-start; }
  .course-footer__status { text-align: left; }
  .course-footer__status span,
  .course-footer__status strong { justify-content: flex-start; }
}