/* ==========================================================================
   VENTANAS DE CREAR VELA / ROSA (común a Velario y Enviaunarosa) — Fase 4.5
   Afecta solo a las ventanas con la clase .ventana (#modalCandle y las de la
   eterna). Colores por web en includes/sitio.php → 'ventanas':
     --v-cabecera (fondo de la cabecera), --v-acento (botones, foco),
     --v-acento-suave (fondo teñido de los botones).
   Botones con el mismo estilo que los de la portada (propuesta B): teñidos
   con el color de la web y más intensos al pasar el ratón.
   ========================================================================== */
.ventana .modal-content {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.ventana .modal-header {
  background: var(--v-cabecera) !important; /* gana al style="background:…" antiguo de modal.html */
  border-bottom: 0;
  padding: 16px 22px;
}
.ventana .modal-title {
  color: #ffffff !important;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}

.ventana .modal-body { padding: 20px 24px 8px; }

.ventana .ventana-imagen {
  display: block;
  margin: 0 auto 14px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--v-acento-suave);
}

.ventana .ventana-descripcion { margin: 0 0 18px; line-height: 1.55; }
.ventana .ventana-firma { margin: 14px 0 0; }

/* Campos: etiqueta a la izquierda en pantallas medianas, encima en el móvil */
.ventana .ventana-campo { margin-bottom: 14px; align-items: flex-start; }
.ventana .ventana-campo .col-form-label { font-weight: 600; padding-top: 7px; white-space: nowrap; }
.ventana fieldset.ventana-campo { border: 0; padding: 0; min-width: 0; }
.ventana fieldset.ventana-campo legend { float: left; font-size: inherit; margin: 0; }

.ventana .form-control {
  border-radius: 10px;
  border-color: #d6d6e0;
}
.ventana .form-control:focus {
  border-color: var(--v-acento);
  box-shadow: 0 0 0 3px var(--v-acento-suave);
}

/* Botones (Encender, Mantener encendida, Subir a 1ª posición…) */
.ventana .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 12px;
  border: 1.5px solid var(--v-acento);
  background-color: var(--v-acento-suave);
  color: var(--v-acento);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ventana .btn-primary:hover,
.ventana .btn-primary:focus-visible {
  background-color: var(--v-acento);
  border-color: var(--v-acento);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px var(--v-acento-suave), 0 8px 18px rgba(0, 0, 0, 0.18);
  outline: none;
}
.ventana .btn-primary:active { transform: translateY(0); }
.ventana .btn-primary:disabled { opacity: .65; transform: none; }

.ventana .ventana-acciones { text-align: center; margin: 18px 0 10px; }

/* «Quiero compartir…» */
.ventana .ventana-compartir { margin-top: 18px; }
.ventana .modalshare_topic { font-weight: 600; letter-spacing: .04em; margin: 10px 0 12px; }

/* Donativos (ventana de Stripe) */
.ventana .ventana-donativos { display: flex; flex-wrap: wrap; gap: 10px; }
.ventana .ventana-donativo { cursor: pointer; margin: 0; }
.ventana .ventana-donativo input { position: absolute; opacity: 0; pointer-events: none; }
.ventana .ventana-donativo img { border-radius: 50%; border: 2px solid transparent; transition: border-color .2s, transform .2s; }
.ventana .ventana-donativo input:checked + img { border-color: var(--v-acento); transform: scale(1.06); }
.ventana .ventana-donativo input:focus-visible + img { box-shadow: 0 0 0 3px var(--v-acento-suave); }

.ventana .modal-footer:empty { display: none; }

@media (max-width: 575px) {
  .ventana .modal-body { padding: 16px 16px 6px; }
  .ventana .ventana-campo .col-form-label { padding-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .ventana .btn-primary { transition: none; }
  .ventana .btn-primary:hover { transform: none; }
}

/* --- Fase 4.5b: ventana de la vela/rosa gratis --- */
.ventana .ventana-imagen--libre { width: auto; height: auto; max-width: 150px; border-radius: 0; box-shadow: none; }
.ventana .text-error { color: #dc3545; font-weight: 700; display: block; margin-top: 5px; }
.ventana .ventana-firma-enlace { color: inherit; }
.ventana .ventana-reacciones { color: var(--v-acento); font-weight: 700; }
.ventana .ventana-paypal { border: 0; background: transparent; padding: 0; }
/* Pie al ver una vela: el texto encima y los botones debajo, todo alineado a la izquierda
   (misma sangría para reacciones, PayPal, WhatsApp y redes) */
.ventana .paypal, .ventana .whatsapp, .ventana .redes { text-align: left; padding-left: 10px; }
.ventana .modalpaypal { display: block; margin: 0 0 8px; }
.ventana .whatsapp strong, .ventana .redes strong { display: inline-block; margin: 0 0 8px; }
.ventana #modal-paypal .ventana-paypal img,
.ventana #wazap1 img,
.ventana .redes a:first-of-type img { margin-left: 0 !important; }
.ventana .reaction-container { padding-left: 10px; }
.ventana .reaction-container .emojies-box { padding-left: 0; margin-left: 0; }
.ventana .candle-limit-msg { animation: fadeInDown .5s ease-in-out; margin: 0 0 14px; padding: 12px; border-radius: 10px; font-size: 14px; text-align: center; font-weight: 700; }
.ventana .candle-limit-msg.alert-info { background: linear-gradient(135deg, #cce7ff 0%, #b3d9ff 100%); color: #0c5460; border: 1px solid #bee5eb; }
.ventana .candle-limit-msg.alert-danger { background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); color: #721c24; border: 1px solid #f5c6cb; }
/* Promoción (vela eterna gratuita) */
.ventana .ventana-promo-titulo { background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); border-color: #f39c12; color: #8b4513; }
.ventana .ventana-promo { text-align: center; padding: 20px; background: #fff8e1; border-radius: 10px; margin: 15px 0; color: #8b4513; }
.ventana .ventana-promo h4 { color: #f39c12; margin-bottom: 15px; }
.ventana .ventana-promo #promotion-success-message { font-size: 16px; font-weight: 600; }
.ventana .ventana-promo-sello { display: inline-block; margin-top: 10px; background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: #fff; padding: 8px 16px; border-radius: 20px; font-weight: 700; }
.ventana .ventana-promo-etiqueta, .ventana .ventana-promo-ayuda { color: #f39c12; font-weight: 600; }
.ventana .ventana-promo-campo { border: 2px solid #f39c12; background: #fff8e1; }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
/* Filas del pie con la misma sangría: reacciones a la izquierda y botón a la derecha */
.ventana #modal-footer, .ventana #modal-footer-eternal { justify-content: space-between; }
.ventana .modal-footer > div { margin-left: 4px !important; margin-right: 4px !important; }
.ventana #modal-footer, .ventana #modal-footer-eternal, .ventana #modal-paypal, .ventana #modal-whatsapp, .ventana #modal-social { padding-left: 12px; padding-right: 12px; }
.ventana .modal-footer > .col-sm-12 { flex: 1 1 auto; }
/* La imagen de la ventana siempre centrada (en el móvil de Velario las imágenes llevan margin-left:-25px) */
.ventana .ventana-imagen { margin-left: auto !important; margin-right: auto !important; }