/* ═══════════════════════════════════════════════════════════════
   replay.ixentlabs.com — capa propia sobre los tokens de ixentlabs.css
   Sitio público de una sola página. Sin sidebar, sin SPA, sin sesión.
   ═══════════════════════════════════════════════════════════════ */

.rp-body {
  display: block;
  overflow: auto;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

/* ── Topbar ── */
.rp-topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 26px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.rp-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.rp-logo-mark { width: 18px; height: 18px; background: var(--accent); border-radius: 5px; }
.rp-brand-text { font-size: 0.95rem; color: var(--text); }
.rp-brand-text strong { color: var(--accent); font-weight: 700; }

.rp-headline { flex: 1; min-width: 200px; }
.rp-title    { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.25; }
.rp-subtitle { font-size: 0.78rem; color: var(--text2); margin: 3px 0 0; }

/* flex-shrink:0 es lo que importa: sin él, .rp-headline (flex:1) reclama el
   espacio y aplasta los chips hasta hacerlos invisibles cuando hay tres
   (outcome + verificación + compartir) en una ventana estrecha. */
.rp-badges {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: flex-end;
  flex-shrink: 0;
}

.rp-chip {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 12px; border-radius: 99px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--bg3); color: var(--text2);
}
.rp-chip-ok      { color: var(--green);  border-color: rgba(34,211,160,0.35);  background: rgba(34,211,160,0.09); }
.rp-chip-warn    { color: var(--yellow); border-color: rgba(251,191,36,0.35);  background: rgba(251,191,36,0.09); }
.rp-chip-bad     { color: var(--red);    border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.09); }
.rp-chip-accent  { color: var(--accent2);border-color: rgba(167,139,250,0.35); background: rgba(167,139,250,0.09); }
.rp-chip-pending { color: var(--text3); }

/* ── Banner de error global ── */
.rp-banner {
  margin: 14px 26px 0; padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.25);
  color: var(--red); font-size: 0.85rem; line-height: 1.55;
}

/* ── Tabs ── */
.rp-tabs {
  display: flex; gap: 0; padding: 0 26px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.rp-tab {
  padding: 11px 20px; border: none; background: none;
  color: var(--text2); font-family: var(--font);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.rp-tab:hover:not(:disabled) { color: var(--text); }
.rp-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
.rp-tab:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Paneles ── */
.rp-main  { padding: 20px 26px 32px; }
.rp-panel { display: none; }
.rp-panel-active { display: block; }

.rp-hint {
  font-size: 0.78rem; color: var(--text3);
  margin-bottom: 10px; text-align: center; font-style: italic;
}
.rp-frame-wrap {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: #f4ece4;
}
.rp-frame { width: 100%; height: 78vh; min-height: 520px; border: none; display: block; }

/* ── Visores de PDF ── */
.rp-doc-bar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.rp-doc-label { font-size: 0.82rem; font-weight: 600; color: var(--text2); }
.rp-doc-btn {
  margin-left: auto; padding: 6px 14px;
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  color: var(--accent2); font-size: 0.78rem; font-weight: 600; text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.rp-doc-btn:hover { background: var(--accent); color: #fff; }
.rp-doc-host {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; min-height: 70vh; background: var(--bg2);
}
.rp-doc-host iframe { width: 100%; height: 78vh; border: none; display: block; }

/* ── Metrics ── */
.rp-metrics { display: flex; flex-direction: column; gap: 18px; }
.rp-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }

.rp-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px;
}
.rp-card-title {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 14px;
}

.rp-stat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.rp-stat-label { font-size: 0.76rem; color: var(--text2); width: 118px; flex-shrink: 0; }
.rp-stat-value { font-size: 0.78rem; font-weight: 700; width: 92px; text-align: right; flex-shrink: 0; }
.rp-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.rp-bar-fill { height: 100%; border-radius: 3px; }

.rp-hero { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.rp-hero-item { display: flex; flex-direction: column; gap: 3px; }
.rp-hero-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); }
.rp-hero-value { font-size: 2rem; font-weight: 800; line-height: 1; }
.rp-hero-sub   { font-size: 0.7rem; color: var(--text3); }

.rp-vs {
  display: grid; grid-template-columns: 1fr auto 1fr;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg3);
}
.rp-vs-head { padding: 9px 12px; text-align: center; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.07em; }
.rp-vs-cell { padding: 14px 12px; text-align: center; border-top: 1px solid var(--border); }
.rp-vs-mid  { display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--text3); padding: 0 6px; }
.rp-vs-big  { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.rp-vs-cap  { font-size: 0.66rem; color: var(--text2); margin-top: 4px; }
.rp-vs-verdict {
  grid-column: 1 / -1; padding: 10px; text-align: center;
  border-top: 1px solid var(--border); background: var(--bg2);
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em;
}

.rp-player {
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius-sm); background: var(--bg3);
  padding: 11px 13px; margin-bottom: 8px;
}
.rp-player-certified { box-shadow: 0 0 0 1px var(--accent); }
.rp-player-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.rp-player-id   { font-size: 0.76rem; font-weight: 800; }
.rp-player-agent{ font-size: 0.7rem; color: var(--text2); font-family: monospace; }
.rp-player-score{ margin-left: auto; font-size: 0.95rem; font-weight: 800; color: var(--text); }
.rp-star { font-size: 0.6rem; font-weight: 800; color: var(--accent2); letter-spacing: 0.06em; }

.rp-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.rp-table th {
  background: var(--bg3); color: var(--text2); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 7px 9px; text-align: left; border-bottom: 2px solid var(--border);
}
.rp-table td { padding: 7px 9px; border-bottom: 1px solid var(--border); color: var(--text2); }
.rp-table tr:last-child td { border-bottom: none; }

.rp-radar-wrap { display: flex; justify-content: center; padding: 6px 0 14px; }

.rp-note {
  font-size: 0.72rem; color: var(--text3);
  line-height: 1.6; font-style: italic; margin-top: 10px;
}
.rp-untrusted {
  border-left: 3px solid var(--yellow);
  background: rgba(251,191,36,0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 11px 14px; margin-top: 10px;
}
.rp-untrusted-label {
  display: block; font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 6px;
}
.rp-untrusted-text {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.72rem; line-height: 1.6; color: var(--text2);
  white-space: pre-wrap; word-break: break-word; margin: 0;
}

.rp-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 46px 0; color: var(--text3); font-size: 0.86rem; text-align: center;
}

/* ── Footer ── */
.rp-footer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 26px; border-top: 1px solid var(--border);
  background: var(--bg2); font-size: 0.72rem; color: var(--text3);
}
.rp-footer-id { font-family: monospace; word-break: break-all; }
.rp-footer-links { margin-left: auto; }
.rp-footer-links a { color: var(--text2); }
.rp-footer-links a:hover { color: var(--accent); }

@media (max-width: 720px) {
  .rp-topbar, .rp-tabs, .rp-main, .rp-footer { padding-left: 14px; padding-right: 14px; }
  .rp-frame { height: 68vh; }
  .rp-footer-links { margin-left: 0; }
}

/* ── Botón de compartir ──
   Copia SIEMPRE la URL canónica del dominio propio, nunca location.href:
   el visitante puede haber llegado por .web.app, o desde una signed URL de
   GCS que caduca en 15 minutos. Compartir cualquiera de esas dos produce un
   enlace roto o efímero. */
.rp-share {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--bg3);
  color: var(--text2);
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition);
}
.rp-share:hover { border-color: var(--accent); color: var(--text); }
.rp-share-done  { border-color: var(--green); color: var(--green); }