/* =====  marco general  ===== */
html,body{margin:0;height:100%}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  color:#eee;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* =====  caja principal  ===== */
.box{
  display:grid;
  grid-template-columns:88px 1fr;
  grid-template-rows:auto auto;
  gap:18px 22px;
  max-width:520px;width:92%;
  background:#1d1d1d;border-radius:14px;
  padding:32px 36px 28px;
  /*box-shadow: 0 0 16px rgba(168, 85, 247, 0.3);*/
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5),
  0 0 4px rgba(168, 85, 247, 0.3);
  align-items:center;
  animation: fadeInBox 0.6s ease-out;
}
@keyframes fadeInBox {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* =====  avatar  ===== */
.avatar{
  grid-column:1;grid-row:1;
  width:88px;height:88px;
  border-radius:10px;object-fit:cover;
}

/* =====  texto  ===== */
.content{
  grid-column:2;grid-row:1;
  min-width:0;
  font-size:16px;
  line-height:1.46;
  text-align:center;
}
.content p {
  margin:0;
  color: #ccc;
  font-size: 16px;
  line-height: 1.5;
  white-space: normal;
  word-break: keep-all;
}

@media (min-width: 480px) {
  .content p {
    font-size: 18px;
  }
}


/* =====  botón  ===== */
button{
  grid-column:1 / span 2;
  grid-row:2;
  width:100%;
  border:0;border-radius:6px;
  padding:14px 0;
  font-size:17px;font-weight:700;
  cursor:pointer;
  margin-top:6px;
}
.ok {
  background: linear-gradient(135deg, #a855f7, #38bdf8);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 0;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background-position 0.4s ease, box-shadow 0.3s ease;
}

.ok:hover {
  background-position: 100% 50%;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
}

.cancel{
  background: #2a2a2a;
  color: #aaa;
}