:root {
  --pizarra: #11271f;
  --pizarra-2: #0e2820;
  --tiza: #f6f3e8;
  --tiza-tenue: #cfcab8;
  --linea: #2b4a3e;
  --amarillo: #f8ce5b;
  --menta: #8fd6b4;
  --rojo: #f08a7e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Instrument Sans', sans-serif;
  background: radial-gradient(circle at 50% 0%, #14352a, #0c211b 70%);
  color: var(--tiza);
  min-height: 100vh;
  padding: 24px 16px 60px;
}

.admin-wrap { max-width: 720px; margin: 0 auto; }
.admin-wrap.wide { max-width: 1100px; }

.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.admin-head h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
}
.admin-nav { display: flex; gap: 8px; }
.admin-nav a {
  text-decoration: none;
  color: var(--tiza-tenue);
  border: 1.5px solid var(--linea);
  border-radius: 8px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.admin-nav a:hover { color: var(--tiza); background: rgba(246, 243, 232, 0.05); }
.admin-nav a.active { color: var(--amarillo); border-color: var(--amarillo); }

.card {
  background: var(--pizarra-2);
  border: 1.5px solid var(--linea);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.card-title { font-weight: 700; margin-bottom: 14px; font-size: 1.05rem; }

.btn {
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  padding: 10px 18px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  background: transparent;
  color: var(--tiza);
  transition: filter 0.15s, background 0.15s;
}
.btn.primary { background: var(--amarillo); color: #1c1607; border-color: var(--amarillo); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.danger { color: var(--rojo); border-color: rgba(240, 138, 126, 0.5); }
.btn.danger:hover { background: rgba(240, 138, 126, 0.1); }
.btn.small { padding: 6px 12px; font-size: 0.85rem; }

input {
  background: var(--pizarra);
  color: var(--tiza);
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  padding: 10px 13px;
  font-family: inherit;
  font-size: 1rem;
  min-height: 44px;
}
input:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 1px; }

/* Login */
.login-card { max-width: 460px; }
.login-title { font-weight: 700; margin-bottom: 14px; font-size: 1.1rem; }
.login-row { display: flex; gap: 10px; flex-wrap: wrap; }
.login-row input { flex: 1; min-width: 180px; }
.warn {
  background: rgba(248, 206, 91, 0.12);
  border: 1.5px solid rgba(248, 206, 91, 0.4);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.error { color: var(--rojo); font-size: 0.9rem; margin-top: 10px; font-weight: 600; }
.muted { color: var(--tiza-tenue); font-size: 0.95rem; }

/* Tabla de códigos */
.add-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.add-row input[type="text"] { flex: 1; min-width: 160px; }
.add-row input[type="number"] { width: 110px; }
.add-row .unit { color: var(--tiza-tenue); font-size: 0.82rem; }

.codes-table { width: 100%; border-collapse: collapse; }
.codes-table th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tiza-tenue);
  padding: 8px 10px;
  border-bottom: 1.5px solid var(--linea);
}
.codes-table td {
  padding: 11px 10px;
  border-bottom: 1px solid rgba(43, 74, 62, 0.5);
  font-size: 0.95rem;
}
.codes-table td.code-cell { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; }
.codes-table td.cap-cell { color: var(--menta); }

/* Monitor en vivo */
.sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}
.session-card {
  background: var(--pizarra-2);
  border: 1.5px solid var(--linea);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.session-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1.5px solid var(--linea);
  gap: 10px;
}
.session-code {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
}
.session-state {
  font-size: 0.78rem;
  color: var(--tiza-tenue);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--menta); }
.session-state.thinking .dot { background: var(--amarillo); animation: pulse 1s infinite; }
.session-state.speaking .dot { background: var(--menta); animation: pulse 0.7s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

.session-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
}
.msg { max-width: 85%; padding: 7px 11px; border-radius: 12px; font-size: 0.9rem; line-height: 1.4; }
.msg .who { display: block; font-family: 'Caveat', cursive; font-size: 0.95rem; margin-bottom: 1px; }
.msg.user { align-self: flex-end; background: rgba(248, 206, 91, 0.12); border: 1px solid rgba(248, 206, 91, 0.35); border-bottom-right-radius: 4px; }
.msg.user .who { color: var(--amarillo); }
.msg.assistant { align-self: flex-start; background: rgba(143, 214, 180, 0.12); border: 1px solid rgba(143, 214, 180, 0.35); border-bottom-left-radius: 4px; }
.msg.assistant .who { color: var(--menta); }

@media (max-width: 560px) {
  input { font-size: 16px; }
  .sessions-grid { grid-template-columns: 1fr; }
}

/* ----- Historial del estudiante ----- */
.session-history { padding: 16px 18px; }
.history-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.history-log {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
  padding-top: 10px;
  border-top: 1px solid var(--linea);
}
.btn.ghost { background: transparent; color: var(--tiza); border-color: var(--linea); }
.btn.ghost:hover { background: rgba(246, 243, 232, 0.05); }