/* ============================================================
   Entrada — escena de inicio y selección de tema
   ============================================================ */

/* ── Stage: fixed fullscreen, child of view-home ────────── */
.entrada-stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  overflow: hidden;
}

/* ── Ring wrapper — JS sets top/left/width/height ─────── */
#entrada-ring {
  position: absolute;
  transition:
    top    0.65s cubic-bezier(0.4, 0, 0.2, 1),
    left   0.65s cubic-bezier(0.4, 0, 0.2, 1),
    width  0.65s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 4;
}

#entrada-ring canvas {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 1.4s ease;
}

#entrada-ring.dormido           canvas { opacity: 0.32; }
#entrada-ring.dormido.returning canvas { opacity: 0.68; }
#entrada-ring.activo            canvas { opacity: 1;    }

/* Dormant: no pointer cursor when in corner */
#entrada-ring.en-esquina { cursor: default; }

/* ── Scenes ─────────────────────────────────────────────── */
.entrada-escena {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  opacity: 1;
}

.entrada-escena[data-hidden="true"] {
  opacity: 0;
  pointer-events: none !important;
}

.entrada-escena[data-hidden="false"] {
  pointer-events: all;
}

/* ── Scene: dormido ──────────────────────────────────────── */
#entrada-student-info {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  /* top / left set by JS */
}

.entrada-nombre {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.entrada-racha {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

#entrada-hint {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: 0.08em;
  white-space: nowrap;
  /* top / left set by JS */
  animation: entrada-blink 3.2s ease-in-out infinite;
}

@keyframes entrada-blink {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.75; }
}

/* ── Scene: seleccion ────────────────────────────────────── */
.seleccion-layout {
  position: absolute;
  inset: 0;
  padding: 88px 40px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
  max-width: 720px;
}

@media (max-width: 600px) {
  .seleccion-layout { padding: 88px 20px 40px; }
}

.seleccion-back {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.06em;
  padding: 0;
  align-self: flex-start;
  transition: color 0.14s;
}
.seleccion-back:hover { color: var(--ink); }

.seleccion-header-line {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.seleccion-header-line span { color: var(--acento); }

/* Materia grid */
.materias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 6px;
}

.materia-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.14s, box-shadow 0.14s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.materia-card:hover {
  border-color: var(--acento);
}
.materia-card.selected {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento), 0 0 14px rgba(var(--acento-rgb),0.12);
}
.materia-card-codigo {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--acento);
  letter-spacing: 0.14em;
}
.materia-card-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}

/* Subtemas */
.subtemas-block {
  display: flex;
  flex-direction: column;
  gap: 9px;
  animation: sel-fade-up 0.28s ease both;
}
.subtemas-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.subtemas-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.subtema-chip {
  padding: 6px 14px;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.subtema-chip:hover {
  border-color: var(--acento);
  color: var(--ink);
}
.subtema-chip.selected {
  border-color: var(--acento);
  color: var(--acento);
  background: rgba(var(--acento-rgb), 0.08);
}

/* Mode + confirm footer */
.seleccion-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  animation: sel-fade-up 0.32s ease both;
}
.modo-toggle {
  display: flex;
  border: 1px solid var(--line);
}
.modo-btn {
  padding: 8px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: background 0.14s, color 0.14s;
}
.modo-btn + .modo-btn { border-left: 1px solid var(--line); }
.modo-btn.selected {
  background: rgba(var(--acento-rgb), 0.12);
  color: var(--acento);
}
.confirmar-btn {
  padding: 9px 26px;
  background: var(--acento);
  color: #060606;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: opacity 0.14s, box-shadow 0.14s;
}
.confirmar-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}
.confirmar-btn:not(:disabled):hover {
  box-shadow: 0 0 18px rgba(var(--acento-rgb), 0.5);
}

/* ── Shared animation ────────────────────────────────────── */
@keyframes sel-fade-up {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}