/* ---------------------------------------------------------------------------
   sidebar-nav.css — vertical step navigation for multi-block forms.
   Currently used by the triage form (9 blocks).
--------------------------------------------------------------------------- */

/* La sidebar es FIJA: nunca scrollea (ni ella ni la lista de pasos). Si la
   ventana es baja, la lista no crece un scrollbar — se compacta, con los
   @media (max-height) del final de este archivo. */
.sidebar {
  background: var(--refi-ink);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

#sidenav {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}

.logo {
  font-family: 'Merriweather', serif;
  font-size: 20px;
  color: var(--refi-paper);
  margin-bottom: 2px;
}

/* Marca ReFi sobre la sidebar oscura: el asset es la versión BLANCA del logo
   (los negros no se ven sobre --refi-ink). */
.logo-img {
  width: 116px;
  height: auto;
  display: block;
  margin-bottom: 6px;
}

.logo-sub {
  font-size: 11px;
  color: var(--triage-sand-d);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Progress bar */
.pbar-wrap {
  background: #222219;
  border-radius: 4px;
  height: 3px;
  margin-bottom: 28px;
  overflow: hidden;
}

.pbar {
  height: 100%;
  background: var(--triage-moss-l);
  border-radius: 4px;
  transition: width 0.4s ease;
  width: 11%;
}

/* Block items */
.nb {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
  border-bottom: 0.5px solid #222219;
}

.nb:hover .nl {
  opacity: 0.8;
}

.nd {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #222219;
  border: 1.5px solid #333328;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--triage-sand-d);
  flex-shrink: 0;
  margin-top: 1px;
}

.nd.done {
  background: var(--triage-moss);
  border-color: var(--triage-moss);
  color: #fff;
}

/* Bloque visitado con preguntas obligatorias pendientes (required-gate) */
.nd.warn {
  background: #FF971A;
  border-color: #FF971A;
  color: #fff;
}

.nd.active {
  background: var(--refi-paper);
  border-color: var(--refi-paper);
  color: var(--refi-ink);
}

.nl {
  font-size: 13px;
  color: var(--triage-sand-d);
  line-height: 1.3;
}

.nl.active {
  color: var(--refi-paper);
  font-weight: 500;
}

.nq {
  font-size: 11.5px;
  color: var(--triage-sand-d);
  opacity: 0.65;
  margin-top: 1px;
}

.sb-footer {
  margin-top: auto;
  padding-top: 16px;
  font-size: 12px;
  color: var(--triage-sand-d);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
/* En móvil/tablet la sidebar deja de ser una columna fija y se vuelve una barra
   superior con los pasos deslizables horizontalmente. El progreso (.pbar) queda
   como una línea fina en el borde inferior de la barra. */
@media (max-width: 900px) {
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 14px;
    overflow: hidden;            /* el scroll horizontal lo maneja #sidenav */
  }
  .logo { font-size: 16px; margin-bottom: 0; flex-shrink: 0; }
  .logo-img { width: 34px; margin-bottom: 0; flex-shrink: 0; }
  .logo-sub, .sb-footer { display: none; }

  /* Barra de progreso pegada al borde inferior de la barra superior */
  .pbar-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    margin-bottom: 0;
    border-radius: 0;
  }

  /* Lista de pasos en fila, deslizable */
  #sidenav {
    display: flex;
    gap: 6px;
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nb {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 4px 2px;
    border-bottom: none;
    min-width: 54px;
    flex-shrink: 0;
  }
  .nq { display: none; }
  .nl { font-size: 10.5px; line-height: 1.2; }
  /* En la barra superior el scroll es horizontal (lo declara #sidenav arriba). */
  #sidenav { flex: 1; overflow-x: auto; overflow-y: hidden; }
}

/* ─── VENTANAS BAJAS (columna) ────────────────────────────────────────────────
   La sidebar nunca scrollea: en pantallas bajas se aprieta. Primero se sacrifica
   el subtítulo de cada paso ("6 preguntas"), después el aire y el tamaño. */
@media (min-width: 901px) and (max-height: 860px) {
  .sidebar   { padding: 22px 20px; }
  .logo-img  { width: 100px; }
  .logo-sub  { margin-bottom: 16px; }
  .pbar-wrap { margin-bottom: 18px; }
  .nb        { padding: 7px 0; }
  .nq        { display: none; }
}

@media (min-width: 901px) and (max-height: 660px) {
  .sidebar   { padding: 16px 20px; }
  .logo-img  { width: 84px; }
  .logo-sub  { margin-bottom: 12px; }
  .pbar-wrap { margin-bottom: 12px; }
  .nb        { padding: 5px 0; }
  .nl        { font-size: 12px; }
  .sb-footer { padding-top: 10px; }
}