/* SirEdwards Quiz 2.2 — Encargos: tira de Inicio, pantalla y aviso flotante. Solo clases .home-encargos / .enc-* / .encargos-toast. */

/* ---- Tira editorial de Inicio (entre las tarjetas pequeñas y el pie) ---- */
.home-encargos {
  display: flex; align-items: center; gap: 12px;
  min-height: 84px; max-height: 100px; box-sizing: border-box;
  margin: 0 0 18px; padding: 10px 14px 10px 10px;
  background: linear-gradient(180deg, var(--se-navy-2, #2a3560), var(--se-navy, #1c2340));
  color: var(--se-ink-on-navy, #f6e6b8);
  border: 1px solid var(--se-gold, #c9992e); border-radius: var(--radius-md, 14px);
  box-shadow: 0 4px 12px rgba(28,35,64,.22);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.home-encargos[hidden] { display: none; }
.home-encargos:active { transform: scale(.995); }
.home-encargos-img { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.07); }
.home-encargos-body { flex: 1 1 auto; min-width: 0; }
.home-encargos-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; color: var(--se-gold-light, #e8c874); }
.home-encargos-line { font-size: 13px; font-weight: 600; margin: 2px 0 6px; line-height: 1.25; }
.home-encargos-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
.home-encargos-fill { height: 100%; background: linear-gradient(90deg, var(--se-gold, #c9992e), var(--se-gold-light, #e8c874)); border-radius: 3px; transition: width .4s ease; }
.home-encargos-tail { font-size: 11px; font-weight: 700; margin-top: 5px; color: var(--se-gold-light, #e8c874); }
.home-encargos.is-done { border-color: var(--se-gold-light, #e8c874); }
[data-theme="dark"] .home-encargos { background: linear-gradient(180deg, #232c52, #171d36); }

/* ---- Pantalla de Encargos ---- */
#view-encargos .enc-scene { display: flex; align-items: flex-end; gap: 10px; margin: 6px 0 12px; }
.enc-scene-img { width: 112px; height: auto; max-height: 130px; object-fit: contain; flex: 0 0 auto; }
.enc-bubble {
  position: relative; flex: 1 1 auto; padding: 12px 14px; font-size: 13.5px; line-height: 1.4; font-style: italic;
  background: var(--se-parch, #f4ecd8); color: #16244a; border: 1px solid var(--se-gold-hair, rgba(201,153,46,.45)); border-radius: 14px 14px 14px 4px;
}
[data-theme="dark"] .enc-bubble { color: #f1e7cf; }
.enc-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: var(--sub); margin: 0 2px 10px; }
.enc-list { display: grid; gap: 10px; margin-bottom: 14px; }
.enc-card {
  position: relative; padding: 13px 14px 12px; border-radius: var(--radius-md, 14px);
  background: var(--se-parch, #f4ecd8); color: #16244a; border: 1px solid var(--se-gold-hair, rgba(201,153,46,.45));
}
[data-theme="dark"] .enc-card { color: #f1e7cf; }
.enc-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.enc-card-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 16px; }
.enc-card-xp { font-size: 12px; font-weight: 800; color: var(--se-gold, #c9992e); white-space: nowrap; }
.enc-card-desc { font-size: 12.5px; line-height: 1.35; margin: 4px 0 9px; opacity: .85; }
.enc-bar { height: 7px; border-radius: 4px; background: rgba(28,35,64,.14); overflow: hidden; }
[data-theme="dark"] .enc-bar { background: rgba(255,255,255,.14); }
.enc-bar-fill { height: 100%; background: linear-gradient(90deg, var(--se-gold, #c9992e), var(--se-gold-light, #e8c874)); border-radius: 4px; transition: width .4s ease; }
.enc-card-prog { font-size: 11.5px; font-weight: 700; margin-top: 5px; opacity: .8; }
.enc-card.is-done { opacity: .78; }
.enc-card.is-done .enc-card-xp, .enc-card.is-done .enc-card-prog { color: #2e7d4f; opacity: 1; }
.enc-card.is-great {
  padding-top: 20px; border: 2px solid var(--se-gold, #c9992e);
  background: linear-gradient(180deg, var(--se-navy-2, #2a3560), var(--se-navy, #1c2340)); color: var(--se-ink-on-navy, #f6e6b8);
  box-shadow: 0 6px 18px rgba(28,35,64,.3);
}
.enc-card.is-great .enc-card-title { font-size: 18px; }
.enc-card.is-great .enc-bar { background: rgba(255,255,255,.18); }
.enc-card.is-great .enc-card-xp { color: var(--se-gold-light, #e8c874); }
.enc-card.is-great.is-done { opacity: 1; }
.enc-card.is-great.is-done .enc-card-xp, .enc-card.is-great.is-done .enc-card-prog { color: var(--se-gold-light, #e8c874); }
.enc-great-tag {
  position: absolute; top: -10px; left: 14px; padding: 2px 10px; font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  background: var(--se-gold, #c9992e); color: #1c2340; border-radius: 999px;
}

/* ---- Aviso flotante (arriba, sin modal, sin recibir toques) ---- */
.encargos-toast {
  position: fixed; left: 50%; top: 78px; z-index: 10001;
  display: flex; align-items: center; gap: 12px; box-sizing: border-box;
  min-width: 280px; max-width: min(440px, calc(100vw - 24px));
  padding: 12px 18px 12px 14px; text-align: left;
  border-radius: var(--radius-md, 16px); border: 1.5px solid var(--se-gold, #c9992e);
  background: linear-gradient(135deg, #fffaf0, #f4e8cb); color: #16244a;
  box-shadow: 0 16px 40px rgba(10,16,36,.30), 0 0 26px rgba(201,153,46,.28);
  opacity: 0; pointer-events: none; transform: translate(-50%, -18px) scale(.96);
  transition: opacity .3s ease, transform .3s ease;
}
.encargos-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
[data-theme="dark"] .encargos-toast {
  background: linear-gradient(135deg, #222c57, #171d36); color: #fdf7ea;
  border-color: rgba(232,200,116,.75); box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 26px rgba(201,153,46,.22);
}
.encargos-toast-ico { flex: 0 0 auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.encargos-toast-ico img, .encargos-toast-ico svg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.encargos-toast-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.encargos-toast-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #8a6414; }
[data-theme="dark"] .encargos-toast-kicker { color: var(--se-gold-light, #e8c874); }
.encargos-toast-name { font-family: 'Playfair Display', Georgia, serif; font-size: 17px; font-weight: 800; line-height: 1.2; }
.encargos-toast-quip { font-size: 12.5px; font-weight: 600; font-style: italic; opacity: .8; }
.encargos-toast-detail { font-size: 12.5px; font-weight: 700; opacity: .85; }
.encargos-toast-bar { display: block; height: 6px; margin-top: 4px; border-radius: 99px; background: rgba(22,36,74,.14); overflow: hidden; }
[data-theme="dark"] .encargos-toast-bar { background: rgba(255,255,255,.14); }
.encargos-toast-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #c9992e, #e8c874); }
.encargos-toast-aux { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: #8a6414; white-space: nowrap; }
[data-theme="dark"] .encargos-toast-aux { color: var(--se-gold-light, #e8c874); }
.encargos-toast.is-great { border-color: #e8c874; }
/* Versión antigua (píldora de una línea), por si un aviso llega sin datos de tarjeta. */
.encargos-toast-main { font-size: 13.5px; font-weight: 800; }
.encargos-toast-sub { font-size: 12px; font-weight: 600; opacity: .8; margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .encargos-toast, .home-encargos-fill, .enc-bar-fill { transition: none; } }

/* Avisos de modo nuevo, logro con recompensa y Encargos: algo más cerca del centro, para que se vean al mirar el resultado. */
@media (max-width: 600px) {
  .mode-unlock-toast, .reward-toast, .encargos-toast { top: clamp(80px, 17vh, 160px) !important; }
  .encargos-toast { width: calc(100vw - 24px); min-width: 0; }
}