/* ============================================================
   css/tutorial.css — Botón "?" del header + overlay de tutoriales
   animados (js/tutorial.js). La mini-pantalla usa la UI real:
   las clases de estilos.css / jugar.css se renderizan a escala.
   ============================================================ */

/* ── Botón ? en el header ───────────────────────────────────── */
.qy-ayuda-btn {
  display: none;
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.12); color: #fff;
  font: 900 20px/1 var(--fuente); cursor: pointer;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
html.qy-tiene-ayuda .qy-ayuda-btn { display: inline-flex; }
.qy-ayuda-btn:hover { background: rgba(255,255,255,.22); }
.qy-ayuda-btn.llama::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6);
  animation: qy-ayuda-latido 1.8s ease-out infinite;
}
@keyframes qy-ayuda-latido { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
.qy-ayuda-btn .qy-ayuda-txt { display: none; }
@media (min-width: 1024px) {
  .qy-ayuda-btn { width: auto; padding: 0 14px 0 10px; border-radius: 99px; gap: 6px; font-size: 15px; height: 42px; }
  .qy-ayuda-btn .qy-ayuda-txt { display: inline; font-weight: 800; }
}

/* ── Overlay ────────────────────────────────────────────────── */
.tut-ov {
  position: fixed; inset: 0; z-index: 5000;
  background: #0f1c15; color: #e6efe9;
  display: flex; flex-direction: column;
  font-family: var(--fuente);
  padding-top: env(safe-area-inset-top, 0px);
}
.tut-ov[hidden], .tut-ov [hidden] { display: none !important; }
.tut-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 6px; }
.tut-cab b { font-size: 17px; line-height: 1.2; }
.tut-cab .tut-x { flex-shrink: 0; border: none; background: rgba(255,255,255,.12); color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.tut-barra { display: flex; gap: 5px; padding: 4px 16px 8px; }
.tut-barra i { flex: 1; height: 6px; border-radius: 3px; background: #23352b; }
.tut-barra i.on { background: #38bdf8; }
.tut-barra i.ok { background: var(--verde); }
.tut-paso {
  margin: 0 16px 8px; background: #fff; color: var(--texto); border-radius: 14px; padding: 10px 14px;
  display: flex; gap: 12px; align-items: center; box-shadow: 0 4px 18px rgba(0,0,0,.3); min-height: 68px;
}
.tut-paso i { width: 36px; height: 36px; border-radius: 50%; background: #38bdf8; color: #fff; display: grid; place-items: center; font: 900 16px var(--fuente); font-style: normal; flex-shrink: 0; }
.tut-paso.fin i { background: var(--verde); }
.tut-paso b { display: block; font-size: 16px; line-height: 1.2; }
.tut-paso span { display: block; font-size: 14px; color: var(--texto-suave); line-height: 1.35; margin-top: 3px; }

/* La mini-pantalla: un "celular" de 390 px que se escala para entrar */
.tut-demo { flex: 1; min-height: 0; margin: 0 16px; background: #fff; border-radius: 18px; padding: 10px; overflow: hidden; position: relative; }
.tut-scr-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; background: var(--fondo); }
.tut-scr {
  position: absolute; left: 0; top: 0; width: 390px; height: 100%;
  transform-origin: 0 0; background: var(--fondo); color: var(--texto);
  overflow: hidden; display: flex; flex-direction: column;
  font-family: var(--fuente); font-size: var(--f-base); line-height: 1.5;
}
.tut-scr * { box-sizing: border-box; }
.tut-scr .tut-nav { background: var(--verde); color: #fff; min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; gap: 10px; flex-shrink: 0; }
.tut-scr .tut-nav .l { font-weight: 900; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.tut-scr .tut-nav .l i { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--verde); display: grid; place-items: center; font: 900 12px var(--fuente); font-style: normal; }
.tut-scr .tut-nav .s { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); border-radius: 99px; padding: 3px 12px; text-align: center; line-height: 1.1; }
.tut-scr .tut-nav .s small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .5px; }
.tut-scr .tut-nav .s b { font-size: 15px; }
.tut-scr .tut-strip { background: var(--verde-oscuro); color: #fff; text-align: center; font-weight: 800; font-size: 15px; padding: 6px 12px; flex-shrink: 0; }
.tut-scr .tut-body { flex: 1; overflow: auto; padding: 16px 14px 90px; scroll-behavior: smooth; }
.tut-scr .tut-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px 14px; background: rgba(240,247,244,.97); border-top: 1px solid var(--borde-suave); display: flex; gap: 8px; }
.tut-scr .tut-pie .btn { margin: 0; }
.tut-scr .tut-pie .btn-volver { flex: 0 0 auto; width: auto; padding: 0 14px; }
.tut-scr .tut-tabbar { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--borde-suave); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px 10px; }
.tut-scr .tut-tabbar div { text-align: center; font-size: 11px; font-weight: 700; color: var(--texto-suave); }
.tut-scr .tut-tabbar div i { display: block; width: 22px; height: 22px; margin: 0 auto 2px; border-radius: 6px; background: var(--borde); }
.tut-scr .tut-tabbar div.on { color: var(--verde); } .tut-scr .tut-tabbar div.on i { background: var(--verde); }
.tut-scr .card { background: var(--fondo-card); border: 1.5px solid var(--borde-suave); border-radius: var(--radio); padding: 16px; margin-bottom: 12px; box-shadow: none; }
.tut-scr .btn { min-height: 56px; }
.tut-scr .btn-sm { min-height: 44px; }
.tut-scr h1, .tut-scr h2 { margin: 0 0 4px; }
.tut-scr p { margin: 0 0 12px; }
.tut-scr .oculto { display: none !important; }

/* Piezas copiadas de páginas que definen su CSS inline (cargar-saldo, saldo, bonos, mis-jugadas) */
.tut-scr .paso-titulo { font-size: var(--f-lg); font-weight: 900; margin: 0 0 6px; line-height: 1.2; }
.tut-scr .paso-sub { font-size: var(--f-base); color: var(--texto-suave); margin: 0 0 16px; line-height: 1.5; }
.tut-scr .montos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tut-scr .btn-monto { min-height: 64px; font-size: var(--f-md); font-weight: 900; background: var(--fondo-card); border: 2.5px solid var(--borde); border-radius: var(--radio); color: var(--texto); font-family: var(--fuente); }
.tut-scr .btn-monto.activo { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-oscuro); }
.tut-scr .otro-monto-wrap input { width: 100%; min-height: 56px; font-size: var(--f-md); font-weight: 700; text-align: center; border: 2.5px solid var(--borde); border-radius: var(--radio); font-family: var(--fuente); color: var(--texto); margin-top: 10px; background: #fff; }
.tut-scr .metodo-card { display: block; width: 100%; text-align: left; background: #fff; border: 2.5px solid var(--borde); border-radius: var(--radio); padding: 14px; margin-bottom: 12px; font-family: var(--fuente); color: var(--texto); }
.tut-scr .metodo-card.activo { border-color: var(--verde); background: var(--verde-claro); }
.tut-scr .metodo-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tut-scr .metodo-ico { font-size: 22px; } .tut-scr .metodo-tit { font-weight: 900; font-size: var(--f-base); }
.tut-scr .metodo-badge { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: #dcfce7; color: #166534; }
.tut-scr .metodo-desc { font-size: var(--f-sm); color: var(--texto-suave); line-height: 1.45; margin: 0; }
.tut-scr .monto-grande { font-size: 40px; font-weight: 900; color: var(--acento); line-height: 1; text-align: center; margin: 8px 0 4px; }
.tut-scr .monto-aclaracion { text-align: center; font-size: var(--f-sm); color: var(--texto-suave); margin-bottom: 14px; }
.tut-scr .dato-pago { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--borde-suave); }
.tut-scr .dato-pago:last-child { border-bottom: none; }
.tut-scr .dp-label { font-size: var(--f-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave); }
.tut-scr .dp-valor { font-size: var(--f-md); font-weight: 900; color: var(--texto); word-break: break-all; }
.tut-scr .btn-copiar { flex-shrink: 0; min-height: 44px; padding: 0 14px; border-radius: var(--radio-sm); background: var(--verde); color: #fff; border: none; font-weight: 700; font-size: var(--f-sm); font-family: var(--fuente); }
.tut-scr .btn-copiar.ok { background: var(--verde-oscuro); }
.tut-scr .pasos-lista { margin: 0; padding-left: 20px; font-size: var(--f-sm); line-height: 1.5; }
.tut-scr .comprobante-zona { display: block; border: 2px dashed var(--borde); border-radius: var(--radio); padding: 14px; text-align: center; color: var(--texto-suave); font-size: var(--f-sm); margin-bottom: 10px; }
.tut-scr .aviso-ok { background: var(--verde-claro); border: 2px solid #86efac; border-radius: var(--radio); padding: 20px 16px; text-align: center; }
.tut-scr .aviso-ok .ico { font-size: 44px; margin-bottom: 6px; }
.tut-scr .saldo-card { text-align: center; }
.tut-scr .saldo-label { font-size: var(--f-sm); color: var(--texto-suave); font-weight: 700; }
.tut-scr .saldo-monto { font-size: 40px; font-weight: 900; color: var(--verde-oscuro); line-height: 1.1; margin: 4px 0 2px; }
.tut-scr .saldo-detalle { font-size: var(--f-sm); color: var(--texto-suave); margin-bottom: 12px; }
.tut-scr .saldo-acciones { display: grid; gap: 8px; }
.tut-scr .ret-box { background: #f8fafc; border: 1px solid var(--borde-suave); border-radius: 12px; padding: 12px; margin-top: 10px; }
.tut-scr .ret-input { width: 100%; min-height: 54px; font-size: var(--f-md); font-weight: 800; text-align: center; border: 2.5px solid var(--borde); border-radius: 12px; font-family: var(--fuente); background: #fff; }
.tut-scr .req { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borde-suave); font-size: var(--f-sm); }
.tut-scr .req:last-child { border-bottom: none; }
.tut-scr .req i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--borde); display: grid; place-items: center; color: transparent; font-style: normal; font-size: 14px; font-weight: 900; flex-shrink: 0; }
.tut-scr .req.ok i { background: var(--verde); border-color: var(--verde); color: #fff; }
.tut-scr .req .btn { min-height: 38px; font-size: 13px; width: auto; padding: 0 10px; margin-left: auto; border-radius: 8px; }
.tut-scr .mov { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--borde-suave); font-size: var(--f-sm); }
.tut-scr .mov b.pos { color: var(--verde); margin-left: auto; } .tut-scr .mov b.neg { color: #b91c1c; margin-left: auto; }
.tut-scr .bono-card { border-radius: 16px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--borde); background: #fff; }
.tut-scr .bono-head { display: flex; gap: 12px; align-items: flex-start; }
.tut-scr .bono-emoji { font-size: 32px; line-height: 1; flex-shrink: 0; }
.tut-scr .bono-tit { font-weight: 800; font-size: var(--f-md); margin: 0; }
.tut-scr .bono-desc { font-size: var(--f-sm); color: var(--texto-suave); line-height: 1.5; margin: 4px 0 0; }
.tut-scr .bono-chip { display: inline-block; font-size: var(--f-xs); font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-top: 6px; background: #dcfce7; color: #166534; }
.tut-scr .prog-wrap { height: 10px; background: #e2e8f0; border-radius: 6px; overflow: hidden; margin: 10px 0 6px; }
.tut-scr .prog-bar { height: 100%; background: var(--verde); transition: width .8s; }
.tut-scr .ruleta-card { border-radius: 16px; padding: 16px; margin-bottom: 12px; background: linear-gradient(135deg,#0b1220,#132038); color: #fff; text-align: center; }
.tut-scr .ruleta-card .bono-tit, .tut-scr .ruleta-card .bono-desc { color: #fff; }
.tut-scr .ruleta-mini { width: 150px; height: 150px; border-radius: 50%; margin: 12px auto; position: relative; transition: transform 2.6s cubic-bezier(.15,.85,.2,1);
  background: conic-gradient(#f59e0b 0 45deg, #22c55e 45deg 90deg, #3b82f6 90deg 135deg, #ef4444 135deg 180deg, #f59e0b 180deg 225deg, #22c55e 225deg 270deg, #3b82f6 270deg 315deg, #ef4444 315deg 360deg); box-shadow: 0 0 0 6px #fff, 0 10px 24px rgba(0,0,0,.4); }
.tut-scr .ruleta-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #132038; font: 900 13px var(--fuente); border: none; display: grid; place-items: center; }
.tut-scr .ruleta-flecha { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 16px solid #fff; }
.tut-scr .tk { background: #fff; border: 1.5px solid var(--borde-suave); border-radius: var(--radio); padding: 14px; margin-bottom: 12px; }
.tut-scr .tk .n { font-size: var(--f-md); font-weight: 900; letter-spacing: 2px; }
.tut-scr .tk .d { font-size: var(--f-sm); color: var(--texto-suave); }
.tut-scr .tk .imp { font-size: var(--f-lg); font-weight: 900; color: var(--acento); }
.tut-scr .tk .acc { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; border-top: 1px solid var(--borde-suave); padding-top: 10px; align-items: center; }
.tut-scr .tk .acc .btn { min-height: 40px; font-size: 13px; width: auto; padding: 0 10px; border-radius: 8px; }
.tut-scr .badge { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 99px; border: 1.5px solid; }
.tut-scr .badge-PAGADA { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
.tut-scr .badge-CARGADA { background: #f0fdf4; color: #14532d; border-color: #22c55e; }
.tut-scr .badge-CANCELADA { background: #f8fafc; color: #475569; border-color: #94a3b8; }
.tut-scr .modal { position: absolute; inset: 0; background: rgba(17,24,39,.55); display: flex; align-items: center; justify-content: center; padding: 14px; z-index: 3; }
.tut-scr .modal > div { background: #fff; border-radius: 16px; width: 100%; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.tut-scr .modal h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.tut-scr .modal p { font-size: 14px; color: #4b5563; line-height: 1.5; margin: 0 0 12px; }
.tut-scr .modal input { width: 100%; padding: 12px; border: 1.5px solid #d1d5db; border-radius: 9px; font: 600 17px var(--fuente); margin-bottom: 10px; background: #fff; }
.tut-scr .modal .fila { display: flex; gap: 8px; justify-content: flex-end; }
.tut-scr .modal .fila .btn { width: auto; min-height: 44px; font-size: 14px; padding: 0 14px; }
.tut-scr .toast { position: absolute; left: 14px; right: 14px; bottom: 80px; background: var(--verde); color: #fff; border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 4; animation: tut-toast .3s ease; }
@keyframes tut-toast { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.tut-scr .tut-num { width: 100%; border: 2.5px solid var(--borde); border-radius: var(--radio); font: 900 44px var(--fuente); letter-spacing: 6px; text-align: center; padding: 6px; background: #fff; min-height: 70px; color: var(--texto); }
.tut-scr .tut-num.foco { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(26,127,75,.15); }

/* Resaltado del elemento que se va a tocar y el dedo */
.tut-scr .tut-foco { box-shadow: 0 0 0 4px rgba(56,189,248,.45), 0 0 0 10px rgba(56,189,248,.18) !important; transition: box-shadow .2s; position: relative; z-index: 2; }
.tut-dedo { position: absolute; z-index: 10; width: 44px; height: 52px; pointer-events: none; transition: left .75s cubic-bezier(.4,0,.2,1), top .75s cubic-bezier(.4,0,.2,1); filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); transform: translate(-30%, -10%); }
.tut-dedo.toca { animation: tut-toca .4s ease; }
@keyframes tut-toca { 50% { transform: translate(-30%, -10%) scale(.82); } }
.tut-onda { position: absolute; z-index: 9; width: 54px; height: 54px; border-radius: 50%; border: 3px solid #38bdf8; pointer-events: none; transform: translate(-50%, -50%); animation: tut-onda .6s ease-out forwards; }
@keyframes tut-onda { from { transform: translate(-50%,-50%) scale(.3); opacity: 1; } to { transform: translate(-50%,-50%) scale(1.7); opacity: 0; } }

.tut-pie-ov { padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; align-items: center; }
.tut-pie-ov button { font: 800 15px var(--fuente); border-radius: 12px; padding: 12px 14px; border: 1px solid #2e4238; background: #1c2b23; color: #fff; cursor: pointer; min-height: 48px; }
.tut-pie-ov button.p { background: #4ade80; color: #0d3b23; border-color: #4ade80; flex: 1; }
.tut-pie-ov button:disabled { opacity: .4; cursor: default; }

/* Menú cuando la página tiene más de un tutorial */
.tut-menu { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 20px; overflow: auto; }
.tut-menu p { margin: 4px 0 8px; color: #9fb5a8; font-size: 15px; }
.tut-menu button { text-align: left; background: #fff; color: var(--texto); border: none; border-radius: 14px; padding: 16px; font: 800 17px var(--fuente); cursor: pointer; display: flex; align-items: center; gap: 12px; }
.tut-menu button span { display: block; font-weight: 500; font-size: 14px; color: var(--texto-suave); margin-top: 2px; }
.tut-menu button i { width: 46px; height: 46px; border-radius: 12px; background: var(--verde-claro); display: grid; place-items: center; font-size: 24px; font-style: normal; flex-shrink: 0; }
.tut-menu button em { margin-left: auto; font-style: normal; color: var(--verde); font-size: 22px; }

@media (min-width: 900px) {
  .tut-ov { padding: 24px; align-items: center; }
  .tut-cab, .tut-barra, .tut-paso, .tut-demo, .tut-pie-ov, .tut-menu { width: 100%; max-width: 480px; }
  .tut-demo { margin: 0; }
  .tut-paso { margin: 0 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .tut-dedo { transition: none; } .qy-ayuda-btn.llama::after { animation: none; }
}