/* ---------- CABECERA ---------- */
#app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 4px rgba(27, 29, 58, 0.06);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 12px 28px;
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 200;
}

#app-header-left { display: flex; align-items: center; gap: 14px; }

/* El logo y la marca llevan de vuelta a la portada (catálogo de temas) desde
   cualquier punto de la app -- ver initHeaderNav() en app.js. */
#app-header-logo, #app-header-left .brand-box, #app-header-title { cursor: pointer; }
#app-header-logo { height: 44px; width: auto; display: block; flex-shrink: 0; }

#app-header-left .brand-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 1.05rem;
  display: block;
  line-height: 1.2;
}

#app-header-left .brand-endorsement {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 1px;
}

#app-header-left .brand-endorsement strong {
  color: var(--brand-primary);
  font-weight: 700;
}

#app-header-title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand-primary);
  font-size: 1.35rem;
  line-height: 1.25;
  /* min-width:0 permite que el título se recorte en vez de forzar overflow
     horizontal cuando la columna del grid es más estrecha que su texto
     (crítico en el breakpoint móvil, donde la columna pasa a "1fr"). */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-header-suite {
  justify-self: end;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 999px;
}

@media (max-width: 860px) {
  /* minmax(0, 1fr), no "1fr" a secas: un track "1fr" solo no encoge por
     debajo del ancho de su contenido (min-content), así que si el título
     no cabe, el grid entero se desborda horizontalmente en vez de recortar
     el texto -- justo el bug que rompía los 320px sin scroll horizontal. */
  #app-header { grid-template-columns: auto minmax(0, 1fr); }
  #app-header-suite { display: none; }
}

@media (max-width: 600px) {
  #app-header-title { font-size: 1.05rem; }
  #app-header-left .brand-endorsement { display: none; }
}

#app-shell { display: block; }

/* ---------- SIDEBAR: índice del tema, anclado ---------- */
/* position: fixed -- no se mueve al hacer scroll por el contenido del módulo,
   así se puede saltar a cualquier título o subtítulo en cualquier momento.
   #main-content compensa con margin-left. Oculto por completo en la portada
   (#app-shell.sin-sidebar), donde no hay "tema actual" cuyo índice mostrar. */
#sidebar {
  width: 300px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 20px 14px;
  position: fixed;
  top: 64px;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 100;
}

.tema-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }

.indice-titulo {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.83rem;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 10px;
}

.indice-num { font-family: var(--font-mono); font-size: 0.78rem; opacity: 0.8; min-width: 1.4em; flex-shrink: 0; }

.indice-titulo:hover { background: rgba(14, 155, 181, 0.08); color: var(--color-interactive); }

.indice-titulo.active {
  background: var(--brand-primary);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(29, 30, 148, 0.25);
}

.indice-subitems {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px 0;
}

.indice-subitem {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 2px solid var(--color-border);
  padding: 6px 12px 6px 26px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.indice-subitem:hover { color: var(--color-interactive); border-left-color: var(--color-interactive); }

.indice-vacio { color: var(--color-muted); font-size: 0.85rem; padding: 10px 12px; }

/* ---------- CONTENIDO PRINCIPAL ---------- */
#main-content { margin-left: 300px; padding: 32px 40px; max-width: 1320px; }

#app-shell.sin-sidebar #main-content { margin-left: 0; max-width: 1100px; }

.tema-header { margin-bottom: 20px; border-bottom: 2px solid var(--color-border); padding-bottom: 14px; }
.tema-header h2 { font-size: 1.65rem; }
.tema-header p { color: var(--color-muted); margin-top: 4px; }

.modulo-panel { animation: fadeIn 0.2s ease-in-out; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- PORTADA: catálogo de los 10 temas del curso ---------- */
.portada-intro { margin-bottom: 24px; }
.portada-intro h2 { font-size: 1.65rem; }
.portada-intro p { color: var(--color-muted); margin-top: 6px; }

.portada-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.portada-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 20px;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  height: 168px;
}

.portada-card:hover:not([disabled]) { border-color: var(--color-interactive); box-shadow: var(--shadow-hover); transform: translateY(-2px); }

.portada-card[disabled] { cursor: default; opacity: 0.6; }

.portada-card-num { font-family: var(--font-mono); font-size: 0.85rem; color: var(--brand-primary); font-weight: 700; }

.portada-card-titulo {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 1.02rem;
  line-height: 1.3;
  flex: 1;
}

.portada-card .badge { margin-top: auto; }

#menu-toggle {
  /* Oculto en escritorio -- el indice va siempre visible y anclado. Solo
     aparece por debajo de 860px, donde el sidebar pasa a panel deslizante
     (ver el media query mas abajo). Bug corregido el 26-08: esta regla
     estaba DESPUES del media query en el archivo, así que su "display:none"
     sin condicion ganaba siempre por orden de cascada y el boton nunca
     llegaba a mostrarse en movil. */
  display: none;
  color: var(--brand-primary);
  border-color: var(--color-border);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
}

/* ---------- MÓVIL ---------- */
@media (max-width: 860px) {
  #sidebar { left: -300px; transition: left var(--transition); box-shadow: var(--shadow-hover); }
  #sidebar.open { left: 0; }
  #main-content, #app-shell.sin-sidebar #main-content { margin-left: 0; padding: 20px 16px; max-width: 100%; }
  #menu-toggle { display: inline-flex; }
  /* [hidden] debe ganar siempre, incluso aqui dentro del media query donde
     "display: inline-flex" de la regla de arriba tiene la misma
     especificidad -- app.js pone hidden=true en la portada (no hay indice
     que desplegar), y sin este !important el boton se veria igual. */
  #menu-toggle[hidden] { display: none !important; }
}

/* Foco visible — accesibilidad AA en toda la navegación */
.indice-titulo:focus-visible,
.indice-subitem:focus-visible,
.portada-card:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 2px;
}