/* public/css/inicio.css — estilos temáticos de estación espacial / terminal para CodeQuest */
.cq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--borde);
}

.cq-stats {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.badge-xp {
  background: var(--primario);
  color: #fff;
  padding: .35rem .75rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: .9rem;
}

.badge-vidas {
  background: var(--error-fondo);
  color: var(--error-texto);
  padding: .35rem .75rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: .9rem;
}

.badge-rango {
  background: var(--fondo);
  border: 1px solid var(--borde);
  padding: .35rem .75rem;
  border-radius: 20px;
  font-size: .9rem;
  font-weight: 600;
}

.cq-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .cq-layout {
    grid-template-columns: 1fr;
  }
}

/* Consola */
.consola {
  background: #0d1117;
  color: #58a6ff;
  border-radius: var(--radio);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  border: 1px solid #30363d;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.consola-top {
  background: #161b22;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #30363d;
  color: #8b949e;
  font-size: .85rem;
}

.consola-dots {
  display: flex;
  gap: .4rem;
}

.consola-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

.consola-body {
  padding: 1.2rem;
  min-height: 240px;
  max-height: 360px;
  overflow-y: auto;
  color: #c9d1d9;
  font-size: .92rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.consola-linea.sistema {
  color: #79c0ff;
}
.consola-linea.exito {
  color: #7ee787;
}
.consola-linea.alerta {
  color: #ffa657;
}
.consola-linea.error {
  color: #ff7b72;
}
.consola-linea.comando {
  color: #d2a8ff;
  font-weight: 600;
}

.consola-prompt {
  display: flex;
  align-items: center;
  background: #161b22;
  border-top: 1px solid #30363d;
  padding: .5rem .8rem;
  gap: .5rem;
}

.consola-prompt span {
  color: #58a6ff;
  font-weight: 700;
}

.consola-input {
  background: transparent;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: .95rem;
  padding: .3rem;
  width: 100%;
}
.consola-input:focus {
  outline: none;
}

/* Misiones y sectores */
.sector-card {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--superficie);
}
.sector-card.activo {
  border-color: var(--primario);
  box-shadow: 0 0 0 1px var(--primario);
}

.mision-item {
  padding: .75rem;
  border-radius: 6px;
  border: 1px solid var(--borde);
  margin-top: .5rem;
  cursor: pointer;
  transition: background .15s;
}
.mision-item:hover {
  background: var(--fondo);
}
.mision-item.completada {
  border-left: 4px solid #27c93f;
  opacity: .85;
}
.mision-item.seleccionada {
  background: var(--fondo);
  border-color: var(--primario);
  font-weight: 600;
}

.guia-box {
  display: flex;
  gap: .8rem;
  align-items: center;
  padding: .8rem;
  border-radius: var(--radio);
  background: var(--fondo);
  margin: 1rem 0;
}
.guia-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primario);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.2rem;
}

.btn-pista {
  background: transparent;
  border: 1px dashed var(--borde);
  color: var(--suave);
  padding: .4rem .8rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85rem;
}
.btn-pista:hover {
  border-color: var(--primario);
  color: var(--primario);
}

.lista-insignias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .8rem;
  margin-top: 1rem;
}
.insignia-item {
  text-align: center;
  padding: .8rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--superficie);
  opacity: .4;
  filter: grayscale(1);
  transition: all .2s;
}
.insignia-item.desbloqueada {
  opacity: 1;
  filter: none;
  border-color: var(--primario);
}
.insignia-icon {
  font-size: 1.8rem;
  margin-bottom: .3rem;
}