/* Modal con el resultado del pago. Reutiliza .bg-modal / .modal-container /
   .modal-header / .btn-cerrar de modal-recuperar-password.css. */

/* Se usa dialog.modal-pago (0,1,1) para no depender del orden de los @import:
   .modal-container fija height 320px con !important y la misma especificidad. */
dialog.modal-pago {
  height: fit-content !important;
  max-height: 88vh;
  max-width: 380px;
  align-self: center;
  overflow-y: auto;
}

/* Padding propio, más ajustado que el del modal de contraseña */
.modal-pago .modal-header {
  padding: 1rem 1.2rem 0.85rem;
}

.modal-pago .modal-body {
  padding: 1.1rem 1.2rem 0.6rem;
}

.modal-pago .modal-footer {
  padding: 0.9rem 1.2rem 1.1rem;
}

.pago-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding-bottom: 4px;
}

.pago-estado__icono {
  font-size: 38px;
  line-height: 1;
  color: #7ee2b8;
}

.pago-estado.es-error .pago-estado__icono {
  color: #ffb3ad;
}

.pago-estado__mensaje {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
}

/* Detalle de la operación */
.pago-detalle {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pago-detalle > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}

.pago-detalle dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.pago-detalle dd {
  margin: 0;
  font-size: 14px;
  color: #fff;
  text-align: right;
  word-break: break-word;
}

/* Con el pago rechazado no hay comprobante que mostrar */
.pago-detalle.oculto {
  display: none;
}

.modal-footer--pago {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.form_boton_secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  /* Sin esto un <button> toma el gris del navegador y parece deshabilitado. */
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.form_boton_secundario:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.65);
}

.form_boton_secundario.oculto {
  display: none;
}

/* Indicador de carga en línea, en reemplazo del gif que ya no existe */
.cargando-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-blue-400);
  padding: 6px 0;
}

@media (max-width: 600px) {
  .modal-footer--pago {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .form_boton_secundario {
    justify-content: center;
  }
}

/* Monto destacado del modal de confirmación: es el dato que hay que revisar
   antes de confirmar, así que se muestra más grande que el resto. */
.pago-monto-destacado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-bottom: 6px;
}

.pago-monto-destacado__etiqueta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}

.pago-monto-destacado__valor {
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.modal-pago .modal-body p.pago-aclaracion {
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 1.45;
}

/* Filas que se ocultan cuando el pago no tiene factura ni vencimiento */
.pago-detalle > div.oculto {
  display: none;
}

/* showModal() enfoca el primer elemento focusable —la X— y el navegador dibuja
   su anillo por defecto, que sobre el fondo azul se ve como un círculo negro.
   Se reemplaza por uno acorde, sin perder la marca de foco para quien navega
   con teclado. */
.modal-pago :focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.modal-pago :focus:not(:focus-visible) {
  outline: none;
}

/* Botón de acción destructiva (quitar de la agenda) */
.form_boton_peligro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 15px 22px;
  border: none;
  border-radius: 10px;
  background: #c0392b;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}

.form_boton_peligro:hover { background: #a93226; }
.form_boton_peligro:disabled { opacity: 0.6; cursor: not-allowed; }

/* Campo de texto dentro de un modal */
.campo-modal {
  display: block;
  margin: 4px 0 2px;
}

.campo-modal__etiqueta {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
}

.campo-modal input,
.campo-modal textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
}

.campo-modal input::placeholder,
.campo-modal textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

.campo-modal input:focus,
.campo-modal textarea:focus {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.16);
}

/* El textarea sólo crece a lo alto: a lo ancho rompería la caja del modal. */
.campo-modal textarea {
  resize: vertical;
  min-height: 78px;
  line-height: 1.45;
}

.campo-modal__ayuda {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}