/* ================= RESET / BASE ================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color: #eaeaea;
}

iframe.fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 1;
}


/* ================= MODAL ================= */
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal{
  width: min(94vw, 560px);
  background: #0f0f0f;
  color: #eaeaea;
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.5);
  padding: 12px 18px 16px;
  overflow: visible;
}

.modal header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px 12px;
  border-bottom: 1px solid #262626;
  margin-bottom: 10px;
}

.modal h2{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.modal .close{
  background: transparent;
  border: none;
  color: #bbb;
  font-size: 22px;
  cursor: pointer;
}

/* ================= FORM ================= */
.grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.grid .full{ grid-column: 1 / -1; }

.grid > div{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (min-width:560px){
  .grid{ grid-template-columns: 1fr 1fr; }
  .grid .full{ grid-column: 1 / 3; }
}

label{
  font-size: 12px;
  color: #bdbdbd;
  margin: 2px 2px 6px;
}

input{
  width: 100%;
  background: #151515;
  color: #eaeaea;
  border: 1px solid #262626;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

input::placeholder{ color: #7c7c7c; }

input:focus{
  border-color: #3a7afe;
  box-shadow: 0 0 0 3px rgba(58,122,254,.15);
  background: #161616;
}

.hint{ font-size:12px; color:#9aa0a6; margin-top:4px; }
.inline-note{ font-size:12px; margin-top:6px; }
.inline-note.warn{ color:#ffb74d; }
.inline-note.err{ color:#ff6b6b; }

/* ================= ACTIONS ================= */
.actions{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid #262626;
  padding-top: 14px;
  margin-top: 6px;
}

.btn, .btn2{
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  font-size: 14px;
}

.btn-secondary{ background:#262626; color:#eaeaea; }
.btn-primary{ background:#3a7afe; color:#fff; }
.btn-seg{ background:#a63afe; color:#fff; }

.btn:active{ transform: translateY(1px); }

/* ================= GLOBAL HELPERS ================= */
body.no-scroll{ overflow:hidden; }

.swal2-container{ z-index: 20000 !important; }

/* ================= PWA ================= */
#pwaInstallBtn{
  position: fixed;
  right: 16px;
  top: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg,#00c6ff,#0072ff);
  color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.2);
  display: none;
  z-index: 1000;
  cursor: pointer;
}

#pwaHint{
  position: fixed;
  right: 16px;
  top: calc(16px + 56px + 8px);
  max-width: 260px;
  background: #111;
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.42;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  display: none;
  z-index: 1600;
}

#pwaHint .arrow{
  position: absolute;
  top: -8px;
  right: 18px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #111;
}

/* ================= PALANCA ================= */
.palanca{
  width: 120px;
  cursor: pointer;
  transition: transform .2s ease;
  animation: leverPulse 3s ease-in-out infinite;
}

.palanca:hover{ transform: scale(1.05); }

@keyframes leverPulse{
  0%,100%{ transform: rotate(3deg); }
  50%{ transform: rotate(-3deg); }
}

/* ================= WRAPPERS ================= */
#cargarWrapper{
  position: fixed;
  bottom: 120px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 1000;
  transition: transform .3s ease;
}

#cargarWrapper.hidden{ transform: translateX(90%); }

#toggleCargar,
#toggleRetirar{
  width: 26px;
  height: 40px;
  border-radius: 8px;
  border: none;
  background: #222;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
}

#retirarWrapper{
  position: fixed;
  top: 50px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 1000;
  transition: transform .3s ease;
}

#retirarWrapper.hidden{ transform: translateX(-95%); }

/* ================= MODAL MOBILE FIX ================= */

/* contenedor */
.modal-backdrop {
  align-items: center;
}

/* modal */
.modal {
  max-height: 90vh;           /* 👈 CLAVE */
  overflow: hidden;           /* corta el overflow global */
  display: flex;
  flex-direction: column;
}

/* header fijo */
.modal header {
  flex-shrink: 0;
}

/* body scrolleable */
.modal form {
  overflow-y: auto;           /* 👈 scroll interno */
  max-height: calc(90vh - 80px);
  padding-right: 2px;         /* evita corte del scrollbar */
}

/* MOBILE AJUSTE FINO */
@media (max-width: 480px) {
  .modal {
    width: 94vw;
    max-height: 90vh;
    border-radius: 14px;
  }

  .modal form {
    max-height: calc(90vh - 72px);
  }
}