/* Mapa de pré-requisitos (protótipo). Só tokens de site.css. Celular primeiro; painel lateral a partir de 1024px. */
.flx { display: grid; gap: 18px; min-width: 0; }
.flx .i { width: 1em; height: 1em; flex: none; }
.flx-cod { font: 700 12.5px/1.2 var(--body); letter-spacing: .04em; color: var(--mut); font-variant-numeric: tabular-nums; }

/* ---------- resumo ---------- */
.flx-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.flx-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: inset 0 var(--cap) 0 var(--brand); padding: 16px 14px 14px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.flx-k { font: 600 13.5px/1.3 var(--body); color: var(--mut); }
.flx-v { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.flx-v b { font: 700 30px/1.05 var(--display); color: var(--brand-ink); font-variant-numeric: tabular-nums lining-nums; }
.flx-de { font: 600 14px/1.2 var(--body); color: var(--ink-2); }
.flx-s { font-size: 13.5px; line-height: 1.35; color: var(--mut); }
.flx-s a { font-weight: 700; }
.flx-s .flx-pg { display: none; }
.flx-bar { display: block; height: 8px; border-radius: 99px; background: var(--lock-tint); overflow: hidden; margin-top: 6px; }
.flx-bar span { display: block; height: 100%; width: 0; background: var(--brand); border-radius: inherit; transition: width .3s; }

/* ---------- controles ---------- */
.flx-ctrl { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.flx-modo, .flx-rapido { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flx-ctrl-k { font: 700 14px/1.2 var(--body); color: var(--ink-2); }
.flx-select { min-height: 40px; padding: 0 10px; font: 600 15px/1 var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.flx-rapido .btn { gap: 6px; }
@media (max-width: 639px) {
  .flx-ctrl { gap: 14px; }
  .flx-modo, .flx-rapido { width: 100%; }
  .flx-ctrl-k { flex-basis: 100%; }
  .flx-select { flex: 1 1 0; min-width: 0; }
}

/* ---------- legenda e dica ---------- */
.flx-legenda { list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); font-size: 14px; color: var(--ink-2); }
.flx-lg { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.flx-lg .i { width: 17px; height: 17px; }
.flx-lg[data-estado="cursada"] .i, .flx-lg[data-estado="pode"] .i { color: var(--ok); }
.flx-lg[data-estado="travada"] .i { color: var(--lock); }
.flx-sw { width: 16px; height: 16px; border-radius: 4px; background: var(--brand); }
.flx-lg .flx-tag { position: static; }
.flx-dica { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--ink); background: var(--tint); border: 1px solid var(--tint-line); border-radius: var(--r); padding: 12px 14px; }
.flx-dica > .i { width: 22px; height: 22px; color: var(--brand-ink); margin-top: 1px; }

/* ---------- mapa ---------- */
.flx-palco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.flx-mapa { position: relative; min-width: 0; padding-bottom: 8px; }
.flx-fios { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; overflow: visible; }
.flx-fio { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; opacity: .85; }
.flx-fio-depois { stroke-dasharray: 6 5; }
.flx-no { fill: var(--brand); }
.flx-seta { fill: var(--brand); }
.flx-per { position: relative; padding-block: 16px 6px; border-top: 1px solid var(--line-strong); }
.flx-per:first-of-type { border-top: 0; padding-top: 4px; }
.flx-per-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; position: relative; z-index: 1; }
.flx-per-n { font: 700 24px/1 var(--display); color: var(--brand-ink); font-variant-numeric: lining-nums; }
.flx-per-t { font: 700 15px/1 var(--display); color: var(--ink-2); letter-spacing: .03em; }
.flx-per-c { margin-left: auto; font: 600 13.5px/1 var(--body); color: var(--mut); }
.flx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }

.flx-card {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 44px;
  text-align: left; cursor: pointer; padding: 12px 11px 10px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgb(20 10 8 / .05);
  transition: opacity .18s, border-color .15s, box-shadow .15s, background-color .15s;
}
.flx-card:hover { border-color: var(--brand); }
.flx-c-top { display: flex; align-items: baseline; gap: 6px; }
.flx-cr { margin-left: auto; font: 600 12px/1.2 var(--body); color: var(--mut); white-space: nowrap; }
.flx-nome { font: 600 15px/1.28 var(--body); color: var(--ink); overflow-wrap: anywhere; hyphens: auto; }
.flx-st { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 4px; font: 700 13px/1.2 var(--body); color: var(--lock); }
.flx-st .i { width: 15px; height: 15px; }
.flx-cnt { font: 500 12.5px/1.3 var(--body); color: var(--mut); }
.flx-card[data-estado="pode"] .flx-st { color: var(--ok); }
.flx-card[data-estado="cursada"] { background: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 45%, var(--line-strong)); }
.flx-card[data-estado="cursada"] .flx-st { color: var(--ok); }

/* tags do caminho (texto, não só cor) */
.flx-tag { position: absolute; top: -9px; left: 9px; font: 700 10.5px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 99px; white-space: nowrap; }
.flx-tag-antes { background: var(--ink-2); color: var(--surface); }
.flx-tag-depois { background: var(--surface); color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px var(--brand); }
.flx-tag-sel { background: var(--brand-strong); color: var(--on-brand); }

/* seleção: o caminho fica, o resto esmaece */
.flx-card[data-rel="sel"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent); }
.flx-card[data-rel="sel"] .flx-cod, .flx-card[data-rel="sel"] .flx-cr, .flx-card[data-rel="sel"] .flx-nome,
.flx-card[data-rel="sel"] .flx-st, .flx-card[data-rel="sel"] .flx-cnt { color: var(--on-brand); }
.flx-card[data-rel="exigida"], .flx-card[data-rel="liberada"] { border-color: var(--brand); border-width: 1.5px; }
/* esmaecido com fundo opaco: os conectores passam por baixo e não riscam o texto */
.tem-sel .flx-card[data-rel=""] { background: var(--bg-alt); border-color: var(--line); box-shadow: none; }
.tem-sel .flx-card[data-rel=""] > * { opacity: .45; transition: opacity .18s; }
.tem-sel .flx-card[data-rel=""]:hover > *, .tem-sel .flx-card[data-rel=""]:focus-visible > * { opacity: 1; }
.marcando .flx-card { border-style: dashed; }
.marcando .flx-card[data-estado="cursada"] { border-style: solid; }

/* ---------- painel de detalhes (folha fixa embaixo no celular) ---------- */
.flx-painel {
  position: sticky; bottom: 0; z-index: 5; margin: 6px 0 0; min-width: 0;
  background: var(--surface); border: 1px solid var(--line-strong); border-top: 4px solid var(--brand); border-radius: var(--r) var(--r) 0 0;
  box-shadow: 0 -10px 30px rgb(20 10 8 / .14);
  padding: 14px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  max-height: 72vh; max-height: 72dvh;
  /* o topo (código, nome, fechar, ver detalhes) fica parado; só o corpo rola */
  display: flex; flex-direction: column; overflow: hidden;
}
.flx-p-topo { flex: none; }
.flx-painel .flx-p-corpo { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.flx-p-vazio { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; padding-top: 4px; }
.flx-p-vazio .i { width: 24px; height: 24px; color: var(--brand-ink); flex: none; }
.flx-p-head { display: flex; align-items: flex-start; gap: 6px; }
.flx-p-id { flex: 1; min-width: 0; padding-top: 4px; }
.flx-p-cod { font: 700 13px/1.2 var(--body); color: var(--brand-ink); letter-spacing: .03em; }
.flx-p-nome { font: 700 17px/1.2 var(--display); color: var(--ink-2); margin-top: 3px; }
.flx-p-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; color: var(--ink-2); }
.flx-p-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.flx-p-btn .i { width: 20px; height: 20px; transition: rotate .2s; }
.flx-p-st { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font: 600 14.5px/1.35 var(--body); padding: 7px 10px; border-radius: var(--r-sm); background: var(--lock-tint); color: var(--ink); }
.flx-p-st .i { width: 19px; height: 19px; margin-top: 1px; color: var(--lock); }
.flx-p-st[data-estado="pode"], .flx-p-st[data-estado="cursada"] { background: var(--ok-tint); }
.flx-p-st[data-estado="pode"] .i, .flx-p-st[data-estado="cursada"] .i { color: var(--ok); }
.flx-p-resumo { margin-top: 8px; font-size: 14.5px; color: var(--mut); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.flx-p-mais { margin-left: auto; min-height: 40px; padding: 0 4px; border: 0; background: none; font-weight: 700; color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.flx-p-corpo { display: none; margin-top: 12px; }
.flx-painel[data-aberto="true"] .flx-p-corpo { display: grid; gap: 12px; align-content: start; }
.flx-p-fatos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.flx-p-fatos div { background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 10px; }
.flx-p-fatos dt { font: 600 12.5px/1.2 var(--body); color: var(--mut); }
.flx-p-fatos dd { margin: 2px 0 0; font: 700 16px/1.2 var(--body); color: var(--ink); }
.flx-p-marcar { justify-self: start; gap: 8px; }
.flx-p-min { background: var(--warn-tint); border: 1px solid var(--warn-line); border-radius: var(--r-sm); padding: 12px 14px; display: grid; gap: 6px; font-size: 15px; }
.flx-p-min h4 { display: flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--body); color: var(--warn); }
.flx-p-min h4 .i { width: 19px; height: 19px; }
.flx-p-h { display: flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--body); color: var(--ink-2); margin-top: 4px; }
.flx-p-h .i { width: 18px; height: 18px; color: var(--brand-ink); }
.flx-rot { rotate: 180deg; }
.flx-pill { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--tint); color: var(--brand-ink); font: 700 13px/1 var(--body); }
.flx-p-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.flx-li { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; gap: 10px; align-items: center; text-align: left; min-height: 48px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; color: var(--ink); }
.flx-li:hover { border-color: var(--brand); }
.flx-li-st .i { width: 19px; height: 19px; color: var(--lock); }
.flx-li[data-estado="pode"] .flx-li-st .i, .flx-li[data-estado="cursada"] .flx-li-st .i { color: var(--ok); }
.flx-li-t { display: grid; font-size: 15px; line-height: 1.3; font-weight: 600; min-width: 0; }
.flx-li-chev { width: 18px; height: 18px; color: var(--mut); }
.flx-p-nada, .flx-p-ind { font-size: 14.5px; color: var(--mut); }
.flx-lk { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; justify-content: center; vertical-align: middle; border: 0; background: none; padding: 0 2px; font: 700 14.5px/1 var(--body); color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.flx-p-elet { border: 1px solid var(--line); border-radius: var(--r-sm); }
.flx-p-elet summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font-weight: 700; color: var(--ink-2); font-size: 15px; }
.flx-p-elet summary::-webkit-details-marker { display: none; }
.flx-p-elet summary .i { width: 17px; height: 17px; color: var(--brand-ink); transition: rotate .2s; }
.flx-p-elet[open] summary .i { rotate: 90deg; }
.flx-p-elet ul { margin: 0; padding: 4px 14px 12px 32px; display: grid; gap: 4px; font-size: 14.5px; }
.flx-p-fonte { font-size: 14px; color: var(--mut); }
.flx-p-fonte a { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.flx-p-fonte .i { width: 14px; height: 14px; }

/* ---------- extras: disciplinas-chave e eletivas ---------- */
.flx-extras { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 10px; }
.flx-extras .card { padding: 22px 16px 18px; min-width: 0; }
.flx-h { display: flex; align-items: center; gap: 10px; font: 700 21px/1.2 var(--display); color: var(--ink-2); }
.flx-h .i { width: 24px; height: 24px; color: var(--brand-ink); }
.flx-sub { margin-top: 6px; font-size: 15.5px; color: var(--mut); }
.flx-rank { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.flx-rk { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; text-align: left; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; color: var(--ink); }
.flx-rk:hover { border-color: var(--brand); }
.flx-rk-t { display: grid; gap: 2px; min-width: 0; }
.flx-rk-t b { font: 700 15.5px/1.3 var(--body); }
.flx-rk-bar { display: block; height: 6px; border-radius: 99px; background: var(--lock-tint); margin-top: 5px; overflow: hidden; }
.flx-rk-bar span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.flx-rk-n { font-size: 13.5px; color: var(--mut); font-weight: 600; }
.flx-rk-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.flx-rk .flx-st { margin: 0; padding: 0; font-size: 12.5px; }
.flx-rk[data-estado="pode"] .flx-st, .flx-rk[data-estado="cursada"] .flx-st { color: var(--ok); }

.flx-busca { margin: 14px 0 10px; max-width: none; }
.flx-filtros .chip { min-height: 40px; }
.flx-elet-n { margin: 10px 0 6px; font-size: 14px; color: var(--mut); font-weight: 600; }
.flx-elet-lista { list-style: none; margin: 0; padding: 0 2px 0 0; max-height: 460px; overflow-y: auto; overscroll-behavior: contain; border-block: 1px solid var(--line); }
.flx-el { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.flx-el-t { grid-column: 1 / -1; display: grid; gap: 1px; min-width: 0; }
.flx-el-t b { font: 600 15.5px/1.3 var(--body); color: var(--ink); }
.flx-el-req { font-size: 14px; color: var(--mut); }
.flx-el-req abbr { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; font-weight: 700; color: var(--ink-2); }
.flx-el .flx-st { margin: 0; padding: 0; }
.flx-el[data-estado="pode"] .flx-st, .flx-el[data-estado="cursada"] .flx-st { color: var(--ok); }
.flx-el-marcar { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface); color: var(--ink-2); font: 600 14px/1 var(--body); cursor: pointer; }
.flx-el-marcar .i { width: 17px; height: 17px; }
.flx-el-marcar[aria-pressed="true"] { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
.flx-el-vazio { padding: 18px 4px; color: var(--mut); }
.flx-regras { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.flx-regras h4 { font: 700 15px/1.2 var(--body); color: var(--ink-2); margin-bottom: 8px; }
.flx-regras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flx-regras li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.flx-regras li .i { width: 17px; height: 17px; color: var(--brand-ink); margin-top: 2px; }
.flx-regras a { font-weight: 700; }
.flx-pg { color: var(--mut); font-size: 13px; }

/* ---------- telas maiores ---------- */
@media (min-width: 640px) {
  .flx-resumo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flx-cards { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px 12px; }
  .flx-per { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; padding-block: 20px 8px; }
  .flx-per-h { flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding-top: 6px; }
  .flx-per-n { font-size: 32px; }
  .flx-per-c { margin-left: 0; margin-top: 4px; }
  .flx-extras .card { padding: 26px 22px 22px; }
  .flx-el { grid-template-columns: minmax(0, 1fr) auto auto; }
  .flx-el-t { grid-column: auto; }
  .flx-painel { margin-inline: 0; }
}
@media (min-width: 1024px) {
  .flx-palco { grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; }
  .flx-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .flx-painel {
    position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); bottom: auto; margin: 0;
    border-radius: var(--r); border-color: var(--line); border-top: var(--cap) solid var(--brand); box-shadow: none;
    padding: 22px 18px 18px; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px);
  }
  .flx-p-mais { display: none; }
  .flx-p-nome { font-size: 19px; }
  .flx-p-st { font-size: 15px; padding: 9px 11px; margin-top: 10px; }
  .flx-p-corpo { display: grid; gap: 12px; align-content: start; }
  .flx-extras { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .flx-card, .flx-bar span, .tem-sel .flx-card[data-rel=""] > *, .flx-p-btn .i, .flx-p-elet summary .i { transition: none; }
}

/* No celular, setas cruzando várias faixas viram tracejado solto: o destaque e as etiquetas já mostram a relação. */
@media (max-width: 767px) { .flx-fios { display: none; } }