/* ── Design tokens (NVIDIA system, DESING.md) ────────────────────────── */
:root {
  --green:          #76b900;
  --green-dark:     #5a8d00;
  --black:          #000000;
  --white:          #ffffff;
  --soft:           #f7f7f7;
  --ink:            #000000;
  --body:           #1a1a1a;
  --mute:           #757575;
  --hairline:       #cccccc;
  --hairline-strong:#5e5e5e;
  --on-dark:        #ffffff;
  --on-dark-mute:   rgba(255,255,255,0.7);
  --error:          #e52020;
  --error-bg:       #fde8e8;
  --warning:        #df6500;
  --warning-bg:     #fef8e1;
  --success-bg:     #e8f5d0;
  --r:              2px;
  --font:           'Inter', Arial, sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body   { font-family: var(--font); font-size: 16px; color: var(--body); background: var(--white); }
button { font-family: var(--font); cursor: pointer; }

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav {
  background: var(--black);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-title  { font-size: 16px; font-weight: 700; }
.nav-right  { text-align: right; line-height: 1.2; }
.nav-label  { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--on-dark-mute); }
.nav-code   { font-size: 20px; font-weight: 700; letter-spacing: 3px; color: var(--green); }

/* ── Layout ──────────────────────────────────────────────────────────── */
.main   { max-width: 640px; margin: 0 auto; padding: 32px 24px 80px; }
.section { display: none; }
.section.active { display: block; }

/* ── Typography ──────────────────────────────────────────────────────── */
h2 { font-size: 24px; font-weight: 700; margin-bottom: 24px; }
h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--r);
  font-size: 16px;
  font-weight: 700;
  border: none;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.btn-primary  { background: var(--green);  color: var(--black); }
.btn-primary:hover  { background: var(--green-dark); }
.btn-primary:disabled { background: var(--hairline); color: var(--mute); cursor: not-allowed; }
.btn-outline  { background: transparent; color: var(--ink); border: 2px solid var(--green); }
.btn-outline:hover  { background: var(--soft); }
.btn-error    { background: var(--error); color: var(--white); border: none; }
.btn-error:hover    { background: #c41a1a; }
.btn-full     { width: 100%; }

/* Decision buttons (big, for student turn) */
.btn-decide {
  flex: 1;
  height: 64px;
  font-size: 20px;
  font-weight: 700;
  border-radius: var(--r);
  border: none;
}
.btn-mantener { background: var(--green);  color: var(--black); }
.btn-mantener:hover  { background: var(--green-dark); }
.btn-mantener:disabled, .btn-retirar:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-retirar  { background: var(--error);  color: var(--white); }
.btn-retirar:hover   { background: #c41a1a; }
.decision-area { display: flex; gap: 16px; margin-top: 24px; }

/* ── Form ────────────────────────────────────────────────────────────── */
.form-group   { margin-bottom: 16px; }
label.field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mute);
  margin-bottom: 6px;
}
input[type=text] {
  width: 100%;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  font-family: var(--font);
  font-size: 16px;
  padding: 0 16px;
  color: var(--ink);
  background: var(--white);
  outline: none;
}
input[type=text]:focus { border: 2px solid var(--green); }
input[type=text]::placeholder { color: var(--mute); }
.msg-error { color: var(--error); font-size: 14px; margin-top: 8px; min-height: 20px; }

/* Radio group for bank type */
.radio-group  { display: flex; gap: 12px; }
.radio-label  {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 2px solid var(--hairline);
  border-radius: var(--r);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--body);
  transition: border-color 0.1s;
}
.radio-label:has(input:checked) { border-color: var(--green); }
.radio-label input[type=radio]  { accent-color: var(--green); }

/* ── Cards ───────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 24px;
  margin-bottom: 16px;
  position: relative;
}
/* Corner square — NVIDIA signature */
.card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 12px; height: 12px;
  background: var(--green);
}

/* Signal card (student private rumor) */
.signal-card {
  border-radius: var(--r);
  padding: 20px 24px;
  margin-bottom: 24px;
  border-left: 4px solid;
}
.signal-card.sig-F { background: var(--success-bg); border-color: var(--green);  }
.signal-card.sig-D { background: var(--error-bg);   border-color: var(--error);  }
.signal-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--mute); margin-bottom: 4px; }
.signal-value { font-size: 22px; font-weight: 700; margin-bottom: 2px; }
.signal-desc  { font-size: 14px; color: var(--mute); }

/* Bank reveal (after round closes) */
.bank-reveal {
  border-radius: var(--r);
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 700;
  border-left: 4px solid;
}
.bank-S { background: var(--success-bg); border-color: var(--green); }
.bank-I { background: var(--error-bg);   border-color: var(--error); }

/* Share code box (admin lobby) */
.share-code-box {
  background: var(--soft);
  border-radius: var(--r);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.share-code-value { font-size: 40px; font-weight: 700; letter-spacing: 6px; color: var(--green); margin-top: 4px; }

/* ── Status strip ────────────────────────────────────────────────────── */
.status-strip {
  background: var(--soft);
  border-radius: var(--r);
  padding: 10px 16px;
  font-size: 14px;
  color: var(--mute);
  margin-bottom: 24px;
}

/* ── Student / turn list ─────────────────────────────────────────────── */
.student-list, .turn-list { list-style: none; }

.student-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.student-item:last-child { border-bottom: none; }
.you-tag { font-size: 12px; color: var(--green); font-weight: 700; margin-left: 6px; }

.turn-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.turn-item:last-child { border-bottom: none; }
.turn-num {
  width: 28px; height: 28px;
  border-radius: var(--r);
  background: var(--soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.turn-item.ti-done    .turn-num { background: var(--body); color: var(--white); }
.turn-item.ti-current .turn-num { background: var(--green); color: var(--black); }
.turn-name { flex: 1; }
.turn-item.ti-current .turn-name { font-weight: 700; }
.turn-item.ti-you     .turn-name::after { content: ' (tú)'; font-size: 12px; color: var(--mute); font-weight: 400; }
.turn-dec { font-size: 14px; font-weight: 700; }
.dec-M    { color: var(--green-dark); }
.dec-R    { color: var(--error); }
.turn-deciding { font-size: 12px; color: var(--green); }

/* ── Progress bar (admin) ────────────────────────────────────────────── */
.progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.progress-text { font-size: 20px; font-weight: 700; }
.progress-bar-wrap { height: 4px; background: var(--hairline); border-radius: 2px; margin-bottom: 16px; }
.progress-bar-fill { height: 4px; background: var(--green); border-radius: 2px; transition: width 0.3s; }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-F        { background: var(--success-bg); color: var(--green-dark); }
.badge-D        { background: var(--error-bg);   color: var(--error); }
.badge-M        { background: var(--success-bg); color: var(--green-dark); }
.badge-R        { background: var(--error-bg);   color: var(--error); }
.badge-cascade  { background: var(--warning-bg); color: var(--warning); }
.badge-no       { background: var(--soft);       color: var(--mute); }
.badge-S        { background: var(--success-bg); color: var(--green-dark); }
.badge-I        { background: var(--error-bg);   color: var(--error); }
.badge-correct  { background: var(--success-bg); color: var(--green-dark); }
.badge-wrong    { background: var(--error-bg);   color: var(--error); }

/* ── Debriefing table ────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin-top: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mute);
  border-bottom: 2px solid var(--hairline);
}
td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
tr.cascade-row td { background: var(--warning-bg); }
tr:last-child td  { border-bottom: none; }

/* ── Summary (finished) ──────────────────────────────────────────────── */
.round-summary {
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 20px 24px;
  margin-bottom: 20px;
  position: relative;
}
.round-summary::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 12px; height: 12px;
  background: var(--green);
}
.round-summary-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.round-summary-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mute);
}

/* ── Rules list (lobby) ──────────────────────────────────────────────── */
.rules-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rules-list li {
  font-size: 14px;
  color: var(--body);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.rules-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: var(--r);
}

/* ── Waiting dots ────────────────────────────────────────────────────── */
.waiting { color: var(--mute); font-size: 14px; margin-top: 16px; }
.dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
  0%,20%  { content: ''; }
  40%     { content: '.'; }
  60%     { content: '..'; }
  80%,100%{ content: '...'; }
}

/* ── Admin secret type display ───────────────────────────────────────── */
.secret-strip {
  font-size: 13px;
  color: var(--mute);
  margin-bottom: 16px;
  padding: 8px 12px;
  background: var(--soft);
  border-radius: var(--r);
}
.secret-strip strong { color: var(--body); }

/* ── Action row (admin between rounds) ───────────────────────────────── */
.action-row { display: flex; gap: 12px; margin-top: 16px; }
.action-row .btn { flex: 1; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer {
  background: var(--black);
  color: var(--on-dark-mute);
  text-align: center;
  padding: 24px;
  font-size: 12px;
  margin-top: 64px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .nav { padding: 0 16px; }
  .main { padding: 24px 16px 64px; }
  .radio-group { flex-direction: column; }
  .action-row  { flex-direction: column; }

  /* Compact tables for mobile */
  th, td       { padding: 7px 5px; }
  table        { font-size: 13px; }
  th           { font-size: 10px; letter-spacing: 0; }
  .badge       { padding: 2px 5px; font-size: 11px; }

  /* Truncate long names in table */
  .student-col { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Decision buttons stacked */
  .decision-area { flex-direction: column; gap: 14px; margin-top: 28px; }
  .btn-decide    { height: auto; min-height: 88px; font-size: 26px; letter-spacing: 0.5px; flex: none; width: 100%; }
}