/* ==== Base y layout ==== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:#eaf3ff;
  background:#0b1620;
  overflow-x:hidden;
  /* Asegurar que siempre se vea el fondo a toda altura */
  min-height:100vh;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
}
#diamondsCanvas{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85;}

/* Header / brand */
.top{position:relative; z-index:2; display:flex; justify-content:center; padding:22px 10px 10px;}
.logo-wrap{display:flex; align-items:center; gap:14px; transform-origin:20% 10%;}
.logo-wrap .logo{width:56px; height:56px; border-radius:16px; background:#0e2030; box-shadow:0 0 0 2px #0f2736, 0 10px 25px rgba(0,0,0,.35);}
.brand{font-size:24px; font-weight:800; letter-spacing:.5px; color:#25ffb7; text-shadow:0 0 22px #0ff;}

/* Spin-drop intro */
.logo-wrap.enter{animation:spinDrop .9s cubic-bezier(.2,.9,.2,1) both}
@keyframes spinDrop{
  0%{ transform: translate(-40px,-60px) rotate(-320deg) scale(.6); opacity:0; }
  60%{ transform: translate(6px,10px) rotate(10deg) scale(1.05); opacity:1; }
  100%{ transform: translate(0,0) rotate(0) scale(1); }
}



/* Card */
main{position:relative; z-index:1; display:flex; justify-content:center; padding:10px 12px 80px;}
.card{
  width:min(920px,calc(100% - 16px));
  background: rgba(7,18,28,.84);
  border:1px solid rgba(130,255,255,.12);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* Campos */
.field-row{margin:12px 0}
.field-row label{display:block; color:#9ad8ff; font-weight:700; margin-bottom:6px}
.input-with-btn{display:flex; gap:8px; align-items:center}
.input-with-btn input{
  flex:1; height:42px; padding:10px 12px; border-radius:12px; border:1px solid #1e3444;
  background:#0f2030; color:#dff7ff; outline:none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.btn.icon{width:42px; height:42px; display:grid; place-items:center; border-radius:12px}
.muted{opacity:.7}

/* Nickname centrado bonito */
.nickname-badge{
  display:block;
  margin:10px auto 0;
  text-align:center;
  max-width:420px;
  padding:8px 12px;
  border-radius:14px;
  border:1px dashed rgba(75, 248, 219, .45);
  background:rgba(12, 36, 46, .45);
  color:#b6ffe6;
  font-weight:800;
  letter-spacing:.3px;
  text-shadow:0 0 18px rgba(0,255,200,.25);
}

/* Grids */
.grid{display:grid; gap:10px}
.grid.chips{grid-template-columns:repeat(6,1fr)}
.grid.plans{grid-template-columns:repeat(3,1fr); margin-top:10px}

/* Botones de paquete */
.btn-paquete-futurista{
  display:block; width:100%; height:42px; border-radius:12px; border:1px solid #1c3342;
  background:#0e1e2d; color:#dff7ff; font-weight:800; cursor:pointer;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.25);
}
.btn-paquete-futurista.activo{
  background:linear-gradient(180deg,#1b455b,#0f2f44);
  border-color:#25ffb7; outline:1px solid rgba(37,255,183,.35);
  text-shadow:0 0 16px rgba(37,255,183,.75);
}

/* Métodos */
.methods{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.method{
  height:46px; border-radius:14px; border:1px solid #1f3746; background: linear-gradient(180deg, #0f2332, #0b1a27);
  color:#aee7ff; font-weight:800; box-shadow:inset 0 -10px 16px rgba(0,0,0,.25);
  cursor:pointer;
}
.method.active{
  background: radial-gradient(400px 60px at 50% -30px, rgba(37,255,183,.32), transparent 60%), linear-gradient(180deg,#103449,#0a2231);
  border-color:#25ffb7; color:#eaffff; box-shadow:0 0 18px rgba(37,255,183,.35);
}

/* Panel info */
.kv{display:flex; gap:10px; align-items:center; padding:6px 2px}
.kv span{width:94px; color:#9ad8ff; opacity:.8}
.kv b{color:#eaf8ff}

/* Totales y acciones */
.total-row{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:8px 10px; border:1px solid #21465e; border-radius:12px; background:#0b1e2c}
.total-left{font-weight:800; color:#9ad8ff}
.total-amount{font-weight:800; font-size:22px; letter-spacing:.4px; text-shadow:0 0 18px rgba(0,255,200,.25)}

.actions{margin-top:12px}
.actions.center{display:flex; justify-content:center}

.btn{
  background:linear-gradient(180deg,#1a6ea1,#144c73);
  border:0; color:#e6fdff; font-weight:800; padding:10px 14px; border-radius:12px;
  box-shadow: 0 10px 18px rgba(0,150,255,.2), inset 0 -10px 20px rgba(0,0,0,.25);
  cursor:pointer;
}
.btn.small{padding:8px 10px; font-weight:700}
.btn.primary{background:linear-gradient(180deg,#2fd1a1,#13936f)}
.btn.copied{background:linear-gradient(180deg,#33c46a,#0f8c47)}

.wa-float{ position:fixed; right:16px; bottom:16px; width:50px; height:50px; display:grid; place-items:center;
  color:#fff; background:#25d366; border-radius:50%; box-shadow: 0 10px 24px rgba(0,0,0,.3); z-index:4; }

/* Responsive */
@media (max-width: 920px){
  .grid.chips{grid-template-columns:repeat(3,1fr)}
}

.swal2-comprobante-premium {
  border-radius: 30px !important;
  padding: 0 !important;
}

/* ===== Historial ===== */
#historialCont{ position:relative; z-index:1; }

.ticket{
  border-radius:16px; padding:12px 14px; margin:10px 0;
  background:rgba(12,30,44,.75); border:1px solid rgba(160,220,255,.15);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  font-size:13.5px; color:#eaf8ff;
}
.ticket-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px;
}
.badge{
  font-weight:800; letter-spacing:.3px; padding:6px 10px; border-radius:999px;
  border:1px solid; display:inline-flex; align-items:center; gap:8px;
}
.badge i{ font-size:14px; }
.id-mini{ opacity:.85; font-weight:700; }

.ticket-grid{
  display:grid; grid-template-columns: 140px 1fr; column-gap:.6rem; row-gap:.32rem;
  text-align:left;
}
.ticket-grid b{ color:#fff; font-weight:800; }

.motivo{
  margin-top:8px; padding:8px 10px; border-radius:12px; font-weight:700;
}

/* Colores por estado */
.st-aprobado  { border-color:rgba(39,216,155,.45); background:rgba(24,54,45,.55); }
.st-aprobado .badge { color:#b9ffdf; background:rgba(39,216,155,.18); border-color:rgba(39,216,155,.45); }
.st-aprobado .motivo{ display:none; }

.st-proceso   { border-color:rgba(77,191,255,.45); background:rgba(20,40,60,.55); }
.st-proceso .badge { color:#cfeaff; background:rgba(77,191,255,.16); border-color:rgba(77,191,255,.45); }
.st-proceso .motivo{ display:none; }

.st-rechazado { border-color:rgba(255,92,117,.45); background:rgba(55,20,28,.55); }
.st-rechazado .badge { color:#ffd6dd; background:rgba(255,92,117,.16); border-color:rgba(255,92,117,.45); }
.st-rechazado .motivo{ color:#ffd6dd; background:rgba(255,92,117,.10); border:1px solid rgba(255,92,117,.28); }