/* ============================================================
   MODAL-QR.CSS — Estilos del modal QR de LinkedIn e Instagram.
   Compartido por todas las páginas que usen el componente modalQR().
   ============================================================ */

/* ---------- CONTENEDOR BASE DEL MODAL ---------- */
/* display:flex declarado aquí para que Alpine lo restaure
   correctamente al abrir con x-show (no display:block) */
.modal {
  position:        fixed;
  top:             0;
  left:            0;
  width:           100%;
  height:          100%;
  z-index:         1000;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* ---------- FONDO OSCURO ---------- */
.modal-overlay {
  position:        absolute;
  top:             0;
  left:            0;
  width:           100%;
  height:          100%;
  z-index:         1;
  background:      rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

/* ---------- CONTENIDO DEL MODAL ---------- */
.modal-content {
  position:      relative;
  background:    var(--white);
  border-radius: 20px;
  box-shadow:    0 20px 60px rgba(0, 0, 0, 0.3);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  z-index:       2;
}

/* ---------- BOTÓN CERRAR ---------- */
.modal-close {
  position:      absolute;
  top:           1rem;
  right:         1rem;
  background:    var(--primary-blue);
  color:         var(--white);
  border:        none;
  width:         40px;
  height:        40px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  transition:    all 0.3s ease;
  box-shadow:    0 2px 8px var(--shadow);
  z-index:       10;
}

.modal-close:hover {
  background: var(--secondary-blue);
  transform:  rotate(90deg);
}

.modal-close i {
  font-size: 1.2rem;
}

/* ---------- VARIANTE QR ---------- */
.modal-qr {
  width:     400px;
  height:    auto;
  max-width: 90%;
}

.modal-qr-body {
  padding:    3rem 2rem 2rem;
  text-align: center;
}

.modal-qr-body h2 {
  font-family:     'Montserrat', sans-serif;
  color:           var(--primary-blue);
  font-size:       1.8rem;
  margin-bottom:   1rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
}

.modal-qr-body h2 i {
  color: var(--accent-blue);
}

.modal-qr-body p {
  color:         var(--text-light);
  line-height:   1.6;
  margin-bottom: 2rem;
}

.qr-container {
  background:    var(--white);
  padding:       1.5rem;
  border-radius: 12px;
  box-shadow:    0 4px 12px var(--shadow);
  display:       inline-block;
}

.qr-container img {
  width:         200px;
  height:        200px;
  border:        2px solid var(--light-blue);
  border-radius: 8px;
}