/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ROMPEHIELOS & PAUSAS ACTIVAS
   mirincondeaprendizaje.com
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#rhi-app*,#rhi-app*::before,#rhi-app*::after{box-sizing:border-box;margin:0;padding:0}
#rhi-app{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  max-width:920px;margin:24px auto;
  background:linear-gradient(145deg,#1a1a2e 0%,#16213e 55%,#0f3460 100%);
  border-radius:24px;padding:32px 24px 24px;
  color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.4);
  position:relative;
}
/* ── Header ── */
#rhi-app .rhi-hd{display:flex;align-items:center;gap:16px;margin-bottom:22px;padding-top:26px}
#rhi-app .rhi-logo{height:42px;width:auto;flex-shrink:0;opacity:.92}
#rhi-app .rhi-hd-text{flex:1;text-align:right}
#rhi-app .rhi-hd h2{
  font-size:1.75rem;font-weight:800;letter-spacing:-.5px;
  background:linear-gradient(90deg,#FFD700,#FF6B6B,#A29BFE);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:3px;
}
#rhi-app .rhi-hd p{color:#94a3b8;font-size:.82rem}
/* ── Fullscreen ── */
#rhi-app .rhi-fsbtn{
  position:absolute;top:10px;right:14px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:8px;color:#fff;padding:6px 14px;
  font-size:.78rem;font-weight:600;cursor:pointer;transition:background .2s;z-index:10;
}
#rhi-app .rhi-fsbtn:hover{background:rgba(255,255,255,.22)}
#rhi-app.rhi-fs{
  position:fixed;inset:0;max-width:100%;border-radius:0;margin:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:9999;padding:28px 24px;
}
/* ── Tabs ── */
#rhi-app .rhi-tabs{
  display:flex;gap:8px;margin-bottom:20px;
  background:rgba(0,0,0,.25);border-radius:16px;padding:6px;
}
#rhi-app .rhi-tab{
  flex:1;padding:13px 16px;border:none;border-radius:12px;
  font-size:.95rem;font-weight:700;cursor:pointer;
  transition:all .3s ease;background:transparent;
  color:rgba(255,255,255,.38);letter-spacing:.2px;
}
#rhi-app .rhi-tab.rhi-tab-ice{
  background:linear-gradient(135deg,#4facfe,#00c6ff);
  color:#0a1a2e;box-shadow:0 4px 20px rgba(79,172,254,.38);
}
#rhi-app .rhi-tab.rhi-tab-energy{
  background:linear-gradient(135deg,#11998e,#38ef7d);
  color:#0a1a2e;box-shadow:0 4px 20px rgba(56,239,125,.38);
}
/* ── Panel ── */
#rhi-app .rhi-panel{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);
  border-radius:18px;padding:18px 20px;margin-bottom:14px;
}
/* ── Params grid ── */
#rhi-app .rhi-params-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
@media(max-width:580px){#rhi-app .rhi-params-grid{grid-template-columns:1fr}}
#rhi-app .rhi-param-label{
  color:#94a3b8;font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;
  display:block;margin-bottom:8px;
}
#rhi-app .rhi-param-note{
  font-size:.68rem;color:#475569;margin-bottom:8px;display:block;font-style:italic;
}
/* ── Chips ── */
#rhi-app .rhi-chips{display:flex;flex-wrap:wrap;gap:5px}
#rhi-app .rhi-chip{
  padding:5px 11px;border-radius:20px;
  border:1.5px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.45);
  font-size:.75rem;font-weight:600;cursor:pointer;
  transition:all .2s;user-select:none;
}
#rhi-app .rhi-chip:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.75)}
#rhi-app .rhi-chip.sel-ice{border-color:#4facfe;background:rgba(79,172,254,.18);color:#7dd3fe}
#rhi-app .rhi-chip.sel-energy{border-color:#38ef7d;background:rgba(56,239,125,.15);color:#6ee7b7}
/* ── Counter ── */
#rhi-app .rhi-counter{
  text-align:center;font-size:.78rem;color:#64748b;margin:14px 0 0;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.06);
}
#rhi-app .rhi-counter strong{color:#94a3b8}
/* ── Slot zone ── */
#rhi-app .rhi-slot-zone{
  display:flex;flex-direction:column;align-items:center;
  padding:20px 0 10px;
}
#rhi-app .rhi-slot{
  width:100%;max-width:620px;
  background:rgba(0,0,0,.28);
  border:2px solid rgba(255,255,255,.07);
  border-radius:20px;padding:22px 20px;
  text-align:center;min-height:86px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  transition:border-color .4s,box-shadow .4s;
}
#rhi-app .rhi-slot.spin-ice{border-color:#4facfe;box-shadow:0 0 28px rgba(79,172,254,.28)}
#rhi-app .rhi-slot.spin-energy{border-color:#38ef7d;box-shadow:0 0 28px rgba(56,239,125,.28)}
#rhi-app .rhi-slot.win-glow{animation:rhiWin .6s ease}
@keyframes rhiWin{
  0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}
}
#rhi-app .rhi-slot-idle{color:#334155;font-size:.88rem;font-style:italic}
#rhi-app .rhi-slot-name{
  font-size:1.55rem;font-weight:800;color:#FFD700;
  letter-spacing:-.3px;
  text-shadow:0 0 24px rgba(255,215,0,.35);
}
@media(max-width:480px){#rhi-app .rhi-slot-name{font-size:1.2rem}}
/* ── Spin button ── */
#rhi-app .rhi-spin-btn{
  padding:17px 50px;border:none;border-radius:50px;
  font-size:1.1rem;font-weight:800;cursor:pointer;
  transition:transform .2s,box-shadow .2s,opacity .2s;
  position:relative;overflow:hidden;letter-spacing:.4px;
}
#rhi-app .rhi-spin-btn::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
}
#rhi-app .rhi-spin-btn:hover:not([disabled])::after{left:150%;transition:left .5s ease}
#rhi-app .rhi-spin-btn:hover:not([disabled]){transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.3)}
#rhi-app .rhi-spin-btn:active:not([disabled]){transform:none}
#rhi-app .rhi-spin-btn[disabled]{opacity:.55;cursor:not-allowed}
#rhi-app .rhi-spin-btn.btn-ice{
  background:linear-gradient(135deg,#4facfe 0%,#0091ff 60%,#a29bfe 100%);
  color:#fff;box-shadow:0 6px 24px rgba(79,172,254,.42);
}
#rhi-app .rhi-spin-btn.btn-energy{
  background:linear-gradient(135deg,#11998e 0%,#38ef7d 60%,#00c9a7 100%);
  color:#0a1a2e;box-shadow:0 6px 24px rgba(56,239,125,.42);
}
/* ── Result card ── */
#rhi-app .rhi-result{display:none}
#rhi-app .rhi-result.rhi-show{
  display:block;animation:rhiSlide .5s ease;
}
@keyframes rhiSlide{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
#rhi-app .rhi-result-card{
  border-radius:20px;padding:22px 22px 18px;margin-bottom:14px;
}
#rhi-app .rhi-result-card.card-ice{
  background:linear-gradient(135deg,rgba(79,172,254,.12),rgba(0,145,255,.06));
  border:1px solid rgba(79,172,254,.28);
  box-shadow:0 8px 30px rgba(79,172,254,.12);
}
#rhi-app .rhi-result-card.card-energy{
  background:linear-gradient(135deg,rgba(56,239,125,.1),rgba(0,201,167,.06));
  border:1px solid rgba(56,239,125,.28);
  box-shadow:0 8px 30px rgba(56,239,125,.12);
}
#rhi-app .rhi-res-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
#rhi-app .rhi-res-emoji{font-size:2.4rem;line-height:1;flex-shrink:0;margin-top:2px}
#rhi-app .rhi-res-meta{flex:1}
#rhi-app .rhi-res-title{
  font-size:1.4rem;font-weight:800;letter-spacing:-.3px;
  background:linear-gradient(90deg,#FFD700,#FFA04D);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:6px;
}
#rhi-app .rhi-res-tags{display:flex;flex-wrap:wrap;gap:5px}
#rhi-app .rhi-res-tag{
  padding:3px 9px;border-radius:12px;font-size:.7rem;font-weight:600;
  background:rgba(255,255,255,.07);color:#94a3b8;
}
/* ── Steps ── */
#rhi-app .rhi-steps-title{
  font-size:.76rem;font-weight:700;color:#64748b;
  text-transform:uppercase;letter-spacing:.6px;
  margin-bottom:10px;
}
#rhi-app .rhi-steps{list-style:none;margin-bottom:14px}
#rhi-app .rhi-step{
  display:flex;gap:11px;align-items:flex-start;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.055);
}
#rhi-app .rhi-step:last-child{border-bottom:none}
#rhi-app .rhi-step-num{
  min-width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:800;flex-shrink:0;margin-top:1px;
}
#rhi-app .num-ice{background:rgba(79,172,254,.22);color:#7dd3fe}
#rhi-app .num-energy{background:rgba(56,239,125,.2);color:#6ee7b7}
#rhi-app .rhi-step-text{color:#cbd5e1;font-size:.875rem;line-height:1.55}
/* ── Tip ── */
#rhi-app .rhi-tip{
  background:rgba(255,215,0,.07);
  border-left:3px solid #FFD700;
  border-radius:0 10px 10px 0;
  padding:10px 14px;
  font-size:.83rem;color:#fcd34d;line-height:1.5;
}
/* ── Buttons row ── */
#rhi-app .rhi-action-row{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;
}
#rhi-app .rhi-btn-secondary{
  padding:10px 22px;border:1.5px solid rgba(255,255,255,.15);
  border-radius:12px;background:rgba(255,255,255,.07);
  color:#e2e8f0;font-size:.88rem;font-weight:700;cursor:pointer;
  transition:all .2s;
}
#rhi-app .rhi-btn-secondary:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}
/* ── No results ── */
#rhi-app .rhi-empty{
  text-align:center;padding:28px 20px;color:#64748b;
}
#rhi-app .rhi-empty strong{display:block;font-size:2rem;margin-bottom:8px}
/* ── Credit ── */
#rhi-app .rhi-credit{
  text-align:center;font-size:.72rem;color:#475569;
  margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
}
#rhi-app .rhi-credit a{color:#64748b;text-decoration:none}
#rhi-app .rhi-credit a:hover{color:#94a3b8;text-decoration:underline}
/* ── Responsive ── */
@media(max-width:600px){
  #rhi-app{padding:16px 12px;border-radius:16px;margin:8px}
  #rhi-app .rhi-hd{flex-direction:column;align-items:center;gap:8px;text-align:center}
  #rhi-app .rhi-hd-text{text-align:center}
  #rhi-app .rhi-logo{height:32px}
  #rhi-app .rhi-hd h2{font-size:1.35rem}
  #rhi-app .rhi-tab{padding:11px 8px;font-size:.83rem}
  #rhi-app .rhi-spin-btn{padding:14px 30px;font-size:1rem}
  #rhi-app .rhi-res-title{font-size:1.2rem}
}