/* =========================================================
   🎯 SISTEMA ÚNICO DE MODALES
   ========================================================= */

/* =========================================================
   🎯 MODAL GLOBAL LIMPIO (UNIFICADO)
   ========================================================= */

.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);

  justify-content:center;
  align-items:center;
  padding:50px;

  z-index:9999;
}

/* CONTENEDOR */
.modal-content{
  background:linear-gradient(145deg,#141a2a,#1c2438);
  border-radius:20px;

  width:100%;
  max-width:520px;

   padding: 15px 20px; /* 🔥 menos espacio */



  color:white;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);

  position:relative;
  overflow:visible;

  animation:modalZoom .25s ease;
}
.modal-content h3,
.modal-content h2{
  display:block;
  max-width:none;
  width:auto;
  box-sizing:border-box;

  background:#2d5bff;

  margin:-29px -26px 20px -26px;
  padding:18px 20px;

  border-radius:20px 20px 0 0;
}

/* BOTÓN CERRAR */
.modal-close,
.cerrar-modal,
#cerrarModalBtn{
  position:absolute;
  top:12px;
  right:12px;

  width:36px;
  height:36px;

  border-radius:50%;
  border:none;

  background:rgba(255,255,255,0.08);
  color:white;

  font-size:18px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:10;

  transition:.2s;
}

.modal-close:hover,
.cerrar-modal:hover,
#cerrarModalBtn:hover{
  background:#ff3b3b;
  transform:scale(1.1);
}

.modal-close:hover{
  background:#ff3b3b;
  transform:scale(1.1);
}

/* CONTENIDO */
#modalContenido{
  font-size:14px;
  line-height:1.6;
  color:#e5e7eb;
}

/* FORMULARIO (MODAL COMPRAR) */
.modal input{
  width:100%;
  padding:14px;
  margin-bottom:12px;

  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);

  background:#0f172a;
  color:white;
}
/* ===== VALIDACIÓN INPUTS (ERROR) ===== */
.input-error{
  border: 2px solid #ff3b3b !important;
  box-shadow: 0 0 0 2px rgba(255,59,59,0.2);
}

.error-msg{
  color: #ff3b3b;
  font-size: 12px;
  margin-top: 4px;
}

/* BOTONES */
.modal-actions{
  display:flex;
  gap:12px;
  margin-top:20px;
}

.modal-actions button{
  flex:1;
  height:52px;

  border-radius:14px;
  border:none;

  font-weight:600;
  font-size:14px;

  cursor:pointer;
  transition:all .25s ease;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;
  overflow:hidden;
  z-index:1;
}

/* 🔵 BOTÓN COMPRAR ACTIVO */
#btnComprarOnline{
  background:linear-gradient(135deg,#0251fd,#00aaff);
  color:white;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,85,255,0.35);
}

/* hover */
#btnComprarOnline:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,170,255,0.45);
}

/* 🔴 DESHABILITADO */
#btnComprarOnline.disabled{
  background:linear-gradient(145deg,#3a4157,#2a3042) !important;
  color:#cbd5e1 !important;
  cursor:not-allowed !important;
  opacity:0.9;
  box-shadow:none !important;
}

.modal-actions button:first-child::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent
  );

  opacity:0.3;
  pointer-events:none;
}

.modal-actions button:last-child{
  background:linear-gradient(135deg,#00c853,#00e676);
  color:#031b0f;

  box-shadow:0 6px 20px rgba(0,200,83,0.35);
}

.modal-actions button:last-child:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 25px rgba(0,200,83,0.5);
}

.modal-actions button:last-child:active{
  transform:scale(0.97);
}

.modal-actions button:last-child::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.2),transparent);
  opacity:0;
  transition:.3s;
  pointer-events:none;
}

.modal-actions button:last-child:hover::after{
  opacity:1;
}



/* ANIMACIÓN */
@keyframes modalZoom{
  from{
    opacity:0;
    transform:scale(0.85);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}
#modalContenido{
  white-space: pre-line;
}
#modalContenido{
  white-space: pre-line;
  line-height: 1.7;
  font-size: 14px;
}

#modalContenido p{
  margin-bottom: 8px;
}
#modalContenido{
  white-space: pre-line;
  font-size: 15px;      /* 🔥 más grande */
  line-height: 1.8;     /* 🔥 más aire */
  color: #e5e7eb;
}

.modal-content h2,
.modal-content h3{
  font-size: 20px;      /* 🔥 título más fuerte */
  font-weight: 700;
}
.descripcion{
  margin-top: -50px;
}
.modal-content{
  width: 90%;
  max-width: 700px;      /* 🔥 más ancho */
  
    /* 🔥 scroll interno */

  padding: 20px 25px;
  border-radius: 20px;
}
#modalContenido{
  max-width: 100%;
  line-height: 1.6;
}
.modal-content{
  width: min(700px, 95vw);
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden; /* 🔥 elimina scroll horizontal */
}

#modalContenido{
  word-break: break-word; /* 🔥 rompe textos largos */
  overflow-wrap: anywhere; /* 🔥 evita desbordes */
}
.modal{
  align-items: flex-start;   /* 🔥 importante */
  overflow-y: auto;          /* 🔥 scroll en fondo */
}

.modal-content{
  width: min(700px, 95vw);
          /* 🔥 separación arriba/abajo */
  max-height: none;          /* ❌ quitar límite */
  overflow: visible;         /* ❌ quitar scroll interno */
}

@media (max-width: 480px){
  #modalRegistro .modal-content{
    width: 95% !important;
    max-height: 90vh;
    overflow-y: auto;
  }
}