/* Aula 12 — Coleta e Extração.
   Carregado depois de deck-base.css: sobrescreve a paleta para azul
   e acrescenta os componentes próprios do encontro. */

:root {
  --red:#1863dc;
  --red-dark:#123a86;
  --red-light:#60a5fa;
}

body {
  background:
    radial-gradient(circle at 8% 10%,rgba(24,99,220,.055),transparent 28%),
    radial-gradient(circle at 92% 88%,rgba(46,38,64,.065),transparent 30%),
    var(--paper);
}

.cover { background:linear-gradient(132deg,#071a3d 0%,#123a86 43%,#1863dc 73%,#60a5fa 100%); }
.cover-title span { color:#bfdbfe; }
.stack-layer { background:rgba(9,29,66,.34); box-shadow:0 10px 28px rgba(6,18,42,.2); }
.stack-layer em { color:#bfdbfe; }
.stack-layer.top { color:var(--red-dark); }
.stack-layer.top small { color:#1e4fa3; }
.hero-panel small { color:#bfdbfe; }
.check-item > span:first-child { background:#dbeafe; color:var(--red-dark); }
.continuity-step.focus { background:#eff6ff; }
.callout { border-color:#bfdbfe; background:#f5f9ff; color:#123a86; }

/* Origem → destino: a fronteira da extração */
.flow-row { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:9px; }
.flow-box {
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  text-align:center;
}
.flow-box.origin { border-top:4px solid var(--amber); }
.flow-box.extract { border-top:4px solid var(--red); }
.flow-box.landing { border-top:4px solid var(--green); }
.flow-box .badge {
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font:800 .62rem/1 'JetBrains Mono','Courier New',monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.flow-box strong { display:block; color:var(--deep); font-size:.92rem; }
.flow-box small { display:block; margin-top:5px; color:var(--muted); font-size:.68rem; line-height:1.4; }
.flow-arrow { color:var(--red); font-size:1.3rem; font-weight:800; }

/* Linha do tempo do watermark */
.wm-track {
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:0;
  margin:6px 0 10px;
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
  background:#fff;
}
.wm-cell { padding:13px 8px; border-right:1px solid var(--line); text-align:center; }
.wm-cell:last-child { border-right:0; }
.wm-cell small { display:block; color:var(--muted); font:700 .62rem/1 'JetBrains Mono','Courier New',monospace; }
.wm-cell strong { display:block; margin-top:6px; color:var(--deep); font-size:.78rem; }
.wm-cell.captured { background:#eff6ff; box-shadow:inset 0 -4px 0 var(--red); }
.wm-cell.missed { background:#fff7ed; box-shadow:inset 0 -4px 0 var(--amber); }
.wm-cell.lost { background:#fef2f2; box-shadow:inset 0 -4px 0 #dc2626; }
.wm-legend { display:flex; flex-wrap:wrap; gap:14px; }
.wm-legend span { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.7rem; font-weight:700; }
.wm-legend i { width:11px; height:11px; border-radius:3px; font-style:normal; }
.wm-legend i.c { background:var(--red); }
.wm-legend i.m { background:var(--amber); }
.wm-legend i.l { background:#dc2626; }

/* Comparativo de estratégias */
.strategy-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.strategy {
  display:flex;
  flex-direction:column;
  padding:15px 17px;
  border:1px solid var(--line);
  border-top:4px solid var(--muted);
  border-radius:12px;
  background:#fff;
}
.strategy.full { border-top-color:var(--green); }
.strategy.incremental { border-top-color:var(--amber); }
.strategy.cdc { border-top-color:var(--red); }
.strategy h3 { margin:0 0 3px; color:var(--deep); font-size:1rem; }
.strategy .cost { margin:0 0 9px; color:var(--muted); font:700 .66rem/1.3 'JetBrains Mono','Courier New',monospace; }
.strategy dl { display:grid; gap:5px; margin:0; }
.strategy dt {
  color:var(--muted);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.strategy dd { margin:0 0 4px; color:#414b5f; font-size:.77rem; line-height:1.42; }