/* =========================================================
   Roadmaps IRN Devs — mapa visual estilo roadmap.sh
   Classes mm-* (mapa mental) + rm-* (legado)
   ========================================================= */

/* ---- Badges compartilhados ---- */
.rm-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148,163,184,.12);
  color: #94a3b8;
  border: 1px solid rgba(148,163,184,.25);
  display: inline-block;
}
.rm-badge.time { color: #e8a33d; border-color: rgba(232,163,61,.35); background: rgba(232,163,61,.1); }
.rm-badge.level { color: #38bdf8; border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.1); }

.rm-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }

.rm-checklist { list-style: none; padding: 0; margin: 16px 0; }
.rm-checklist li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid rgba(51,65,85,.45); font-size: 14.5px;
}
.rm-checklist li::before {
  content: "☐"; color: #a78bfa; font-size: 16px; line-height: 1.3; flex-shrink: 0;
}

/* =========================================================
   MAPA MENTAL (mm-*) — tronco central + ramos
   ========================================================= */
.mm-map {
  --mm-accent: #a78bfa;
  --mm-accent2: #e8a33d;
  --mm-line: #475569;
  --mm-card: #1e293b;
  --mm-card-border: #334155;
  --mm-text: #e2e8f0;
  --mm-muted: #94a3b8;
  position: relative;
  margin: 28px 0 48px;
  padding: 8px 4px 24px;
}

/* Hub central no topo */
.mm-hub {
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin: 0 auto 8px;
  text-align: center;
  background: linear-gradient(160deg, rgba(124,58,237,.22), rgba(30,41,59,.95));
  border: 2px solid #7c3aed;
  border-radius: 16px;
  padding: 18px 20px 16px;
  box-shadow: 0 0 0 4px rgba(124,58,237,.12), 0 12px 40px rgba(0,0,0,.25);
}
.mm-hub-kicker {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mm-accent2);
  margin-bottom: 6px;
}
.mm-hub-title {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.3;
  margin-bottom: 6px;
}
.mm-hub-sub {
  display: block;
  font-size: 13px;
  color: var(--mm-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}
.mm-hub-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* Tronco vertical (linha central) */
.mm-trunk {
  position: absolute;
  left: 50%;
  top: 110px;
  bottom: 40px;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #7c3aed, #475569 30%, #334155);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}
.mm-bus { display: none; } /* reservado */

/* Ramos (fases) */
.mm-branches {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 28px;
  padding: 0 4px;
}

.mm-branch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
}

/* Cabeçalho da fase — pílula na linha central */
.mm-branch-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  background: #0f172a;
  border: 1.5px solid var(--mm-accent2);
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  box-shadow: 0 0 0 4px rgba(232,163,61,.1);
  z-index: 2;
}
.mm-branch-head .num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mm-accent2);
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.mm-branch-head .t {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mm-branch-head .t b {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.2;
}
.mm-branch-head .t span {
  font-size: 11.5px;
  color: var(--mm-muted);
}

/* Nós da fase — grade conectada */
.mm-nodes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 0;
  position: relative;
}

/* Nó (details/summary) */
.mm-node {
  background: var(--mm-card);
  border: 1.5px solid var(--mm-card-border);
  border-radius: 12px;
  min-width: 140px;
  max-width: 200px;
  flex: 1 1 140px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  list-style: none;
}
.mm-node::-webkit-details-marker { display: none; }
.mm-node > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  user-select: none;
}
.mm-node > summary::-webkit-details-marker { display: none; }
.mm-node > summary::after {
  content: "+";
  float: right;
  color: var(--mm-muted);
  font-weight: 700;
  font-size: 14px;
  margin-left: 6px;
}
.mm-node[open] > summary::after { content: "−"; color: var(--mm-accent); }
.mm-node:hover {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
  transform: translateY(-2px);
}
.mm-node.core {
  border-color: #7c3aed;
  background: linear-gradient(145deg, rgba(124,58,237,.18), #1e293b 60%);
}
.mm-node.optional {
  border-style: dashed;
  opacity: .92;
}
.mm-node.done {
  border-color: #22c55e;
  background: linear-gradient(145deg, rgba(34,197,94,.12), #1e293b 60%);
}
.mm-node.done .mm-node-name::before {
  content: "✓ ";
  color: #22c55e;
}

.mm-node-name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mm-text);
  line-height: 1.3;
  padding-right: 12px;
}
.mm-node-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--mm-muted);
  margin-top: 4px;
  line-height: 1.35;
}
.mm-node-detail {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(51,65,85,.6);
  margin-top: 0;
  padding-top: 10px;
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.5;
}
.mm-node-detail p { margin: 8px 0 0; }
.mm-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.mm-tag.essencial {
  background: rgba(124,58,237,.2);
  color: #c4b5fd;
  border: 1px solid rgba(124,58,237,.4);
}
.mm-tag.opcional {
  background: rgba(148,163,184,.12);
  color: #94a3b8;
  border: 1px solid rgba(148,163,184,.3);
}

/* Botão marcar feito dentro do detalhe */
.mm-toggle-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #e2e8f0;
  cursor: pointer;
}
.mm-toggle-done:hover { border-color: #22c55e; color: #86efac; }

/* Tópicos em lista profunda (mm-deep / mm-topic) */
.mm-deep { margin-top: 12px; }
.mm-topic {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13.5px;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(51,65,85,.35);
}
.mm-topic-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.mm-topic-kind.essencial { background: rgba(124,58,237,.2); color: #c4b5fd; }
.mm-topic-kind.opcional { background: rgba(100,116,139,.2); color: #94a3b8; }

/* FAQ */
.mm-faq {
  margin-top: 28px;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 4px 16px;
  background: rgba(30,41,59,.5);
}
.mm-faq details { padding: 10px 0; border-bottom: 1px solid rgba(51,65,85,.5); }
.mm-faq details:last-child { border-bottom: none; }
.mm-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: #e2e8f0;
  font-size: 14px;
}
.mm-faq p { color: #94a3b8; font-size: 13.5px; margin: 8px 0 0; line-height: 1.5; }

/* Legenda */
.rm-legend, .mm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: #94a3b8;
  margin: 8px 0 20px;
  justify-content: center;
}
.rm-legend span, .mm-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rm-legend i, .mm-legend i {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1.5px solid #475569;
  display: inline-block;
  background: #1e293b;
}
.rm-legend i.core, .mm-legend i.core { border-color: #7c3aed; background: rgba(124,58,237,.25); }
.rm-legend i.optional, .mm-legend i.optional { border-style: dashed; }
.rm-legend i.done, .mm-legend i.done { border-color: #22c55e; background: rgba(34,197,94,.25); }

/* Barra de progresso */
.mm-progress {
  max-width: 420px;
  margin: 0 auto 20px;
  text-align: center;
}
.mm-progress-label {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 6px;
  font-family: ui-monospace, monospace;
}
.mm-progress-bar {
  height: 8px;
  background: #1e293b;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #334155;
}
.mm-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7c3aed, #22c55e);
  border-radius: 999px;
  transition: width .35s ease;
}

/* ---- Legado rm-* (não quebrar páginas antigas) ---- */
.rm-map { margin: 28px 0 40px; padding: 8px 0; }
.rm-phase { margin-bottom: 28px; }
.rm-phase-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #e8a33d;
  background: rgba(232,163,61,.12); border: 1px solid rgba(232,163,61,.35);
  border-radius: 999px; padding: 6px 14px; margin: 0 0 14px;
}
.rm-phase-title .num {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #e8a33d; color: #0f172a; font-size: 11px; font-weight: 800;
}
.rm-nodes { display: flex; flex-wrap: wrap; gap: 10px; }
.rm-node {
  background: #1e293b; border: 1.5px solid #475569; border-radius: 10px;
  padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: #e2e8f0;
  min-width: 120px; max-width: 220px; line-height: 1.35;
}
.rm-node.core { border-color: #7c3aed; background: rgba(124,58,237,.12); }
.rm-node.optional { border-style: dashed; opacity: .85; }
.rm-node .sub { display: block; font-size: 11.5px; font-weight: 400; color: #94a3b8; margin-top: 4px; }
.rm-connector { display: flex; justify-content: center; height: 20px; color: #475569; font-size: 18px; }

/* Mobile */
@media (max-width: 700px) {
  .mm-trunk { left: 16px; transform: none; }
  .mm-hub { margin-left: 28px; max-width: none; text-align: left; }
  .mm-hub-meta { justify-content: flex-start; }
  .mm-branch-head { margin-left: 28px; margin-right: 0; }
  .mm-nodes { justify-content: flex-start; padding-left: 28px; }
  .mm-node { max-width: none; flex: 1 1 calc(50% - 10px); min-width: 120px; }
  .mm-progress { margin-left: 28px; max-width: none; }
}
@media (max-width: 420px) {
  .mm-node { flex: 1 1 100%; }
}