/* =============================================================================
   Pacote offline (Area dos Pais) — ver js/offline-pack.js
   Tela de adulto: sem mascote, sem confete. Mesmo papel recortado do resto
   (contorno --ink, sombra dura, --paper como superficie), so que mais sobria.
   ========================================================================== */

#offline-screen{
  background:
    radial-gradient(120% 70% at 50% 0%,#33266E 0%,rgba(51,38,110,0) 60%),
    linear-gradient(180deg,var(--night-2) 0%,var(--night) 100%);
  overflow-y:auto;
}
.op-header{
  display:flex;align-items:center;gap:12px;padding:14px 14px 8px;
  position:sticky;top:0;z-index:5;
  background:linear-gradient(180deg,var(--night-2) 70%,rgba(21,15,51,0));
}
.op-title{
  font-family:var(--font-display);font-size:21px;font-weight:800;color:var(--paper);
  margin:0;flex:1;
}
.op-content{padding:4px 14px 40px;max-width:560px;margin:0 auto;width:100%}

.op-intro{
  font-size:14px;line-height:1.5;color:rgba(255,246,233,.78);margin:0 0 10px;font-weight:600;
}
.op-intro b{color:var(--paper)}
.op-aviso-dados{
  font-size:13px;font-weight:700;color:var(--sun);margin:0 0 14px;
}
.op-erro{
  background:var(--tomato);color:var(--paper);border:3px solid var(--ink);border-radius:var(--r-md);
  box-shadow:0 4px 0 var(--ink);padding:9px 13px;font-size:13px;font-weight:700;margin-bottom:14px;
}

.op-resumo{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:inset 0 -6px 0 var(--paper-2),0 5px 0 var(--ink);
  padding:14px;margin-bottom:14px;
}
.op-resumo-num{font-family:var(--font-display);font-size:30px;font-weight:800;color:var(--ink);line-height:1}
.op-resumo-label{font-size:12px;font-weight:700;color:var(--ink-soft)}

/* ---- cartao de grupo ---------------------------------------------------- */
.op-card{
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:inset 0 -6px 0 var(--paper-2),0 5px 0 var(--ink);
  padding:13px;margin-bottom:13px;
}
.op-card-ok{box-shadow:inset 0 -6px 0 #E4F3BC,0 5px 0 var(--ink);background:#F6FBE7}
.op-card-ativo{box-shadow:inset 0 -6px 0 var(--paper-2),0 5px 0 var(--ink),0 0 0 3px var(--teal)}

.op-card-topo{display:flex;align-items:flex-start;gap:11px}
.op-card-icone{
  flex-shrink:0;width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--grape);color:var(--paper);
  border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);
}
.op-card-ok .op-card-icone{background:var(--lime);color:var(--ink)}
.op-card-texto{flex:1;min-width:0}
.op-card-nome{
  font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--ink);
  display:flex;align-items:center;gap:6px;line-height:1.2;
}
.op-selo{display:inline-flex;color:var(--lime-d)}
.op-card-desc{font-size:12.5px;font-weight:600;color:var(--ink-soft);line-height:1.4;margin-top:2px}

.op-barra{
  height:12px;margin:11px 0 9px;overflow:hidden;
  background:rgba(27,18,53,.14);border:2px solid var(--ink);border-radius:var(--r-pill);
}
.op-barra-fill{
  height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--lime) 0 52%,var(--lime-d) 52% 100%);
  transition:width .25s var(--ease-out,ease);
}
.op-card-pe{display:flex;align-items:center;justify-content:space-between;gap:10px}
.op-estado{font-size:12px;font-weight:700;color:var(--ink-soft);flex:1;min-width:0}

/* ---- botoes "tecla fisica" (DESIGN.md secao 4) -------------------------- */
.op-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--font-display);font-size:14px;font-weight:800;
  min-height:44px;padding:6px 15px;flex-shrink:0;
  border:3px solid var(--ink);border-radius:var(--r-md);color:var(--ink);
  box-shadow:0 4px 0 var(--ink);
  transition:transform .12s var(--ease-out,ease),box-shadow .12s var(--ease-out,ease);
}
.op-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.op-btn-baixar{background:var(--mango)}
.op-btn-cancelar{background:var(--sun)}
.op-btn-remover{background:var(--paper-2)}
.op-btn-tudo{
  width:100%;background:var(--lime);min-height:56px;font-size:17px;
  border-radius:var(--r-lg);box-shadow:0 6px 0 var(--ink);margin-bottom:16px;
}
.op-btn-tudo:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}

.op-espaco{
  font-size:12px;font-weight:700;color:rgba(255,246,233,.55);
  text-align:center;padding:6px 4px 0;line-height:1.5;
}
.op-espaco b{color:var(--paper)}

/* atalho no painel dos pais */
.pd-offline-btn{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:inset 0 -6px 0 var(--paper-2),0 5px 0 var(--ink);
  padding:13px;color:var(--ink);
  transition:transform .12s var(--ease-out,ease),box-shadow .12s var(--ease-out,ease);
}
.pd-offline-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.pd-offline-icone{
  flex-shrink:0;width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal);color:var(--ink);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);
}
.pd-offline-nome{font-family:var(--font-display);font-size:16px;font-weight:800;line-height:1.2}
.pd-offline-desc{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-top:2px}

@media (prefers-reduced-motion:reduce){
  .op-barra-fill{transition:none}
}

/* ---- titulo de secao dentro da tela do pacote --------------------------- */
.op-secao{
  font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--paper);
  margin:22px 0 10px;display:flex;flex-direction:column;gap:2px;
}
.op-secao-nota{font-family:var(--font);font-size:12px;font-weight:700;color:rgba(255,246,233,.55)}

/* ---- chip "baixar esta historia", no card da tela de Historias ----------
   Cada historia e um pacote proprio: a decisao acontece na hora de escolher a
   historia da noite, nao numa tela de configuracao longe dali. */
.op-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-display);font-size:11.5px;font-weight:800;line-height:1;
  padding:5px 10px;min-height:30px;
  white-space:nowrap;margin-left:auto;flex-shrink:0;
  background:var(--sun);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:var(--r-pill);
  box-shadow:0 3px 0 var(--ink);
  transition:transform .12s var(--ease-out,ease),box-shadow .12s var(--ease-out,ease);
}
.op-chip:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.op-chip-ok{background:var(--lime);box-shadow:0 3px 0 var(--ink)}
.op-chip-ativo{background:var(--teal)}
.op-chip svg{flex-shrink:0}