/* appGastos · desactivación de cuenta. Complementa /legal/estilo.css. */

.desactivacion {
  --desactivacion-error: #a3261b;
  margin-top: 1.25em;
}

:root[data-tema="oscuro"] .desactivacion { --desactivacion-error: #ff9b8f; }

/* ---------- estado general ---------- */
.desactivacion .desactivacion-estado { margin: 0 0 1.25em; }

.desactivacion .desactivacion-estado:empty { margin: 0; }

.desactivacion .desactivacion-estado[data-tipo="error"] {
  color: var(--desactivacion-error);
  font-weight: 600;
}

/* ---------- formularios ---------- */
.desactivacion-form {
  display: grid;
  gap: 20px;
  max-width: 30rem;
  margin: 0;
}

.desactivacion-form[hidden],
.desactivacion-resultado[hidden] { display: none; }

.desactivacion .desactivacion-form > * { margin: 0; }

.desactivacion-campo { min-width: 0; }

.desactivacion-label {
  display: block;
  font-weight: 600;
}

.desactivacion .desactivacion-input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

.desactivacion-input:hover { border-color: var(--texto-suave); }

.desactivacion .desactivacion-input[aria-invalid="true"] {
  border-color: var(--desactivacion-error);
  box-shadow: inset 0 0 0 1px var(--desactivacion-error);
}

.desactivacion .desactivacion-codigo {
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}

.desactivacion .desactivacion-ayuda,
.desactivacion .desactivacion-error {
  margin: 6px 0 0;
  font-size: 0.9375rem;
}

.desactivacion-ayuda { color: var(--texto-suave); }

.desactivacion-error {
  color: var(--desactivacion-error);
  font-weight: 600;
}

.desactivacion .desactivacion-error:empty { margin: 0; }

.desactivacion-destino-valor {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ---------- acciones ---------- */
.desactivacion-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.desactivacion .desactivacion-boton {
  margin-top: 0;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.desactivacion .desactivacion-boton[aria-disabled="true"] {
  background: var(--superficie-alt);
  color: var(--texto-suave);
  cursor: not-allowed;
}

.desactivacion .desactivacion-boton[data-ocupado="true"] {
  background: var(--acento);
  color: var(--sobre-acento);
  cursor: progress;
}

.desactivacion-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}

.desactivacion-secundario:hover:not([aria-disabled="true"]) { border-color: var(--acento-texto); }

.desactivacion-secundario[aria-disabled="true"] {
  border-color: var(--borde);
  color: var(--texto-suave);
  cursor: not-allowed;
}

.desactivacion-secundario[data-ocupado="true"] {
  color: var(--texto);
  cursor: progress;
}

.desactivacion .desactivacion-reenvio {
  flex-basis: 100%;
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.9375rem;
}

.desactivacion .desactivacion-reenvio:empty { display: none; }

/* ---------- resultado ---------- */

.desactivacion .desactivacion-resultado h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: 1.25rem;
}

.desactivacion .desactivacion-resultado p { margin-top: 0.75em; }

/* ---------- pantallas chicas ---------- */
@media (max-width: 479px) {
  .desactivacion-acciones > button { flex: 1 1 100%; }
}

@media (max-width: 374px) {
  .desactivacion .desactivacion-codigo { letter-spacing: 0.15em; }
}

@media (prefers-reduced-motion: no-preference) {
  .desactivacion-input,
  .desactivacion-secundario { transition: border-color 120ms var(--curva); }
}