/* KreepCore - Narrative quest UI: Propuestas rows + quest modal
   (resolved-archive rows render as .frow3 in the Ahora registry) */

/* ─── Rows (Imperio > Propuestas) ───────────────────────── */
.e2scope .qrow .qrew { display:inline-flex; align-items:center; gap:3px; color:#86efac; }
.e2scope .qrow .qrew svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; flex:none; }
.e2scope .frow2 .qsep { color:var(--text-dim); }
.e2scope .qrow .qexp { color:var(--red); }
.e2scope .qrow .qeta { color:#7dd3fc; }

/* ─── Hero proposal strips (Imperio > Propuestas) ───────── */
.fprop { position:relative; display:flex; align-items:center; gap:10px; min-height:96px;
  box-sizing:border-box; max-width:100%;
  padding:12px 12px 12px 14px; border-radius:6px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,.1); background:#080a16; isolation:isolate; }
.fprop.sel { border-color:rgba(var(--accent-rgb),.55); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3) inset; }
.fprop-img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.fprop-scrim { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(5,6,15,.94) 0%, rgba(5,6,15,.82) 45%, rgba(5,6,15,.42) 82%, rgba(5,6,15,.58) 100%); }
.fprop-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.fprop-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:.78rem; color:#cbd5e1; }
.fprop-meta .ftype { display:inline-flex; align-items:center; gap:3px; min-width:0;
  font-size:9.5px; letter-spacing:.06em; padding:1px 5px; background:rgba(6,6,15,.6); }
.fprop-meta .ftype svg { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2; flex:none; }
.fprop-meta .fres { display:inline-flex; align-items:center; gap:2px; color:var(--text-primary); }
.fprop-meta .fres .cost-icon { width:11px; height:11px; flex:none; }
/* Charges (demands) carry a minus glyph plus amber + weight, never color alone */
.fprop-meta .fres-charge { color:#fbbf24; font-weight:700; }
.fprop-meta .qrew svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; flex:none; }
.fprop-meta .qsep { color:var(--text-dim); }
.fprop-title { font-weight:700; font-size:15.5px; line-height:1.2; color:#f8fafc;
  text-shadow:0 1px 6px rgba(0,0,0,.8); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.fprop-flavor { font-size:12px; line-height:1.4; color:#b7c2d4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fprop-actions { position:relative; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.fprop-dismiss { display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.fprop-dismiss svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; flex:none; }

/* ─── Interactive mission box (hybrid fusion): the playable proposals stand
   out by border pattern + chip glyph, never by hue alone ── */
.fprop-interactive { border-style:dashed; border-width:1.5px; }
.fprop-mission-chip { display:inline-flex; align-items:center; gap:3px;
  font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:1px 6px; border:1px dashed currentColor; border-radius:3px;
  background:rgba(6,6,15,.6); color:#f8fafc; }

/* Phones: keep buttons on-screen. Stack actions in a wrapping row under the
   body instead of a right-pinned column that pushes off the viewport edge. */
@media (max-width:560px) {
  .fprop { flex-wrap:wrap; min-height:0; gap:8px 10px; padding:11px 12px; }
  .fprop-body { flex:1 1 100%; }
  .fprop-actions { flex:1 0 100%; flex-direction:row; flex-wrap:wrap;
    justify-content:flex-end; align-items:stretch; gap:6px; }
  .e2scope .fprop-actions .frow2-btn { flex:0 1 auto; min-width:0; }
}

/* ─── Quest modal ───────────────────────────────────────── */
.qm-overlay { z-index:10050; padding:16px; }
.qm-panel { position:relative; width:100%; max-width:440px; max-height:92vh; display:flex; flex-direction:column;
  background:var(--bg-surface, #0c0d1a); border:1px solid rgba(255,255,255,.1); border-radius:8px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.6); }
.qm-panel .qm-close { position:absolute; top:8px; right:8px; z-index:5; }

.qm-hero { position:relative; flex:none; aspect-ratio:16/7.5; min-height:120px; overflow:hidden; background:#05060f; }
.qm-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.qm-hero-fail img { filter:grayscale(.75) brightness(.7); }
.qm-hero-scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,6,15,.35), rgba(5,6,15,0) 35%, rgba(5,6,15,.88) 92%); }
.qm-hero .ftype { position:absolute; left:10px; top:10px; z-index:2; background:rgba(6,6,15,.65);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; padding:2px 7px; border-radius:2px;
  text-transform:uppercase; border:1px solid; display:inline-flex; align-items:center; gap:4px; }
.qm-hero .ftype svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; }
.qm-hero .ftype.exped { color:#7dd3fc; border-color:rgba(125,211,252,.4); }
.qm-hero .ftype.deal { color:#86efac; border-color:rgba(134,239,172,.4); }
.qm-hero .ftype.contested { color:#d8b4fe; border-color:rgba(216,180,254,.45); }
.qm-hero .ftype.threat { color:#fca5a5; border-color:rgba(252,165,165,.4); }
.qm-hero-rec { position:absolute; right:10px; top:10px; z-index:2; color:#fca5a5; font-size:10px; letter-spacing:.14em;
  display:inline-flex; align-items:center; gap:4px; }
.qm-hero-rec i { width:6px; height:6px; border-radius:50%; background:var(--red,#f55); animation:qm-blink 1.2s steps(2) infinite; }
.qm-hero-tag { position:absolute; right:10px; bottom:8px; z-index:2; color:#cbd5e1; font-size:10px; letter-spacing:.1em;
  background:rgba(6,6,15,.55); padding:1px 6px; border-radius:2px; }
.qm-hero-title { position:absolute; left:10px; right:10px; bottom:8px; z-index:2; padding-right:120px;
  font-family:var(--font-display, inherit); font-weight:700; font-size:17px; line-height:1.15; color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.8); }

.qm-body { padding:14px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }

/* Transmission block (diegetic feed voice) */
.qm-tx { border-left:2px solid rgba(125,211,252,.5); background:rgba(125,211,252,.05); padding:10px 12px; border-radius:0 4px 4px 0;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); cursor:pointer; }
.qm-tx-static { cursor:default; }
.qm-tx-head { display:flex; align-items:center; gap:6px; color:#7dd3fc; font-size:10.5px; letter-spacing:.14em; margin-bottom:6px; }
.qm-tx-head i { width:6px; height:6px; border-radius:50%; background:#7dd3fc; animation:qm-blink 1s steps(2) infinite; flex:none; }
.qm-tx-static .qm-tx-head i { animation:none; opacity:.6; }
.qm-tx-text { margin:0; color:var(--text, #e2e8f0); font-size:13.5px; line-height:1.5; min-height:1.4em; white-space:pre-wrap; }
.qm-tx-text.qm-typing::after { content:'█'; color:#7dd3fc; animation:qm-blink .7s steps(2) infinite; margin-left:1px; }
.qm-tx-wait { color:#7dd3fc; animation:qm-blink .7s steps(2) infinite; }
.qm-tx-hint { margin-top:8px; font-size:11px; text-align:right; animation:qm-fadein .4s ease-out; }

/* Ficha */
.qm-sec-label { color:var(--text-dim); font-size:10px; letter-spacing:.16em; }
.qm-ficha { display:flex; flex-direction:column; gap:8px; animation:qm-fadein .35s ease-out; }
.qm-obj { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.qm-obj-label { color:var(--text-dim); }
.qm-obj-val { font-weight:600; }
.qm-coords { display:inline-flex; align-items:center; gap:4px; background:none; border:1px solid rgba(255,255,255,.16);
  border-radius:3px; color:#7dd3fc; font-size:11px; padding:2px 7px; cursor:pointer; }
.qm-coords svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; }
.qm-chips { display:flex; flex-wrap:wrap; gap:6px; }
.qm-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04); border-radius:3px; padding:4px 8px; font-size:12px; color:var(--text-secondary); }
.qm-chip svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; flex:none; }
.qm-chip-reward { color:#86efac; border-color:rgba(134,239,172,.35); background:rgba(134,239,172,.06); }
.qm-chip-loss { color:#fca5a5; border-color:rgba(252,165,165,.3); background:rgba(252,165,165,.05); }
.qm-chip-granted { font-weight:700; }
.qm-chip-card { font-weight:700; cursor:pointer; font-family:inherit; }
.qm-chip-card[data-rarity="uncommon"] { color:#4ade80; border-color:rgba(74,222,128,.45); background:rgba(74,222,128,.07); }
.qm-chip-card[data-rarity="rare"] { color:#60a5fa; border-color:rgba(96,165,250,.45); background:rgba(96,165,250,.07); }
.qm-chip-card[data-rarity="legendary"] { color:#fbbf24; border-color:rgba(251,191,36,.5); background:rgba(251,191,36,.08); }
.qm-note { font-size:11.5px; }
.qm-expiry { font-size:11.5px; }
.qm-expiry .qexp { color:var(--red); }

/* Actions */
.qm-actions { display:flex; flex-direction:column; gap:8px; animation:qm-fadein .35s ease-out; }
.qm-primary { width:100%; min-height:44px; font-size:14px; }
.qm-primary svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; flex:none; margin-right:6px; vertical-align:-2px; }
.qm-plan-note { font-size:11.5px; text-align:center; }
.qm-plan-err { color:#fca5a5; font-size:12px; text-align:center; }
.qm-decline { align-self:center; min-width:120px; }
.qm-origin { display:flex; align-items:center; gap:8px; font-size:12px; }
.qm-origin select { flex:1; background:rgba(255,255,255,.05); color:var(--text); border:1px solid rgba(255,255,255,.16);
  border-radius:4px; padding:6px 8px; font-size:12.5px; }

/* Live mission */
.qm-live { display:flex; flex-direction:column; gap:10px; }
.qm-stages { display:flex; align-items:center; gap:6px; }
.qm-step { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); border:1px solid rgba(255,255,255,.14); border-radius:2px; padding:3px 8px; }
.qm-step.cur { color:#7dd3fc; border-color:rgba(125,211,252,.5); animation:qm-pulse 1.6s ease-in-out infinite; }
.qm-step.done { color:#86efac; border-color:rgba(134,239,172,.4); }
.qm-stages i { flex:1; height:1px; background:rgba(255,255,255,.14); min-width:6px; }
.qm-live-bar { display:flex; align-items:center; gap:10px; }
.qm-bar { flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.qm-bar .progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg, #38bdf8, #7dd3fc); transition:width .5s linear; }
.qm-eta { flex:none; font-size:12px; color:#7dd3fc; }
.qm-map-btn { align-self:flex-start; display:inline-flex; align-items:center; gap:5px; }
.qm-map-btn svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; }

/* Resolution */
.qm-result { display:flex; flex-direction:column; gap:10px; }
.qm-result-badge { align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid; border-radius:3px; padding:4px 10px; }
.qm-result-badge i { font-style:normal; font-weight:700; }
.qm-result-badge.ok { color:#86efac; border-color:rgba(134,239,172,.45); background:rgba(134,239,172,.07); }
.qm-result-badge.fail { color:#fca5a5; border-color:rgba(252,165,165,.45); background:rgba(252,165,165,.07); }
.qm-result-badge.dim { color:var(--text-dim); border-color:rgba(255,255,255,.18); }
.qm-when { font-size:11px; }

/* Cartography arc: a 3-chapter stepper that signals a running story, not a one-shot. */
.carto-arc { animation:qm-fadein .35s ease-out; }
.carto-arc-head { color:#7dd3fc; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; }
.carto-steps { list-style:none; margin:0; padding:0; display:flex; }
.carto-step { flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; position:relative; text-align:center; }
.carto-step::before { content:''; position:absolute; top:6px; left:-50%; width:100%; height:2px; background:rgba(255,255,255,.12); z-index:0; }
.carto-step:first-child::before { display:none; }
.carto-step.done::before, .carto-step.cur::before { background:rgba(125,211,252,.5); }
.carto-step-dot { width:13px; height:13px; border-radius:50%; border:2px solid rgba(255,255,255,.25); background:#0b0f1e; position:relative; z-index:1; }
.carto-step.done .carto-step-dot { border-color:#7dd3fc; background:#7dd3fc; }
.carto-step.cur .carto-step-dot { border-color:#7dd3fc; background:#0b0f1e; box-shadow:0 0 0 3px rgba(125,211,252,.18); animation:qm-blink 1.4s steps(2) infinite; }
.carto-step-name { font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:rgba(226,232,240,.45); }
.carto-step.done .carto-step-name { color:rgba(226,232,240,.72); }
.carto-step.cur .carto-step-name { color:#e2e8f0; font-weight:600; }

@keyframes qm-blink { 50% { opacity:0; } }
@keyframes qm-fadein { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes qm-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(125,211,252,0); } 50% { box-shadow:0 0 8px 0 rgba(125,211,252,.35); } }

@media (prefers-reduced-motion: reduce) {
  .qm-hero-rec i, .qm-tx-head i, .qm-tx-wait, .qm-step.cur, .carto-step.cur .carto-step-dot { animation:none; }
  .qm-ficha, .qm-actions, .qm-tx-hint { animation:none; }
}