.container-card {
  /* La tarjeta y su panel ocupan un ancho fijo: estirando la caja a todo el
     ancho quedaba un desierto blanco a los costados. Se centra en su lugar. */
  max-width: 920px;
  margin: 30px auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background-color: var(--bg-white-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  animation: fadeIn 0.5s linear;
  padding: 34px 30px;
}

/* Dos columnas: la tarjeta a la izquierda, lo que se hace con ella a la
   derecha. El max-width evita que en monitores anchos las dos mitades queden
   separadas por medio metro de blanco. */
.card-layout {
  width: 100%;
  max-width: 860px;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.card-visual {
  flex-shrink: 0;
}

.card-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.card-bloque__titulo {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bg-blue-800);
}

.card-bloque__texto {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-blue-400);
}

.card-acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Los botones traen margin-top propio de cuando iban sueltos debajo de la
   tarjeta; acá el espacio lo pone el contenedor. */
.card-acciones .btn-solicitar,
.card-acciones .btn-copiar {
  margin-top: 0;
}

/* Pie de la tarjeta: ocupa el ancho de las dos columnas y las cierra con una
   línea, en lugar de colgar del final de la columna derecha. */
.card-footer {
  width: 100%;
  max-width: 860px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
}

.card-footer .card-links {
  margin-top: 0;
}

/* Estado de la tarjeta */
.card-state {
  width: 100%;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.card-state-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-state-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  flex-shrink: 0;
}

.card-state-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.card-state-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: var(--color-white-300);
  border-radius: 26px;
  transition: background-color 0.3s;
}

.card-state-slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: var(--color-white-100);
  border-radius: 50%;
  transition: transform 0.3s;
}

.card-state-switch input:checked + .card-state-slider {
  background-color: #1a9e6b;
}

.card-state-switch input:checked + .card-state-slider::before {
  transform: translateX(24px);
}

.card-state-label {
  font-size: 16px;
  font-weight: 500;
}

.card-state-label.is-active { color: #1a9e6b; }
.card-state-label.is-suspended { color: #c0392b; }

.card-state-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-blue-400);
}

/* Por debajo de esto las dos columnas no entran: la tarjeta mide 370px fijos. */
@media (max-width: 760px) {
  .container-card {
    margin: 20px;
    padding: 24px 18px;
  }

  .card-layout {
    flex-direction: column;
    align-items: center;
    gap: 26px;
  }

  .card-panel {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .card-acciones,
  .card-state-row {
    justify-content: center;
  }
}

/* El alto y la posición salen de dialog.modal-pago, igual que el resto de las
   modales. Antes acá había un "height: auto !important" que, combinado con el
   inset: 0 que Chrome le pone a dialog:modal, dejaba la caja estirada de punta
   a punta y con el encabezado fuera de pantalla. */
.modal-suspender textarea {
  font-family: inherit;
}

/* El motivo necesita algo más de aire que el resto de los cuerpos de modal */
.modal-suspender .modal-body p {
  margin-bottom: 0.9rem;
}