/* ===== Arise Quest — estética "Centro de mando" (verde bosque + menta + glass) ===== */

:root {
  --bg: #060f0b;
  --bg-panel: #0b1a14;
  --bg-panel-2: #102921;
  --blue: #3fdba0;       /* acento principal: verde menta (antes azul) */
  --blue-soft: #6ee7c4;  /* acento secundario, más claro */
  --violet: #8fd9c4;     /* acento secundario salvia (antes violeta) */
  --gold: #e0b768;       /* ámbar cálido, reservado para hitos/rango especial */
  --danger: #e08a8a;
  --text: #e9f2ec;
  --text-dim: rgba(233, 242, 236, 0.55);
  --border: rgba(255, 255, 255, 0.08);
  --surface: #081310;

  --rank-e: rgba(233, 242, 236, 0.45);
  --rank-d: #3fdba0;
  --rank-c: #6ee7c4;
  --rank-b: #8fd9c4;
  --rank-a: #e0a15a;
  --rank-s: #e8c468;

  font-family: 'JetBrains Mono', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at top, #102921 0%, #060f0b 55%, #030805 100%);
  color: var(--text);
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  /* antes llevaba background-attachment: fixed + un pseudo-elemento con
     position: fixed cubriendo toda la pantalla — esa combinación es una de
     las causas más comunes de scroll con tirones en Safari de iPhone
     (obliga a repintar en cada frame de scroll). Con position: relative +
     absolute el patrón de rejilla sigue viéndose igual pero se compone
     una sola vez y se desplaza junto con la página. */
  position: relative;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(63,219,160,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,219,160,0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* numeración de tarjetas (01, 02, 03...) — cada .panel se autonumera en el
   orden en que aparece dentro de su pantalla/pestaña/modal; el contador se
   reinicia en cada una de esas unidades para que la numeración que ve el
   usuario en un momento dado siempre empiece en 01, en vez de arrastrar un
   conteo global de paneles que ni siquiera están visibles. */
.view,
.tab-panel,
.modal-overlay {
  counter-reset: panelidx;
}

.hidden { display: none !important; }

.view { min-height: 100vh; }
.view.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ---------- loading ---------- */
.loader-glyph {
  font-size: 48px;
  color: var(--blue);
  animation: spin 2.2s linear infinite;
  text-shadow: 0 0 20px rgba(63,219,160,0.6);
}
.loader-text { color: var(--text-dim); margin-top: 12px; letter-spacing: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- panels ---------- */
.panel {
  background: var(--surface, #081310);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)), rgba(9, 22, 17, 0.55);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  padding: 30px 24px 24px;
  /* min-width: 0 es necesario porque este panel vive dentro de una fila de
     grid (.dash-grid): sin esto, un grid item nunca se encoge por debajo
     del ancho de su contenido "no partible" más largo (p. ej. un mensaje de
     error técnico sin espacios, como un JSON de la API). Eso empujaba todo
     el panel — y con él, el resto del texto — más ancho que la pantalla del
     móvil, cortándolo por el borde derecho. */
  min-width: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px rgba(0,0,0,0.25);
}
.panel::before {
  counter-increment: panelidx;
  content: counter(panelidx, decimal-leading-zero);
  position: absolute;
  top: 14px;
  left: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(233, 242, 236, 0.32);
  pointer-events: none;
}

.awaken-panel { width: 100%; max-width: 420px; text-align: center; }

.eyebrow {
  color: var(--blue-soft);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 10px;
}

.glow-title {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 0.2px;
  margin: 0 0 10px;
  color: var(--text);
  text-shadow: 0 0 22px rgba(63,219,160,0.35);
}

.panel-sub { color: var(--text-dim); font-size: 14px; margin: 0 0 22px; }

.panel-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin: 0 0 16px;
  font-weight: 600;
}

/* ---------- forms ---------- */
.stack { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; min-width: 0; }
.field span { font-size: 12px; color: var(--text-dim); letter-spacing: 0.5px; }
.field input, .field select {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 15px;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
  width: 100%;
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(63,219,160,0.15);
}
.field-checkbox { flex-direction: row; align-items: center; gap: 10px; }
/* min-width: 0 aquí porque .field-row es a su vez un elemento flex dentro de
   .stack: sin esto, en pantallas estrechas (iPhone) los dos campos de la
   fila (p. ej. Peso / Altura) no se encogían y el segundo campo quedaba
   cortado fuera de la pantalla. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.field-checkbox input { width: 16px; height: 16px; accent-color: var(--blue); }

.btn {
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(180deg, var(--blue), #1f9d6e);
  color: #04140d;
  box-shadow: 0 0 18px rgba(63,219,160,0.4);
}
.btn-primary:hover { box-shadow: 0 0 26px rgba(63,219,160,0.6); }
.btn-secondary {
  background: rgba(143, 217, 196, 0.12);
  color: #cdeee2;
  border: 1px solid rgba(143, 217, 196, 0.35);
}
.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.15);
}
.btn-sm { padding: 8px 12px; font-size: 12.5px; }

.link-btn {
  background: none;
  border: none;
  color: var(--blue-soft);
  cursor: pointer;
  font-size: 13px;
  margin-top: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.error {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
  margin: 12px 0 0;
  /* los errores técnicos (p. ej. la respuesta cruda de una API) pueden venir
     como una cadena larga sin espacios — forzamos que se pueda partir en
     vez de desbordar el panel. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- topbar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.brand {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 14px;
  text-transform: uppercase;
}
.brand span { color: var(--blue); text-shadow: 0 0 10px rgba(63,219,160,0.5); }

/* ---------- pestañas ---------- */
.tab-bar {
  display: flex;
  gap: 4px;
  padding: 10px 16px 0;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tab-btn {
  flex: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 10px 14px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--blue-soft); border-bottom-color: var(--blue); text-shadow: 0 0 10px rgba(63,219,160,0.4); }
.tab-btn-disabled { color: rgba(233,242,236,0.25); cursor: default; opacity: 0.6; }
.tab-btn-disabled:hover { color: rgba(233,242,236,0.25); }

/* ---------- dashboard grid ---------- */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 20px;
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 760px) {
  .dash-grid {
    grid-template-columns: 1fr 1fr;
  }
  .quests-panel, .char-panel, .keys-panel, .chart-panel { grid-column: 1 / -1; }
}

.equip-char-name { color: var(--blue-soft); }

/* llaves del sistema */
.keys-list { display: flex; flex-direction: column; gap: 8px; }
.key-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(232,196,104,0.3);
  background: rgba(232,196,104,0.04);
}
.key-card .key-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  flex: none;
  background-size: cover;
  background-position: center;
  border: 1px solid currentColor;
  box-shadow: 0 0 10px currentColor;
}
.key-card .key-main { flex: 1; min-width: 0; }
.key-card .key-name { font-size: 12.5px; font-weight: 700; }
.key-card .key-meta { font-size: 10.5px; color: var(--text-dim); }
.key-card .key-use-btn {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--gold);
  background: rgba(232,196,104,0.12);
  color: var(--gold);
  cursor: pointer;
}
.key-card .key-use-btn:hover { background: rgba(232,196,104,0.25); box-shadow: 0 0 12px rgba(232,196,104,0.4); }

/* character panel */
.char-panel {
  display: flex;
  align-items: center;
  gap: 18px;
}
.rank-badge {
  flex: none;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 30px;
  font-weight: 600;
  border: 2px solid var(--rank-e);
  color: var(--rank-e);
  text-shadow: 0 0 12px currentColor;
  box-shadow: 0 0 18px currentColor, inset 0 0 12px rgba(255,255,255,0.05);
  transition: color 0.4s, border-color 0.4s;
}
.rank-E { color: var(--rank-e); border-color: var(--rank-e); }
.rank-D { color: var(--rank-d); border-color: var(--rank-d); }
.rank-C { color: var(--rank-c); border-color: var(--rank-c); }
.rank-B { color: var(--rank-b); border-color: var(--rank-b); }
.rank-A { color: var(--rank-a); border-color: var(--rank-a); }
.rank-S { color: var(--rank-s); border-color: var(--rank-s); }

.char-info { flex: 1; min-width: 0; }
.char-name { font-family: 'Newsreader', serif; font-style: italic; font-size: 19px; font-weight: 500; }
.char-level { font-size: 12px; color: var(--text-dim); margin: 2px 0 8px; }

.xp-bar-track {
  width: 100%;
  height: 8px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--blue));
  box-shadow: 0 0 12px rgba(63,219,160,0.5);
  transition: width 0.6s cubic-bezier(.2,.9,.3,1);
}
.xp-numbers { font-size: 11px; color: var(--text-dim); margin-top: 5px; }

.streak-box {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(224, 183, 104, 0.08);
  border: 1px solid rgba(224, 183, 104, 0.3);
  border-radius: 8px;
}
.streak-flame { font-size: 22px; filter: drop-shadow(0 0 6px rgba(224,183,104,0.7)); }
.streak-num { font-family: 'Newsreader', serif; font-style: italic; font-size: 19px; font-weight: 600; line-height: 1; }
.streak-label { font-size: 10px; color: var(--text-dim); }

/* stats */
.stat-rows { display: flex; flex-direction: column; gap: 12px; }
.stat-row { display: grid; grid-template-columns: 90px 1fr 34px; align-items: center; gap: 10px; }
.stat-row .stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.stat-row .stat-bar-track {
  height: 6px;
  background: var(--surface);
  border: 1px solid rgba(143,217,196,0.2);
  border-radius: 4px;
  overflow: hidden;
}
.stat-row .stat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--blue));
  transition: width 0.5s ease;
}
.stat-row .stat-value { font-family: 'Newsreader', serif; font-style: italic; font-size: 14px; text-align: right; color: var(--text); font-weight: 600; }

/* progreso diario circular: gauge estilo "readiness" dentro de Estado del Cazador */
.daily-progress-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.daily-gauge {
  position: relative;
  width: 172px;
  height: 172px;
}
.daily-gauge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* halo concentrado en la banda del aro (no en el centro), para no tapar el número */
  background: radial-gradient(circle, transparent 42%, rgba(63,219,160,0.45) 63%, rgba(63,219,160,0.18) 76%, transparent 88%);
  filter: blur(10px);
  pointer-events: none;
  transition: background 0.4s ease;
}
.daily-gauge.complete::before {
  background: radial-gradient(circle, transparent 42%, rgba(232,196,104,0.7) 63%, rgba(232,196,104,0.28) 76%, transparent 88%);
}
.daily-gauge-svg {
  width: 100%;
  height: 100%;
  transform: rotate(120deg);
  overflow: visible;
}
.daily-gauge-bg {
  fill: none;
  stroke: rgba(63,219,160,0.12);
  stroke-width: 15;
  stroke-linecap: round;
  stroke-dasharray: 450.295 90.059;
  stroke-dashoffset: 0;
}
.daily-gauge-fill {
  fill: none;
  stroke: url(#gaugeGrad);
  stroke-width: 15;
  stroke-linecap: round;
  stroke-dasharray: 0 540.354;
  stroke-dashoffset: 0;
  transition: stroke-dasharray 0.7s cubic-bezier(.2,.9,.3,1), stroke 0.4s ease;
  filter: drop-shadow(0 0 5px rgba(63,219,160,1)) drop-shadow(0 0 16px rgba(63,219,160,0.8)) drop-shadow(0 0 30px rgba(63,219,160,0.5));
}
.daily-gauge-fill.complete {
  stroke: #f0d38f;
  filter: drop-shadow(0 0 6px rgba(232,196,104,1)) drop-shadow(0 0 22px rgba(232,196,104,0.9)) drop-shadow(0 0 40px rgba(232,196,104,0.6));
}
.daily-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 20px;
}
.daily-gauge-percent {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 40px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  /* sombra oscura sutil solo para dar contraste, sin brillo de color que dificulte la lectura */
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.daily-gauge.complete .daily-gauge-percent {
  color: #fbf1dd;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.daily-gauge-caption {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.daily-gauge-status {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(232,196,104,0.3);
  text-align: center;
  line-height: 1.25;
}
.daily-ring-sub { font-size: 12px; color: var(--text-dim); letter-spacing: 0.3px; margin-top: 2px; }

/* gráfico de evolución de productividad */
.chart-panel .panel-title { margin-bottom: 18px; }
.chart-frame {
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: radial-gradient(120% 140% at 50% 0%, rgba(63,219,160,0.06), transparent 60%), var(--surface);
  box-shadow: inset 0 0 30px rgba(63,219,160,0.05), inset 0 0 0 1px rgba(255,255,255,0.03);
  padding: 14px 16px 12px;
  overflow: hidden;
}
.chart-corner {
  position: absolute;
  top: 10px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  opacity: 0.8;
  font-weight: 700;
}
.chart-corner-tl { left: 14px; }
.chart-corner-tr {
  right: 14px;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(232,196,104,0.4);
}
.chart-svg-wrap {
  width: 100%;
  line-height: 0;
  margin-top: 6px;
}
.chart-svg { width: 100%; height: auto; display: block; }
.chart-area-fill { fill: url(#chartAreaGrad); stroke: none; }
.chart-line {
  fill: none;
  stroke: var(--blue-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(110,231,196,0.9)) drop-shadow(0 0 10px rgba(63,219,160,0.6));
}
.chart-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}
.chart-label-main {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
}
.chart-label-sub {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}
.chart-empty {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 10px;
}
.chart-empty.hidden { display: none; }

/* equipamiento */
.equip-body {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  align-items: center;
  justify-content: center;
}
.equip-slots-col {
  flex: none;
  width: 118px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.equip-slot-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}
.equip-slot-wrap .equip-slot { flex: 1; min-width: 0; }
.equip-connector {
  flex: none;
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(63,219,160,0.55), rgba(63,219,160,0.12));
  position: relative;
}
.equip-slot-wrap-right .equip-connector {
  background: linear-gradient(90deg, rgba(63,219,160,0.12), rgba(63,219,160,0.55));
}
.equip-connector-dot {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-soft);
  box-shadow: 0 0 6px var(--blue-soft);
  transform: translateY(-50%);
}
.equip-slot-wrap-left .equip-connector-dot { right: -2px; }
.equip-slot-wrap-right .equip-connector-dot { left: -2px; }

.equip-silhouette {
  flex: none;
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.silhouette-svg { width: 100%; height: auto; }
.silhouette-shape path,
.silhouette-shape rect {
  fill: rgba(11,26,20,0.9);
  stroke: rgba(63,219,160,0.5);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.silhouette-shape .sil-visor { stroke: var(--violet, #8fd9c4); stroke-width: 2; }
.silhouette-shape .sil-seam { stroke: rgba(63,219,160,0.3); stroke-width: 1; }
.silhouette-shape .sil-joint { fill: rgba(143,217,196,0.12); stroke: rgba(63,219,160,0.45); stroke-width: 1.2; }
.silhouette-shape .sil-dot { fill: var(--blue-soft); stroke: none; }

@media (max-width: 620px) {
  .equip-body { flex-direction: column; gap: 14px; }
  .equip-slots-col { width: 100%; min-height: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .equip-slot-wrap { flex-direction: column-reverse; width: 90px; }
  .equip-slot-wrap-right { flex-direction: column-reverse; }
  .equip-connector { display: none; }
  .equip-silhouette { width: 140px; order: -1; }
}
.equip-slot {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px dashed rgba(143,217,196,0.35);
  border-radius: 8px;
  background: rgba(143,217,196,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.equip-slot:hover { border-color: var(--violet); background: rgba(143,217,196,0.1); }
.equip-slot.filled { border-style: solid; }
.equip-slot .slot-icon { font-size: 18px; }
.equip-slot .slot-icon-img {
  width: 60%;
  aspect-ratio: 1;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.equip-slot .slot-label { font-size: 9px; color: var(--text-dim); letter-spacing: 0.5px; }
.equip-slot .slot-item-name {
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.15;
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.inventory-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(63,219,160,0.05);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.inventory-toggle-btn:hover { border-color: var(--blue); background: rgba(63,219,160,0.1); }
.inventory-label,
.ai-agent-label {
  font-family: 'Newsreader', Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--text);
  text-shadow: 0 0 10px rgba(63,219,160,0.3);
}
.inventory-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--blue);
  color: #04140d;
  font-size: 11px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
}
.inventory-list { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; }
.inv-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.inv-card .rarity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 6px currentColor;
}
.inv-card .item-thumb {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex: none;
  background-size: cover;
  background-position: center;
  border: 1px solid currentColor;
  box-shadow: 0 0 6px currentColor;
}
.inv-card .inv-main { flex: 1; min-width: 0; }
.inv-card .inv-name { font-size: 12.5px; font-weight: 600; }
.inv-card .inv-meta { font-size: 10.5px; color: var(--text-dim); }
.inv-card .inv-btn {
  flex: none;
  font-size: 10.5px;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.inv-card .inv-btn:hover { border-color: var(--blue); color: var(--blue-soft); }
.inv-card.equipped { border-color: rgba(63,219,160,0.4); }

/* quests */
.quests-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.quest-group { margin-bottom: 18px; }
.quest-group-title {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 8px;
}
.quest-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  transition: border-color 0.15s, opacity 0.3s;
}
.quest-card.done {
  opacity: 0.5;
  border-color: rgba(63, 219, 160, 0.4);
}
.quest-card.failed {
  border-color: rgba(224, 138, 138, 0.5);
  background: rgba(224, 138, 138, 0.05);
}
.quest-card.challenge-quest {
  border-color: rgba(232,196,104,0.5);
  background: rgba(232,196,104,0.04);
  box-shadow: 0 0 16px rgba(232,196,104,0.08);
}
.tag-challenge { background: rgba(232,196,104,0.15); color: var(--gold); }
.quest-main { flex: 1; min-width: 0; }
.quest-title { font-size: 14px; font-weight: 600; }
.quest-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tag-time { background: rgba(232,196,104,0.15); color: var(--gold); }
.tag-failed { background: rgba(224,138,138,0.18); color: var(--danger); }

.quest-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.quest-progress .progress-track {
  flex: 1;
  height: 6px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.quest-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--blue));
  transition: width 0.3s ease;
}
.quest-progress .progress-num { font-size: 11px; color: var(--text-dim); flex: none; min-width: 64px; text-align: right; }
.progress-btn {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--blue-soft);
  background: transparent;
  color: var(--blue-soft);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.progress-btn:hover { background: rgba(63,219,160,0.15); }
.progress-btn:disabled { opacity: 0.3; cursor: default; }
.tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  letter-spacing: 0.5px;
}
/* progresión fría→cálida para leer la dificultad de un vistazo, sin salir
   de la familia de color del sistema (menta → ámbar) */
.tag-difficulty-easy { background: rgba(63,219,160,0.15); color: var(--blue); }
.tag-difficulty-medium { background: rgba(233,242,236,0.1); color: var(--text); }
.tag-difficulty-hard { background: rgba(224,161,90,0.15); color: var(--rank-a); }
.tag-difficulty-epic { background: rgba(232,196,104,0.15); color: var(--gold); }
.tag-muscle { background: rgba(143,217,196,0.15); color: var(--violet); margin-left: 6px; vertical-align: middle; }

.quest-complete-btn {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--blue-soft);
  background: transparent;
  color: var(--blue-soft);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.quest-complete-btn:hover { background: rgba(63,219,160,0.15); }
.quest-complete-btn.checked {
  background: var(--blue);
  border-color: var(--blue);
  color: #04180b;
}
.quest-delete-btn {
  flex: none;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  opacity: 0.5;
}
.quest-delete-btn:hover { opacity: 1; color: var(--danger); }

.empty-state { color: var(--text-dim); font-size: 13px; padding: 20px 0; text-align: center; }

/* ---------- rutinas de gimnasio ---------- */
.routine-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.routine-card:hover { border-color: var(--blue); background: rgba(63,219,160,0.05); }
.routine-card.done-today { border-color: rgba(63,219,160,0.4); }
.routine-card .routine-main { flex: 1; min-width: 0; }
.routine-card .routine-name { font-size: 15px; font-weight: 700; }
.routine-card .routine-meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.routine-card .routine-status { font-size: 11px; flex: none; }
.routine-card .routine-status.done { color: var(--blue); }
.routine-card .routine-status.pending { color: var(--blue-soft); }
.routine-delete-btn {
  flex: none;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  opacity: 0.5;
}
.routine-delete-btn:hover { opacity: 1; color: var(--danger); }

.exercise-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.exercise-row {
  margin-top: 10px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  background: rgba(63,219,160,0.03);
}
.exercise-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.exercise-row-top .ex-name { flex: 1; }
.exercise-row-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  gap: 6px;
  margin-top: 6px;
}
.exercise-row input,
.exercise-row select {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  padding: 8px 6px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: 'JetBrains Mono', monospace;
  width: 100%;
  min-width: 0;
}
.exercise-row .remove-exercise-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 15px;
  flex: none;
}
.exercise-row .remove-exercise-btn:hover { color: var(--danger); }
.exercise-row-labels {
  display: grid;
  grid-template-columns: 1fr 56px 56px 64px 30px;
  gap: 6px;
  font-size: 9.5px;
  color: var(--text-dim);
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.back-link { margin-bottom: 12px; display: inline-block; }

.session-exercise {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.session-exercise .se-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.session-exercise .se-name { font-size: 14px; font-weight: 700; }
.session-exercise .se-target { font-size: 11px; color: var(--text-dim); }
.session-exercise .se-pr {
  font-size: 10.5px;
  color: var(--gold);
  background: rgba(232,196,104,0.12);
  padding: 2px 8px;
  border-radius: 10px;
}
.set-row {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 70px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.set-row .set-label { font-size: 11px; color: var(--text-dim); }
.set-row input {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  width: 100%;
  min-width: 0;
}
.set-row .set-save-btn {
  background: rgba(63,219,160,0.13);
  border: 1px solid var(--blue-soft);
  color: var(--blue-soft);
  border-radius: 6px;
  font-size: 11px;
  padding: 7px 6px;
  cursor: pointer;
}
.set-row .set-save-btn:hover { background: rgba(63,219,160,0.26); }
.set-row.logged .set-save-btn { background: rgba(63,219,160,0.16); border-color: var(--blue); color: var(--blue); }
.set-row-labels {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 70px;
  gap: 8px;
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.system-toast.toast-pr { border-color: var(--gold); box-shadow: 0 0 34px rgba(232,196,104,0.5); }
.system-toast.toast-pr .toast-title { color: var(--gold); }

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 10, 7, 0.78);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal-panel { width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- system toast ---------- */
.system-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  background: linear-gradient(180deg, #122a20, #0b1a14);
  border: 1px solid var(--blue);
  box-shadow: 0 0 30px rgba(63,219,160,0.4);
  border-radius: 10px;
  padding: 14px 22px;
  text-align: center;
  min-width: 260px;
  animation: toast-in 0.35s ease-out;
}
.system-toast .toast-title {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--blue-soft);
  margin-bottom: 4px;
}
.system-toast .toast-body { font-size: 15px; font-weight: 700; }
.system-toast .toast-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, -16px); }
}
.system-toast.leaving { animation: toast-out 0.3s ease-in forwards; }
.system-toast.toast-loot { border-color: var(--gold); box-shadow: 0 0 30px rgba(232,196,104,0.45); }
.system-toast.toast-penalty { border-color: var(--danger); box-shadow: 0 0 30px rgba(224,138,138,0.45); }
.system-toast.toast-penalty .toast-title { color: var(--danger); }
.system-toast.toast-set { border-color: var(--blue-soft); box-shadow: 0 0 24px rgba(110,231,196,0.45); }
.system-toast.toast-set .toast-body { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.system-toast.toast-exercise { border-color: var(--violet); box-shadow: 0 0 32px rgba(143,217,196,0.5); }
.system-toast.toast-exercise .toast-title { color: var(--violet); }
.system-toast.toast-exercise .toast-body { color: var(--gold); text-shadow: 0 0 10px rgba(232,196,104,0.4); }

/* ---------- level up overlay ---------- */
.levelup-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(63,219,160,0.16), rgba(3,10,7,0.94));
  animation: overlay-fade 2.2s ease forwards;
}
@keyframes overlay-fade {
  0% { opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; }
}
.levelup-content { text-align: center; transform: scale(0.85); animation: levelup-pop 2.2s ease forwards; }
@keyframes levelup-pop {
  0% { transform: scale(0.6); }
  15% { transform: scale(1.08); }
  25% { transform: scale(1); }
  85% { transform: scale(1); }
  100% { transform: scale(1.05); }
}
.levelup-line1 {
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--blue-soft);
  text-shadow: 0 0 16px rgba(63,219,160,0.6);
  margin-bottom: 10px;
}
.levelup-level {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 64px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 20px rgba(63,219,160,0.7), 0 0 50px rgba(143,217,196,0.5);
  letter-spacing: 1px;
}
.levelup-line2 {
  margin-top: 14px;
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(232,196,104,0.6);
}
#levelup-rank { font-family: 'Newsreader', serif; font-style: italic; font-size: 26px; }

/* ---------- alimentación: TDEE + agente de IA ---------- */
.nutrition-panel .panel-title { display: flex; align-items: center; gap: 10px; }
.tdee-result {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(63,219,160,0.25);
  background: rgba(63,219,160,0.05);
}
.tdee-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-dim);
  padding: 4px 0;
}
.tdee-result-row strong { color: var(--text); font-weight: 700; }
.tdee-result-main {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
  padding-top: 10px;
  font-size: 14px;
}
.tdee-result-main strong { font-family: 'Newsreader', serif; font-style: italic; color: var(--blue-soft); font-size: 18px; font-weight: 600; text-shadow: 0 0 10px rgba(63,219,160,0.35); }

.tdee-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.tdee-macro-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  min-width: 0;
}
.tdee-macro-value {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.tdee-macro-label {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.food-photo-preview-wrap { margin: 12px 0; }
.food-photo-preview {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  display: block;
}
#btn-analyze-photo { margin-top: 10px; width: 100%; }
#btn-analyze-photo:disabled { opacity: 0.4; cursor: not-allowed; }
#food-analysis-loading {
  margin-top: 14px;
  font-size: 13px;
  color: var(--blue-soft);
  text-align: center;
}
.food-analysis-result:empty { display: none; }
.food-items-list { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.food-item-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  font-size: 12.5px;
}
.food-item-row strong { color: var(--text); font-weight: 700; flex: none; }
.food-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(232,196,104,0.08);
  border: 1px solid rgba(232,196,104,0.28);
  font-size: 13px;
}
.food-total-row strong { font-family: 'Newsreader', serif; font-style: italic; color: var(--gold); font-size: 17px; font-weight: 600; text-shadow: 0 0 10px rgba(232,196,104,0.35); }

/* ---------- progreso nutricional de hoy (barras objetivo vs. consumido) ---------- */
.nutri-bars { display: flex; flex-direction: column; gap: 14px; }
.nutri-bar-row { display: flex; flex-direction: column; gap: 6px; }
.nutri-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-dim);
}
.nutri-bar-label span:first-child { color: var(--text); font-weight: 700; }
.nutri-bar-track {
  height: 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  overflow: hidden;
}
.nutri-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  box-shadow: 0 0 8px rgba(63,219,160,0.45);
  transition: width 0.3s ease;
}
.nutri-bar-row.over .nutri-bar-fill { background: linear-gradient(90deg, var(--gold), var(--danger)); box-shadow: 0 0 8px rgba(224,138,138,0.4); }

/* ---------- plan de comidas del día ---------- */
#plan-generate-loading {
  margin-top: 14px;
  font-size: 13px;
  color: var(--blue-soft);
  text-align: center;
}
.recipe-preview { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.recipe-preview-ingredients { display: flex; flex-direction: column; gap: 6px; }
.recipe-preview-warning { color: var(--danger); font-size: 12px; margin: 4px 0 0; }

#plan-preview-comidas { display: flex; flex-direction: column; gap: 18px; }
.plan-meal-block {
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.015);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-meal-name-field span { font-size: 10.5px; }
.plan-meal-block .food-items-list { display: flex; flex-direction: column; gap: 6px; }
.plan-total-dia {
  background: rgba(63,219,160,0.08);
  border-color: rgba(63,219,160,0.3);
}
.plan-total-dia strong { color: var(--blue-soft); text-shadow: 0 0 10px rgba(63,219,160,0.35); }

/* ---------- recetas guardadas ---------- */
.recipes-list-panel #recipes-list { display: flex; flex-direction: column; gap: 10px; }
.recipe-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.recipe-card.comida-hoy { border-color: rgba(63,219,160,0.4); background: rgba(63,219,160,0.05); }
.recipe-card .recipe-main { flex: 1; min-width: 0; }
.recipe-card .recipe-name { font-size: 15px; font-weight: 700; }
.recipe-card .recipe-meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.recipe-card .recipe-log-btn { flex: none; white-space: nowrap; }

@media (max-width: 420px) {
  .recipe-card { flex-wrap: wrap; }
  .recipe-card .recipe-log-btn { order: 3; width: 100%; }
}

/* ---------- núcleo del cazador (imagen + atajo a Alimentación) ---------- */
.core-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.core-visual {
  position: relative;
  flex: 1;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  perspective: 700px;
  cursor: pointer;
  background: radial-gradient(120% 120% at 50% 15%, rgba(143,217,196,0.16), transparent 60%), var(--surface);
  -webkit-tap-highlight-color: transparent;
}
.core-gem-img {
  width: 100%;
  max-width: 250px;
  height: auto;
  display: block;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotateX(var(--core-rx, 0deg)) rotateY(var(--core-ry, 0deg)) scale(var(--core-scale, 1));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.25s;
  filter: drop-shadow(0 0 18px rgba(63, 219, 160, 0.35));
}
.core-visual:hover .core-gem-img,
.core-visual:active .core-gem-img {
  filter: drop-shadow(0 0 30px rgba(63, 219, 160, 0.55));
}

/* animaciones del icono del agente de IA (anillo de escaneo, pulso, nodos) */
.agent-ring-outer {
  transform-origin: 100px 100px;
  animation: agent-ring-spin 18s linear infinite;
}
@keyframes agent-ring-spin {
  to { transform: rotate(360deg); }
}
.agent-core-pulse {
  transform-origin: 100px 88px;
  filter: drop-shadow(0 0 6px rgba(240, 211, 143, 0.9));
  animation: agent-pulse 2.2s ease-in-out infinite;
}
@keyframes agent-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
.agent-nodes {
  transform-origin: 100px 100px;
  animation: agent-orbit 14s linear infinite;
}
@keyframes agent-orbit {
  to { transform: rotate(360deg); }
}
.core-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text);
  text-transform: uppercase;
  background: linear-gradient(0deg, rgba(3, 10, 7, 0.92), transparent);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
}
.core-visual:hover .core-caption,
.core-visual:active .core-caption,
.core-visual:focus-visible .core-caption {
  opacity: 1;
  transform: translateY(0);
}
.core-caption-icon { font-size: 13px; }
@media (max-width: 759px) {
  /* en móvil no hay hover: mostramos la pista siempre, tenue */
  .core-caption { opacity: 0.85; transform: translateY(0); }
}

/* ---------- Tu mentor ("El Sistema") — panel del dashboard ---------- */
/* 100% gratuito: no llama a ningún modelo de IA de pago. La puntuación, la
   lectura del día y las respuestas del chat se generan en app.js con un
   motor de reglas a partir de los datos reales del cazador. */
.mentor-score-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}
.mentor-score-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mentor-score {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
}
.mentor-score span {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 400;
}

.mentor-main-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.mentor-gem {
  width: 68px;
  height: 68px;
  flex: none;
  filter: drop-shadow(0 0 10px rgba(63,219,160,0.35));
}
.mentor-reading-box {
  flex: 1;
  min-width: 0;
  background: rgba(63,219,160,0.06);
  border: 1px solid rgba(63,219,160,0.25);
  border-radius: 10px;
  padding: 12px 14px;
}
.mentor-reading-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(63,219,160,0.16);
  color: var(--blue);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.mentor-reading-text {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
  overflow-wrap: anywhere;
}

.mentor-rescore-btn {
  margin-bottom: 18px;
}

.mentor-ask-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.mentor-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mentor-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.mentor-chip:hover { border-color: var(--blue); color: var(--text); }

.mentor-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
#mentor-input {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  outline: none;
}
#mentor-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(63,219,160,0.15); }
#mentor-send {
  flex: none;
  background: var(--blue);
  border: none;
  border-radius: 8px;
  color: #04140d;
  padding: 0 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}
#mentor-send:hover { box-shadow: 0 0 14px rgba(63,219,160,0.5); }

.mentor-answer-box {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: -4px 0 18px;
  min-height: 14px;
  overflow-wrap: anywhere;
}
.mentor-answer-box:empty { display: none; }
.mentor-answer-box b { color: var(--blue-soft); }

.mentor-stats-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.mentor-stat { text-align: left; min-width: 0; }
.mentor-stat-n {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.mentor-stat-l {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(233, 242, 236, 0.32);
}

@media (max-width: 420px) {
  .mentor-main-row { flex-direction: column; align-items: center; text-align: center; }
  .mentor-gem { width: 56px; height: 56px; }
}

/* ---------- responsive tweaks ---------- */
@media (max-width: 480px) {
  .char-panel { flex-wrap: wrap; }
  .streak-box { order: 3; width: 100%; justify-content: center; }
  .levelup-level { font-size: 46px; }
}