/* ================================================
 * TRACKR — Guía / Help
 * Acordeón anidado: secciones + sub-secciones
 * Dependencias: variables.css
 * ================================================ */

/* ── Sección principal ── */
.guide-section{
  border:1px solid var(--b1);
  border-radius:var(--r);
  margin-bottom:.5rem;
  overflow:hidden;
}

/* ── Header de sección ── */
.guide-header{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.85rem 1rem;
  cursor:pointer;
  transition:background var(--tr);
}
.guide-header:hover{background:var(--bg3)}

.guide-icon{
  font-size:1rem;
  flex-shrink:0;
  width:24px;
  text-align:center;
  color:var(--ac);
}
.guide-htext{flex:1;min-width:0}
.guide-htitle{
  font-size:.88rem;
  font-weight:500;
  color:var(--t1);
}
.guide-hdesc{
  font-size:.75rem;
  color:var(--t3);
  margin-top:.1rem;
}
.guide-chev{
  font-size:.8rem;
  color:var(--t3);
  flex-shrink:0;
}

/* ── Body de sección ── */
.guide-body{
  padding:0 1rem 1rem 1rem;
  font-size:.82rem;
  line-height:1.6;
  color:var(--t2);
}

/* ── Intro text (antes de sub-secciones) ── */
.guide-intro{
  font-size:.82rem;
  line-height:1.6;
  color:var(--t2);
  margin-bottom:.75rem;
}
.guide-intro p{margin:0 0 .5rem 0}

/* ── Sub-sección (acordeón anidado) ── */
.guide-sub{
  border:1px solid var(--b1);
  border-radius:var(--r);
  margin-bottom:.4rem;
}
.guide-sub-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.6rem .85rem;
  cursor:pointer;
  transition:background var(--tr);
}
.guide-sub-header:hover{background:var(--bg3)}
.guide-sub-title{
  font-size:.82rem;
  font-weight:500;
  color:var(--t1);
}
.guide-chev-sub{font-size:.7rem}

.guide-sub-body{
  padding:0 .85rem .75rem .85rem;
  font-size:.8rem;
  line-height:1.6;
  color:var(--t2);
}

/* ── Contenido compartido (body + sub-body) ── */
.guide-body p,
.guide-sub-body p{margin:0 0 .6rem 0}

.guide-body strong,
.guide-sub-body strong{color:var(--t1)}

.guide-body code,
.guide-sub-body code{
  font-family:'DM Mono',monospace;
  font-size:.78rem;
  background:var(--bg3);
  padding:.1rem .35rem;
  border-radius:3px;
  color:var(--ac);
}

.guide-body ul,
.guide-sub-body ul{
  margin:0 0 .6rem 0;
  padding-left:1.2rem;
}
.guide-body li,
.guide-sub-body li{margin-bottom:.3rem}

/* ── Tip box ── */
.guide-tip{
  background:color-mix(in srgb,var(--ac) 8%,transparent);
  border-left:3px solid var(--ac);
  padding:.5rem .75rem;
  border-radius:0 var(--r) var(--r) 0;
  margin:.6rem 0;
  font-size:.78rem;
  color:var(--t2);
}