/* Validador de SCORM — Líteris
   Tokens e componentes (página beta + página de relatório /r/<id>).
   Mantido como arquivo único para facilitar a extração self-contained na página do WP. */

#validador-scorm {
  --vs-navy: #0E2A4E;
  --vs-navy-dk: #091E3A;
  --vs-navy-md: #1B3D6B;
  --vs-blue: #2563A6;
  --vs-blue-lt: #E8EFF7;
  --vs-teal: #1FA89B;
  --vs-teal-dk: #188478;
  --vs-amber: #E6A23C;
  --vs-amber-lt: #FBF3E4;
  --vs-red: #C0392B;
  --vs-red-lt: #FBECEA;
  --vs-green: #1E8E5A;
  --vs-green-lt: #E7F5EE;
  --vs-ink: #0D1B2A;
  --vs-body: #3B4A5C;
  --vs-muted: #6B7A8F;
  --vs-hair: #E2E6EC;
  --vs-hair-sft: #EEF1F5;
  --vs-page: #F5F7FA;
  --vs-card: #FFFFFF;
  --vs-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --vs-font-head: "Raleway", "Open Sans", -apple-system, sans-serif;
  --vs-mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-family: var(--vs-font);
  color: var(--vs-body);
  font-size: 16px;
  line-height: 1.6;
  background: var(--vs-page);
  padding: 48px 20px 64px;
}
#validador-scorm, #validador-scorm * { box-sizing: border-box; }
#validador-scorm .vs-wrap { max-width: 880px; margin: 0 auto; }

#validador-scorm .vs-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--vs-teal-dk); background: rgba(31,168,155,.10);
  border: 1px solid rgba(31,168,155,.25); border-radius: 999px; padding: 5px 14px; margin-bottom: 18px;
}
#validador-scorm h1.vs-title {
  font-family: var(--vs-font-head); color: var(--vs-navy); font-size: 42px; line-height: 1.15;
  font-weight: 700; letter-spacing: .2px; margin: 0 0 14px; padding: 0;
}
#validador-scorm .vs-sub { font-size: 18px; color: var(--vs-body); max-width: 640px; margin: 0 0 20px; }
#validador-scorm .vs-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; }
#validador-scorm .vs-chips li {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--vs-navy-md); background: var(--vs-card); border: 1px solid var(--vs-hair);
  border-radius: 999px; padding: 6px 14px;
}

#validador-scorm .vs-card {
  background: var(--vs-card); border: 1px solid var(--vs-hair); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(14,42,78,.07); padding: 28px;
}

/* Dropzone */
#validador-scorm .vs-drop {
  border: 2px dashed #C7D2DE; border-radius: 14px; background: var(--vs-page);
  padding: 44px 24px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
#validador-scorm .vs-drop.vs-drag { border-color: var(--vs-teal); background: rgba(31,168,155,.06); }
#validador-scorm .vs-drop-icon { font-size: 34px; line-height: 1; margin-bottom: 12px; }
#validador-scorm .vs-drop-title { font-family: var(--vs-font-head); font-weight: 700; color: var(--vs-navy); font-size: 18px; margin-bottom: 6px; }
#validador-scorm .vs-drop-hint { font-size: 14px; color: var(--vs-muted); }
#validador-scorm .vs-drop input { display: none; }

/* Progresso */
#validador-scorm .vs-progress { margin-top: 22px; display: none; }
#validador-scorm .vs-progress.vs-on { display: block; }
#validador-scorm .vs-bar { height: 10px; border-radius: 999px; background: var(--vs-hair-sft); overflow: hidden; }
#validador-scorm .vs-bar > span { display: block; height: 100%; width: 0; background: var(--vs-teal); border-radius: 999px; transition: width .2s; }
#validador-scorm .vs-bar.vs-indeterminate > span { width: 40% !important; animation: vs-slide 1.1s ease-in-out infinite; }
@keyframes vs-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
#validador-scorm .vs-progress-text { margin-top: 8px; font-size: 14px; color: var(--vs-muted); }

/* Erro */
#validador-scorm .vs-error {
  display: none; margin-top: 22px; border: 1px solid #F0C7C2; background: var(--vs-red-lt);
  color: #7C2A20; border-radius: 12px; padding: 14px 16px; font-size: 15px;
}
#validador-scorm .vs-error.vs-on { display: block; }

/* Resultado */
#validador-scorm .vs-result { display: none; margin-top: 26px; }
#validador-scorm .vs-result.vs-on { display: block; }
#validador-scorm .vs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
#validador-scorm .vs-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--vs-font);
  font-size: 14px; font-weight: 700; border-radius: 10px; padding: 10px 16px;
  border: 1px solid var(--vs-hair); background: var(--vs-card); color: var(--vs-navy-md);
  cursor: pointer; text-decoration: none;
}
#validador-scorm .vs-btn:hover { border-color: #C7D2DE; }
#validador-scorm .vs-btn.vs-btn-primary { background: var(--vs-navy); border-color: var(--vs-navy); color: #fff; }
#validador-scorm .vs-btn.vs-btn-primary:hover { background: var(--vs-navy-md); }

/* Relatório */
#validador-scorm .vs-report-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 20px;
}
#validador-scorm .vs-grade {
  width: 84px; height: 84px; border-radius: 20px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff; flex: 0 0 auto;
}
#validador-scorm .vs-grade b { font-size: 38px; line-height: 1; font-family: var(--vs-font-head); }
#validador-scorm .vs-grade small { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; opacity: .9; }
#validador-scorm .vs-grade-a { background: var(--vs-green); }
#validador-scorm .vs-grade-b { background: #4C9E6B; }
#validador-scorm .vs-grade-c { background: var(--vs-amber); }
#validador-scorm .vs-grade-d { background: #D97706; }
#validador-scorm .vs-grade-e { background: #DC5A2A; }
#validador-scorm .vs-grade-f { background: var(--vs-red); }
#validador-scorm .vs-report-head .vs-meta-line { font-size: 14px; color: var(--vs-muted); }
#validador-scorm .vs-report-head h2 { font-family: var(--vs-font-head); color: var(--vs-navy); margin: 0 0 4px; font-size: 24px; line-height: 1.25; }

#validador-scorm .vs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 24px; }
@media (max-width: 640px) { #validador-scorm .vs-stats { grid-template-columns: repeat(2, 1fr); } }
#validador-scorm .vs-stat { border-radius: 12px; padding: 12px 14px; border: 1px solid var(--vs-hair); }
#validador-scorm .vs-stat b { display: block; font-size: 24px; font-family: var(--vs-font-head); line-height: 1.2; }
#validador-scorm .vs-stat span { font-size: 12.5px; color: var(--vs-muted); font-weight: 600; }
#validador-scorm .vs-stat.vs-s-error { background: var(--vs-red-lt); border-color: #F0C7C2; color: #7C2A20; }
#validador-scorm .vs-stat.vs-s-warning { background: var(--vs-amber-lt); border-color: #F2DFC0; color: #7A5A17; }
#validador-scorm .vs-stat.vs-s-info { background: var(--vs-blue-lt); border-color: #CFE0F2; color: var(--vs-navy-md); }
#validador-scorm .vs-stat.vs-s-ok { background: var(--vs-green-lt); border-color: #C4E5D3; color: #166544; }

#validador-scorm .vs-section-title {
  font-family: var(--vs-font-head); color: var(--vs-navy); font-size: 19px; font-weight: 700;
  margin: 28px 0 12px;
}
#validador-scorm .vs-finding {
  border: 1px solid var(--vs-hair); border-left-width: 4px; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; background: var(--vs-card);
}
#validador-scorm .vs-finding.vs-sev-error { border-left-color: var(--vs-red); }
#validador-scorm .vs-finding.vs-sev-warning { border-left-color: var(--vs-amber); }
#validador-scorm .vs-finding.vs-sev-info { border-left-color: var(--vs-blue); }
#validador-scorm .vs-finding-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
#validador-scorm .vs-pill {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  border-radius: 999px; padding: 3px 10px;
}
#validador-scorm .vs-pill.vs-sev-error { background: var(--vs-red-lt); color: #7C2A20; }
#validador-scorm .vs-pill.vs-sev-warning { background: var(--vs-amber-lt); color: #7A5A17; }
#validador-scorm .vs-pill.vs-sev-info { background: var(--vs-blue-lt); color: var(--vs-navy-md); }
#validador-scorm .vs-code { font-family: var(--vs-mono); font-size: 11.5px; color: var(--vs-muted); }
#validador-scorm .vs-finding-title { font-weight: 700; color: var(--vs-ink); font-size: 15.5px; }
#validador-scorm .vs-finding-detail { font-size: 14.5px; color: var(--vs-body); margin: 4px 0 0; }
#validador-scorm .vs-evidence {
  font-family: var(--vs-mono); font-size: 12.5px; background: var(--vs-page);
  border: 1px solid var(--vs-hair-sft); border-radius: 8px; padding: 8px 10px;
  margin: 8px 0 0; list-style: none; overflow-wrap: anywhere;
}
#validador-scorm .vs-evidence li { padding: 1px 0; }
#validador-scorm .vs-fix {
  margin-top: 10px; font-size: 14px; background: var(--vs-green-lt); border: 1px solid #C4E5D3;
  color: #166544; border-radius: 10px; padding: 9px 12px;
}
#validador-scorm .vs-fix b { color: #0F4E33; }

#validador-scorm .vs-meta-card { display: grid; grid-template-columns: 190px 1fr; gap: 6px 16px; font-size: 14.5px; }
@media (max-width: 640px) { #validador-scorm .vs-meta-card { grid-template-columns: 1fr; } }
#validador-scorm .vs-meta-card dt { color: var(--vs-muted); font-weight: 600; }
#validador-scorm .vs-meta-card dd { margin: 0 0 6px; color: var(--vs-ink); }

#validador-scorm .vs-tree, #validador-scorm .vs-tree ul { list-style: none; margin: 0; padding-left: 0; }
#validador-scorm .vs-tree ul { padding-left: 20px; border-left: 1px dashed var(--vs-hair); margin-left: 6px; }
#validador-scorm .vs-tree li { padding: 3px 0; font-size: 14.5px; color: var(--vs-ink); }
#validador-scorm .vs-tree .vs-tree-id { font-family: var(--vs-mono); font-size: 11.5px; color: var(--vs-muted); margin-left: 8px; }

#validador-scorm .vs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#validador-scorm .vs-tag {
  font-size: 12.5px; font-weight: 600; color: var(--vs-navy-md); background: var(--vs-blue-lt);
  border: 1px solid #CFE0F2; border-radius: 999px; padding: 3px 12px;
}

#validador-scorm details.vs-passed { margin-top: 26px; }
#validador-scorm details.vs-passed summary {
  cursor: pointer; font-weight: 700; color: var(--vs-navy-md); font-size: 14.5px;
}
#validador-scorm .vs-passed-list { margin: 10px 0 0; padding: 0; list-style: none; }
#validador-scorm .vs-passed-list li { font-size: 14px; padding: 4px 0; color: var(--vs-body); }
#validador-scorm .vs-passed-list .vs-ok { color: var(--vs-green); font-weight: 700; margin-right: 6px; }
#validador-scorm .vs-passed-list .vs-skip { color: var(--vs-muted); margin-right: 6px; }

#validador-scorm .vs-footnote { margin-top: 30px; font-size: 13px; color: var(--vs-muted); }
#validador-scorm .vs-footnote a { color: var(--vs-navy-md); }

/* Página de relatório standalone */
#validador-scorm.vs-report-page { padding-top: 28px; }
#validador-scorm .vs-topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 26px;
}
#validador-scorm .vs-brand { font-family: var(--vs-font-head); font-weight: 700; color: var(--vs-navy); font-size: 17px; }

/* Seção "o que checamos" */
#validador-scorm .vs-checks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 720px) { #validador-scorm .vs-checks-grid { grid-template-columns: 1fr; } }
#validador-scorm .vs-check-card { border: 1px solid var(--vs-hair); border-radius: 14px; padding: 18px; background: var(--vs-card); }
#validador-scorm .vs-check-card h3 { font-family: var(--vs-font-head); color: var(--vs-navy-md); font-size: 16px; margin: 0 0 6px; }
#validador-scorm .vs-check-card p { font-size: 14px; color: var(--vs-body); margin: 0; }
#validador-scorm .vs-section { margin-top: 40px; }
#validador-scorm .vs-section h2 { font-family: var(--vs-font-head); color: var(--vs-navy); font-size: 24px; margin: 0 0 6px; }
#validador-scorm .vs-section > p { margin: 0; color: var(--vs-body); }

/* Formulário de e-mail (pós-resultado) */
#validador-scorm .vs-email-box {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start;
  border: 1px solid #CFE0F2; background: var(--vs-blue-lt); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 22px;
}
#validador-scorm .vs-email-intro { flex: 1 1 240px; }
#validador-scorm .vs-email-title { font-weight: 700; color: var(--vs-navy); font-size: 15.5px; }
#validador-scorm .vs-email-hint { font-size: 13px; color: var(--vs-muted); }
#validador-scorm .vs-email-form { flex: 1 1 320px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#validador-scorm .vs-input {
  flex: 1 1 200px; min-width: 0; padding: 10px 12px; border: 1px solid #C7D2DE; border-radius: 10px;
  font-size: 14.5px; font-family: var(--vs-font); color: var(--vs-ink); background: #fff;
}
#validador-scorm .vs-consent { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--vs-muted); }
#validador-scorm .vs-consent input { margin: 0; }
#validador-scorm .vs-email-status { flex: 1 1 100%; font-size: 13.5px; }
#validador-scorm .vs-email-status.vs-ok { color: #166544; font-weight: 600; }
#validador-scorm .vs-email-status.vs-err { color: #7C2A20; font-weight: 600; }