/* ==========================================================================
   Banco de Vídeos — estilos de aplicação
   (painel Líteris, hub de protótipo, diagramas)
   ========================================================================== */

/* ---------- Painel administrativo Líteris (fora do Moodle) ---------- */

.adm { min-height: 100vh; display: grid; grid-template-columns: 256px 1fr; background: #F4F6FA; }

.adm__side { background: var(--navy); color: #C9D2E2; display: flex; flex-direction: column; }
.adm__brand {
  height: var(--top-h); display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 3px;
  padding: 0 var(--s5); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.adm__brand img { height: 22px; width: auto; }
.adm__brand small {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: #8494B4; font-weight: 700; white-space: nowrap;
}
.adm__nav { padding: var(--s4) var(--s3); display: grid; gap: 2px; }
.adm__nav a {
  display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s3);
  border-radius: var(--r); color: #C9D2E2; font-weight: 600; font-size: 13.5px;
}
.adm__nav a svg { width: 18px; height: 18px; opacity: .85; }
.adm__nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.adm__nav a.is-active { background: var(--red); color: #fff; }
.adm__nav a.is-active svg { opacity: 1; }
.adm__nav .adm__group {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #6B7B9C;
  font-weight: 700; padding: var(--s4) var(--s3) 6px;
}
.adm__foot { margin-top: auto; padding: var(--s4) var(--s5); border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12px; color: #8494B4; }

.adm__main { display: flex; flex-direction: column; min-width: 0; }
.adm__top {
  height: var(--top-h); background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s5);
  position: sticky; top: 0; z-index: 30;
}
.adm__top .crumb { color: var(--muted); font-size: 13px; font-weight: 600; }
.adm__top .crumb b { color: var(--ink); }
.adm__top .spacer { flex: 1 1 auto; }
.adm__top .who { display: flex; align-items: center; gap: var(--s2); font-weight: 600; font-size: 13px; }
.adm__top .who .mv-avatar { width: 32px; height: 32px; font-size: 12px; }
.adm__body { padding: var(--s5); display: grid; gap: var(--s5); }

.adm__banner {
  background: var(--navy-700); color: #fff; border-radius: var(--r-lg);
  padding: var(--s4) var(--s5); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
}
.adm__banner h2 { color: #fff; font-size: 18px; }
.adm__banner p { margin: 0; color: #BCC7DE; font-size: 13px; }
.adm__banner .spacer { flex: 1 1 auto; }

.cols-2 { display: grid; gap: var(--s5); grid-template-columns: 1.4fr 1fr; align-items: start; }
.cols-2--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) { .cols-2, .cols-2--even { grid-template-columns: 1fr; } }

.bar-chart { display: grid; gap: var(--s3); }
.bar-row { display: grid; grid-template-columns: 150px 1fr 78px; gap: var(--s3); align-items: center; font-size: 13px; }
.bar-row__label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row__track { height: 10px; border-radius: var(--r-pill); background: #E4E9F2; overflow: hidden; }
.bar-row__track > span { display: block; height: 100%; background: var(--navy-600); border-radius: inherit; }
.bar-row__track > span.is-top { background: var(--red); }
.bar-row__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }

.spark { display: flex; align-items: flex-end; gap: 5px; height: 92px; }
.spark span { flex: 1 1 0; background: var(--blue); border-radius: 3px 3px 0 0; min-height: 6px; }
.spark span.is-peak { background: var(--red); }

.legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- Hub do protótipo ---------- */

.hub { max-width: 1180px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); }
.hub__hero {
  background: var(--navy); color: #fff; border-radius: var(--r-lg);
  padding: var(--s6); display: grid; gap: var(--s3); margin-bottom: var(--s6);
  border-bottom: 4px solid var(--red);
}
.hub__hero svg { height: 30px; width: auto; }
.hub__hero h1 { color: #fff; font-size: 30px; }
.hub__hero p { color: #C4CEE2; margin: 0; max-width: 78ch; }
.hub__tags { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.hub__tags .badge { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #DCE3F1; }

.hub section { margin-bottom: var(--s6); }
.hub h2 { font-size: 19px; margin-bottom: var(--s1); }
.hub .sec-desc { color: var(--muted); margin-bottom: var(--s4); max-width: 80ch; }

.hub-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, 326px); justify-content: start; }
@media (max-width: 700px) { .hub-grid { grid-template-columns: 1fr; } }
.screen-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.screen-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.screen-card__top {
  aspect-ratio: 16 / 10; background: #E7ECF4; border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.screen-card__top iframe {
  width: 1280px; height: 800px; border: 0; transform: scale(.2531); transform-origin: 0 0;
  pointer-events: none; background: #fff;
}
@media (max-width: 700px) { .screen-card__top iframe { transform: scale(.55); } .screen-card__top { aspect-ratio: 16/7; } }
.screen-card__body { padding: var(--s4); display: grid; gap: 6px; }
.screen-card__body h3 { font-size: 15px; }
.screen-card__body p { margin: 0; color: var(--muted); font-size: 13px; }
.screen-card__open { margin-top: var(--s2); }
.screen-card__n {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--navy); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-pill);
}
.screen-card__view {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill);
}
.screen-card__view.is-desk { background: var(--navy); color: #fff; }

.note-list { margin: 0; padding-left: 18px; display: grid; gap: 5px; color: var(--ink-2); font-size: 13px; }
.note-list li::marker { color: var(--red); }
.note-list b { color: var(--ink); }

/* ---------- Diagramas / fluxos ---------- */

.doc { max-width: 1180px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); }
.doc__head { margin-bottom: var(--s5); }
.doc__head h1 { font-size: 28px; }
.doc__head p { color: var(--muted); max-width: 82ch; }
.doc section { margin-bottom: var(--s6); scroll-margin-top: var(--s5); }
.doc h2 { margin-bottom: var(--s4); }

.flow { display: grid; gap: var(--s4); }
.flow-row { display: flex; align-items: stretch; gap: var(--s3); flex-wrap: wrap; }
.flow-node {
  flex: 1 1 200px; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--sh-1);
  display: grid; gap: 6px; align-content: start;
}
.flow-node__tag {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--muted);
}
.flow-node h4 { font-size: 14px; }
.flow-node p { margin: 0; font-size: 12.5px; color: var(--muted); }
.flow-node--brand { border-top: 3px solid var(--red); }
.flow-node--navy { border-top: 3px solid var(--navy-700); }
.flow-node--ok { border-top: 3px solid var(--ok); }
.flow-node--warn { border-top: 3px solid #E0A02A; }
.flow-arrow { align-self: center; color: var(--line-2); flex: 0 0 auto; }
.flow-arrow svg { width: 26px; height: 26px; }
@media (max-width: 720px) { .flow-arrow { transform: rotate(90deg); } }

.stack-diagram { display: grid; gap: var(--s3); }
.stack-layer {
  border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: var(--s4);
  background: var(--surface-2); display: grid; gap: var(--s3);
}
.stack-layer__label { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--muted); }
.layer-cols { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.tnode {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s3) var(--s4); box-shadow: var(--sh-1);
}
.tnode strong { display: block; font-size: 13.5px; }
.tnode span { font-size: 12px; color: var(--muted); }

.matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.matrix th, .matrix td { border: 1px solid var(--line); padding: 10px var(--s3); text-align: left; vertical-align: top; }
.matrix thead th { background: var(--surface-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.matrix td.yes { color: var(--ok); font-weight: 700; }
.matrix td.no { color: var(--red-600); font-weight: 700; }

.state-flow { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.state-pill {
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 6px var(--s4);
  background: var(--surface); font-weight: 600; font-size: 13px;
}
.state-pill--ok { border-color: #C4E6D6; background: var(--ok-bg); color: var(--ok); }
.state-pill--warn { border-color: #F2D9AC; background: var(--warn-bg); color: var(--warn); }
.state-pill--danger { border-color: #F6C4CA; background: var(--danger-bg); color: var(--red-600); }

.sitemap { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .sitemap { grid-template-columns: 1fr; } }
.sitemap__col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--sh-1); }
.sitemap__col h3 { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.sitemap__col h3 svg { width: 18px; height: 18px; color: var(--red); }
.sitemap__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.sitemap__col li { display: flex; gap: var(--s2); align-items: baseline; font-size: 13.5px; }
.sitemap__col li em { color: var(--muted); font-style: normal; font-size: 12.5px; }

.placeholder-note {
  border: 1px dashed var(--line-2); border-radius: var(--r); padding: var(--s3) var(--s4);
  color: var(--muted); font-size: 12.5px; background: var(--surface-2);
}

/* ---------- Utilitários de layout ---------- */
.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.col { display: grid; gap: var(--s4); }
.grow { flex: 1 1 auto; }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); }
.mb-5 { margin-bottom: var(--s5); }
.w-100 { width: 100%; }
.max-60 { max-width: 60ch; }
.max-70 { max-width: 70ch; }
.divider { height: 1px; background: var(--line); margin: var(--s4) 0; }
.hide { display: none !important; }