/* ============================================================
   ACADEMIA DE CRACKS · Home Screen (Mi Academia)
   week card, day strip, mission hero, mini missions, achievements
   ============================================================ */

/* This week summary */
.week-card {
  margin: 0 16px 18px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(30, 155, 255,0.08), rgba(0,212,255,0.04));
  border: 1px solid var(--glass-border);
  border-radius: 18px;
}
.week-card .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.week-card .top h3 { font-size: 15px; font-weight: 600; }
.week-card .top .week-num { font-family: 'Chakra Petch', sans-serif; font-size: 11px; color: var(--smoke-dim); text-transform: uppercase; letter-spacing: 0.1em; }

.week-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.week-stat {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}
.week-stat .v { font-family: 'Chakra Petch', sans-serif; font-size: 22px; font-weight: 700; color: var(--neon); line-height: 1; }
.week-stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--smoke-dim); margin-top: 6px; font-family: 'Chakra Petch', sans-serif; }

/* Day strip */
.day-strip { display: flex; gap: 6px; margin-top: 14px; }
.day-cell {
  flex: 1;
  aspect-ratio: 1;
  background: var(--glass);
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 10px;
  color: var(--smoke-dim);
  position: relative;
  flex-direction: column;
}
.day-cell .d { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; color: var(--smoke-dim); }
.day-cell .n { font-size: 13px; color: var(--smoke); font-weight: 700; }
.day-cell.done { background: var(--neon); color: var(--carbon); }
.day-cell.done .d, .day-cell.done .n { color: var(--carbon); }
.day-cell.today { background: rgba(30, 155, 255,0.15); border: 1.5px solid var(--neon); }
.day-cell.today .d, .day-cell.today .n { color: var(--neon); }
.day-cell.miss  { background: var(--glass); opacity: 0.5; }

/* Today's mission hero */
.mission-hero {
  background:
    linear-gradient(135deg, rgba(30, 155, 255,0.2), rgba(30, 155, 255,0.05) 60%, rgba(0,0,0,0.4)),
    var(--carbon-3);
  border: 1px solid rgba(30, 155, 255,0.3);
  border-radius: 20px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.mission-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px var(--neon-glow);
  border-color: var(--neon);
}
.mission-hero::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--neon), transparent 70%);
  opacity: 0.15;
  pointer-events: none;
}
.mission-hero .mh-tag {
  display: inline-flex;
  align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--neon);
  color: var(--carbon);
  border-radius: 100px;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.mission-hero h2 { font-size: 22px; line-height: 1.15; margin-bottom: 8px; font-weight: 700; position: relative; }
.mission-hero p  { color: var(--smoke-2); font-size: 13px; line-height: 1.5; margin-bottom: 16px; position: relative; }
.mission-hero .mh-meta { display: flex; gap: 8px; margin-bottom: 14px; position: relative; }
.mission-hero .mh-meta .chip {
  padding: 5px 10px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 11px; font-weight: 600;
  color: var(--smoke);
  display: flex; gap: 6px; align-items: center;
}
.mission-hero .mh-meta .chip.xp { background: rgba(30, 155, 255,0.15); border-color: var(--neon); color: var(--neon); }
.mission-hero .mh-cta {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--neon);
  color: var(--carbon);
  border-radius: 12px;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.1em;
  text-align: center;
  justify-content: center;
  position: relative;
}
/* Done state */
.mission-hero.mission-done {
  background: linear-gradient(135deg, rgba(30, 155, 255,0.06), rgba(30, 155, 255,0.02)), var(--carbon-3);
  border-color: rgba(30, 155, 255,0.2);
  cursor: default;
  opacity: 0.8;
}
.mission-hero.mission-done::before { display: none; }
.mission-hero.mission-done h2 { color: var(--smoke-2); }
.mission-hero.mission-done .mh-tag { background: rgba(30, 155, 255,0.15); color: var(--neon); }

/* Mini missions (habits) */
.mini-missions { margin: 0 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.mini-mission {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 14px;
  display: flex; gap: 12px; align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
.mini-mission:hover { background: var(--glass-2); border-color: var(--glass-border-hi); transform: translateX(2px); }
.mini-mission .mm-icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.mini-mission .mm-info { flex: 1; }
.mini-mission .mm-info h4 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.mini-mission .mm-info p  { font-size: 11px; color: var(--smoke-dim); font-family: 'Chakra Petch', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; }
.mini-mission .mm-xp { font-family: 'Chakra Petch', sans-serif; font-weight: 700; color: var(--neon); font-size: 13px; }
.mini-mission.done { opacity: 0.5; }
.mini-mission.done .mm-icon { background: var(--neon); color: var(--carbon); }
.mini-mission.done h4 { text-decoration: line-through; }

/* Variante "challenge" (desafío sponsoreado al inicio de Más para hoy).
   Background gradient naranja sutil para diferenciar del resto de hábitos
   sin gritar. Cuando se cierre sponsor real, los colores pueden cambiar
   a la marca; ese ajuste va en index.html (inline style del icon) o acá. */
.mini-mission.challenge-mini {
  background: linear-gradient(135deg, rgba(255,122,0,0.12), rgba(255,122,0,0.04));
  border-color: rgba(255,122,0,0.3);
}
.mini-mission.challenge-mini:hover {
  background: linear-gradient(135deg, rgba(255,122,0,0.16), rgba(255,122,0,0.06));
  border-color: rgba(255,122,0,0.5);
}
.mini-mission.challenge-mini .mm-info p {
  color: var(--orange);
  font-weight: 700;
}

/* Achievements strip */
.ach-strip { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 18px; scrollbar-width: none; }
.ach-strip::-webkit-scrollbar { display: none; }
.ach-card {
  flex-shrink: 0;
  width: 128px;
  padding: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  text-align: center;
}
.ach-card .ach-icon {
  width: 56px; height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px;
  background: linear-gradient(135deg, rgba(255,184,0,0.2), rgba(255,184,0,0.05));
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 20px -6px var(--gold);
}
.ach-card.locked .ach-icon { background: var(--glass); border-color: var(--glass-border-hi); color: var(--muted); box-shadow: none; filter: grayscale(1); }
.ach-card h5 { font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.ach-card.locked h5 { color: var(--smoke-dim); }
.ach-card p { font-size: 10px; color: var(--smoke-dim); line-height: 1.3; }

/* ---- Pantalla "Mis logros" placeholder (screen-achievements) ----
   Estado vacío — la lista real de achievements no está implementada todavía. */
.ach-screen { background: var(--carbon); }
.ach-empty {
  margin: 32px 20px 0;
  padding: 36px 24px;
  text-align: center;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
}
.ach-empty .ach-empty-icon {
  font-size: 56px;
  margin-bottom: 12px;
  filter: grayscale(0.5);
  opacity: 0.85;
}
.ach-empty h3 { font-size: 18px; line-height: 1.25; margin-bottom: 8px; }
.ach-empty p  { font-size: 13px; color: var(--smoke-dim); line-height: 1.5; }