/* app.css */
:root {
  /* Usa colores del sistema (se adaptan a light/dark) */
  color-scheme: light dark;
  --brand-blue: #5abbfe;
  --brand-green: #76e8a4;
  --bg: #0b1220;
  --panel: #121a2b;
  --text: #e8eefc;
  --muted: #a9b4d0;
  --border: rgba(255,255,255,0.12);
  --danger: #ff4d4d;
  --purple: #a06bff;
}

* { box-sizing: border-box;}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

body {
  background:
    radial-gradient(1200px 800px at 20% 0%, #1a2a5c 0%, transparent 60%),
    radial-gradient(1000px 700px at 90% 20%, #3a1b5a 0%, transparent 55%),
    var(--bg);
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--text);
  overflow-x: hidden;
}

.hidden { display: none !important;}

.brandBlue { color: var(--brand-blue);}
.brandGreen { color: var(--brand-green);}

h1, h2 { margin: 0 0 12px 0;}
h1 { font-size: 22px;}
h2 { font-size: 16px; color: var(--muted); font-weight: 600; letter-spacing: .3px;}

.spacer { flex: 1;}
.row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap;}
.mt12 { margin-top: 12px;}
.mt14 { margin-top: 14px;}
.mb12 { margin-bottom: 12px;}

label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 6px;}
.field { flex: 1; min-width: 240px;}

input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  outline: none;
}
input:focus { border-color: rgba(255,255,255,0.28);}

button {
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  cursor: pointer;
}
button:hover { background: rgba(255,255,255,0.12);}

button.primary {
  background: rgba(88, 128, 255, 0.24);
  border-color: rgba(88,128,255,0.55);
}
button.primary:hover { background: rgba(88,128,255,0.32);}

button.success {
  background: rgba(83, 200, 120, 0.14);
  border-color: rgba(83, 200, 120, 0.40);
}

button.success:hover {
  background: rgba(83, 200, 120, 0.22);
}

button.warning {
  background: rgba(226, 157, 57, 0.14);
  border-color: rgba(226, 157, 57, 0.40);
}

button.warning:hover {
  background: rgba(226, 157, 57, 0.22);
}

button.danger {
  background: rgba(255, 77, 77, 0.18);
  border-color: rgba(255, 77, 77, 0.45);
}
button.danger:hover { background: rgba(255, 77, 77,0.32);}

.muted { color: var(--muted); font-size: 13px;}
.error { color: var(--danger); font-size: 13px; white-space: pre-wrap;}

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.panelCard {
  width: 100%;
}

.iconBtn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
}

.iconX {
  width: 18px;
  height: 18px;
  display: block;
}

/* ===== Table ===== */
.tableWrap {
  width: 100%;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.title { font-weight: 700;}

.pill {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
}

/* ===== Loading ===== */
.loading {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  animation: pulse 1s infinite ease-in-out;
}

.dot:nth-child(2) { animation-delay: .15s; }
.dot:nth-child(3) { animation-delay: .30s; }

@keyframes pulse {
  0%, 100% { transform: translateY(0); opacity: .35; }
  50% { transform: translateY(-3px); opacity: .9; }
}

/* ===== LOGIN ===== */
.loginScreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loginScreen .title {
  text-align: center;
}

#loginScreen h1 {
  text-align: center;
}

#loginScreen .mt14 {
  display: flex;
  flex-direction: column;
  align-items: center; /* centra el botón (y el loading) */
}

#loginScreen input {
  text-align: center;
}

#loginScreen input::placeholder {
  text-align: center;
}

#loginScreen #loginButton {
  width: 160px;
}

#loginScreen #loginLoading {
  text-align: center;
}

/* ===== DASHBOARD ===== */
.topbar {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-radius: 0;
  margin: 0;
  padding: 16px;
  background:
    radial-gradient(1200px 800px at 20% 0%, #1a2a5c 0%, transparent 60%),
    radial-gradient(1000px 700px at 90% 20%, #3a1b5a 0%, transparent 55%),
    var(--bg);
}

.topbarRow1 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

#dashboardScreen {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.rootPanel {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: rgba(0,0,0,0.18);
}

.rootPanel.hidden {
  display: none !important;
}

/* ===== Tabs ===== */
.topbarRow1 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tabs {
  display: inline-flex;
  gap: 10px;
  margin: 0;
}

.userLine {
  margin: 0;
}

.tabButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  font-size: 13px;
}
.tabButton:hover { background: rgba(0,0,0,0.25);}

.tabButton.active {
  background: rgba(118, 232, 164, 0.18);
  border-color: rgba(118, 232, 164, 0.45);
  color: #fff;
}
.tabButton:hover.active { background: rgba(118, 232, 164,0.32);}

.tabButton .tabIcon {
  width: 16px;
  height: 16px;
  display: inline-block;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Contenedor de acciones en topbar */
.topbarActions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== Stats ===== */
.statsWrap{
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.statsRow {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.statPill {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  min-width: 48px;
  align-items: center;
  text-align: center;
}

.statLabel {
  font-size: 11px;
  color: rgba(255,255,255,0.60);
  letter-spacing: .2px;
  line-height: 1.1;
}

.statValue {
  font-size: 15px;
  font-weight: 750;
  color: var(--text);
  line-height: 1.1;
}

.statCard {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 18px;
  min-width: 86px;
  height: 86px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  position: relative;
  overflow: hidden;
}

.statCard::after {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(
    700px 160px at 10% 0%,
    rgba(255,255,255,0.12),
    transparent 60%
  );
  pointer-events:none;
}

.statCardIcon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.30);
}

.statCardMain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.statCardValue {
  width: 100%;
  text-align: center;
}

.statCardValue {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  color: rgba(255,255,255,0.95);
  font-variant-numeric: tabular-nums;
}

.statCardLabel {
  font-size: 18px;
  color: rgba(255,255,255,0.80);
  letter-spacing: .2px;
}

.statCard--level {
  background:
    linear-gradient(180deg,
      rgba(118,232,164,0.20),
      rgba(118,232,164,0.08)
    );
  border-color: rgba(118,232,164,0.38);
}

.statCard--streak,
.statCard--trophies {
  background:
    linear-gradient(180deg,
      rgba(109,80,255,0.20),
      rgba(109,80,255,0.08)
    );
  border-color: rgba(109,80,255,0.38);
}

.statCard--experience,
.statCard--maturity {
  background:
    linear-gradient(180deg,
      rgba(90,187,254,0.20),
      rgba(90,187,254,0.08)
    );
  border-color: rgba(90,187,254,0.38);
}

.statCard--ranking {
  background:
    linear-gradient(180deg,
      rgba(245, 169, 37, 0.22),
      rgba(245, 169, 37, 0.08)
    );
  border-color: rgba(245, 169, 37, 0.40);
}

/* ===== Level headline (arriba de "siguiente nivel") ===== */
.levelHeadline {
  width: 100%;
  margin-top: 10px;
  font-size: 24px;     /* ajusta si quieres más grande */
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.92);
}

/* ===== Next Level ===== */
.nextLevelLine {
  width: 100%;
  margin-top: 10px;
  text-align: left;
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.75);
}

.nextLevelBarWrap {
  width: 100%;
  margin-top: 8px;
}

.nextLevelBar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  overflow: hidden;
}

.nextLevelBarFill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(118,232,164,0.65), rgba(90,187,254,0.65));
  width: 0%;
  transition: width 260ms ease;
}

.nextLevelBarMeta {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
}

/* ===== User ===== */
.userLine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}

.userIcon {
  width: 16px;
  height: 16px;
  display: inline-block;
  object-fit: contain;
  flex: 0 0 auto;
}

/* ===== Home ===== */
#homePanel .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

/* Responsive: en mobile se apilan */
@media (max-width: 840px) {
  #homePanel .grid2 {
    grid-template-columns: 1fr;
  }
}

#homePanel .card {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.07),
      rgba(255,255,255,0.03)
    );
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 34px rgba(0,0,0,0.30);
}

.caseList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Item base */
.caseItem {
  --case-color: rgba(255,255,255,0.22); /* fallback */

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;

  border-radius: 14px;
  padding: 12px;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--case-color) 22%, transparent),
      color-mix(in srgb, var(--case-color) 10%, transparent)
    ),
    rgba(255, 255, 255, 0.03);

  border: 1px solid color-mix(in srgb, var(--case-color) 40%, rgba(255, 255, 255, 0.14));

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--case-color) 18%, transparent) inset;

  position: relative;
  overflow: hidden;

  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.caseItem::after {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(
    700px 140px at 10% 0%,
    rgba(255,255,255,0.14),
    transparent 55%
  );
  pointer-events:none;
}

/* Hover (aplica a TODOS, incluyendo training) */
.caseItem:hover {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--case-color) 22%, transparent),
      color-mix(in srgb, var(--case-color) 10%, transparent)
    ),
    rgba(255,255,255,0.07);

  border-color: color-mix(in srgb, var(--case-color) 40%, rgba(255,255,255,0.18));
}

/* Texto */
.caseTitle {
  font-size: 14px;
  font-weight: 650;
  margin: 0 0 4px 0;
  color: rgba(255,255,255,0.95);
  text-align: left;
}

.caseMeta {
  display: flex;
  gap: 6px;
  font-size: 13px;
}

.metaLabel {
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  min-width: 60px;
}

.metaValue {
  color: #e8eefc;
}

.attackPred {
  font-weight: 650;
  color: #f55496;
}

.pill-status {
  font-weight: 800;
  letter-spacing: .2px;
  text-transform: lowercase;
}

.pill-status--pending {
  background: rgba(226, 157, 57, 0.18);
  border-color: rgba(226, 157, 57, 0.45);
  color: rgba(255, 214, 160, 0.95);
}

.pill-status--completed {
  background: rgba(83, 200, 120, 0.18);
  border-color: rgba(83, 200, 120, 0.45);
  color: rgba(150, 255, 195, 0.95);
}

.pill-status--expired {
  background: rgba(255, 77, 77, 0.18);
  border-color: rgba(255, 77, 77, 0.45);
  color: rgba(255, 170, 170, 0.98);
}

/* =========================
   MODAL: bloquear scroll del fondo
   ========================= */
body.modalOpen {
  overflow: hidden;
}

/* ===== Metrics ===== */
.metricsTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

/* Header sticky dark/glass */
.metricsTable thead th {
  text-align: left;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  letter-spacing: .25px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);

  background: rgba(0,0,0,0.35);
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Rows */
.metricsTable tbody td {
  padding: 12px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: middle;
  color: rgba(255,255,255,0.88);
}

.metricsTable tbody tr {
  background: transparent;
}

/* Numbers */
.metricsTable .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.metricsTable .colAttack { min-width: 220px; }

/* Readiness */
.metricsTable .readinessCell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

.metricsTable .readinessRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.metricsTable .readinessBar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
}

.metricsTable .readinessFill {
  height: 100%;
  border-radius: 999px;
  background: rgba(88,128,255,0.65);
}

.metricsTable .readinessText {
  width: 46px;
  text-align: right;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
}

/* Company (red) */
.metricsTable .readinessBar--company {
  background: rgba(255,77,77,0.18);
  border-color: rgba(255,77,77,0.35);
}

.metricsTable .readinessFill--company {
  background: rgba(255,77,77,0.75);
}

/* Text */
.metricsTable .readinessText {
  width: 46px;
  text-align: right;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
}

.metricsTable .readinessText--company {
  color: #ffffff;
  font-weight: 800;
}

/* Maturity pills */
.pill-mature {
  background: rgba(83, 166, 71, 0.18);
  border-color: rgba(83, 166, 71, 0.45);
  color: rgba(150, 255, 195, 0.95);
}

.pill-immature {
  background: rgba(226, 157, 57, 0.18);
  border-color: rgba(226, 157, 57, 0.45);
  color: rgba(255, 214, 160, 0.95);
}

.metricsTable tbody tr.inUserLevel {
  background: rgba(88,128,255,0.22);
}

/* Center "Maturity" (7ª) column */
.metricsTable thead th:nth-child(7),
.metricsTable tbody td:nth-child(7) {
  text-align: center;
  vertical-align: middle;
}
.metricsTable tbody td:nth-child(7) .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
}

/* Radar title legend */
.radarLegend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
  font-size: 12px;
  font-weight: 650;
  color: rgba(255,255,255,0.80);
}

.radarKey {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.radarKey--user {
  background: rgba(88,128,255,0.95);
}

.radarKey--company {
  background: rgba(255,77,77,0.95);
}

/* =========================
   RANKING
   ========================= */

.rankingSectionTitle {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: .3px;
}

.rankingList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rankingRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}

.rankingRow--me {
  background: rgba(83, 200, 120, 0.18);
  border-color: rgba(83, 200, 120, 0.45);
}

.rankingPos {
  width: 24px;
  text-align: center;
  font-weight: 800;
  color: #76e8a4;
}

.rankingAvatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,0.22);
}

.rankingMain {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.rankingName {
  font-size: 13px;
  font-weight: 700;
}

.rankingLevel {
  font-size: 12px;
  color: var(--muted);
}

.rankingPoints {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  color: #76e8a4;
}

/* =========================
   CASE DETAIL MODAL (sin blur) - limpio
   ========================= */
.caseDetailScreen {
  position: fixed;
  inset: 0;
  z-index: 3000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;
  background: rgba(5, 10, 25, 0.75);
}

/* Frame = el único con borde/redondeo */
.caseDetailScreen .viewFrame {
  max-height: calc(100vh - 36px);

  display: flex;
  flex-direction: column;

  border-radius: 18px;
  overflow: hidden;

  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Card interno NO debe verse como card */
.caseDetailScreen #caseDetailContent {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: hidden; /* scroll va en .caseDetailBody */
}

/* Header fijo arriba (no scrollea) */
.caseHeader {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

/* Solo el body scrollea */
.caseDetailBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

/* Footer pegado abajo (sin sticky) */
.caseDetailFooter {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  gap: 16px;

  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(12, 18, 35, 0.95);

  padding: 12px;
  min-height: 64px;
  margin: 0;
  width: 100%;
}

.cePanel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(0,0,0,0.14);
  overflow: hidden;
}

.cePanel.top { margin-top: 16px;}

.ceHeader {
  height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

.ceTitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
}

.ceBody {
  font-size: 13px;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.35;
  max-height: 38vh;
  overflow: auto;
}

/* =========================
   Template meta (reusar Home layout)
   ========================= */

/* El wrapper NO debe heredar cosas raras */
#caseTemplateBody {
  white-space: normal; /* 🔴 override CRÍTICO */
}

/* Lista vertical, igual que Home */
#caseTemplateBody .templateMetaList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Reusar EXACTAMENTE el mismo patrón */
#caseTemplateBody .caseMeta {
  display: flex;
  gap: 6px;
  font-size: 13px;
}

/* Labels iguales al Home (solo un pelín más ancho) */
#caseTemplateBody .metaLabel {
  min-width: 60px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
}

/* Value igual */
#caseTemplateBody .metaValue {
  color: #e8eefc;
  flex: 1;
}

/* ====== Detalle: Contexto + Evidencia ====== */
.ceGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 840px) {
  .ceGrid { grid-template-columns: 1fr;}
}

/* Header de "Escenario": título izquierda + ms derecha */
.ceHeaderRow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
}

.ceMetaRight {
  margin-left: auto;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
}

.scenarioBody { padding: 12px;}

/* ===== Scenario Rendering ===== */
.scenarioTitle {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
  color: #eef2ff;
}

.scenarioContext {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.4;
}

/* Narrative blocks */
.scenarioNarrative {
  background: rgba(255,255,255,0.04);
  border-left: 3px solid rgba(88,128,255,0.6);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.45;
}

/* Evidence blocks */
.scenarioEvidence {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}

.evidenceHeader {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
}

.evidenceBody {
  padding: 12px;
  font-size: 13px;
  line-height: 1.45;
}

.evidenceBody pre {
  margin: 8px 0 0 0;
  padding: 10px 12px;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #e8eefc;
}

.evidenceBody > div { margin-bottom: 6px;}

/* Evidence color coding by channel */
.scenarioEvidence {
  --ev-color: rgba(255,255,255,0.25);
  border-color: var(--ev-color);
  box-shadow: 0 0 0 1px var(--ev-color) inset;
}

.scenarioEvidence .evidenceHeader {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ev-color) 35%, transparent),
    color-mix(in srgb, var(--ev-color) 10%, transparent)
  );
  color: #fff;
}

.scenarioEvidence .evidenceBody {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ev-color) 6%, transparent),
      transparent
    );
}

.scenarioEvidence[data-channel="email"] { --ev-color: rgba(88,128,255,0.75);}
.scenarioEvidence[data-channel="sms"] { --ev-color: rgba(83, 200, 120, 0.75);}
.scenarioEvidence[data-channel="chat"] { --ev-color: rgba(180, 120, 255, 0.75);}
.scenarioEvidence[data-channel="call"] { --ev-color: rgba(255, 170, 90, 0.75);}
.scenarioEvidence[data-channel="web"] { --ev-color: rgba(90, 210, 255, 0.75);}
.scenarioEvidence[data-channel="physical"] { --ev-color: rgba(200, 160, 100, 0.75);}
.scenarioEvidence[data-channel="system"] { --ev-color: rgba(180, 190, 200, 0.6);}

/* ===== SMS ===== */
.smsRow {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.smsSender {
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}

.smsMessage {
  color: rgba(255,255,255,0.90);
}

/* ===== Chat thread (left/right) ===== */
.chatThread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chatMsg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 86%;
}

.chatMsg--left { align-self: flex-start;}
.chatMsg--right { align-self: flex-end;}

.chatSender {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.70);
}

.chatBubble {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.28);
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

/* burbuja del usuario (derecha): un poco más “accent” */
.chatMsg--right .chatBubble {
  background: rgba(88,128,255,0.18);
  border-color: rgba(88,128,255,0.35);
}

/* ====== Actions ====== */
.actionsBody { padding: 12px;}

.actionsTitle {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text);
  margin-bottom: 8px;
}

.actionsSubTitle {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 16px;
}

.actionsGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.actionChip {
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  font-size: 13px;
  cursor: pointer;
}
.actionChip:hover { background: rgba(255,255,255,0.10);}

.actionChip.selected {
  border-color: rgba(88,128,255,0.75);
  background: rgba(88, 128, 255, 0.20);
}

/* Toggle switch (Action Roles) */
.roleToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}

.roleToggle {
  align-items: center;
  height: 100%;
}

.roleToggle input { display: none;}

.roleSwitch {
  width: 42px;
  height: 22px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  position: relative;
  transition: background .25s ease;
  border: 1px solid rgba(255,255,255,0.25);
}

.roleSwitch::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 1px;
  left: 2px;
  transition: transform .25s ease;
}

.roleToggle { margin-left: auto; display: inline-flex; align-items: center; gap: 10px;}

.roleToggle input:checked + .roleSwitch::after {
  transform: translateX(20px);
}

.roleToggleLabel { font-size: 12px; letter-spacing: .2px;}

/* ===== Action pills por role/severity ===== */
.pill-role, .pill-sev {
  font-weight: 750;
  letter-spacing: .2px;
  text-transform: lowercase;
}

/* ROLE */
.pill-role--mandatory {
  background: rgba(83, 200, 120, 0.18);
  border-color: rgba(83, 200, 120, 0.45);
  color: rgba(150, 255, 195, 0.95);
}

.pill-role--optional {
  background: rgba(226, 157, 57, 0.18);
  border-color: rgba(226, 157, 57, 0.45);
  color: rgba(255, 214, 160, 0.95);
}

.pill-role--wrong {
  background: rgba(255, 77, 77, 0.18);
  border-color: rgba(255, 77, 77, 0.45);
  color: rgba(255, 170, 170, 0.98);
}

/* SEVERITY (solo cuando role=wrong) */
.pill-sev--low {
  background: rgba(83, 200, 120, 0.18);
  border-color: rgba(83, 200, 120, 0.45);
  color: rgba(150, 255, 195, 0.95);
}

.pill-sev--medium {
  background: rgba(226, 157, 57, 0.18);
  border-color: rgba(226, 157, 57, 0.45);
  color: rgba(255, 214, 160, 0.95);
}

.pill-sev--high {
  background: rgba(255, 77, 77, 0.18);
  border-color: rgba(255, 77, 77, 0.45);
  color: rgba(255, 170, 170, 0.98);
}

/* ====== Answers painting (completed case) ====== */

.actionChip.answeredCorrect {
  border-color: rgba(83, 200, 120, 0.70);
  background: rgba(83, 200, 120, 0.14);
  box-shadow: 0 0 0 1px rgba(83, 200, 120, 0.22) inset;
}

.actionChip.answeredWrong {
  border-color: rgba(255, 77, 77, 0.70);
  background: rgba(255, 77, 77, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 77, 77, 0.18) inset;
}

/* Mandatory NO seleccionada (caso pendiente) */
.actionChip.mandatoryPending {
  background: rgba(226, 157, 57, 0.16);
  border-color: rgba(226, 157, 57, 0.55);
  color: #ffe0a3;
}

.actionChipLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ===== Scenario state (pending/error) ===== */
.scenarioState {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
}

.scenarioState--loading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.scenarioState--error {
  border-color: rgba(255, 77, 77, 0.35);
  background: rgba(255, 77, 77, 0.08);
}

.scenarioJson {
  margin: 0;
  padding: 10px 12px;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #e8eefc;
}

/* =========================
   CASE RESULT MODAL (sin blur)
   ========================= */
/* =========================
   CASE RESULT MODAL (igual que caseDetail)
   ========================= */
.caseResultScreen {
  position: fixed;
  inset: 0;
  z-index: 3000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;
  background: rgba(5, 10, 25, 0.75);
}

.caseResultScreen .viewFrame {
  max-height: calc(100vh - 36px);

  display: flex;
  flex-direction: column;

  border-radius: 18px;
  overflow: hidden;

  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255,255,255,0.12);
}

/* “card” interno no debe verse como card */
.caseResultScreen #caseResultContent {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: hidden; /* el scroll va en .caseResultBody */
}

/* solo el body scrollea */
.caseResultBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

/* footer fijo abajo */
.caseResultFooter {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  gap: 16px;

  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(12, 18, 35, 0.95);

  padding: 12px;
  min-height: 64px;
  margin: 0;
  width: 100%;
}

.resultPanel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(0,0,0,0.14);
  overflow: hidden;
}

.resultTitle {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
}

.resultBody {
  font-size: 13px;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.35;
  max-height: 45vh;
  overflow: auto;
}

.resultBody p {
  margin: 0 0 10px 0;
}

.resultBody ul,
.resultBody ol {
  margin: 8px 0 8px 18px;
}

.resultBody li {
  margin-bottom: 4px;
}

.resultBody strong {
  font-weight: 800;
  color: #76e8a4;
}

.resultBody em {
  opacity: 0.9;
}

.resultBody a {
  color: #5abbfe;
  text-decoration: underline;
}

.resultBody code {
  background: rgba(0,0,0,0.35);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.resultState {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
}

.resultState--loading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.resultState--error {
  border-color: rgba(255, 77, 77, 0.35);
  background: rgba(255, 77, 77, 0.08);
}

.resultScorePanel {
  text-align: center;
}

.resultScore--good {
  color: #76e8a4;
}

.resultScore--mid {
  color: #f5a925;
}

.resultScore--bad {
  color: #ff4d4d;
}

.answersGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
}

.answerPill {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  font-weight: 600;
}

/* Selected + correct */
.answerPill--correct {
  background: rgba(83, 200, 120, 0.18);
  border-color: rgba(83, 200, 120, 0.45);
  color: #caffdf;
}

/* Selected + wrong */
.answerPill--wrong {
  background: rgba(255, 77, 77, 0.18);
  border-color: rgba(255, 77, 77, 0.45);
  color: #ffd6d6;
}

/* NOT selected but mandatory (correct) */
.answerPill--missed {
  background: rgba(226, 157, 57, 0.18);
  border-color: rgba(226, 157, 57, 0.45);
  color: #ffe0a3;
}

/* Neutral */
.answerPill--neutral {
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}

/* ===== Fix layout interno del Result modal (scroll real) ===== */
.caseResultScreen .viewFrame > .card {
  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  flex-direction: column;

  /* opcional: que la card no se vea "doble" dentro del frame */
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 18px;
}

/* el contenedor que scrollea */
#caseResultContent {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* asegura que el footer (botón Close) no se pierda */
.caseResultScreen .viewFrame .row.mt14 {
  flex: 0 0 auto;
}

/* ===== Template dentro de Result: mismo look que Detail ===== */
#resultTemplate {
  white-space: normal;   /* clave: no pre-wrap aquí */
  max-height: none;      /* no lo limites */
  overflow: visible;     /* que no meta scrollbar propio */
  padding: 12px;         /* ya lo tiene .resultBody, pero ok si lo dejas */
}

/* layout del template */
#resultTemplate .templateMetaList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#resultTemplate .caseMeta {
  display: flex;
  gap: 6px;
  font-size: 13px;
}

#resultTemplate .metaLabel {
  min-width: 60px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
}

#resultTemplate .metaValue {
  color: #e8eefc;
  flex: 1;
}

/* ===== Score sin panel ===== */
.resultScoreInline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
}

.resultScoreInlineLabel {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.70);
}

.resultScoreValue {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: .5px;
  padding: 0;        /* antes 24px 12px */
  font-variant-numeric: tabular-nums;
}

/* ===== Close button (topbar) – system style ===== */
.caseHeader .iconBtn.danger {
  width: 24px;
  height: 24px;
  min-width: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #fff;        /* mismo color que otros botones */
  color: #000;                       /* icono blanco */

  padding: 0;
  cursor: pointer;
}

/* icono */
.caseHeader .iconBtn.danger svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* hover */
.caseHeader .iconBtn.danger:hover {
  filter: brightness(1.08);
}

/* active */
.caseHeader .iconBtn.danger:active {
  transform: scale(0.96);
}

/* disabled */
.caseHeader .iconBtn.danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =========================
   RESULTS: Answers pills
   ========================= */

.answersGrid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.answerPill{
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-size: 13px;
  color: rgba(255,255,255,0.92);
}

.answerPill--neutral{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}

.answerPill--correct{
  background: rgba(83, 200, 120, 0.18);
  border-color: rgba(83, 200, 120, 0.45);
  color: rgba(150, 255, 195, 0.95);
}

.answerPill--wrong{
  background: rgba(255, 77, 77, 0.18);
  border-color: rgba(255, 77, 77, 0.45);
  color: rgba(255, 190, 190, 0.98);
}

/* ✅ Mandatory no seleccionado => AMARILLO */
.answerPill--missed{
  background: rgba(245, 215, 90, 0.22);
  border-color: rgba(245, 215, 90, 0.55);
  color: rgba(255, 244, 200, 0.98);
  box-shadow: 0 0 0 1px rgba(245, 215, 90, 0.20) inset;
}

/* ===== Case Detail & Result: ancho un poco mayor ===== */
.caseDetailScreen .viewFrame,
.caseResultScreen .viewFrame {
  width: min(840px, calc(100vw - 36px));
}

.resultTitleRow{
  display:flex;
  align-items:center;
  gap:10px;
}

.resultTitleRow .ceMetaRight{
  margin-left:auto;
}

.intentBody {
  padding: 14px;
}

.intentQuestion {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text);
}

.intentActions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.intentActions button {
  min-width: 160px;
}

/* =========================
   Identification locked styles
   ========================= */

.intentActions button.intentLocked {
  cursor: not-allowed;
  opacity: 1;               /* no lo apagues visualmente */
  filter: none;
}

.intentActions button.intentLocked:hover {
  background: inherit;      /* no hover */
}

/* Seleccionado (morado) */
.intentActions button.intentLockedSelected {
  background: color-mix(in srgb, var(--purple) 22%, transparent);
  border-color: color-mix(in srgb, var(--purple) 55%, rgba(255,255,255,0.12));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--purple) 30%, transparent) inset;
}

/* No seleccionado (grid) */
.intentActions button.intentLockedUnselected {
  background:
    linear-gradient(0deg, rgba(0,0,0,0.08), rgba(0,0,0,0.08)),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.10) 0px,
      rgba(255,255,255,0.10) 1px,
      transparent 1px,
      transparent 10px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.10) 0px,
      rgba(255,255,255,0.10) 1px,
      transparent 1px,
      transparent 10px
    );
  border-color: rgba(255,255,255,0.14);
}