/* ============================================================
   assets/gamificacao.css — Gamificação NEXO
   Prefixo gami- em todas as classes. NÃO tocar styles.css nem navbar.css.
   Valores extraídos de nexo_jornada_gamificada_v2.html (exatos).
   ============================================================ */

/* ── Paleta Fiori (:root) ─────────────────────────────────── */
:root {
  --gami-b900: #0a1f3c;
  --gami-b800: #0f2952;
  --gami-b700: #123a68;
  --gami-b600: #0a4ea0;
  --gami-b500: var(--nx-blue);
  --gami-b400: #2f86df;
  --gami-b300: #5aa0e8;
  --gami-b200: #9cc4f0;
  --gami-b100: #d4e6fa;
  --gami-b050: #eef5fc;
  --gami-card: #fff;
  --gami-line: #d9e1ea;
  --gami-line-soft: #e9eef4;
  --gami-ink: #13294a;
  --gami-ink-2: #5a6b82;
  --gami-ink-3: #8a97a8;
  --gami-green: #1a7a47;
  --gami-amber: #b07d12;
  --gami-radius: 14px;
  --gami-shadow: 0 1px 2px rgba(13,41,82,.06), 0 8px 24px rgba(13,41,82,.08);
  --gami-shadow-sm: 0 1px 2px rgba(13,41,82,.05), 0 3px 10px rgba(13,41,82,.06);
  --gami-serif: Georgia, "Times New Roman", serif;
}

/* ===== WRAPPER DOS BLOCOS GAMI ===== */
.gami-wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  display: block;
  min-width: 0;
}

/* ===== SELOS ===== */
.gami-selo {
  border-radius: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.55),
    inset 0 -3px 6px rgba(0,0,0,.28),
    0 2px 5px rgba(0,0,0,.18);
}
.gami-selo::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1.5px dotted currentColor;
  opacity: .45;
}
.gami-selo-letter {
  font-family: var(--gami-serif);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 -1px 1px rgba(0,0,0,.3);
}

.gami-selo-ouro {
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.6), rgba(255,255,255,0) 42%),
    conic-gradient(from 215deg, #a87f1e, #ecd384, #9a7416, #f2dd95, #b88a22, #ecd384, #a87f1e);
  color: #6f5410;
}
.gami-selo-ouro .gami-selo-letter { color: #6f5410; }

.gami-selo-prata {
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 42%),
    conic-gradient(from 215deg, #8c98a4, #eef2f6, #aab6c1, #ffffff, #9aa6b2, #eef2f6, #8c98a4);
  color: #566370;
}
.gami-selo-prata .gami-selo-letter { color: #566370; }

.gami-selo-bronze {
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.5), rgba(255,255,255,0) 42%),
    conic-gradient(from 215deg, #875730, #cf9560, #6f4524, #dca473, #95603a, #cf9560, #875730);
  color: #543620;
}
.gami-selo-bronze .gami-selo-letter { color: #543620; }

.gami-selo-bloqueado { filter: grayscale(.7) brightness(.9); opacity: .5; }

.gami-selo-lg { width: 96px; height: 96px; }
.gami-selo-lg .gami-selo-letter { font-size: 42px; }
.gami-selo-md { width: 44px; height: 44px; }
.gami-selo-md .gami-selo-letter { font-size: 19px; }
.gami-selo-xs {
  width: 18px; height: 18px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 2px rgba(0,0,0,.25);
}
.gami-selo-xs::before { display: none; }
.gami-selo-xs .gami-selo-letter { font-size: 9px; }

/* ===== PAINEL (card branco) ===== */
.gami-panel {
  background: var(--gami-card);
  border: 1px solid var(--gami-line);
  border-radius: var(--gami-radius);
  box-shadow: var(--gami-shadow-sm);
  padding: 15px 16px;
}
.gami-panel-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gami-ink-3);
  margin-bottom: 11px;
}

/* ===== STRIP DE ENGAJAMENTO ===== */
.gami-strip {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.3fr;
  gap: 14px;
  margin: 14px 0;
  width: 100%;
  min-width: 0;
}
@media (max-width: 920px) { .gami-strip { grid-template-columns: 1fr; } }

.gami-coins { display: flex; gap: 18px; }
.gami-coin  { display: flex; align-items: center; gap: 9px; }
.gami-coin-v { font-size: 20px; font-weight: 800; line-height: 1; }
.gami-coin-n { font-size: 11px; color: var(--gami-ink-2); font-weight: 600; }

.gami-streak { display: flex; align-items: center; gap: 13px; }
.gami-streakbox {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--gami-b700), var(--gami-b900));
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(15,41,82,.3);
  color: var(--gami-b200);
  font-size: 22px;
}
.gami-streak-v    { font-size: 24px; font-weight: 800; line-height: 1; }
.gami-streak-n    { font-size: 11.5px; color: var(--gami-ink-2); font-weight: 600; margin-top: 2px; }
.gami-streak-warn { font-size: 10.5px; color: var(--gami-amber); font-weight: 700; margin-top: 3px; }

.gami-nextc      { display: flex; align-items: center; gap: 13px; }
.gami-nextc-body { flex: 1; }
.gami-nextc-t    { font-size: 13px; font-weight: 700; }
.gami-nextc-n    { font-size: 10.5px; color: var(--gami-ink-2); font-weight: 600; }
.gami-nextc-n b  { color: var(--gami-b700); }

/* ===== BARRA DE PROGRESSO ===== */
.gami-bar {
  height: 9px;
  border-radius: 6px;
  background: var(--gami-b050);
  overflow: hidden;
  margin: 7px 0 4px;
  border: 1px solid var(--gami-line-soft);
}
.gami-bar-f {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--gami-b400), var(--gami-b600));
}
.gami-bar-f-60 { width: 60%; }

/* ===== CAPTION (legenda científica) ===== */
.gami-cap    { font-size: 11px; color: var(--gami-ink-3); font-style: italic; margin: 6px 2px 0; }
.gami-cap b  { color: var(--gami-b600); font-style: normal; font-weight: 700; }
.gami-cap-mb { margin-bottom: 6px; }

/* ===== HERO — ATIVIDADE DO DIA ===== */
.gami-hero {
  background: linear-gradient(135deg, var(--gami-b800), var(--gami-b700) 55%, var(--gami-b600));
  border-radius: 18px;
  padding: 22px 24px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(13,41,82,.28);
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}
.gami-hero::after {
  content: "";
  position: absolute;
  right: -50px; top: -50px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(156,196,240,.18), transparent 70%);
  pointer-events: none;
}
.gami-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  position: relative; z-index: 1;
  flex-wrap: wrap;
}
.gami-hero-eye {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gami-b200);
  font-weight: 700;
}
.gami-hero-mod {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  background: rgba(255,255,255,.16);
  border-radius: 6px;
  padding: 2px 9px;
  margin-left: 8px;
  vertical-align: middle;
}
.gami-hero-h2 {
  margin: 8px 0 4px;
  font-size: 22px; font-weight: 800;
  letter-spacing: -.3px;
  color: #fff;
}
.gami-hero-cap   { font-size: 13px; color: #cfe0f4; max-width: 430px; line-height: 1.4; }
.gami-hero-steps { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.gami-hstep {
  font-size: 11.5px; font-weight: 600;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 6px 11px;
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff;
}

.gami-reward {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(156,196,240,.4);
  border-radius: 14px;
  padding: 14px 16px;
  min-width: 210px;
  text-align: center;
  flex-shrink: 0;
}
.gami-reward-l {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gami-b200); font-weight: 700;
}
.gami-reward-coins  { display: flex; justify-content: center; gap: 12px; margin: 11px 0; align-items: center; }
.gami-reward-chance { font-size: 11.5px; color: #fff; font-weight: 600; }
.gami-reward-chance b { color: #fff; }

.gami-btn-go {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: #fff;
  color: var(--gami-b700);
  font-weight: 800; font-size: 14px;
  padding: 11px 22px;
  border-radius: 10px;
  border: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.gami-btn-go:hover { opacity: .88; color: var(--gami-b700); }

.gami-hero-loose {
  position: relative; z-index: 1;
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--gami-b200);
  display: flex; align-items: center; gap: 7px;
}
.gami-hero-loose b { color: #fff; }

/* ===== CONQUISTA + COMPARTILHAR ===== */
.gami-achieve {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--gami-card);
  border: 1px solid var(--gami-line);
  border-left: 5px solid var(--gami-b500);
  border-radius: 18px;
  box-shadow: var(--gami-shadow);
  padding: 20px 22px;
  margin: 16px 0 6px;
}
@media (max-width: 920px) {
  .gami-achieve { grid-template-columns: 1fr; text-align: center; }
  .gami-achieve-ic { margin: 0 auto; }
}
.gami-achieve-txt { /* coluna de texto do achieve grid — sem estilo extra */ }
.gami-achieve-eye {
  font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gami-b600); font-weight: 700;
  margin-bottom: 4px;
}
.gami-achieve-h3 { margin: 0 0 3px; font-size: 17px; font-weight: 800; color: var(--gami-ink); }
.gami-achieve-p  { margin: 0; font-size: 12.5px; color: var(--gami-ink-2); line-height: 1.4; }

.gami-share {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: auto;
  flex-wrap: nowrap;
}
.gami-share-l {
  font-size: 10px; font-weight: 600;
  color: var(--gami-ink-3);
  text-transform: none; letter-spacing: 0;
  margin: 0 2px 0 0; white-space: nowrap;
}
.gami-sbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border-radius: 8px; font-size: 15px;
  color: var(--gami-ink-2);
  background: transparent;
  border: 1px solid var(--gami-line);
  cursor: pointer; text-decoration: none; flex: 0 0 auto;
  transition: color .18s, background .18s, border-color .18s;
}
.gami-sbtn:hover        { color: #fff; border-color: transparent; }
.gami-sbtn-li:hover     { background: #0a66c2; }
.gami-sbtn-ig:hover     { background: linear-gradient(135deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.gami-sbtn-x:hover      { background: #000; color: #fff; }

/* ===== TRILHA DO MÓDULO ===== */
.gami-section-h {
  display: flex; align-items: baseline; gap: 10px;
  margin: 24px 2px 4px;
  flex-wrap: wrap;
}
.gami-section-h-title { font-size: 16px; font-weight: 700; color: var(--gami-ink); }
.gami-section-h-sub   { font-size: 12px; color: var(--gami-ink-2); }

.gami-track {
  background: var(--gami-card);
  border: 1px solid var(--gami-line);
  border-radius: var(--gami-radius);
  box-shadow: var(--gami-shadow-sm);
  padding: 18px 16px;
  overflow-x: auto;
  margin-top: 8px;
}
.gami-dots {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: max-content;
}
.gami-dot {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; width: 54px;
}
.gami-dot-c {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.gami-dot-done .gami-dot-c { background: var(--gami-green); color: #fff; }
.gami-dot-now  .gami-dot-c {
  background: #fff; color: var(--gami-b600);
  border: 3px solid var(--gami-b500);
  box-shadow: 0 0 0 4px var(--gami-b100);
}
.gami-dot-lock .gami-dot-c {
  background: var(--gami-b050); color: #aab8c8;
  border: 1px solid var(--gami-line);
}
.gami-dot-n { font-size: 9.5px; color: var(--gami-ink-3); font-weight: 600; text-align: center; line-height: 1.1; }
.gami-dot-now .gami-dot-n { color: var(--gami-b600); font-weight: 800; }

/* conector: margin-top negativo alinha com o centro do círculo */
.gami-link      { flex: 0 0 auto; width: 20px; height: 3px; background: var(--gami-line); margin-top: -18px; }
.gami-link-done { background: var(--gami-green); }

.gami-drip-note { font-size: 11.5px; color: var(--gami-ink-2); margin-top: 12px; display: flex; align-items: center; gap: 7px; }
.gami-drip-note b { color: var(--gami-ink); }

/* ===== UNLOCK SUBMÓDULO ===== */
.gami-unlock {
  margin-top: 24px;
  background: linear-gradient(135deg, var(--gami-b900), var(--gami-b700));
  border-radius: 18px;
  padding: 22px 24px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(10,31,60,.3);
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.gami-unlock::after {
  content: "";
  position: absolute;
  left: -30px; bottom: -50px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90,160,232,.22), transparent 70%);
  pointer-events: none;
}
.gami-unlock-ic   { position: relative; z-index: 1; flex: 0 0 auto; }
.gami-unlock-body { flex: 1; min-width: 260px; position: relative; z-index: 1; }
.gami-unlock-eye  { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gami-b200); font-weight: 700; }
.gami-unlock-h3   { margin: 5px 0 3px; font-size: 19px; font-weight: 800; color: #fff; }
.gami-unlock-p    { margin: 0; font-size: 12.5px; color: #c8dbf0; line-height: 1.4; }

.gami-unlock .gami-bar {
  background: rgba(255,255,255,.15);
  margin: 11px 0 6px;
  height: 11px;
  border: none;
}
.gami-unlock .gami-bar-f {
  background: linear-gradient(90deg, var(--gami-b300), var(--gami-b500));
  width: 68%;
}
.gami-unlock-n   { font-size: 11.5px; color: #fff; font-weight: 700; }
.gami-unlock-n b { color: var(--gami-b200); }

.gami-unlock-cta {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(156,196,240,.45);
  color: #fff; font-weight: 700; font-size: 13px;
  padding: 11px 20px;
  border-radius: 10px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background .18s;
}
.gami-unlock-cta:hover { background: rgba(255,255,255,.24); color: #fff; }