/* ============================================================
   Bidmap Diagnóstico — Centro de Comando (Elysium)
   Identidade visual: header #12172B · accent #C41230
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #F4F4F6;
  color: #1a1a2e;
  line-height: 1.6;
}
.page { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }

/* ---------- TOP BAR / HEADER ---------- */
.appbar {
  background: #12172B;
  border-radius: 14px;
  padding: 1.6rem 2rem;
  margin-bottom: 1rem;
}
.appbar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.appbar img.logo { height: 32px; width: auto; }
.appbar .brand { font-size: 11px; color: #9096A8; letter-spacing: 0.18em; text-transform: uppercase; }
.appbar h1 { font-size: 21px; font-weight: 700; color: #fff; margin-top: 10px; }
.appbar p.sub { font-size: 13px; color: #9096A8; margin-top: 2px; }

/* ---------- TABS ---------- */
.tabs {
  display: flex;
  gap: 6px;
  background: #fff;
  border: 0.5px solid #e0e0e8;
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 1.5rem;
  position: sticky;
  top: 10px;
  z-index: 20;
}
.tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: #555;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s, color .15s;
}
.tab-btn:hover { background: #F4F4F6; }
.tab-btn.active { background: #12172B; color: #fff; }
.tab-btn[disabled] { opacity: .45; cursor: not-allowed; }
.tab-btn .soon { font-size: 9.5px; background: #C41230; color: #fff; padding: 1px 6px; border-radius: 10px; letter-spacing: .04em; }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- GENERIC SECTIONS (PRD) ---------- */
.section { margin-bottom: 2rem; }
.section-label { font-size: 11px; font-weight: 600; color: #888; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #e8e8f0; }
.sub-title { font-size: 14px; font-weight: 700; color: #12172B; margin: 1.1rem 0 0.5rem; }
.hl { color: #C41230; font-weight: 600; }

.card { background: #fff; border: 0.5px solid #e0e0e8; border-radius: 12px; padding: 1.25rem 1.4rem; margin-bottom: 12px; }
.card p { font-size: 13.5px; color: #444; margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }

ul.clean, ul.no { list-style: none; }
ul.clean li { font-size: 13.5px; color: #444; padding: 4px 0 4px 20px; position: relative; }
ul.clean li::before { content: "→"; position: absolute; left: 0; color: #C41230; font-weight: 700; }
ul.no li { font-size: 13.5px; color: #555; padding: 4px 0 4px 24px; position: relative; }
ul.no li::before { content: "✕"; position: absolute; left: 0; color: #C41230; font-weight: 700; }

/* ---------- TABLES ---------- */
table { width: 100%; border-collapse: collapse; background: #fff; border: 0.5px solid #e0e0e8; border-radius: 12px; overflow: hidden; font-size: 12.5px; margin: 0.5rem 0; }
thead th { background: #12172B; color: #fff; text-align: left; padding: 10px 12px; font-weight: 600; font-size: 11.5px; letter-spacing: 0.03em; }
tbody td { padding: 10px 12px; border-top: 0.5px solid #ececf2; color: #444; vertical-align: top; }
tbody tr:nth-child(even) { background: #FAFAFC; }
td strong, th strong { color: #12172B; }

/* ---------- ARCH DIAGRAM ---------- */
pre.arch { background: #12172B; color: #cfd3e0; font-size: 11.5px; line-height: 1.5; padding: 1.1rem 1.25rem; border-radius: 12px; overflow-x: auto; }
code { background: #F0F0F5; padding: 1px 6px; border-radius: 4px; font-size: 12px; color: #C41230; }

/* ---------- TIMELINE ---------- */
.week { display: flex; gap: 0; border: 0.5px solid #e0e0e8; border-radius: 12px; overflow: hidden; margin-bottom: 10px; background: #fff; }
.week-num { width: 116px; flex-shrink: 0; background: #F8F8FB; display: flex; align-items: center; justify-content: center; padding: 1rem; border-right: 0.5px solid #e8e8f0; }
.week-badge { font-size: 12px; font-weight: 700; color: #9096A8; background: #EEEEF4; padding: 6px 10px; border-radius: 20px; text-align: center; }
.week-badge.active { background: #C41230; color: #fff; }
.week-content { flex: 1; padding: 1rem 1.25rem; }
.week-content .wt { font-size: 14px; font-weight: 700; color: #12172B; margin-bottom: 6px; }
.week-content p { font-size: 12.5px; color: #555; margin-bottom: 4px; }
.week-content .meta { font-size: 12px; color: #888; }
.week-content .meta b { color: #12172B; }

/* ---------- NOTES / PILLS ---------- */
.note { background: #FFF8F0; border: 0.5px solid #F5D5A0; border-radius: 10px; padding: 0.9rem 1.2rem; font-size: 12.5px; color: #7A5C2A; line-height: 1.7; margin: 0.5rem 0; }
.note.dark { background: #12172B; border: none; color: #9096A8; }
.note.dark b { color: #fff; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.pill { font-size: 12px; padding: 4px 14px; border-radius: 20px; background: #1E2540; color: #9096A8; }
.pill.red { background: #C41230; color: #fff; }

/* ============================================================
   ABA DADOS — painel de coleta do snapshot
   ============================================================ */
.snapshot-banner {
  background: #12172B; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.snapshot-banner .freeze { color: #fff; }
.snapshot-banner .freeze .lbl { font-size: 11px; color: #9096A8; letter-spacing: .14em; text-transform: uppercase; }
.snapshot-banner .freeze .date { font-size: 22px; font-weight: 700; }
.snapshot-banner .freeze .date b { color: #C41230; }
.snapshot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-ghost { font-size: 12px; font-weight: 600; color: #fff; background: #1E2540; border: none; border-radius: 8px; padding: 8px 14px; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-ghost:hover { background: #28304f; }

/* progress */
.progress-wrap { background: #fff; border: 0.5px solid #e0e0e8; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.progress-head .t { font-size: 13px; font-weight: 700; color: #12172B; }
.progress-head .c { font-size: 12px; color: #888; }
.progress-head .c b { color: #C41230; }
.progress-bar { height: 8px; background: #EEEEF4; border-radius: 6px; overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: #C41230; width: 0; transition: width .3s; }

/* source cards */
.sources-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.src-card { background: #fff; border: 0.5px solid #e0e0e8; border-radius: 12px; padding: 1.1rem 1.3rem; }
.src-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.src-title { font-size: 15px; font-weight: 700; color: #12172B; display: flex; align-items: center; gap: 9px; }
.src-title i { color: #C41230; font-size: 18px; }
.src-method { font-size: 11px; color: #888; margin-top: 2px; }
.src-method b { color: #12172B; }

/* status chip (cycles on click) */
.status-chip { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 20px; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; }
.status-pendente   { background: #EEEEF4; color: #6b6f80; }
.status-exportado  { background: #FFF0F1; color: #C41230; }
.status-carregado  { background: #FFF8F0; color: #B7791F; }
.status-validado   { background: #E7F6EC; color: #1E8E4E; }

.src-body { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
@media (max-width: 620px) { .src-body { grid-template-columns: 1fr; } }
.src-field .k { font-size: 10.5px; color: #999; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.src-field .v { font-size: 12.5px; color: #444; }
.src-field .v b { color: #12172B; }
.src-field code { font-size: 11.5px; }

.src-foot { margin-top: 12px; padding-top: 10px; border-top: 0.5px solid #f0f0f6; display: flex; gap: 8px; flex-wrap: wrap; }
.src-link { font-size: 11.5px; color: #C41230; background: #FFF0F1; padding: 5px 11px; border-radius: 6px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.src-link:hover { background: #FFE0E3; }
.src-link.muted { color: #555; background: #F4F4F6; }
.src-link.muted:hover { background: #ececf2; }

/* ---------- FOOTER ---------- */
.footer { text-align: center; margin-top: 2.5rem; font-size: 12px; color: #aaa; }
.footer img { height: 22px; width: auto; vertical-align: middle; margin-right: 8px; opacity: 0.5; }